Plans: Remove siteSpecificPlansDetailsList and siteSpecificPlansDetailsMixin in favor of new actions/reducers

client/components/plans/plan-actions/index.jsx

@@ -149,7 +149,7 @@ module.exports = React.createClass( {
 			return false;
 		}
 
-		const siteCanOfferTrial = this.props.siteSpecificPlansDetails && this.props.siteSpecificPlansDetails.can_start_trial;
+		const siteCanOfferTrial = this.props.sitePlan && this.props.sitePlan.canStartTrial;
 
 		if ( ! this.props.isInSignup && ! siteCanOfferTrial ) {
 			return false;
@@ -219,7 +219,7 @@ module.exports = React.createClass( {
 	managePlanButton: function() {
 		var link;
 		if ( this.planHasCost() ) {
-			link = puchasesPaths.managePurchase( this.props.site.slug, this.props.siteSpecificPlansDetails.id );
+			link = puchasesPaths.managePurchase( this.props.site.slug, this.props.sitePlan.id );
 			return (
 				<a href={ link } className="button plan-actions__upgrade-button">{ this.translate( 'Manage Plan', { context: 'Link to current plan from /plans/' } ) }</a>
 			);
@@ -240,7 +240,7 @@ module.exports = React.createClass( {
 
 	getTrialPlanHint: function() {
 		var remainingDays = this.moment(
-				this.props.siteSpecificPlansDetails.expiry
+				this.props.sitePlan.expiry
 			).diff( this.moment(), 'days' ),
 			translationComponents = {
 				strong: <strong />,
@@ -273,7 +273,7 @@ module.exports = React.createClass( {
 	},
 
 	getCurrentPlanHint: function() {
-		if ( ! this.props.siteSpecificPlansDetails ) {
+		if ( ! this.props.sitePlan ) {
 			return;
 		}
 
@@ -295,7 +295,7 @@ module.exports = React.createClass( {
 	},
 
 	isPlanOnTrial: function() {
-		return this.props.siteSpecificPlansDetails.free_trial;
+		return this.props.sitePlan.freeTrial;
 	},
 
 	placeholder: function() {

client/components/plans/plan-discount-message/index.jsx

@@ -28,12 +28,12 @@ module.exports = React.createClass( {
 	},
 
 	planHasDiscount: function() {
-		return this.props.siteSpecificPlansDetails && this.props.siteSpecificPlansDetails.raw_discount > 0;
+		return this.props.sitePlan && this.props.sitePlan.rawDiscount > 0;
 	},
 
 	planDiscountMessage: function() {
 		var message = this.translate( 'Get %(discount)s off your first year', {
-			args: { discount: this.props.siteSpecificPlansDetails.formatted_discount }
+			args: { discount: this.props.sitePlan.formattedDiscount }
 		} );
 
 		return (

client/components/plans/plan-features/index.jsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	classNames = require( 'classnames' );
+	classNames = require( 'classnames' ),
+	find = require( 'lodash/collection/find' );
 
 /**
  * Internal dependencies
@@ -33,8 +34,8 @@ module.exports = React.createClass( {
 
 	render: function() {
 		var features, classes,
-			siteSpecificPlansDetails = this.props.siteSpecificPlansDetailsList ?
-				this.props.siteSpecificPlansDetailsList.get( this.props.site.domain, this.props.plan.product_id ) :
+			sitePlan = this.props.sitePlans && this.props.sitePlans.hasLoadedFromServer ?
+				find( this.props.sitePlans.data, { productSlug: this.props.plan.product_slug } ) :
 				undefined;
 
 		features = this.props.features.map( function( feature ) {
@@ -53,18 +54,18 @@ module.exports = React.createClass( {
 				{ features }
 				<PlanPrice
 					plan={ this.props.plan }
-					siteSpecificPlansDetails={ siteSpecificPlansDetails }
+					sitePlan={ sitePlan }
 					site={ this.props.site } />
 				<PlanActions
 					onSelectPlan={ this.props.onSelectPlan }
 					isInSignup={ this.props.isInSignup }
 					plan={ this.props.plan }
 					site={ this.props.site }
-					siteSpecificPlansDetails={ siteSpecificPlansDetails }
+					sitePlan={ sitePlan }
 					cart={ this.props.cart } />
 				<PlanDiscountMessage
 					plan={ this.props.plan }
-					siteSpecificPlansDetails={ siteSpecificPlansDetails }
+					sitePlan={ sitePlan }
 					site={ this.props.site } />
 			</div>
 		);

client/components/plans/plan-list/index.jsx

@@ -9,7 +9,9 @@ var React = require( 'react/addons' ),
  */
 var Plan = require( 'components/plans/plan' ),
 	Card = require( 'components/card' ),
-	abtest = require( 'lib/abtest' ).abtest;
+	abtest = require( 'lib/abtest' ).abtest,
+	isJpphpBundle = require( 'lib/products-values' ).isJpphpBundle,
+	getCurrentPlan = require( 'lib/plans' ).getCurrentPlan;
 
 module.exports = React.createClass( {
 	displayName: 'PlanList',
@@ -25,29 +27,47 @@ module.exports = React.createClass( {
 	render: function() {
 		var plans = this.props.plans,
 			showJetpackPlans = false,
+			isLoadingSitePlans = ! this.props.isInSignup && ! this.props.sitePlans.hasLoadedFromServer,
 			site,
-			plansList;
+			plansList,
+			currentPlan;
+
+		if ( plans.length === 0 || isLoadingSitePlans ) {
+			plansList = times( 3, function( n ) {
+				return (
+					<Plan placeholder={ true }
+						isInSignup={ this.props.isInSignup }
+						key={ `plan-${ n }` } />
+				);
+			}, this );
+
+			return (
+				<div className="plans-list">{ plansList }</div>
+			);
+		}
 
 		if ( this.props.sites ) {
 			site = this.props.sites.getSelectedSite();
 			showJetpackPlans = site && site.jetpack;
 		}
 
-		// check if this site was registered via the JPPHP "Jetpack Start" program
-		// if so, we want to display a message that this plan is managed via the hosting partner
-
-		if ( this.props.siteSpecificPlansDetailsList && this.props.siteSpecificPlansDetailsList.hasJpphpBundle( site.domain )  ) {
-			return (
-				<Card>
-					<p>
-						{
-							this.translate( 'This plan is managed by your web host. ' +
-								'Please log into your host\'s control panel to manage subscription ' +
-								'and billing information.' )
-						}
-					</p>
-				</Card>
-			);
+		if ( ! this.props.isInSignup ) {
+			// check if this site was registered via the JPPHP "Jetpack Start" program
+			// if so, we want to display a message that this plan is managed via the hosting partner
+			currentPlan = getCurrentPlan( this.props.sitePlans.data );
+			if ( isJpphpBundle( currentPlan ) ) {
+				return (
+					<Card>
+						<p>
+							{
+								this.translate( 'This plan is managed by your web host. ' +
+									'Please log into your host\'s control panel to manage subscription ' +
+									'and billing information.' )
+							}
+						</p>
+					</Card>
+				);
+			}
 		}
 
 		if ( plans.length > 0 ) {
@@ -59,7 +79,7 @@ module.exports = React.createClass( {
 				return (
 					<Plan
 						plan={ plan }
-						siteSpecificPlansDetailsList={ this.props.siteSpecificPlansDetailsList }
+						sitePlans={ this.props.sitePlans }
 						comparePlansUrl={ this.props.comparePlansUrl }
 						isInSignup={ this.props.isInSignup }
 						key={ plan.product_id }
@@ -76,7 +96,7 @@ module.exports = React.createClass( {
 				return (
 					<Plan placeholder={ true }
 						isInSignup={ this.props.isInSignup }
-						key={ 'plan-' + n } />
+						key={ `plan-${ n }` } />
 				);
 			}, this );
 		}

client/components/plans/plan-price/index.jsx

@@ -19,18 +19,18 @@ module.exports = React.createClass( {
 
 	getPrice: function() {
 		var standardPrice = this.getFormattedPrice( this.props.plan ),
-			discountedPrice = this.getFormattedPrice( this.props.siteSpecificPlansDetails );
+			discountedPrice = this.getFormattedPrice( this.props.sitePlan );
 
-		if ( this.props.siteSpecificPlansDetails && this.props.siteSpecificPlansDetails.raw_discount > 0 ) {
+		if ( this.props.sitePlan && this.props.sitePlan.rawDiscount > 0 ) {
 			return ( <span><span className="plan-price__discounted">{ standardPrice }</span> { discountedPrice }</span> );
 		}
 
 		return ( <span>{ standardPrice }</span> );
 	},
 
 	render: function() {
-	    const { plan, siteSpecificPlansDetails: details } = this.props;
-	    const hasDiscount = details && details.raw_discount > 0;
+	    const { plan, sitePlan: details } = this.props;
+	    const hasDiscount = details && details.rawDiscount > 0;
 
 	    if ( this.props.isPlaceholder ) {
 			return <div className="plan-price is-placeholder" />;

client/components/plans/plan/index.jsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	classNames = require( 'classnames' );
+	classNames = require( 'classnames' ),
+	find = require( 'lodash/collection/find' );
 
 /**
  * Internal dependencies
@@ -73,12 +74,12 @@ module.exports = React.createClass( {
 		return this.props.placeholder;
 	},
 
-	getProductId: function() {
+	getProductSlug: function() {
 		if ( this.isPlaceholder() ) {
 			return;
 		}
 
-		return this.props.plan.product_id;
+		return this.props.plan.product_slug;
 	},
 
 	getClassNames: function() {
@@ -97,12 +98,12 @@ module.exports = React.createClass( {
 		return classNames( classObject );
 	},
 
-	getSiteSpecificPlanDetails: function() {
+	getSitePlan: function() {
 		if ( this.isPlaceholder() || ! this.props.site ) {
 			return;
 		}
 
-		return this.props.siteSpecificPlansDetailsList.get( this.props.site.domain, this.getProductId() );
+		return find( this.props.sitePlans.data, { productSlug: this.getProductSlug() } );
 	},
 
 	getPlanDiscountMessage: function() {
@@ -113,15 +114,15 @@ module.exports = React.createClass( {
 		return (
 			<PlanDiscountMessage
 				plan={ this.props.plan }
-				siteSpecificPlansDetails={ this.getSiteSpecificPlanDetails() }
+				sitePlan={ this.getSitePlan() }
 				site={ this.props.site }
 				showMostPopularMessage={ true }/>
 		);
 	},
 
 	getBadge: function() {
 		if ( this.props.site ) {
-			if ( this.props.site.plan.product_id === this.getProductId() ) {
+			if ( this.props.site.plan.product_slug === this.getProductSlug() ) {
 				return (
 					<Gridicon icon="checkmark-circle" />
 				);
@@ -155,7 +156,7 @@ module.exports = React.createClass( {
 			<PlanPrice
 				plan={ this.props.plan }
 				isPlaceholder={ this.isPlaceholder() }
-				siteSpecificPlansDetails={ this.getSiteSpecificPlanDetails() }
+				sitePlan={ this.getSitePlan() }
 				site={ this.props.site } />
 		);
 	},
@@ -166,7 +167,7 @@ module.exports = React.createClass( {
 				plan={ this.props.plan }
 				isInSignup={ this.props.isInSignup }
 				onSelectPlan={ this.props.onSelectPlan }
-				siteSpecificPlansDetails={ this.getSiteSpecificPlanDetails() }
+				sitePlan={ this.getSitePlan() }
 				site={ this.props.site }
 				cart={ this.props.cart }
 				enableFreeTrials={ this.props.enableFreeTrials }
@@ -180,7 +181,7 @@ module.exports = React.createClass( {
 				plan={ this.props.plan }
 				isInSignup={ this.props.isInSignup }
 				onSelectPlan={ this.props.onSelectPlan }
-				siteSpecificPlansDetails={ this.getSiteSpecificPlanDetails() }
+				sitePlan={ this.getSitePlan() }
 				site={ this.props.site }
 				cart={ this.props.cart }
 				enableFreeTrials={ this.props.enableFreeTrials }
@@ -191,7 +192,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<Card className={ this.getClassNames() } key={ this.getProductId() } onClick={ this.showDetails }>
+			<Card className={ this.getClassNames() } key={ this.getProductSlug() } onClick={ this.showDetails }>
 				{ this.getPlanDiscountMessage() }
 				<PlanHeader onClick={ this.showDetails } text={ this.getProductName() } isPlaceholder={ this.isPlaceholder() }>
 					{ this.getBadge() }