Merge pull request #2924 from Automattic/add/plans-features-list-test

Plans: A/B test displaying a feature list vs. description in `Plan`

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 (
 				<span className="plan-actions__plan-expiration">{ this.translate( 'Never expires', { context: 'Expiration info for free plan in /plans/' } ) }</span>
 			);

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' ),
 	JetpackPlanDetails = require( 'my-sites/plans/jetpack-plan-details' ),
 	PlanActions = require( 'components/plans/plan-actions' ),
@@ -68,6 +70,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 (
+				<li className={ classes } key={ i }>
+					<Gridicon icon="checkmark" size={ 12 } />
+					{ feature.text }
+				</li>
+			);
+		} );
+
+		return <ul className="plan__features">{ features }</ul>;
+	},
+
 	showDetails: function() {
 		if ( 'function' === typeof ( this.props.onOpen ) ) {
 			this.props.onOpen( this.props.plan.product_id );
@@ -213,7 +238,7 @@ module.exports = React.createClass( {
 				</PlanHeader>
 				<div className="plan__plan-expand">
 					<div className="plan__plan-details">
-						{ this.getDescription() }
+						{ abtest( 'plansFeatureList' ) === 'list' ? this.getFeatureList() : this.getDescription() }
 					</div>
 					{ this.getPlanActions() }
 				</div>

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;
-			}
 		}
 	}
 
@@ -158,3 +153,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;
+}

client/lib/abtest/active-tests.js

@@ -94,4 +94,12 @@ module.exports = {
 		},
 		defaultVariation: 'add'
 	},
+	plansFeatureList: {
+		datestamp: '20040202',
+		variations: {
+			list: 50,
+			description: 50
+		},
+		defaultVariation: 'description'
+	}
 };

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;