Purchases: Add notice to PurchasesList after a purchase is canceled

Fixes #257.

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 (
 			<StoreConnection
 				component={ this.props.component }
+				noticeType={ this.props.noticeType }
 				stores={ stores }
 				getStateFromStores={ getStateFromStores } />
 		);

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' ) ) {

client/me/purchases/controller.jsx

@@ -156,7 +156,7 @@ export default {
 		);
 	},
 
-	list() {
+	list( context ) {
 		setTitle();
 
 		recordPageView(
@@ -165,7 +165,8 @@ export default {
 
 		renderPage(
 			<PurchasesData
-				component={ PurchasesList } />
+				component={ PurchasesList }
+				noticeType={ context.params.noticeType } />
 		);
 	},
 

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: <a href="https://support.wordpress.com/" />
+					}
+				}
+			);
+
+			status = 'is-error';
+		}
+
+		return (
+			<SimpleNotice showDismiss={ false } status={ status }>
+				{ message }
+			</SimpleNotice>
+		);
+	},
+
 	render() {
 		let content;
 
@@ -54,11 +94,14 @@ const PurchasesList = React.createClass( {
 		}
 
 		return (
-			<Main className="purchases-list">
-				<MeSidebarNavigation />
-				<PurchasesHeader section={ 'purchases' } />
-				{ content }
-			</Main>
+			<span>
+				{ this.renderNotice() }
+				<Main className="purchases-list">
+					<MeSidebarNavigation />
+					<PurchasesHeader section={ 'purchases' } />
+					{ content }
+				</Main>
+			</span>
 		);
 	}
 } );

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