Merge pull request #632 from Automattic/add/no-cc-free-trials

Upgrades: No Credit Card Free Trials

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

@@ -9,6 +9,7 @@ var React = require( 'react' ),
  */
 var analytics = require( 'analytics' ),
 	productsValues = require( 'lib/products-values' ),
+	config = require( 'config' ),
 	isFreePlan = productsValues.isFreePlan,
 	isBusiness = productsValues.isBusiness,
 	isEnterprise = productsValues.isEnterprise,
@@ -50,15 +51,15 @@ module.exports = React.createClass( {
 			return null;
 		}
 
-		const canStartTrial = this.props.siteSpecificPlansDetails.can_start_trial;
+		const canStartTrial = config.isEnabled( 'upgrades/free-trials' ) ? this.props.siteSpecificPlansDetails.can_start_trial : false;
 
 		return canStartTrial ? this.newPlanActions() : this.upgradeActions();
 	},
 
 	upgradeActions: function() {
 		return (
 			<div>
-				<button className='button is-primary plan-actions__upgrade-button'
+				<button className="button is-primary plan-actions__upgrade-button"
 					onClick={ this.handleAddToCart.bind( null, this.cartItem( { isFreeTrial: false } ), 'button' ) }>
 					{ this.translate( 'Upgrade Now' ) }
 				</button>
@@ -159,9 +160,18 @@ module.exports = React.createClass( {
 		return (
 			<div>
 				<button className="button is-primary plan-actions__upgrade-button"
-					onClick={ this.handleAddToCart.bind( null, this.cartItem( { isFreeTrial: false } ), 'button' ) }>
-						{ this.translate( 'Upgrade Now', { context: 'Store action' } ) }
+					onClick={ this.handleAddToCart.bind( null, this.cartItem( { isFreeTrial: true } ), 'button' ) }>
+						{ this.translate( 'Start Free Trial', { context: 'Store action' } ) }
 				</button>
+
+				<small className="plan-actions__trial-period">
+					{ this.translate( 'Try it free for 14 days, no credit card needed, or {{a}}upgrade now{{/a}}.', {
+						context: 'Store action',
+						components: {
+							a: <a href="#"
+								onClick={ this.handleAddToCart.bind( null, this.cartItem( { isFreeTrial: false } ), 'link' ) } />
+						} } ) }
+				</small>
 			</div>
 		);
 	},
@@ -191,7 +201,7 @@ module.exports = React.createClass( {
 	},
 
 	freePlanExpiration: function() {
-		if ( ! this.planHasCost() ) {
+		if ( config.isEnabled( 'upgrades/free-trials' ) && ! this.planHasCost() ) {
 			return (
 				<span className="plan-actions__plan-expiration">{ this.translate( 'Never expires', { context: 'Expiration info for free plan in /plans/' } ) }</span>
 			);
@@ -210,7 +220,7 @@ module.exports = React.createClass( {
 				strong: <strong />,
 				link: <a href='#'
 					className="plan-actions__trial-upgrade-now"
-					onClick={ this.recordUpgradeTrialNowClick.bind( null, this.cartItem( { isFreeTrial: false } ), 'link' ) } />
+					onClick={ this.handleAddToCart.bind( null, this.cartItem( { isFreeTrial: false } ), 'link' ) } />
 			},
 			hint;
 
@@ -249,6 +259,7 @@ module.exports = React.createClass( {
 			<div>
 				<span className="plan-actions__current-plan-label" onClick={ this.recordCurrentPlanClick }>
 				{ this.translate( 'Your current plan', { context: 'Informing the user of their current plan on /plans/' } ) }</span>
+				{ this.freePlanExpiration() }
 			</div>
 		);
 	},

client/components/plans/plan-actions/style.scss

@@ -29,11 +29,16 @@
 	text-align: center;
 	line-height: 16px;
 	display: block;
-	padding: 5px 10px;
+	padding: 5px 10px 0 5px;
 	color: $gray-dark;
 	opacity: .8;
 }
 
+.plan-actions__plan-expiration,
+.plan-actions__trial-period {
+	height: 40px;
+}
+
 .plan-actions.is-placeholder {
 	.plan-actions__upgrade-button {
 		@include placeholder( 23% );

client/my-sites/upgrades/cart/cart-item.jsx

@@ -72,8 +72,7 @@ module.exports = React.createClass( {
 
 		return (
 			<span>
-				{ freeTrialText }<br />
-				{ renewalPrice }
+				{ freeTrialText }
 			</span>
 		);
 	},

client/my-sites/upgrades/checkout/free-trial-confirmation-box.js

@@ -0,0 +1,57 @@
+
+/**
+ * External dependencies
+ */
+var React = require( 'react' ),
+	classNames = require( 'classnames' );
+
+/**
+ * Internal dependencies
+ */
+var PayButton = require( './pay-button' ),
+	PaymentBox = require( './payment-box' ),
+	TermsOfService = require( './terms-of-service' );
+
+var FreeTrialConfirmationBox = React.createClass( {
+	content: function() {
+		return (
+			<form onSubmit={ this.props.onSubmit }>
+				<div className="payment-box-section">
+					<h6>
+					{
+						this.translate( 'Get started with %(productName)s', { args: { productName: this.props.cart.products[0].product_name } } )
+					}
+					</h6>
+
+					<span>
+					{
+						this.translate( 'Enjoy your free trial with no strings attached: your site will simply revert to the free plan when the period is over.' )
+					}
+					</span>
+				</div>
+
+				<TermsOfService />
+				<div className="payment-box-actions">
+					<PayButton
+						cart={ this.props.cart }
+						transactionStep={ this.props.transactionStep } />
+				</div>
+			</form>
+		);
+	},
+
+	render: function() {
+		var classSet = classNames( {
+			'credits-payment-box': true,
+			selected: this.props.selected === true
+		} );
+
+		return (
+			<PaymentBox classSet={ classSet }>
+				{ this.content() }
+			</PaymentBox>
+		);
+	}
+} );
+
+module.exports = FreeTrialConfirmationBox;

client/my-sites/upgrades/checkout/pay-button.jsx

@@ -8,6 +8,7 @@ var React = require( 'react' );
  */
 var cartValues = require( 'lib/cart-values' ),
 	cartItems = cartValues.cartItems,
+	hasFreeTrial = cartItems.hasFreeTrial,
 	isPaidForFullyInCredits = cartValues.isPaidForFullyInCredits,
 	SubscriptionText = require( './subscription-text' );
 
@@ -112,9 +113,15 @@ var PayButton = React.createClass( {
 	},
 
 	completing: function() {
+		var text;
+		if ( hasFreeTrial( this.props.cart ) ) {
+			text = this.translate( 'Starting your free trial…', { context: 'Loading state on /checkout' } )
+		} else {
+			text = this.translate( 'Completing your purchase', { context: 'Loading state on /checkout' } )
+		}
 		return {
 			disabled: true,
-			text: this.translate( 'Completing your purchase', { context: 'Loading state on /checkout' } )
+			text: text
 		};
 	},
 

client/my-sites/upgrades/checkout/secure-payment-form.jsx

@@ -7,6 +7,7 @@ var React = require( 'react/addons' );
  * Internal dependencies
  */
 var CreditCardPaymentBox = require( './credit-card-payment-box' ),
+	FreeTrialConfirmationBox = require( './free-trial-confirmation-box' ),
 	PayPalPaymentBox = require( './paypal-payment-box' ),
 	CreditsPaymentBox = require( './credits-payment-box' ),
 	FreeCartPaymentBox = require( './free-cart-payment-box' ),
@@ -16,6 +17,7 @@ var CreditCardPaymentBox = require( './credit-card-payment-box' ),
 	cartValues = require( 'lib/cart-values' ),
 	isPaidForFullyInCredits = cartValues.isPaidForFullyInCredits,
 	isFree = cartValues.isFree,
+	hasFreeTrial = cartValues.cartItems.hasFreeTrial,
 	countriesList = require( 'lib/countries-list' ).forPayments(),
 	analytics = require( 'analytics' ),
 	TransactionStepsMixin = require( './transaction-steps-mixin' ),
@@ -43,6 +45,8 @@ var SecurePaymentForm = React.createClass( {
 			return 'credits';
 		} else if ( isFree( cart ) ) {
 			return 'free-cart';
+		} else if ( hasFreeTrial( cart ) ) {
+			return 'free-trial';
 		} else if ( this.state && this.state.userSelectedPaymentBox ) {
 			return this.state.userSelectedPaymentBox;
 		} else {
@@ -78,6 +82,12 @@ var SecurePaymentForm = React.createClass( {
 					onSubmit={ this.handlePaymentBoxSubmit }
 					transactionStep={ this.props.transaction.step } />
 
+				<FreeTrialConfirmationBox
+					cart={ this.props.cart }
+					selected={ this.state.visiblePaymentBox === 'free-trial' }
+					onSubmit={ this.handlePaymentBoxSubmit }
+					transactionStep={ this.props.transaction.step } />
+
 				<FreeCartPaymentBox
 					cart={ this.props.cart }
 					selected={ this.state.visiblePaymentBox === 'free-cart' }
@@ -131,6 +141,7 @@ var SecurePaymentForm = React.createClass( {
 
 		switch ( this.state.visiblePaymentBox ) {
 			case 'credits':
+			case 'free-trial':
 			case 'free-cart':
 				// FIXME: The endpoint doesn't currently support transactions with no
 				//   payment info, so for now we rely on the credits payment method for

client/my-sites/upgrades/checkout/supporting-text.jsx

@@ -7,22 +7,17 @@ var React = require( 'react' );
  */
 var cartValues = require( 'lib/cart-values' ),
 	getRefundPolicy = cartValues.getRefundPolicy,
-	cartItems = cartValues.cartItems;
+	cartItems = cartValues.cartItems,
+	hasFreeTrial = cartItems.hasFreeTrial;
 
 var SupportingText = React.createClass( {
 
 	creditCardSupportingText: function() {
-		var cart = this.props.cart,
-			title,
+		var title,
 			content;
 
-		if ( cartItems.hasFreeTrial( cart ) ) {
-			title = this.translate( 'Why do you need my credit card?' );
-			content = this.translate( 'You will only be charged at the end of the trial. Cancel any time before then and pay nothing.' );
-		} else {
-			title = this.translate( 'Easy Refunds' );
-			content = this.refundText();
-		}
+		title = this.translate( 'Easy Refunds' );
+		content = this.refundText();
 
 		return this.supportingTextBox( 'credit-card-supporting-text', title, content );
 	},
@@ -75,12 +70,13 @@ var SupportingText = React.createClass( {
 	},
 
 	render: function() {
-		return (
-			<ul className="supporting-text">
-				{ this.creditCardSupportingText() }
-				{ this.liveChatSupportingText() }
-			</ul>
-		);
+		return hasFreeTrial( this.props.cart )
+		? null : (
+				<ul className="supporting-text">
+					{ this.creditCardSupportingText() }
+					{ this.liveChatSupportingText() }
+				</ul>
+			);
 	}
 
 } );