InboxPage routing and tabs with translations

src/app.test.js

@@ -65,8 +65,9 @@ describe('Application', () => {
       '/l/listing-title-slug/1234/edit': '/login',
       '/l/listing-title-slug/1234/checkout': '/login',
       '/u/1234/edit': '/login',
-      '/orders': '/login',
-      '/sales': '/login',
+      '/inbox': '/login',
+      '/inbox/orders': '/login',
+      '/inbox/sales': '/login',
       '/order/1234': '/login',
       '/order/1234/discussion': '/login',
       '/order/1234/details': '/login',

src/containers/InboxPage/InboxPage.css

@@ -0,0 +1,16 @@
+.title {
+  margin: 1rem;
+}
+
+.tab {
+  float: left;
+  margin-left: 1rem;
+  font-size: 20px;
+  letter-spacing: -0.5px;
+  text-decoration: none;
+}
+
+.activeTab {
+  font-weight: bold;
+  text-decoration: underline;
+}

src/containers/InboxPage/InboxPage.js

@@ -1,28 +1,42 @@
-/* eslint-disable arrow-body-style */
 import React, { PropTypes } from 'react';
-import { PageLayout, NamedLink } from '../../components';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { PageLayout, NamedLink, H1 } from '../../components';
 
-const InboxPage = props => {
-  const { filter } = props;
-  const ids = ['some-id-1', 'some-id-2'];
+import css from './InboxPage.css';
 
-  const toLink = id => {
-    return filter === 'orders'
-      ? <NamedLink name="OrderDetailsPage" params={{ id }}>{id} order details</NamedLink>
-      : <NamedLink name="SaleDetailsPage" params={{ id }}>{id} sale details</NamedLink>;
-  };
+export const InboxPageComponent = props => {
+  const { tab, intl } = props;
+
+  const ordersTitle = intl.formatMessage({ id: 'InboxPage.ordersTitle' });
+  const salesTitle = intl.formatMessage({ id: 'InboxPage.salesTitle' });
+  const title = tab === 'orders' ? ordersTitle : salesTitle;
 
   return (
-    <PageLayout title={`${filter} page`}>
-      <ul>
-        {ids.map(id => <li key={id}>{toLink(id)}</li>)}
-      </ul>
+    <PageLayout title={title}>
+      <H1 className={css.title}>
+        <FormattedMessage id="InboxPage.title" />
+      </H1>
+      <nav>
+        <NamedLink className={css.tab} name="InboxOrdersPage" activeClassName={css.activeTab}>
+          <FormattedMessage id="InboxPage.ordersTabTitle" />
+        </NamedLink>
+        <NamedLink className={css.tab} name="InboxSalesPage" activeClassName={css.activeTab}>
+          <FormattedMessage id="InboxPage.salesTabTitle" />
+        </NamedLink>
+      </nav>
     </PageLayout>
   );
 };
 
 const { oneOf } = PropTypes;
 
-InboxPage.propTypes = { filter: oneOf(['orders', 'sales']).isRequired };
+InboxPageComponent.propTypes = {
+  tab: oneOf(['orders', 'sales']).isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+const InboxPage = injectIntl(InboxPageComponent);
 
 export default InboxPage;

src/containers/InboxPage/InboxPage.test.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import InboxPage from './InboxPage';
+import { fakeIntl } from '../../util/test-data';
+import { InboxPageComponent } from './InboxPage';
 
 describe('InboxPage', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<InboxPage filter="orders" />);
+    const props = {
+      tab: 'orders',
+      intl: fakeIntl,
+    };
+    const tree = renderShallow(<InboxPageComponent {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });

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

@@ -1,31 +1,25 @@
 exports[`InboxPage matches snapshot 1`] = `
 <Connect(withRouter(PageLayout))
-  title="orders page">
-  <ul>
-    <li>
-      <withFlattenedRoutes(withRouter(NamedLink))
-        name="OrderDetailsPage"
-        params={
-          Object {
-            "id": "some-id-1",
-          }
-        }>
-        some-id-1
-         order details
-      </withFlattenedRoutes(withRouter(NamedLink))>
-    </li>
-    <li>
-      <withFlattenedRoutes(withRouter(NamedLink))
-        name="OrderDetailsPage"
-        params={
-          Object {
-            "id": "some-id-2",
-          }
-        }>
-        some-id-2
-         order details
-      </withFlattenedRoutes(withRouter(NamedLink))>
-    </li>
-  </ul>
+  title="InboxPage.ordersTitle">
+  <H1
+    className={null}>
+    <FormattedMessage
+      id="InboxPage.title"
+      values={Object {}} />
+  </H1>
+  <nav>
+    <withFlattenedRoutes(withRouter(NamedLink))
+      name="InboxOrdersPage">
+      <FormattedMessage
+        id="InboxPage.ordersTabTitle"
+        values={Object {}} />
+    </withFlattenedRoutes(withRouter(NamedLink))>
+    <withFlattenedRoutes(withRouter(NamedLink))
+      name="InboxSalesPage">
+      <FormattedMessage
+        id="InboxPage.salesTabTitle"
+        values={Object {}} />
+    </withFlattenedRoutes(withRouter(NamedLink))>
+  </nav>
 </Connect(withRouter(PageLayout))>
 `;

src/routesConfiguration.js

@@ -154,18 +154,25 @@ const routesConfiguration = [
     component: props => <PasswordChangePage {...props} />,
   },
   {
-    path: '/orders',
+    path: '/inbox',
     auth: true,
     exact: true,
-    name: 'OrdersPage',
-    component: props => <InboxPage {...props} filter="orders" />,
+    name: 'InboxPage',
+    component: () => <NamedRedirect name="InboxOrdersPage" />,
   },
   {
-    path: '/sales',
+    path: '/inbox/orders',
     auth: true,
     exact: true,
-    name: 'SalesPage',
-    component: props => <InboxPage {...props} filter="sales" />,
+    name: 'InboxOrdersPage',
+    component: props => <InboxPage {...props} tab="orders" />,
+  },
+  {
+    path: '/inbox/sales',
+    auth: true,
+    exact: true,
+    name: 'InboxSalesPage',
+    component: props => <InboxPage {...props} tab="sales" />,
   },
   {
     path: '/order/:id',

src/translations/en.json

@@ -37,6 +37,11 @@
   "HeroSearchForm.search": "Search",
   "HeroSection.subTitle": "The largest online community to rent music studios",
   "HeroSection.title": "Book Studiotime anywhere",
+  "InboxPage.title": "Inbox",
+  "InboxPage.ordersTitle": "Inbox: Orders",
+  "InboxPage.salesTitle": "Inbox: Sales",
+  "InboxPage.ordersTabTitle": "Guest",
+  "InboxPage.salesTabTitle": "Host",
   "ModalInMobile.closeModal": "Close modal",
   "ListingPage.ctaButtonMessage": "Book {title}",
   "ListingPage.loadingListingData": "Loading listing data",