diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index d0db0e9f..dc446c26 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/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 {
diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
index 634433dc..e545bc8c 100644
--- a/src/containers/InboxPage/InboxPage.js
+++ b/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
?
@@ -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 = ;
+
return (
- {currentUserHasListings
- ?
- : null}
+ {nav}
{error}
{!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,
};
};
diff --git a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
index 90688d63..959f29fb 100644
--- a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
+++ b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
@@ -6,31 +6,32 @@ exports[`InboxPage matches snapshot 1`] = `
id="InboxPage.title"
values={Object {}} />
-
+ "linkProps": Object {
+ "name": "InboxPage",
+ "params": Object {
+ "tab": "sales",
+ },
+ },
+ "selected": false,
+ "text": "InboxPage.salesTabTitle",
+ },
+ ]
+ } />
-
-
+ "linkProps": Object {
+ "name": "InboxPage",
+ "params": Object {
+ "tab": "sales",
+ },
+ },
+ "selected": true,
+ "text": "InboxPage.salesTabTitle",
+ },
+ ]
+ } />