Merge pull request #1987 from Automattic/fix/1465-stale-data-plan-ove…

…rview

Free Trials: Fix display of stale data in `PlanOverview`

client/lib/sites-list/index.js

@@ -32,7 +32,6 @@ module.exports = function() {
 					break;
 				case InvitesActionTypes.INVITE_ACCEPTED_SUCCESS:
 				case 'RECEIVE_DISCONNECTED_SITE':
-				case 'RECEIVE_DELETED_SITE':
 				case 'FETCH_SITES':
 					_sites.fetch(); // refetch the sites from .com
 					break;

client/my-sites/upgrades/checkout/thank-you.jsx

@@ -2,18 +2,21 @@
  * External dependencies
  */
 var React = require( 'react' ),
+	connect = require( 'react-redux' ).connect,
 	store = require( 'store' );
 
 /**
  * Internal dependencies
  */
 var config = require( 'config' ),
+	Dispatcher = require( 'dispatcher' ),
 	cartItems = require( 'lib/cart-values' ).cartItems,
 	Card = require( 'components/card' ),
 	Main = require( 'components/main' ),
 	analytics = require( 'analytics' ),
 	isPlan = require( 'lib/products-values' ).isPlan,
 	{ getPrimaryDomain, isSubdomain } = require( 'lib/domains' ),
+	refreshSitePlans = require( 'state/sites/plans/actions' ).refreshSitePlans,
 	i18n = require( 'lib/mixins/i18n' ),
 	paths = require( 'my-sites/upgrades/paths' );
 
@@ -63,6 +66,24 @@ var CheckoutThankYou = React.createClass( {
 	},
 
 	componentDidMount: function() {
+		var lastTransaction = this.props.lastTransaction,
+			selectedSite;
+
+		if ( lastTransaction ) {
+			selectedSite = lastTransaction.selectedSite;
+
+			// Refresh selected site plans if the user just purchased a plan
+			if ( cartItems.hasPlan( lastTransaction.cart ) ) {
+				this.props.refreshSitePlans( selectedSite.ID );
+			}
+
+			// Refresh the list of sites to update the `site.plan` property
+			// needed to display the plan name on the right of the `Plans` menu item
+			Dispatcher.handleViewAction( {
+				type: 'FETCH_SITES'
+			} );
+		}
+
 		analytics.tracks.recordEvent( 'calypso_checkout_thank_you_view' );
 	},
 
@@ -632,4 +653,13 @@ PurchaseDetail = React.createClass( {
 	}
 } );
 
-module.exports = CheckoutThankYou;
+module.exports = connect(
+	undefined,
+	function mapDispatchToProps( dispatch ) {
+		return {
+			refreshSitePlans( siteId ) {
+				dispatch( refreshSitePlans( siteId ) );
+			}
+		};
+	}
+)( CheckoutThankYou );

client/my-sites/upgrades/controller.jsx

@@ -17,7 +17,8 @@ var analytics = require( 'analytics' ),
 	upgradesActions = require( 'lib/upgrades/actions' ),
 	titleActions = require( 'lib/screen-title/actions' ),
 	setSection = require( 'state/ui/actions' ).setSection,
-	productsList = require( 'lib/products-list' )();
+	productsList = require( 'lib/products-list' )(),
+	renderWithReduxStore = require( 'lib/react-helpers' ).renderWithReduxStore;
 
 module.exports = {
 
@@ -211,12 +212,13 @@ module.exports = {
 
 		titleActions.setTitle( i18n.translate( 'Thank You' ) );
 
-		ReactDom.render(
+		renderWithReduxStore(
 			React.createElement( CheckoutThankYouComponent, {
 				lastTransaction: lastTransaction,
 				productsList: productsList
 			} ),
-			document.getElementById( 'primary' )
+			document.getElementById( 'primary' ),
+			context.store
 		);
 
 		ReactDom.unmountComponentAtNode( document.getElementById( 'secondary' ) );

client/state/action-types.js

@@ -13,6 +13,7 @@ export const NEW_NOTICE = 'NEW_NOTICE';
 export const RECEIVE_PUBLICIZE_CONNECTIONS = 'RECEIVE_PUBLICIZE_CONNECTIONS';
 export const RECEIVE_SITE = 'RECEIVE_SITE';
 export const REMOVE_NOTICE = 'REMOVE_NOTICE';
+export const REMOVE_SITE_PLANS = 'REMOVE_SITE_PLANS';
 export const SET_SECTION = 'SET_SECTION';
 export const SET_SELECTED_SITE = 'SET_SELECTED_SITE';
 export const TOGGLE_EXPORTER_ADVANCED_SETTINGS = 'TOGGLE_EXPORTER_ADVANCED_SETTINGS';

client/state/sites/plans/action-types.js

@@ -1,2 +1,3 @@
 export const FETCH_SITE_PLANS = 'FETCH_SITE_PLANS';
 export const FETCH_SITE_PLANS_COMPLETED = 'FETCH_SITE_PLANS_COMPLETED';
+export const REMOVE_SITE_PLANS = 'REMOVE_SITE_PLANS';

client/state/sites/plans/actions.js

@@ -15,6 +15,7 @@ import wpcom from 'lib/wp';
 import {
 	FETCH_SITE_PLANS,
 	FETCH_SITE_PLANS_COMPLETED,
+	REMOVE_SITE_PLANS
 } from './action-types';
 
 /**
@@ -62,3 +63,21 @@ export function fetchSitePlansCompleted( siteId, plans ) {
 		plans: map( plans, createSitePlanObject )
 	};
 }
+
+/**
+ * Returns an action object to be used in updating an object containing
+ * the plans for the given site.
+ *
+ * @param  {Object} siteId ID of the concerned site
+ * @return {Object}        Action object
+ */
+export function refreshSitePlans( siteId ) {
+	return ( dispatch ) => {
+		dispatch( {
+			type: REMOVE_SITE_PLANS,
+			siteId
+		} );
+
+		dispatch( fetchSitePlans( siteId ) );
+	}
+}

client/state/sites/plans/reducer.js

@@ -3,8 +3,10 @@
  */
 import {
 	FETCH_SITE_PLANS,
-	FETCH_SITE_PLANS_COMPLETED
+	FETCH_SITE_PLANS_COMPLETED,
+	REMOVE_SITE_PLANS
 } from './action-types';
+import omit from 'lodash/object/omit';
 
 export const initialSiteState = {
 	error: null,
@@ -30,6 +32,8 @@ export function plans( state = {}, action ) {
 					data: action.plans
 				} )
 			} );
+		case REMOVE_SITE_PLANS:
+			return omit( state, action.siteId );
 	}
 
 	return state;

client/state/sites/plans/test/reducer.js

@@ -6,7 +6,7 @@ import { expect } from 'chai';
 /**
  * Internal dependencies
  */
-import { FETCH_SITE_PLANS } from 'state/action-types';
+import { FETCH_SITE_PLANS, REMOVE_SITE_PLANS } from 'state/action-types';
 import { initialSiteState, plans } from '../reducer';
 
 describe( 'reducer', () => {
@@ -57,5 +57,20 @@ describe( 'reducer', () => {
 				11111111: Object.assign( {}, initialSiteState, { isFetching: true } )
 			} );
 		} );
+
+		it( 'should remove plans for a given site ID', () => {
+			const original = Object.freeze( {
+					11111111: initialSiteState,
+					22222222: initialSiteState
+				} ),
+				state = plans( original, {
+					type: REMOVE_SITE_PLANS,
+					siteId: 11111111
+				} );
+
+			expect( state ).to.eql( {
+				22222222: initialSiteState
+			} );
+		} );
 	} );
 } );