diff --git a/client/components/data/purchases/index.jsx b/client/components/data/purchases/index.jsx index e619cb0bebd504..93c639d984d4f1 100644 --- a/client/components/data/purchases/index.jsx +++ b/client/components/data/purchases/index.jsx @@ -17,13 +17,17 @@ import userFactory from 'lib/user'; const stores = [ PurchasesStore ], user = userFactory(); -function getStateFromStores() { - return { purchases: PurchasesStore.getByUser( user.get().ID ) }; +function getStateFromStores( props ) { + return { + noticeType: props.noticeType, + purchases: PurchasesStore.getByUser( user.get().ID ) + }; } const PurchasesData = React.createClass( { propTypes: { - component: React.PropTypes.func.isRequired + component: React.PropTypes.func.isRequired, + noticeType: React.PropTypes.string }, componentDidMount() { @@ -34,6 +38,7 @@ const PurchasesData = React.createClass( { return ( ); diff --git a/client/me/index.js b/client/me/index.js index fe35d10171a629..a24c09308bc251 100644 --- a/client/me/index.js +++ b/client/me/index.js @@ -65,6 +65,13 @@ export default function() { controller.purchases.noSitesMessage, controller.purchases.list ); + + page( + paths.purchases.listNotice(), + controller.sidebar, + controller.purchases.noSitesMessage, + controller.purchases.list + ); } if ( config.isEnabled( 'upgrades/purchases/manage' ) ) { diff --git a/client/me/purchases/controller.jsx b/client/me/purchases/controller.jsx index 092611ffd32127..06530e2f218952 100644 --- a/client/me/purchases/controller.jsx +++ b/client/me/purchases/controller.jsx @@ -156,7 +156,7 @@ export default { ); }, - list() { + list( context ) { setTitle(); recordPageView( @@ -165,7 +165,8 @@ export default { renderPage( + component={ PurchasesList } + noticeType={ context.params.noticeType } /> ); }, diff --git a/client/me/purchases/list/index.jsx b/client/me/purchases/list/index.jsx index 5b3ac8b82f1fa1..96bc06eca63eda 100644 --- a/client/me/purchases/list/index.jsx +++ b/client/me/purchases/list/index.jsx @@ -13,8 +13,48 @@ import Main from 'components/main'; import MeSidebarNavigation from 'me/sidebar-navigation'; import PurchasesHeader from './header'; import PurchasesSite from './site'; +import SimpleNotice from 'notices/simple-notice'; const PurchasesList = React.createClass( { + renderNotice() { + const { noticeType } = this.props; + + if ( ! noticeType ) { + return null; + } + + let message, status; + + if ( 'cancel-success' === noticeType ) { + message = this.translate( + 'Your purchase was canceled and refunded. The refund may take up to ' + + '7 days to appear in your PayPal/bank/credit card account.' + ); + + status = 'is-success'; + } + + if ( 'cancel-problem' === noticeType ) { + message = this.translate( + 'There was a problem canceling your purchase. ' + + 'Please {{a}}contact support{{/a}} for more information.', + { + components: { + a: + } + } + ); + + status = 'is-error'; + } + + return ( + + { message } + + ); + }, + render() { let content; @@ -54,11 +94,14 @@ const PurchasesList = React.createClass( { } return ( -
- - - { content } -
+ + { this.renderNotice() } +
+ + + { content } +
+
); } } ); diff --git a/client/me/purchases/paths.js b/client/me/purchases/paths.js index 2438688e9b6e24..1e315494026e50 100644 --- a/client/me/purchases/paths.js +++ b/client/me/purchases/paths.js @@ -2,6 +2,10 @@ function list() { return '/purchases'; } +function listNotice( noticeType = ':noticeType' ) { + return list() + `/${ noticeType }`; +} + function managePurchase( siteName = ':site', purchaseId = ':purchaseId' ) { return list() + `/${ siteName }/${ purchaseId }`; } @@ -37,6 +41,7 @@ export default { editCardDetails, editPaymentMethod, list, + listNotice, managePurchase, managePurchaseDestination };