From 0f9a5942855bc98c3ceeaeb5816b1b1b34e9f63f Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Fri, 11 Dec 2015 14:00:58 -0500 Subject: [PATCH 01/10] Plans: Connect site plans data to `Plans` --- client/my-sites/plans/controller.jsx | 17 ++++++++++------- client/my-sites/plans/main.jsx | 23 +++++++++++++++++++---- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/client/my-sites/plans/controller.jsx b/client/my-sites/plans/controller.jsx index 61ab359081e51a..59fd440ffda1c2 100644 --- a/client/my-sites/plans/controller.jsx +++ b/client/my-sites/plans/controller.jsx @@ -4,6 +4,7 @@ var page = require( 'page' ), ReactDom = require( 'react-dom' ), React = require( 'react' ), + ReduxProvider = require( 'react-redux' ).Provider, defer = require( 'lodash/function/defer' ); /** @@ -78,13 +79,15 @@ module.exports = { analytics.pageView.record( analyticsBasePath, analyticsPageTitle ); ReactDom.render( - - - , + + + + + , document.getElementById( 'primary' ) ); }, diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 88ab1f61e1c053..59a0f3ae142841 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -1,7 +1,8 @@ /** * External dependencies */ -var React = require( 'react/addons' ); +var React = require( 'react/addons' ), + connect = require( 'react-redux' ).connect; /** * Internal dependencies @@ -15,9 +16,11 @@ var analytics = require( 'analytics' ), SidebarNavigation = require( 'my-sites/sidebar-navigation' ), UpgradesNavigation = require( 'my-sites/upgrades/navigation' ), Gridicon = require( 'components/gridicon' ), - createSiteSpecificPlanObject = require( 'lib/site-specific-plans-details-list/assembler' ).createSiteSpecificPlanObject; + fetchSitePlans = require( 'state/sites/plans/actions' ).fetchSitePlans, + createSitePlanObject = require( 'state/sites/plans/assembler' ).createSitePlanObject, + getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId; -module.exports = React.createClass( { +var Plans = React.createClass( { displayName: 'Plans', mixins: [ siteSpecificPlansDetailsMixin, observe( 'sites', 'plans', 'siteSpecificPlansDetailsList' ) ], @@ -62,7 +65,7 @@ module.exports = React.createClass( { currentPlan; if ( this.props.siteSpecificPlansDetailsList.hasLoadedFromServer( selectedSiteDomain ) ) { - currentPlan = createSiteSpecificPlanObject( this.props.siteSpecificPlansDetailsList.getCurrentPlan( selectedSiteDomain ) ); + currentPlan = createSitePlanObject( this.props.siteSpecificPlansDetailsList.getCurrentPlan( selectedSiteDomain ) ); if ( config.isEnabled( 'upgrades/free-trials' ) && currentPlan.freeTrial ) { return ( @@ -99,3 +102,15 @@ module.exports = React.createClass( { ); } } ); + +module.exports = connect( + ( state, props ) => { + if ( ! props.sites.getSelectedSite() ) { + return {}; + } + + return { + sitePlans: getPlansBySiteId( state, props.sites.getSelectedSite().ID ) + }; + } +)( Plans ); From 0bd87bb1ec9c29d343ced11c39b220208f5df297 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Fri, 11 Dec 2015 18:18:02 -0500 Subject: [PATCH 02/10] Plans: Fetch site plans when `Plans` is mounted --- client/my-sites/plans/main.jsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 59a0f3ae142841..a377810c53dde9 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -2,7 +2,8 @@ * External dependencies */ var React = require( 'react/addons' ), - connect = require( 'react-redux' ).connect; + connect = require( 'react-redux' ).connect, + find = require( 'lodash/collection/find' ); /** * Internal dependencies @@ -17,7 +18,6 @@ var analytics = require( 'analytics' ), UpgradesNavigation = require( 'my-sites/upgrades/navigation' ), Gridicon = require( 'components/gridicon' ), fetchSitePlans = require( 'state/sites/plans/actions' ).fetchSitePlans, - createSitePlanObject = require( 'state/sites/plans/assembler' ).createSitePlanObject, getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId; var Plans = React.createClass( { @@ -29,6 +29,10 @@ var Plans = React.createClass( { return { openPlan: '' }; }, + componentDidMount: function() { + this.props.fetchSitePlans( this.props.sites.getSelectedSite().ID ); + }, + openPlan: function( planId ) { this.setState( { openPlan: planId === this.state.openPlan ? '' : planId } ); }, @@ -64,10 +68,10 @@ var Plans = React.createClass( { this.props.siteSpecificPlansDetailsList.hasJpphpBundle( selectedSiteDomain ), currentPlan; - if ( this.props.siteSpecificPlansDetailsList.hasLoadedFromServer( selectedSiteDomain ) ) { - currentPlan = createSitePlanObject( this.props.siteSpecificPlansDetailsList.getCurrentPlan( selectedSiteDomain ) ); + if ( config.isEnabled( 'upgrades/free-trials' ) && this.props.sitePlans.hasLoadedFromServer ) { + currentPlan = find( this.props.sitePlans.data, { currentPlan: true } ); - if ( config.isEnabled( 'upgrades/free-trials' ) && currentPlan.freeTrial ) { + if ( currentPlan.freeTrial ) { return ( { - if ( ! props.sites.getSelectedSite() ) { - return {}; - } - return { sitePlans: getPlansBySiteId( state, props.sites.getSelectedSite().ID ) }; + }, + ( dispatch ) => { + return { + fetchSitePlans( siteId ) { + dispatch( fetchSitePlans( siteId ) ); + } + }; } )( Plans ); From ee6ebff0dedb7e7a62c9f62d726d2fc5b0ff3dff Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 15 Dec 2015 10:31:49 -0800 Subject: [PATCH 03/10] Plans: Use `sitePlans` in `Plans` instead of `siteSpecificPlansDetailsList` --- .../components/plans/plan-actions/index.jsx | 10 ++-- .../plans/plan-discount-message/index.jsx | 4 +- client/components/plans/plan-list/index.jsx | 28 +++++++++-- client/components/plans/plan-price/index.jsx | 8 +-- client/components/plans/plan/index.jsx | 12 ++--- client/lib/products-values/index.js | 1 + .../assembler.js | 1 + client/my-sites/plans/controller.jsx | 3 +- client/my-sites/plans/main.jsx | 49 +++++++++++-------- 9 files changed, 71 insertions(+), 45 deletions(-) diff --git a/client/components/plans/plan-actions/index.jsx b/client/components/plans/plan-actions/index.jsx index 1712a3c9e4defc..ce9ef8652574a6 100644 --- a/client/components/plans/plan-actions/index.jsx +++ b/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 ( { this.translate( 'Manage Plan', { context: 'Link to current plan from /plans/' } ) } ); @@ -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: , @@ -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() { diff --git a/client/components/plans/plan-discount-message/index.jsx b/client/components/plans/plan-discount-message/index.jsx index 498f028ca80723..b6ec2c90673107 100644 --- a/client/components/plans/plan-discount-message/index.jsx +++ b/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 ( diff --git a/client/components/plans/plan-list/index.jsx b/client/components/plans/plan-list/index.jsx index 22d6533cd45000..1bee28ec90ca81 100644 --- a/client/components/plans/plan-list/index.jsx +++ b/client/components/plans/plan-list/index.jsx @@ -2,14 +2,16 @@ * External dependencies */ var React = require( 'react/addons' ), - times = require( 'lodash/utility/times' ); + times = require( 'lodash/utility/times' ), + find = require( 'lodash/collection/find' ); /** * Internal dependencies */ 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; module.exports = React.createClass( { displayName: 'PlanList', @@ -26,7 +28,22 @@ module.exports = React.createClass( { var plans = this.props.plans, showJetpackPlans = false, site, - plansList; + plansList, + currentPlan; + + if ( ! this.props.sitePlans.hasLoadedFromServer ) { + plansList = times( 3, function( n ) { + return ( + + ); + }, this ); + + return ( +
{ plansList }
+ ); + } if ( this.props.sites ) { site = this.props.sites.getSelectedSite(); @@ -36,7 +53,8 @@ module.exports = React.createClass( { // 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 ) ) { + currentPlan = find( this.props.sitePlans.data, { currentPlan: true } ); + if ( isJpphpBundle( currentPlan ) ) { return (

@@ -59,7 +77,7 @@ module.exports = React.createClass( { return ( 0 ) { + if ( this.props.sitePlan && this.props.sitePlan.rawDiscount > 0 ) { return ( { standardPrice } { discountedPrice } ); } @@ -29,8 +29,8 @@ module.exports = React.createClass( { }, 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

; diff --git a/client/components/plans/plan/index.jsx b/client/components/plans/plan/index.jsx index 2531cebd5951cd..0f025600b09a9f 100644 --- a/client/components/plans/plan/index.jsx +++ b/client/components/plans/plan/index.jsx @@ -97,12 +97,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, { productId: this.getProductId() } ); }, getPlanDiscountMessage: function() { @@ -113,7 +113,7 @@ module.exports = React.createClass( { return ( ); @@ -155,7 +155,7 @@ module.exports = React.createClass( { ); }, @@ -166,7 +166,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 +180,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 } diff --git a/client/lib/products-values/index.js b/client/lib/products-values/index.js index 2d0704bfc2391c..2ac72b589d3b09 100644 --- a/client/lib/products-values/index.js +++ b/client/lib/products-values/index.js @@ -250,6 +250,7 @@ module.exports = { isPremium: isPremium, isBusiness: isBusiness, isEnterprise: isEnterprise, + isJpphpBundle: isJpphpBundle, isPlan: isPlan, isPrivateRegistration, isDomainProduct: isDomainProduct, diff --git a/client/lib/site-specific-plans-details-list/assembler.js b/client/lib/site-specific-plans-details-list/assembler.js index 98e7c438db48be..c51de52d7252c1 100644 --- a/client/lib/site-specific-plans-details-list/assembler.js +++ b/client/lib/site-specific-plans-details-list/assembler.js @@ -5,6 +5,7 @@ import moment from 'moment'; function createSiteSpecificPlanObject( plan ) { return { + canStartTrial: Boolean( plan.can_start_trial ), currentPlan: Boolean( plan.current_plan ), expiry: plan.expiry, expiryMoment: moment( plan.expiry ).startOf( 'day' ), diff --git a/client/my-sites/plans/controller.jsx b/client/my-sites/plans/controller.jsx index 59fd440ffda1c2..36d581191859d0 100644 --- a/client/my-sites/plans/controller.jsx +++ b/client/my-sites/plans/controller.jsx @@ -40,7 +40,6 @@ module.exports = { CartData = require( 'components/data/cart' ), MainComponent = require( 'components/main' ), EmptyContentComponent = require( 'components/empty-content' ), - siteSpecificPlansDetailsList = require( 'lib/site-specific-plans-details-list' )(), site = sites.getSelectedSite(), analyticsPageTitle = 'Plans', basePath = route.sectionify( context.path ), @@ -82,9 +81,9 @@ module.exports = { , diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index a377810c53dde9..ae6dc6be1a7284 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -13,24 +13,30 @@ var analytics = require( 'analytics' ), observe = require( 'lib/mixins/data-observe' ), PlanList = require( 'components/plans/plan-list' ), PlanOverview = require( './plan-overview' ), - siteSpecificPlansDetailsMixin = require( 'components/plans/site-specific-plan-details-mixin' ), SidebarNavigation = require( 'my-sites/sidebar-navigation' ), UpgradesNavigation = require( 'my-sites/upgrades/navigation' ), Gridicon = require( 'components/gridicon' ), fetchSitePlans = require( 'state/sites/plans/actions' ).fetchSitePlans, - getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId; + getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId, + isJpphpBundle = require( 'lib/products-values' ).isJpphpBundle; var Plans = React.createClass( { displayName: 'Plans', - mixins: [ siteSpecificPlansDetailsMixin, observe( 'sites', 'plans', 'siteSpecificPlansDetailsList' ) ], + mixins: [ observe( 'sites', 'plans' ) ], getInitialState: function() { return { openPlan: '' }; }, componentDidMount: function() { - this.props.fetchSitePlans( this.props.sites.getSelectedSite().ID ); + this.props.fetchSitePlans( this.props.selectedSite.ID ); + }, + + componentWillReceiveProps: function( nextProps ) { + if ( this.props.selectedSite.ID !== nextProps.selectedSite.ID ) { + this.props.fetchSitePlans( nextProps.selectedSite.ID ); + } }, openPlan: function( planId ) { @@ -43,7 +49,7 @@ var Plans = React.createClass( { comparePlansLink: function() { var url = '/plans/compare', - selectedSite = this.props.sites.getSelectedSite(); + selectedSite = this.props.selectedSite; if ( this.props.plans.get().length <= 0 ) { return ''; @@ -63,23 +69,24 @@ var Plans = React.createClass( { render: function() { var classNames = 'main main-column ', - selectedSiteDomain = this.props.sites.getSelectedSite().domain, - hasJpphpBundle = this.props.siteSpecificPlansDetailsList && - this.props.siteSpecificPlansDetailsList.hasJpphpBundle( selectedSiteDomain ), + hasJpphpBundle, currentPlan; - if ( config.isEnabled( 'upgrades/free-trials' ) && this.props.sitePlans.hasLoadedFromServer ) { + if ( this.props.sitePlans.hasLoadedFromServer ) { currentPlan = find( this.props.sitePlans.data, { currentPlan: true } ); + hasJpphpBundle = isJpphpBundle( currentPlan ); + } - if ( currentPlan.freeTrial ) { - return ( - - ); - } + if ( config.isEnabled( 'upgrades/free-trials' ) && + this.props.sitePlans.hasLoadedFromServer && + currentPlan.freeTrial ) { + return ( + + ); } return ( @@ -90,13 +97,13 @@ var Plans = React.createClass( { + selectedSite={ this.props.selectedSite } /> @@ -110,7 +117,7 @@ var Plans = React.createClass( { module.exports = connect( ( state, props ) => { return { - sitePlans: getPlansBySiteId( state, props.sites.getSelectedSite().ID ) + sitePlans: getPlansBySiteId( state, props.selectedSite.ID ) }; }, ( dispatch ) => { From 6f6a0af7dd59a270d911e93b141a8002566fecb8 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 15 Dec 2015 11:08:58 -0800 Subject: [PATCH 04/10] Plans: Use `sitePlans` in `PlansCompare` instead of `siteSpecificPlanDetailsList` --- .../components/plans/plan-features/index.jsx | 13 ++++--- client/components/plans/plan/index.jsx | 13 ++++--- .../components/plans/plans-compare/index.jsx | 37 +++++++++++++++---- client/my-sites/plans/controller.jsx | 19 +++++----- 4 files changed, 54 insertions(+), 28 deletions(-) diff --git a/client/components/plans/plan-features/index.jsx b/client/components/plans/plan-features/index.jsx index e580ec1ecfbd57..ec4fb071501b7a 100644 --- a/client/components/plans/plan-features/index.jsx +++ b/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.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 }
); diff --git a/client/components/plans/plan/index.jsx b/client/components/plans/plan/index.jsx index 0f025600b09a9f..88c2c604171615 100644 --- a/client/components/plans/plan/index.jsx +++ b/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() { @@ -102,7 +103,7 @@ module.exports = React.createClass( { return; } - return find( this.props.sitePlans.data, { productId: this.getProductId() } ); + return find( this.props.sitePlans.data, { productSlug: this.getProductSlug() } ); }, getPlanDiscountMessage: function() { @@ -121,7 +122,7 @@ module.exports = React.createClass( { 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 ( ); @@ -191,7 +192,7 @@ module.exports = React.createClass( { render: function() { return ( - + { this.getPlanDiscountMessage() } { this.getBadge() } diff --git a/client/components/plans/plans-compare/index.jsx b/client/components/plans/plans-compare/index.jsx index 593e89e732e4ba..481399ede97c51 100644 --- a/client/components/plans/plans-compare/index.jsx +++ b/client/components/plans/plans-compare/index.jsx @@ -2,6 +2,7 @@ * External dependencies */ var React = require( 'react' ), + connect = require( 'react-redux' ).connect, page = require( 'page' ), classNames = require( 'classnames' ), times = require( 'lodash/utility/times' ); @@ -14,19 +15,25 @@ var observe = require( 'lib/mixins/data-observe' ), PlanFeatures = require( 'components/plans/plan-features' ), PlanHeader = require( 'components/plans/plan-header' ), PlanFeatureCell = require( 'components/plans/plan-feature-cell' ), - siteSpecificPlansDetailsMixin = require( 'components/plans/site-specific-plan-details-mixin' ), analytics = require( 'analytics' ), HeaderCake = require( 'components/header-cake' ), + fetchSitePlans = require( 'state/sites/plans/actions' ).fetchSitePlans, + getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId, Card = require( 'components/card' ); -module.exports = React.createClass( { +var PlansCompare = React.createClass( { displayName: 'PlansCompare', mixins: [ - siteSpecificPlansDetailsMixin, - observe( 'sites', 'siteSpecificPlansDetailsList', 'features', 'plans' ) + observe( 'sites', 'features', 'plans' ) ], + componentWillReceiveProps: function( nextProps ) { + if ( this.props.selectedSite.ID !== nextProps.selectedSite.ID ) { + this.props.fetchSitePlans( nextProps.selectedSite.ID ); + } + }, + getDefaultProps: function() { return { isInSignup: false @@ -37,6 +44,8 @@ module.exports = React.createClass( { analytics.tracks.recordEvent( 'calypso_plans_compare', { isInSignup: this.props.isInSignup } ); + + this.props.fetchSitePlans( this.props.selectedSite.ID ); }, recordViewAllPlansClick: function() { @@ -80,7 +89,7 @@ module.exports = React.createClass( { site={ site } cart={ this.props.cart } features={ featuresList } - siteSpecificPlansDetailsList={ this.props.siteSpecificPlansDetailsList } /> + sitePlans={ this.props.sitePlans } /> ); }, this ); }, @@ -96,7 +105,7 @@ module.exports = React.createClass( { return ( showJetpackPlans === ( 'jetpack' === plan.product_type ) ); } ); - if ( this.props.features.hasLoadedFromServer() ) { + if ( this.props.features.hasLoadedFromServer() && this.props.sitePlans.hasLoadedFromServer ) { // Remove features not supported by any plan featuresList = featuresList.filter( function( feature ) { var keepFeature = false; @@ -168,5 +177,19 @@ module.exports = React.createClass( { ); } - } ); + +module.exports = connect( + ( state, props ) => { + return { + sitePlans: getPlansBySiteId( state, props.selectedSite.ID ) + }; + }, + ( dispatch ) => { + return { + fetchSitePlans( siteId ) { + dispatch( fetchSitePlans( siteId ) ); + } + }; + } +)( PlansCompare ); diff --git a/client/my-sites/plans/controller.jsx b/client/my-sites/plans/controller.jsx index 36d581191859d0..ce848fdf36e7b8 100644 --- a/client/my-sites/plans/controller.jsx +++ b/client/my-sites/plans/controller.jsx @@ -95,7 +95,6 @@ module.exports = { var PlansCompare = require( 'components/plans/plans-compare' ), Main = require( 'components/main' ), CartData = require( 'components/data/cart' ), - siteSpecificPlansDetailsList = require( 'lib/site-specific-plans-details-list' )(), features = require( 'lib/features-list' )(), productsList = require( 'lib/products-list' )(), analyticsPageTitle = 'Plans > Compare', @@ -121,14 +120,16 @@ module.exports = { ReactDom.render(
- - - + + + + +
, document.getElementById( 'primary' ) ); From 40f3fda0a9e985bedac5cc9053887dde1cd0fa52 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 15 Dec 2015 11:09:54 -0800 Subject: [PATCH 05/10] Plans: Remove `siteSpecificPlansDetailsList` and associated mixin --- .../plans/site-specific-plan-details-mixin.js | 25 --- .../README.md | 13 -- .../site-specific-plans-details-list/index.js | 152 ------------------ 3 files changed, 190 deletions(-) delete mode 100644 client/components/plans/site-specific-plan-details-mixin.js delete mode 100644 client/lib/site-specific-plans-details-list/README.md delete mode 100644 client/lib/site-specific-plans-details-list/index.js diff --git a/client/components/plans/site-specific-plan-details-mixin.js b/client/components/plans/site-specific-plan-details-mixin.js deleted file mode 100644 index f1960626a7474f..00000000000000 --- a/client/components/plans/site-specific-plan-details-mixin.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * External dependencies - */ -var debug = require( 'debug' )( 'calypso:my-sites:upgrades:plans:site-specific-plan-details-mixin' ); - -module.exports = { - componentWillMount: function() { - this.getLatestSiteSpecificPlanDetails(); - }, - - componentWillReceiveProps: function() { - this.getLatestSiteSpecificPlanDetails(); - }, - - getLatestSiteSpecificPlanDetails: function() { - var site; - if ( ! this.props.sites ) { - return; - } - - site = this.props.sites.getSelectedSite(); - this.props.siteSpecificPlansDetailsList.fetch( site.domain ); - debug( 'get latest plan details' ); - }, -}; diff --git a/client/lib/site-specific-plans-details-list/README.md b/client/lib/site-specific-plans-details-list/README.md deleted file mode 100644 index b8997907124831..00000000000000 --- a/client/lib/site-specific-plans-details-list/README.md +++ /dev/null @@ -1,13 +0,0 @@ -site-specific-plans-details-list -================================ - -`site-specific-plans-details-list` is a collection of all the site specific data for the plans users can upgrade to on WordPress.com, as returned from the `/sites/:s/plans` REST-API endpoint. It can be required into a file like: - -``` -var siteSpecificPlansDetails = require( 'lib/site-specific-plans-details-list' )(); -``` - -Currently site-specific-plans-details-list just has one public method, `get()`. - -`get( siteDomain )` -This get method take the siteDomain (or ID) as a parameter. The get request will first check for data on the object itself, and if it finds data, will return that. Otherwise it will check localStorage through `store` for a `SiteSpecificPlansDetailsList` object, and will return the data for that specific site, or an empty object if null and immediately call the fetch method. diff --git a/client/lib/site-specific-plans-details-list/index.js b/client/lib/site-specific-plans-details-list/index.js deleted file mode 100644 index e9ee2d8ebaa7dd..00000000000000 --- a/client/lib/site-specific-plans-details-list/index.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * External dependencies - */ -var debug = require( 'debug' )( 'calypso:site-specific-plans-details-list' ), - find = require( 'lodash/collection/find' ), - store = require( 'store' ); - -/** - * Internal dependencies - */ -var wpcom = require( 'lib/wp' ), - Emitter = require( 'lib/mixins/emitter' ); - -/** - * SiteSpecificPlansDetailsList component - * - * @api public - */ -function SiteSpecificPlansDetailsList() { - if ( ! ( this instanceof SiteSpecificPlansDetailsList ) ) { - return new SiteSpecificPlansDetailsList(); - } - - this.initialized = false; - this.isFetching = false; -} - -/** - * Mixins - */ -Emitter( SiteSpecificPlansDetailsList.prototype ); - -/** - * Get site specific plan data from current object or store, - * trigger fetch on first request to update stale data - */ -SiteSpecificPlansDetailsList.prototype.get = function( siteDomain, planId ) { - var localData; - if ( ! this.data ) { - debug( 'First time loading SiteSpecificPlansDetailsList, check store' ); - localData = store.get( 'SiteSpecificPlansDetailsList' ); - this.initialize( localData ); - - // Always fetch the data in case it has changed - if ( ! this.isFetching ) { - this.fetch( siteDomain ); - } - } - - if( this.data[ siteDomain ] && this.data[ siteDomain ][ planId ] ) { - return this.data[ siteDomain ][ planId ]; - } - - return {}; -}; - -SiteSpecificPlansDetailsList.prototype.hasJpphpBundle = function( siteDomain ) { - return this.get( siteDomain, 'host-bundle' ).current_plan; -}; - -SiteSpecificPlansDetailsList.prototype.getCurrentPlan = function( siteDomain ) { - return find( this.data[ siteDomain ], { current_plan: true } ); -}; - -/** - * Fetch the site specific plan data from WordPress.com via the REST API. - * - * @api public - */ -SiteSpecificPlansDetailsList.prototype.fetch = function( siteDomain ) { - debug( 'getting SiteSpecificPlansDetailsList from api' ); - - if ( ! siteDomain && ! this.isFetching ) { - return false; - } - - this.isFetching = true; - - wpcom.undocumented().getSitePlans( siteDomain, function( error, data ) { - var planData; - - if ( error ) { - debug( 'error fetching SiteSpecificPlansDetailsList from api', error ); - return; - } - - planData = this.parse( data ); - - debug( 'SiteSpecificPlansDetailsList fetched from api:', planData ); - this.update( planData, siteDomain ); - - this.emit( 'change' ); - store.set( 'SiteSpecificPlansDetailsList', this.data ); - - this.isFetching = false; - }.bind( this ) ); -}; - -/** - * Initialize data with SitePlan data - **/ -SiteSpecificPlansDetailsList.prototype.initialize = function( data ) { - if ( data ) { - this.data = data; - } else { - this.data = {}; - } - this.initialized = true; -}; - -/** - * Parse data returned from the API - * - * @param {array} data - * @return {array} plans - **/ -SiteSpecificPlansDetailsList.prototype.parse = function( data ) { - /** - * Remove the _headers - */ - delete data._headers; - return data; -}; - -/** - * Update plans list - **/ -SiteSpecificPlansDetailsList.prototype.update = function( planData, siteDomain ) { - this.data[ siteDomain ] = planData; -}; - - -/** - * Returns a Boolean indicating whether the data has initially loaded from the - * server. - */ -SiteSpecificPlansDetailsList.prototype.hasLoadedFromServer = function( siteDomain ) { - return this.initialized && this.data[ siteDomain ]; -}; - -/** - * Expose `SiteSpecificPlansDetailsList` - */ -var _SiteSpecificPlansDetailsList; -module.exports = function() { - - if ( ! _SiteSpecificPlansDetailsList ) { - _SiteSpecificPlansDetailsList = new SiteSpecificPlansDetailsList(); - } - - return _SiteSpecificPlansDetailsList; -}; From 2dd9d40da5cce70f71dadb4652fa1665397fd12c Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 15 Dec 2015 11:55:37 -0800 Subject: [PATCH 06/10] Plans: Add exceptions to `PlansList` and `PlansCompare` for signup --- .../components/plans/plan-features/index.jsx | 2 +- client/components/plans/plan-list/index.jsx | 36 ++++++++++--------- .../components/plans/plans-compare/index.jsx | 14 ++++++-- client/signup/controller.js | 21 ++++++----- 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/client/components/plans/plan-features/index.jsx b/client/components/plans/plan-features/index.jsx index ec4fb071501b7a..90a19abdfebad7 100644 --- a/client/components/plans/plan-features/index.jsx +++ b/client/components/plans/plan-features/index.jsx @@ -34,7 +34,7 @@ module.exports = React.createClass( { render: function() { var features, classes, - sitePlan = this.props.sitePlans.hasLoadedFromServer ? + sitePlan = this.props.sitePlans && this.props.sitePlans.hasLoadedFromServer ? find( this.props.sitePlans.data, { productSlug: this.props.plan.product_slug } ) : undefined; diff --git a/client/components/plans/plan-list/index.jsx b/client/components/plans/plan-list/index.jsx index 1bee28ec90ca81..0a602ad37678e8 100644 --- a/client/components/plans/plan-list/index.jsx +++ b/client/components/plans/plan-list/index.jsx @@ -27,11 +27,12 @@ module.exports = React.createClass( { render: function() { var plans = this.props.plans, showJetpackPlans = false, + isLoadingSitePlans = ! this.props.isInSignup && ! this.props.sitePlans.hasLoadedFromServer, site, plansList, currentPlan; - if ( ! this.props.sitePlans.hasLoadedFromServer ) { + if ( plans.length === 0 || isLoadingSitePlans ) { plansList = times( 3, function( n ) { return ( -

- { - this.translate( 'This plan is managed by your web host. ' + - 'Please log into your host\'s control panel to manage subscription ' + - 'and billing information.' ) - } -

- - ); + 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 = find( this.props.sitePlans.data, { currentPlan: true } ); + if ( isJpphpBundle( currentPlan ) ) { + return ( + +

+ { + this.translate( 'This plan is managed by your web host. ' + + 'Please log into your host\'s control panel to manage subscription ' + + 'and billing information.' ) + } +

+ + ); + } } if ( plans.length > 0 ) { diff --git a/client/components/plans/plans-compare/index.jsx b/client/components/plans/plans-compare/index.jsx index 481399ede97c51..ea6c00b317942b 100644 --- a/client/components/plans/plans-compare/index.jsx +++ b/client/components/plans/plans-compare/index.jsx @@ -29,7 +29,7 @@ var PlansCompare = React.createClass( { ], componentWillReceiveProps: function( nextProps ) { - if ( this.props.selectedSite.ID !== nextProps.selectedSite.ID ) { + if ( ! this.props.isInSignup && this.props.selectedSite.ID !== nextProps.selectedSite.ID ) { this.props.fetchSitePlans( nextProps.selectedSite.ID ); } }, @@ -45,7 +45,9 @@ var PlansCompare = React.createClass( { isInSignup: this.props.isInSignup } ); - this.props.fetchSitePlans( this.props.selectedSite.ID ); + if ( ! this.props.isInSignup ) { + this.props.fetchSitePlans( this.props.selectedSite.ID ); + } }, recordViewAllPlansClick: function() { @@ -105,7 +107,9 @@ var PlansCompare = React.createClass( { return ( showJetpackPlans === ( 'jetpack' === plan.product_type ) ); } ); - if ( this.props.features.hasLoadedFromServer() && this.props.sitePlans.hasLoadedFromServer ) { + if ( this.props.features.hasLoadedFromServer() && ( + this.props.isInSignup || this.props.sitePlans.hasLoadedFromServer ) + ) { // Remove features not supported by any plan featuresList = featuresList.filter( function( feature ) { var keepFeature = false; @@ -181,6 +185,10 @@ var PlansCompare = React.createClass( { module.exports = connect( ( state, props ) => { + if ( ! props.selectedSite ) { + return { sitePlans: null }; + } + return { sitePlans: getPlansBySiteId( state, props.selectedSite.ID ) }; diff --git a/client/signup/controller.js b/client/signup/controller.js index 2432190a7a857a..cf2f5580cde99d 100644 --- a/client/signup/controller.js +++ b/client/signup/controller.js @@ -3,6 +3,7 @@ */ import ReactDom from 'react-dom'; import React from 'react'; +import { Provider as ReduxProvider } from 'react-redux'; import page from 'page'; import qs from 'qs'; import isEmpty from 'lodash/lang/isEmpty'; @@ -93,15 +94,17 @@ export default { } ) ); ReactDom.render( - React.createElement( SignupComponent, { - path: context.path, - refParameter, - queryObject, - locale: utils.getLocale( context.params ), - flowName: flowName, - stepName: stepName, - stepSectionName: stepSectionName - } ), + React.createElement( ReduxProvider, { store: context.store }, + React.createElement( SignupComponent, { + path: context.path, + refParameter, + queryObject, + locale: utils.getLocale( context.params ), + flowName: flowName, + stepName: stepName, + stepSectionName: stepSectionName + } ) + ), document.getElementById( 'primary' ) ); }, From 497b6929042ec055563934baf6d644838bac8b72 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Mon, 21 Dec 2015 10:23:30 -0800 Subject: [PATCH 07/10] Plans: Add `getCurrentPlan` function to `lib/plans` --- client/components/plans/plan-list/index.jsx | 12 ++++++------ client/lib/plans/index.js | 5 +++++ client/my-sites/plans/main.jsx | 6 +++--- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/client/components/plans/plan-list/index.jsx b/client/components/plans/plan-list/index.jsx index 0a602ad37678e8..4b14c285818664 100644 --- a/client/components/plans/plan-list/index.jsx +++ b/client/components/plans/plan-list/index.jsx @@ -2,8 +2,7 @@ * External dependencies */ var React = require( 'react/addons' ), - times = require( 'lodash/utility/times' ), - find = require( 'lodash/collection/find' ); + times = require( 'lodash/utility/times' ); /** * Internal dependencies @@ -11,7 +10,8 @@ var React = require( 'react/addons' ), var Plan = require( 'components/plans/plan' ), Card = require( 'components/card' ), abtest = require( 'lib/abtest' ).abtest, - isJpphpBundle = require( 'lib/products-values' ).isJpphpBundle; + isJpphpBundle = require( 'lib/products-values' ).isJpphpBundle, + getCurrentPlan = require( 'lib/plans' ).getCurrentPlan; module.exports = React.createClass( { displayName: 'PlanList', @@ -37,7 +37,7 @@ module.exports = React.createClass( { return ( + key={ `plan-${ n }` } /> ); }, this ); @@ -54,7 +54,7 @@ module.exports = React.createClass( { 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 = find( this.props.sitePlans.data, { currentPlan: true } ); + currentPlan = getCurrentPlan( this.props.sitePlans.data ); if ( isJpphpBundle( currentPlan ) ) { return ( @@ -96,7 +96,7 @@ module.exports = React.createClass( { return ( + key={ `plan-${ n }` } /> ); }, this ); } diff --git a/client/lib/plans/index.js b/client/lib/plans/index.js index 95d64a9180f838..4e012bb50635a8 100644 --- a/client/lib/plans/index.js +++ b/client/lib/plans/index.js @@ -1,8 +1,13 @@ /** * External dependencies */ +import find from 'lodash/collection/find'; import moment from 'moment'; +export function getCurrentPlan( plans ) { + return find( plans, { currentPlan: true } ); +} + export function getCurrentTrialPeriodInDays( plan ) { const { expiryMoment, subscribedMoment, userFacingExpiryMoment } = plan; diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index ae6dc6be1a7284..64fc7ebb7de74f 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -2,8 +2,7 @@ * External dependencies */ var React = require( 'react/addons' ), - connect = require( 'react-redux' ).connect, - find = require( 'lodash/collection/find' ); + connect = require( 'react-redux' ).connect; /** * Internal dependencies @@ -18,6 +17,7 @@ var analytics = require( 'analytics' ), Gridicon = require( 'components/gridicon' ), fetchSitePlans = require( 'state/sites/plans/actions' ).fetchSitePlans, getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId, + getCurrentPlan = require( 'lib/plans' ).getCurrentPlan, isJpphpBundle = require( 'lib/products-values' ).isJpphpBundle; var Plans = React.createClass( { @@ -73,7 +73,7 @@ var Plans = React.createClass( { currentPlan; if ( this.props.sitePlans.hasLoadedFromServer ) { - currentPlan = find( this.props.sitePlans.data, { currentPlan: true } ); + currentPlan = getCurrentPlan( this.props.sitePlans.data ); hasJpphpBundle = isJpphpBundle( currentPlan ); } From 3791d64dc1c21ff314a2024e39cfe289bf21eb68 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 22 Dec 2015 09:56:25 -0800 Subject: [PATCH 08/10] Plans: Merge changes to site-plans assembler from #1780 --- .../assembler.js | 27 ------------------- client/state/sites/plans/assembler.js | 12 ++++----- 2 files changed, 6 insertions(+), 33 deletions(-) delete mode 100644 client/lib/site-specific-plans-details-list/assembler.js diff --git a/client/lib/site-specific-plans-details-list/assembler.js b/client/lib/site-specific-plans-details-list/assembler.js deleted file mode 100644 index c51de52d7252c1..00000000000000 --- a/client/lib/site-specific-plans-details-list/assembler.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Internal dependencies - */ -import moment from 'moment'; - -function createSiteSpecificPlanObject( plan ) { - return { - canStartTrial: Boolean( plan.can_start_trial ), - currentPlan: Boolean( plan.current_plan ), - expiry: plan.expiry, - expiryMoment: moment( plan.expiry ).startOf( 'day' ), - formattedDiscount: plan.formatted_discount, - formattedPrice: plan.formatted_price, - freeTrial: Boolean( plan.free_trial ), - id: Number( plan.id ), - productName: plan.product_name, - productSlug: plan.product_slug, - rawDiscount: plan.raw_discount, - rawPrice: plan.raw_price, - subscribedDate: plan.subscribed_date, - subscribedMoment: moment( plan.subscribed_date ).startOf( 'day' ), - userFacingExpiry: plan.user_facing_expiry, - userFacingExpiryMoment: moment( plan.user_facing_expiry ).startOf( 'day' ) - } -} - -export default { createSiteSpecificPlanObject }; diff --git a/client/state/sites/plans/assembler.js b/client/state/sites/plans/assembler.js index 6d6bbdb05a9f10..37a81ed0a81c20 100644 --- a/client/state/sites/plans/assembler.js +++ b/client/state/sites/plans/assembler.js @@ -7,8 +7,8 @@ const createSitePlanObject = ( plan ) => { return { canStartTrial: Boolean( plan.can_start_trial ), currentPlan: Boolean( plan.current_plan ), - expiry: plan.current_plan ? plan.expiry : null, - expiryMoment: plan.current_plan ? moment( plan.expiry ) : null, + expiry: plan.expiry, + expiryMoment: moment( plan.expiry ).startOf( 'day' ), formattedDiscount: plan.formatted_discount, formattedPrice: plan.formatted_price, freeTrial: Boolean( plan.free_trial ), @@ -17,10 +17,10 @@ const createSitePlanObject = ( plan ) => { productSlug: plan.product_slug, rawDiscount: plan.raw_discount, rawPrice: plan.raw_price, - subscribedDate: plan.current_plan ? plan.subscribed_date : null, - subscribedMoment: plan.current_plan ? moment( plan.subscribed_date ) : null, - userFacingExpiry: plan.current_plan ? plan.user_facing_expiry : null, - userFacingExpiryMoment: plan.current_plan ? moment( plan.user_facing_expiry ).add( { day: 1 } ) : null + subscribedDate: plan.subscribed_date, + subscribedMoment: moment( plan.subscribed_date ).startOf( 'day' ), + userFacingExpiry: plan.user_facing_expiry, + userFacingExpiryMoment: moment( plan.user_facing_expiry ).startOf( 'day' ) }; }; From 07edc2d952b8eb9db49762fae8f20825eddf447a Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Tue, 22 Dec 2015 10:32:12 -0800 Subject: [PATCH 09/10] =?UTF-8?q?Plans:=20`subscribedMoment`=20=E2=86=92?= =?UTF-8?q?=20`subscribedDayMoment`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @Tug pointed out that we should indicate the disparity between `subscribedDate` and `subscribedMoment` here, because the latter is set to the start of the day. --- client/lib/plans/index.js | 4 ++-- client/state/sites/plans/README.md | 2 +- client/state/sites/plans/assembler.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/lib/plans/index.js b/client/lib/plans/index.js index 4e012bb50635a8..f64ee6af81c79f 100644 --- a/client/lib/plans/index.js +++ b/client/lib/plans/index.js @@ -9,13 +9,13 @@ export function getCurrentPlan( plans ) { } export function getCurrentTrialPeriodInDays( plan ) { - const { expiryMoment, subscribedMoment, userFacingExpiryMoment } = plan; + const { expiryMoment, subscribedDayMoment, userFacingExpiryMoment } = plan; if ( isInGracePeriod( plan ) ) { return expiryMoment.diff( userFacingExpiryMoment, 'days' ); } - return userFacingExpiryMoment.diff( subscribedMoment, 'days' ); + return userFacingExpiryMoment.diff( subscribedDayMoment, 'days' ); }; export function getDaysUntilUserFacingExpiry( plan ) { diff --git a/client/state/sites/plans/README.md b/client/state/sites/plans/README.md index 1980574b2f0aba..bb377fde453594 100644 --- a/client/state/sites/plans/README.md +++ b/client/state/sites/plans/README.md @@ -41,7 +41,7 @@ state.sites.plans = { rawDiscount: Number, rawPrice: Number, subscribedDate: String, - subscribedMoment: Moment, + subscribedDayMoment: Moment, userFacingExpiry: String, userFacingExpiryMoment: Moment }, diff --git a/client/state/sites/plans/assembler.js b/client/state/sites/plans/assembler.js index 37a81ed0a81c20..554b1144ee820b 100644 --- a/client/state/sites/plans/assembler.js +++ b/client/state/sites/plans/assembler.js @@ -18,7 +18,7 @@ const createSitePlanObject = ( plan ) => { rawDiscount: plan.raw_discount, rawPrice: plan.raw_price, subscribedDate: plan.subscribed_date, - subscribedMoment: moment( plan.subscribed_date ).startOf( 'day' ), + subscribedDayMoment: moment( plan.subscribed_date ).startOf( 'day' ), userFacingExpiry: plan.user_facing_expiry, userFacingExpiryMoment: moment( plan.user_facing_expiry ).startOf( 'day' ) }; From 54fad5542bb688300193ef9c41d6ba1c4b51c15d Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 23 Dec 2015 11:06:21 +0100 Subject: [PATCH 10/10] Free Trials: Use named functions for redux-react's connect calls --- client/components/plans/plans-compare/index.jsx | 4 ++-- client/my-sites/plans/main.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/components/plans/plans-compare/index.jsx b/client/components/plans/plans-compare/index.jsx index ea6c00b317942b..09873513f24d1f 100644 --- a/client/components/plans/plans-compare/index.jsx +++ b/client/components/plans/plans-compare/index.jsx @@ -184,7 +184,7 @@ var PlansCompare = React.createClass( { } ); module.exports = connect( - ( state, props ) => { + function mapStateToProps( state, props ) { if ( ! props.selectedSite ) { return { sitePlans: null }; } @@ -193,7 +193,7 @@ module.exports = connect( sitePlans: getPlansBySiteId( state, props.selectedSite.ID ) }; }, - ( dispatch ) => { + function mapDispatchToProps( dispatch ) { return { fetchSitePlans( siteId ) { dispatch( fetchSitePlans( siteId ) ); diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 64fc7ebb7de74f..fcaaf83febb71b 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -115,12 +115,12 @@ var Plans = React.createClass( { } ); module.exports = connect( - ( state, props ) => { + function mapStateToProps( state, props ) { return { sitePlans: getPlansBySiteId( state, props.selectedSite.ID ) }; }, - ( dispatch ) => { + function mapDispatchToProps( dispatch ) { return { fetchSitePlans( siteId ) { dispatch( fetchSitePlans( siteId ) );