Use TabNav component in Inbox tabs

- Use TabNav component
 - Show both tabs always
 - Change copy texts

src/containers/InboxPage/InboxPage.css

@@ -2,17 +2,8 @@
   margin: 1rem;
 }
 
-.tab {
-  float: left;
+.tabs {
   margin-left: 1rem;
-  font-size: 20px;
-  letter-spacing: -0.5px;
-  text-decoration: none;
-}
-
-.activeTab {
-  font-weight: bold;
-  text-decoration: underline;
 }
 
 .error {

src/containers/InboxPage/InboxPage.js

@@ -2,7 +2,14 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Avatar, NamedLink, NamedRedirect, PageLayout, PaginationLinks } from '../../components';
+import {
+  Avatar,
+  NamedLink,
+  NamedRedirect,
+  PageLayout,
+  PaginationLinks,
+  TabNav,
+} from '../../components';
 import * as propTypes from '../../util/propTypes';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { loadData } from './InboxPage.duck';
@@ -86,8 +93,6 @@ export const InboxPageComponent = props => {
     fetchOrdersOrSalesError,
     pagination,
     transactions,
-    currentUserHasListings,
-    currentUserHasListingsError,
     intl,
     params,
   } = props;
@@ -112,7 +117,7 @@ export const InboxPageComponent = props => {
     );
   };
 
-  const error = fetchOrdersOrSalesError || currentUserHasListingsError
+  const error = fetchOrdersOrSalesError
     ? <p className={css.error}>
         <FormattedMessage id="InboxPage.fetchFailed" />
       </p>
@@ -133,31 +138,36 @@ export const InboxPageComponent = props => {
       />
     : null;
 
+  const tabs = [
+    {
+      text: intl.formatMessage({
+        id: 'InboxPage.ordersTabTitle',
+      }),
+      selected: isOrders,
+      linkProps: {
+        name: 'InboxPage',
+        params: { tab: 'orders' },
+      },
+    },
+    {
+      text: intl.formatMessage({
+        id: 'InboxPage.salesTabTitle',
+      }),
+      selected: !isOrders,
+      linkProps: {
+        name: 'InboxPage',
+        params: { tab: 'sales' },
+      },
+    },
+  ];
+  const nav = <TabNav className={css.tabs} tabs={tabs} />;
+
   return (
     <PageLayout title={title}>
       <h1 className={css.title}>
         <FormattedMessage id="InboxPage.title" />
       </h1>
-      {currentUserHasListings
-        ? <nav>
-            <NamedLink
-              className={css.tab}
-              name="InboxPage"
-              params={{ tab: 'orders' }}
-              activeClassName={isOrders ? css.activeTab : null}
-            >
-              <FormattedMessage id="InboxPage.ordersTabTitle" />
-            </NamedLink>
-            <NamedLink
-              className={css.tab}
-              name="InboxPage"
-              params={{ tab: 'sales' }}
-              activeClassName={!isOrders ? css.activeTab : null}
-            >
-              <FormattedMessage id="InboxPage.salesTabTitle" />
-            </NamedLink>
-          </nav>
-        : null}
+      {nav}
       {error}
       <ul>
         {!fetchInProgress ? transactions.map(toTxItem) : null}
@@ -171,8 +181,6 @@ export const InboxPageComponent = props => {
 InboxPageComponent.defaultProps = {
   fetchOrdersOrSalesError: null,
   pagination: null,
-  currentUserHasListings: false,
-  currentUserHasListingsError: null,
 };
 
 InboxPageComponent.propTypes = {
@@ -184,8 +192,6 @@ InboxPageComponent.propTypes = {
   fetchOrdersOrSalesError: instanceOf(Error),
   pagination: propTypes.pagination,
   transactions: arrayOf(propTypes.transaction).isRequired,
-  currentUserHasListings: bool,
-  currentUserHasListingsError: instanceOf(Error),
 
   // from injectIntl
   intl: intlShape.isRequired,
@@ -197,16 +203,12 @@ const mapStateToProps = state => {
     fetchOrdersOrSalesError,
     pagination,
     transactionRefs,
-    currentUserHasListings,
-    currentUserHasListingsError,
   } = state.InboxPage;
   return {
     fetchInProgress,
     fetchOrdersOrSalesError,
     pagination,
     transactions: getMarketplaceEntities(state, transactionRefs),
-    currentUserHasListings,
-    currentUserHasListingsError,
   };
 };
 

src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap

@@ -6,31 +6,32 @@ exports[`InboxPage matches snapshot 1`] = `
       id="InboxPage.title"
       values={Object {}} />
   </h1>
-  <nav>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="InboxPage"
-      params={
+  <TabNav
+    className=""
+    tabs={
+      Array [
         Object {
-          "tab": "orders",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.ordersTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      activeClassName={null}
-      name="InboxPage"
-      params={
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "orders",
+            },
+          },
+          "selected": true,
+          "text": "InboxPage.ordersTabTitle",
+        },
         Object {
-          "tab": "sales",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.salesTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-  </nav>
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "sales",
+            },
+          },
+          "selected": false,
+          "text": "InboxPage.salesTabTitle",
+        },
+      ]
+    } />
   <ul>
     <li>
       <Component
@@ -182,31 +183,32 @@ exports[`InboxPage matches snapshot 3`] = `
       id="InboxPage.title"
       values={Object {}} />
   </h1>
-  <nav>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      activeClassName={null}
-      name="InboxPage"
-      params={
+  <TabNav
+    className=""
+    tabs={
+      Array [
         Object {
-          "tab": "orders",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.ordersTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="InboxPage"
-      params={
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "orders",
+            },
+          },
+          "selected": false,
+          "text": "InboxPage.ordersTabTitle",
+        },
         Object {
-          "tab": "sales",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.salesTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-  </nav>
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "sales",
+            },
+          },
+          "selected": true,
+          "text": "InboxPage.salesTabTitle",
+        },
+      ]
+    } />
   <ul>
     <li>
       <Component

src/translations/en.json

@@ -45,12 +45,12 @@
   "HeroSection.subTitle": "The largest online community to rent music studios",
   "HeroSection.title": "Book Studiotime anywhere",
   "InboxPage.fetchFailed": "Could not load all messages. Please try again.",
-  "InboxPage.noOrdersFound": "No orders found.",
-  "InboxPage.noSalesFound": "No sales found.",
-  "InboxPage.ordersTabTitle": "Guest",
-  "InboxPage.ordersTitle": "Inbox: Orders",
-  "InboxPage.salesTabTitle": "Host",
-  "InboxPage.salesTitle": "Inbox: Sales",
+  "InboxPage.noOrdersFound": "You haven't made any bookings.",
+  "InboxPage.noSalesFound": "Nobody has booked anything from you yet.",
+  "InboxPage.ordersTabTitle": "Bathing",
+  "InboxPage.ordersTitle": "Inbox: Bathing",
+  "InboxPage.salesTabTitle": "Hosting",
+  "InboxPage.salesTitle": "Inbox: Hosting",
   "InboxPage.stateAccepted": "Accepted",
   "InboxPage.statePending": "Pending",
   "InboxPage.stateRejected": "Rejected",