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
};