diff --git a/client/components/plans/plan-actions/index.jsx b/client/components/plans/plan-actions/index.jsx index 2150da89de6308..3e7b04df55bd96 100644 --- a/client/components/plans/plan-actions/index.jsx +++ b/client/components/plans/plan-actions/index.jsx @@ -7,7 +7,8 @@ var React = require( 'react' ), /** * Internal dependencies */ -var analytics = require( 'analytics' ), +var abtest = require( 'lib/abtest' ).abtest, + analytics = require( 'analytics' ), config = require( 'config' ), productsValues = require( 'lib/products-values' ), isFreePlan = productsValues.isFreePlan, @@ -253,7 +254,7 @@ module.exports = React.createClass( { }, freePlanExpiration: function() { - if ( ! this.planHasCost() ) { + if ( ! this.planHasCost() && abtest( 'plansFeatureList' ) !== 'list' ) { return ( { this.translate( 'Never expires', { context: 'Expiration info for free plan in /plans/' } ) } ); diff --git a/client/components/plans/plan/index.jsx b/client/components/plans/plan/index.jsx index 0c664f8ea45118..d74d6f47aa2816 100644 --- a/client/components/plans/plan/index.jsx +++ b/client/components/plans/plan/index.jsx @@ -8,7 +8,9 @@ var React = require( 'react' ), /** * Internal dependencies */ -var analytics = require( 'analytics' ), +var abtest = require( 'lib/abtest' ).abtest, + analytics = require( 'analytics' ), + testFeatures = require( 'lib/features-list/test-features' ), Gridicon = require( 'components/gridicon' ), PlanActions = require( 'components/plans/plan-actions' ), PlanHeader = require( 'components/plans/plan-header' ), @@ -60,6 +62,29 @@ module.exports = React.createClass( { ); }, + getFeatureList: function() { + var features; + + if ( this.isPlaceholder() ) { + return; + } + + features = testFeatures[ this.props.plan.product_slug ].map( function( feature, i ) { + var classes = classNames( 'plan__feature', { + 'is-plan-specific': feature.planSpecific + } ); + + return ( +
  • + + { feature.text } +
  • + ); + } ); + + return ; + }, + showDetails: function() { if ( 'function' === typeof ( this.props.onOpen ) ) { this.props.onOpen( this.props.plan.product_id ); @@ -205,7 +230,7 @@ module.exports = React.createClass( {
    - { this.getDescription() } + { abtest( 'plansFeatureList' ) === 'list' ? this.getFeatureList() : this.getDescription() }
    { this.getPlanActions() }
    diff --git a/client/components/plans/plan/style.scss b/client/components/plans/plan/style.scss index 0e760cbec6fc7e..fdebe868080011 100644 --- a/client/components/plans/plan/style.scss +++ b/client/components/plans/plan/style.scss @@ -59,13 +59,8 @@ li { font-size: 13px; - padding: 3px 0; + padding: 5px 0 5px 14px; opacity: .8; - - &:before { - @include noticon( '\f418', 16px ); - vertical-align: middle; - } } } @@ -154,3 +149,18 @@ @include plans-in-three-columns(); } } + +.plan__feature { + padding-left: 10px; + + &.is-plan-specific { + font-weight: bold; + } +} + +.plan__features .gridicon { + margin-left: -12px; + position: relative; + left: -5px; + top: 2px; +} diff --git a/client/lib/abtest/active-tests.js b/client/lib/abtest/active-tests.js index 069323b092186e..4fcd25e6e68199 100644 --- a/client/lib/abtest/active-tests.js +++ b/client/lib/abtest/active-tests.js @@ -77,4 +77,12 @@ module.exports = { }, defaultVariation: 'add' }, + plansFeatureList: { + datestamp: '20040202', + variations: { + list: 50, + description: 50 + }, + defaultVariation: 'description' + } }; diff --git a/client/lib/features-list/test-features.js b/client/lib/features-list/test-features.js new file mode 100644 index 00000000000000..71401377d83b35 --- /dev/null +++ b/client/lib/features-list/test-features.js @@ -0,0 +1,95 @@ +/** + * A list of features to a/b test on the `Plans` component. + * NOTE: If this test variation becomes the default, these will need to + * be translated and returned by the API. + */ +const features = { + free_plan: [ + { + text: 'A WordPress.com Site loaded with powerful features', + planSpecific: false + }, + { + text: '3GB Storage Space', + planSpecific: false + }, + { + text: 'Support from the WordPress.com community', + planSpecific: false + }, + ], + value_bundle: [ + { + text: 'A WordPress.com Site', + planSpecific: false + }, + { + text: '13GB Storage Space', + planSpecific: true + }, + { + text: 'Custom Site Address', + planSpecific: true + }, + { + text: 'No Ads', + planSpecific: true + }, + { + text: 'Custom Design', + planSpecific: true + }, + { + text: 'Video Hosting & Storage', + planSpecific: true + }, + { + text: 'Direct Email Support', + planSpecific: true + }, + ], + 'business-bundle': [ + { + text: 'A WordPress.com Site', + planSpecific: false + }, + { + text: 'Unlimited Storage Space', + planSpecific: true + }, + { + text: 'Custom Site Address', + planSpecific: false + }, + { + text: 'No Ads', + planSpecific: false + }, + { + text: 'Custom Design', + planSpecific: false + }, + { + text: 'Video Hosting & Storage', + planSpecific: false + }, + { + text: 'eCommerce', + planSpecific: true + }, + { + text: 'Unlimited Premium Themes', + planSpecific: true + }, + { + text: 'Google Analytics', + planSpecific: true + }, + { + text: 'Live Chat Support', + planSpecific: true + }, + ] +}; + +export default features;