Free Trials: Add CartTrialAd to PopoverCart

Fixes #1119.

client/lib/plans/index.js

@@ -18,6 +18,12 @@ export function getCurrentTrialPeriodInDays( plan ) {
 	return userFacingExpiryMoment.diff( subscribedDayMoment, 'days' );
 };
 
+export function getDaysSinceTrialStarted( plan ) {
+	const { subscribedDayMoment } = plan;
+
+	return moment().startOf( 'day' ).diff( subscribedDayMoment, 'days' );
+};
+
 export function getDaysUntilUserFacingExpiry( plan ) {
 	const { userFacingExpiryMoment } = plan;
 

client/my-sites/upgrades/cart/cart-trial-ad.jsx

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import page from 'page';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { cartItems } from 'lib/cart-values';
+import { getCurrentPlan, getDaysSinceTrialStarted } from 'lib/plans';
+import i18n from 'lib/mixins/i18n';
+import { addItem } from 'lib/upgrades/actions';
+
+const CartTrialAd = ( { cart, sitePlans, selectedSite } ) => {
+	function addToCartAndRedirect( event ) {
+		event.preventDefault();
+
+		addItem( cartItems.planItem( getCurrentPlan( sitePlans.data ).productSlug ) );
+
+		page( `/checkout/${ selectedSite.slug }` );
+	}
+
+	const isDataLoading = ! sitePlans.hasLoadedFromServer || ! cart.hasLoadedFromServer,
+		currentPlan = getCurrentPlan( sitePlans.data );
+
+	if ( isDataLoading ||
+		! currentPlan.freeTrial ||
+		cartItems.getDomainRegistrations( cart ).length !== 1 ) {
+		// we return `<noscript />` here because we can't return null in a stateless component
+		// see https://github.com/facebook/react/issues/5355#issuecomment-152949327
+		return <noscript />;
+	}
+
+	return (
+		<div className="popover-cart__cart-trial-ad">
+			{
+				i18n.translate( 'You are currently on day %(days)d of your {{strong}}%(planName)s trial{{/strong}}.', {
+					components: { strong: <strong /> },
+					args: {
+						days: getDaysSinceTrialStarted( currentPlan ),
+						planName: currentPlan.productName
+					}
+				} )
+			}
+			{ ' ' }
+			{
+				i18n.translate( 'Get this domain for free when you upgrade.' )
+			}
+			{ ' ' }
+			<a href="#" onClick={ addToCartAndRedirect }>{ i18n.translate( 'Upgrade Now' ) }</a>
+		</div>
+	);
+};
+
+export default CartTrialAd;

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
+	connect = require( 'react-redux' ).connect,
 	reject = require( 'lodash/collection/reject' ),
 	classNames = require( 'classnames' );
 
@@ -14,8 +15,10 @@ var CartBody = require( './cart-body' ),
 	Popover = require( 'components/popover' ),
 	CartEmpty = require( './cart-empty' ),
 	CartPlanAd = require( './cart-plan-ad' ),
+	CartTrialAd = require( './cart-trial-ad' ),
 	isCredits = require( 'lib/products-values' ).isCredits,
-	Gridicon = require( 'components/gridicon' );
+	Gridicon = require( 'components/gridicon' ),
+	getPlansBySiteId = require( 'state/sites/plans/selectors' ).getPlansBySiteId;
 
 var PopoverCart = React.createClass( {
 	propTypes: {
@@ -108,6 +111,7 @@ var PopoverCart = React.createClass( {
 
 		return (
 			<div>
+				<CartTrialAd cart={ this.props.cart } sitePlans={ this.props.sitePlans } selectedSite={ this.props.selectedSite } />
 				<CartPlanAd cart={ this.props.cart } selectedSite={ this.props.selectedSite } />
 
 				<CartBody
@@ -140,4 +144,10 @@ var PopoverCart = React.createClass( {
 	}
 } );
 
-module.exports = PopoverCart;
+module.exports = connect(
+	( state, props ) => {
+		return {
+			sitePlans: getPlansBySiteId( state, props.selectedSite.ID )
+		};
+	}
+)( PopoverCart );

client/my-sites/upgrades/cart/style.scss

@@ -139,7 +139,8 @@
 	font-size: 14px;
 }
 
-.cart-plan-ad {
+.cart-plan-ad,
+.popover-cart__cart-trial-ad {
 	background: lighten( $gray, 34% );
 	border: 1px solid lighten( $gray, 30% );
 	border-radius: 4px;

client/my-sites/upgrades/controller.jsx

@@ -54,7 +54,7 @@ module.exports = {
 
 		analytics.pageView.record( basePath, 'Domain Search > Domain Registration' );
 
-		ReactDom.render(
+		renderWithReduxStore(
 			(
 				<CartData>
 					<DomainSearch
@@ -64,7 +64,8 @@ module.exports = {
 						productsList={ productsList } />
 				</CartData>
 			),
-			document.getElementById( 'primary' )
+			document.getElementById( 'primary' ),
+			context.store
 		);
 	},
 

client/my-sites/upgrades/domain-management/controller.jsx

@@ -19,6 +19,7 @@ import NameserversData from 'components/data/domain-management/nameservers';
 import paths from 'my-sites/upgrades/paths';
 import PrimaryDomainData from 'components/data/domain-management/primary-domain';
 import ProductsList from 'lib/products-list';
+import { renderWithReduxStore } from 'lib/react-helpers';
 import SiteRedirectData from 'components/data/domain-management/site-redirect';
 import SitesList from 'lib/sites-list';
 import TransferData from 'components/data/domain-management/transfer';
@@ -54,12 +55,14 @@ module.exports = {
 			'Domain Management'
 		);
 
-		renderPage(
+		renderWithReduxStore(
 			<DomainManagementData
 				component={ DomainManagement.List }
 				context={ context }
 				productsList={ productsList }
-				sites={ sites } />
+				sites={ sites } />,
+			document.getElementById( 'primary' ),
+			context.store
 		);
 	},
 
@@ -157,13 +160,15 @@ module.exports = {
 			'Domain Management › Email'
 		);
 
-		renderPage(
+		renderWithReduxStore(
 			<EmailData
 				component={ DomainManagement.Email }
 				productsList={ productsList }
 				selectedDomainName={ context.params.domain }
 				context={ context }
-				sites={ sites } />
+				sites={ sites } />,
+			document.getElementById( 'primary' ),
+			context.store
 		);
 	},