Onboarding Checklist: Add gsuite tos acceptance task (#29794)

Added onboarding task to accept the GSuite TOS

client/components/checklist/style.scss

@@ -1,4 +1,3 @@
-
 .checklist__header {
 	display: flex;
 	flex-direction: row;
@@ -162,6 +161,18 @@
 		}
 	}
 
+	&-warning-background {
+		display: block;
+		position: absolute;
+		top: 18px;
+		left: 28px;
+		width: 18px;
+		height: 18px;
+		border-radius: 16px;
+		background: $white;
+		cursor: pointer;
+	}
+
 	&-primary {
 		display: flex;
 		flex-direction: column;
@@ -226,6 +237,16 @@
 		white-space: nowrap;
 	}
 
+	&.warning {
+		.gridicons-notice-outline {
+			display: block;
+			fill: var( --color-warning );
+			position: absolute;
+			top: 15px;
+			left: 22px;
+		}
+	}
+
 	&.is-completed {
 		padding-top: 12px;
 		padding-bottom: 12px;

client/components/checklist/task.js

@@ -26,14 +26,15 @@ class Task extends PureComponent {
 		completedTitle: PropTypes.node,
 		description: PropTypes.node,
 		duration: PropTypes.string,
+		isWarning: PropTypes.bool,
 		onClick: PropTypes.func,
 		onDismiss: PropTypes.func,
 		title: PropTypes.node.isRequired,
 		translate: PropTypes.func.isRequired,
 	};
 
-	renderCheckmarkIcon( completed ) {
-		const { translate } = this.props;
+	renderCheckmarkIcon() {
+		const { completed, isWarning, translate } = this.props;
 		const onDismiss = ! completed ? this.props.onDismiss : undefined;
 
 		if ( onDismiss ) {
@@ -46,7 +47,7 @@ class Task extends PureComponent {
 					<ScreenReaderText>
 						{ completed ? translate( 'Mark as uncompleted' ) : translate( 'Mark as completed' ) }
 					</ScreenReaderText>
-					<Gridicon icon="checkmark" size={ 18 } />
+					{ this.renderGridicon() }
 				</Focusable>
 			);
 		}
@@ -55,14 +56,36 @@ class Task extends PureComponent {
 			return (
 				<div className="checklist__task-icon">
 					<ScreenReaderText>{ translate( 'Complete' ) }</ScreenReaderText>
-					<Gridicon icon="checkmark" size={ 18 } />
+					{ this.renderGridicon() }
+				</div>
+			);
+		}
+
+		if ( isWarning ) {
+			return (
+				<div>
+					<ScreenReaderText>{ translate( 'Warning' ) }</ScreenReaderText>
+					{ this.renderGridicon() }
 				</div>
 			);
 		}
 
 		return null;
 	}
 
+	renderGridicon() {
+		if ( this.props.isWarning ) {
+			return (
+				<div>
+					<div className="checklist__task-warning-background" />
+					<Gridicon icon={ 'notice-outline' } size={ 24 } />
+				</div>
+			);
+		}
+
+		return <Gridicon icon={ 'checkmark' } size={ 18 } />;
+	}
+
 	render() {
 		const {
 			buttonPrimary,
@@ -72,6 +95,7 @@ class Task extends PureComponent {
 			completedTitle,
 			description,
 			duration,
+			isWarning,
 			onClick,
 			title,
 			translate,
@@ -84,6 +108,7 @@ class Task extends PureComponent {
 		return (
 			<CompactCard
 				className={ classNames( 'checklist__task', {
+					warning: isWarning,
 					'is-completed': completed,
 					'has-actionlink': hasActionlink,
 					'is-collapsed': isCollapsed,
@@ -116,7 +141,7 @@ class Task extends PureComponent {
 					) }
 				</div>
 
-				{ this.renderCheckmarkIcon( completed ) }
+				{ this.renderCheckmarkIcon() }
 			</CompactCard>
 		);
 	}

client/lib/google-apps/index.js

@@ -32,4 +32,18 @@ function formatPrice( cost, currencyCode, options = {} ) {
 	return formatCurrency( cost, currencyCode, cost % 1 > 0 ? {} : { precision: 0 } );
 }
 
-export { getAnnualPrice, getMonthlyPrice, googleAppsSettingsUrl, formatPrice };
+function getLoginUrlWithTOSRedirect( email, domain ) {
+	return (
+		`https://accounts.google.com/AccountChooser?Email=${ email }&service=CPanel` +
+		`&continue=https%3A%2F%2Fadmin.google.com%2F${ domain }` +
+		'%2FAcceptTermsOfService%3Fcontinue%3Dhttps%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F1'
+	);
+}
+
+export {
+	getAnnualPrice,
+	getMonthlyPrice,
+	googleAppsSettingsUrl,
+	formatPrice,
+	getLoginUrlWithTOSRedirect,
+};

client/my-sites/checklist/wpcom-checklist/component.jsx

@@ -33,6 +33,8 @@ import userFactory from 'lib/user';
 import { launchSite } from 'state/sites/launch/actions';
 import isUnlaunchedSite from 'state/selectors/is-unlaunched-site';
 import createSelector from 'lib/create-selector';
+import { getLoginUrlWithTOSRedirect } from 'lib/google-apps';
+import { getDomainsBySiteId } from 'state/sites/domains/selectors';
 
 const userLib = userFactory();
 
@@ -64,6 +66,7 @@ class WpcomChecklistComponent extends PureComponent {
 			site_launched: this.renderSiteLaunchedTask,
 			email_setup: this.renderEmailSetupTask,
 			email_forwarding_upgraded_to_gsuite: this.renderEmailForwardingUpgradedToGSuiteTask,
+			gsuite_tos_accepted: this.renderGSuiteTOSAcceptedTask,
 		};
 	}
 
@@ -596,6 +599,36 @@ class WpcomChecklistComponent extends PureComponent {
 			/>
 		);
 	};
+
+	renderGSuiteTOSAcceptedTask = ( TaskComponent, baseProps, task ) => {
+		const { domains, translate } = this.props;
+
+		let loginUrlWithTOSRedirect;
+		if ( Array.isArray( domains ) && domains.length > 0 ) {
+			const domainName = domains[ 0 ].name;
+			const users = domains[ 0 ].googleAppsSubscription.pendingUsers;
+			loginUrlWithTOSRedirect = getLoginUrlWithTOSRedirect( users[ 0 ], domainName );
+		}
+
+		return (
+			<TaskComponent
+				{ ...baseProps }
+				title={ translate( 'Accept the G Suite TOS to complete email setup' ) }
+				description={ translate( "You're almost done setting up G Suite!" ) }
+				isWarning={ true }
+				onClick={ () => {
+					if ( ! loginUrlWithTOSRedirect ) {
+						return;
+					}
+
+					this.trackTaskStart( task, {
+						sub_step_name: 'gsuite_tos_accepted',
+					} );
+					window.open( loginUrlWithTOSRedirect, '_blank' );
+				} }
+			/>
+		);
+	};
 }
 
 function getContactPage( posts ) {
@@ -641,6 +674,7 @@ export default connect(
 			userEmail: ( user && user.email ) || '',
 			needsVerification: ! isCurrentUserEmailVerified( state ),
 			isSiteUnlaunched: isUnlaunchedSite( state, siteId ),
+			domains: getDomainsBySiteId( state, siteId ),
 		};
 	},
 	{

client/my-sites/checklist/wpcom-checklist/wpcom-task-list.js

@@ -62,6 +62,10 @@ export default class WpcomTaskList {
 			if ( hasTask( 'email_forwarding_upgraded_to_gsuite' ) ) {
 				addTask( 'email_forwarding_upgraded_to_gsuite' );
 			}
+
+			if ( hasTask( 'gsuite_tos_accepted' ) ) {
+				addTask( 'gsuite_tos_accepted' );
+			}
 		}
 
 		debug( 'designType: ', designType );

client/my-sites/domains/components/domain-warnings/pending-gapps-tos-notice.jsx

@@ -18,6 +18,7 @@ import { COMPLETING_GOOGLE_APPS_SIGNUP } from 'lib/url/support';
 import { domainManagementEmail } from 'my-sites/domains/paths';
 import PendingGappsTosNoticeMultipleDomainListItem from './pending-gapps-tos-notice-multiple-domain-list-item';
 import { composeAnalytics, recordGoogleEvent, recordTracksEvent } from 'state/analytics/actions';
+import { getLoginUrlWithTOSRedirect } from 'lib/google-apps';
 
 const learnMoreLink = (
 	<a href={ COMPLETING_GOOGLE_APPS_SIGNUP } target="_blank" rel="noopener noreferrer" />
@@ -45,14 +46,6 @@ class PendingGappsTosNotice extends React.PureComponent {
 		} );
 	}
 
-	getGappsLoginUrl( email, domain ) {
-		return (
-			`https://accounts.google.com/AccountChooser?Email=${ email }&service=CPanel` +
-			`&continue=https%3A%2F%2Fadmin.google.com%2F${ domain }` +
-			'%2FAcceptTermsOfService%3Fcontinue%3Dhttps%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F1'
-		);
-	}
-
 	getNoticeSeverity() {
 		const { moment } = this.props;
 
@@ -168,7 +161,7 @@ class PendingGappsTosNotice extends React.PureComponent {
 				) }
 			>
 				<NoticeAction
-					href={ this.getGappsLoginUrl( users[ 0 ], domainName ) }
+					href={ getLoginUrlWithTOSRedirect( users[ 0 ], domainName ) }
 					onClick={ this.logInClickHandlerOneDomain }
 					external
 				>
@@ -204,7 +197,7 @@ class PendingGappsTosNotice extends React.PureComponent {
 								<li key={ `pending-gapps-tos-acceptance-domain-${ domainName }` }>
 									<strong>{ users.join( ', ' ) } </strong>
 									<PendingGappsTosNoticeMultipleDomainListItem
-										href={ this.getGappsLoginUrl( users[ 0 ], domainName ) }
+										href={ getLoginUrlWithTOSRedirect( users[ 0 ], domainName ) }
 										domainName={ domainName }
 										user={ users[ 0 ] }
 										onClick={ this.logInClickHandlerMultipleDomains }