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;