Domains: show info notice when user has domain credit

client/lib/abtest/active-tests.js

@@ -82,4 +82,14 @@ module.exports = {
 		defaultVariation: 'original',
 		allowExistingUsers: true,
 	},
+	domainCreditsInfoNotice: {
+		datestamp: '20160420',
+		variations: {
+			showNotice: 90,
+			original: 10
+		},
+		defaultVariation: 'showNotice',
+		allowExistingUsers: true,
+		allowAnyLocale: true
+	}
 };

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

@@ -49,7 +49,7 @@ module.exports = {
 
 		renderWithReduxStore(
 			<DomainManagementData
-				component={ DomainManagement.List }
+				component={ DomainManagement.List.default }
 				context={ pageContext }
 				productsList={ productsList }
 				sites={ sites } />,

client/my-sites/upgrades/domain-management/list/index.jsx

@@ -5,6 +5,7 @@ import page from 'page';
 import React from 'react';
 import times from 'lodash/times';
 import findIndex from 'lodash/findIndex';
+import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
@@ -29,8 +30,14 @@ import {
 	PRIMARY_DOMAIN_REVERT_FAIL,
 	PRIMARY_DOMAIN_REVERT_SUCCESS
 } from './constants';
-
-const List = React.createClass( {
+import Notice from 'components/notice';
+import NoticeAction from 'components/notice/notice-action';
+import { hasDomainCredit } from 'state/sites/plans/selectors';
+import TrackComponentView from 'lib/analytics/track-component-view';
+import { recordTracksEvent } from 'state/analytics/actions';
+import { abtest } from 'lib/abtest';
+
+export const List = React.createClass( {
 	mixins: [ analyticsMixin( 'domainManagement', 'list' ) ],
 
 	getInitialState() {
@@ -50,6 +57,36 @@ const List = React.createClass( {
 		}
 	},
 
+	domainCreditsInfoNotice() {
+		if ( ! this.props.hasDomainCredit ) {
+			return null;
+		}
+
+		if ( abtest( 'domainCreditsInfoNotice' ) === 'showNotice' ) {
+			const eventName = 'calypso_domain_credit_reminder_impression';
+			const eventProperties = { cta_name: 'domain_info_notice' };
+			return (
+				<Notice
+					status="is-info"
+					showDismiss={ false }
+					text={ this.translate( 'You have an unused domain credit!' ) }
+					icon="globe">
+					<NoticeAction onClick={ this.props.clickClaimDomainNotice } href={ `/domains/add/${ this.props.selectedSite.slug }` }>
+						{ this.translate( 'Claim Free Domain' ) }
+						<TrackComponentView eventName={ eventName } eventProperties={ eventProperties } />
+					</NoticeAction>
+				</Notice>
+			);
+		}
+
+		//otherwise still track what happens when we don't show a notice
+		const eventName = 'calypso_domain_credit_reminder_no_impression';
+		const eventProperties = { cta_name: 'domain_info_notice' };
+		return (
+			<TrackComponentView eventName={ eventName } eventProperties={ eventProperties } />
+		);
+	},
+
 	render() {
 		var headerText = this.translate( 'Domains', { context: 'A navigation label.' } );
 
@@ -67,6 +104,8 @@ const List = React.createClass( {
 					sitePlans={ this.props.sitePlans } />
 				{ this.domainWarnings() }
 
+				{ this.domainCreditsInfoNotice() }
+
 				<SectionHeader label={ headerText }>
 					{ this.headerButtons() }
 				</SectionHeader>
@@ -142,8 +181,7 @@ const List = React.createClass( {
 
 	clickAddDomain() {
 		this.recordEvent( 'addDomainClick' );
-
-		page( '/domains/add/' + this.props.selectedSite.slug );
+		page( `/domains/add/${ this.props.selectedSite.slug }` );
 	},
 
 	enableChangePrimaryDomainMode() {
@@ -295,4 +333,17 @@ const List = React.createClass( {
 	}
 } );
 
-export default List;
+export default connect( ( state, ownProps ) => {
+	return {
+		hasDomainCredit: hasDomainCredit( state, ownProps.selectedSite.ID )
+	};
+}, ( dispatch ) => {
+	return {
+		clickClaimDomainNotice: () => dispatch( recordTracksEvent(
+			'calypso_domain_credit_reminder_click',
+			{
+				cta_name: 'domain_info_notice'
+			}
+		) )
+	};
+} )( List );

client/my-sites/upgrades/domain-management/list/test/index.js

@@ -83,7 +83,7 @@ describe( 'upgrades/domain-management/list', function() {
 	}
 
 	beforeEach( function() {
-		DomainList = require( '../' );
+		DomainList = require( '../' ).List;
 	} );
 
 	describe( 'regular cases', function() {

client/state/sites/plans/selectors.js

@@ -1,9 +1,32 @@
+/**
+ * External dependencies
+ */
+import find from 'lodash/find';
+
+/**
+ * Internal dependencies
+ */
 import { initialSiteState } from './reducer';
 
 export function getPlansBySite( state, site ) {
 	if ( ! site ) {
 		return initialSiteState;
 	}
+	return getPlansBySiteId( state, site.ID );
+}
 
-	return state.sites.plans[ site.ID ] || initialSiteState;
+export function getPlansBySiteId( state, siteId ) {
+	if ( ! siteId ) {
+		return initialSiteState;
+	}
+	return state.sites.plans[ siteId ] || initialSiteState;
+}
+
+export function hasDomainCredit( state, siteId ) {
+	const plans = getPlansBySiteId( state, siteId );
+	if ( plans.data ) {
+		const currentPlan = find( plans.data, 'currentPlan' );
+		return currentPlan.hasDomainCredit;
+	}
+	return null;
 }

client/state/sites/plans/test/selectors.js

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getPlansBySite,
+	getPlansBySiteId,
+	hasDomainCredit
+} from '../selectors';
+
+describe( 'selectors', () => {
+	describe( '#getPlansBySite()', () => {
+		it( 'should return plans by site', () => {
+			const plans1 = { data: [ { currentPlan: false }, { currentPlan: false }, { currentPlan: true } ] };
+			const plans2 = { data: [ { currentPlan: true }, { currentPlan: false }, { currentPlan: false } ] };
+			const state = {
+				sites: {
+					plans: {
+						2916284: plans1,
+						77203074: plans2
+					}
+				}
+			};
+			const plans = getPlansBySite( state, { ID: 77203074 } );
+
+			expect( plans ).to.eql( plans2 );
+		} );
+	} );
+	describe( '#getPlansBySiteId()', () => {
+		it( 'should return plans by site id', () => {
+			const plans1 = { data: [ { currentPlan: false }, { currentPlan: false }, { currentPlan: true } ] };
+			const plans2 = { data: [ { currentPlan: true }, { currentPlan: false }, { currentPlan: false } ] };
+			const state = {
+				sites: {
+					plans: {
+						2916284: plans1,
+						77203074: plans2
+					}
+				}
+			};
+			const plans = getPlansBySiteId( state, 2916284 );
+
+			expect( plans ).to.eql( plans1 );
+		} );
+	} );
+	describe( '#hasDomainCredit()', () => {
+		it( 'should return if plan has domain credit', () => {
+			const state = {
+				sites: {
+					plans: {
+						2916284: {
+							data: [ { currentPlan: false }, { currentPlan: false }, { currentPlan: true, hasDomainCredit: false } ]
+						},
+						77203074: {
+							data: [ { currentPlan: false }, { currentPlan: true, hasDomainCredit: true }, { currentPlan: false } ]
+						}
+
+					}
+				}
+			};
+
+			expect( hasDomainCredit( state, 77203074 ) ).to.equal( true );
+			expect( hasDomainCredit( state, 2916284 ) ).to.equal( false );
+		} );
+	} );
+} );

client/tests.json

@@ -553,7 +553,7 @@
 				"test": [ "actions", "reducer", "selectors" ]
 			},
 			"plans": {
-				"test": [ "actions", "reducer" ]
+				"test": [ "actions", "reducer", "selectors" ]
 			},
 			"test": [ "actions", "reducer", "selectors" ]
 		},