Me/Account: Created a new email verification banner (#103171)

Author: rcrdortiz

client/components/banner/index.jsx

@@ -301,6 +301,16 @@ export class Banner extends Component {
 								<PlanPrice rawPrice={ prices[ 1 ] } discounted />
 							</div>
 						) }
+						{ secondaryCallToAction && (
+							<Button
+								compact={ compactButton }
+								href={ secondaryHref }
+								onClick={ this.handleSecondaryClick }
+								primary={ false }
+							>
+								{ preventWidows( secondaryCallToAction ) }
+							</Button>
+						) }
 						{ callToAction &&
 							( forceHref ? (
 								<Button
@@ -323,17 +333,6 @@ export class Banner extends Component {
 									{ preventWidows( callToAction ) }
 								</Button>
 							) ) }
-
-						{ secondaryCallToAction && (
-							<Button
-								compact={ compactButton }
-								href={ secondaryHref }
-								onClick={ this.handleSecondaryClick }
-								primary={ false }
-							>
-								{ preventWidows( secondaryCallToAction ) }
-							</Button>
-						) }
 					</div>
 				) }
 			</div>

client/components/banner/style.scss

@@ -204,13 +204,21 @@
 	font-size: $font-body-extra-small;
 }
 
+.email-verification-banner__highlight {
+	text-transform: none;
+}
+
 .banner__action {
 	align-self: center;
 	font-size: $font-body-extra-small;
 	margin: 12px 0 0;
 	text-align: left;
 	width: 100%;
 
+	.is-primary {
+		margin-left: 8px;
+	}
+
 	.banner__prices {
 		display: flex;
 		justify-content: flex-start;

client/components/email-verification/hooks/use-get-email-to-verify.ts

@@ -0,0 +1,19 @@
+import { useSelector } from 'calypso/state';
+import { isCurrentUserEmailVerified } from 'calypso/state/current-user/selectors';
+import getUserSetting from 'calypso/state/selectors/get-user-setting';
+import isPendingEmailChange from 'calypso/state/selectors/is-pending-email-change';
+import { isFetchingUserSettings } from 'calypso/state/user-settings/selectors';
+
+export default function useGetEmailToVerify() {
+	const isVerified = useSelector( isCurrentUserEmailVerified );
+	const isEmailChangePending = useSelector( isPendingEmailChange );
+	const settingsKey = isEmailChangePending ? 'new_user_email' : 'user_email';
+	const email = useSelector( ( state ) => getUserSetting( state, settingsKey ) );
+	const isFetchingEmail = useSelector( ( state ) => isFetchingUserSettings( state ) );
+
+	if ( isFetchingEmail || ( isVerified && ! isEmailChangePending ) ) {
+		return null;
+	}
+
+	return email;
+}

client/me/account/main.jsx

@@ -33,7 +33,7 @@ import { clearStore } from 'calypso/lib/user/store';
 import wpcom from 'calypso/lib/wp';
 import AccountEmailField from 'calypso/me/account/account-email-field';
 import { withDefaultInterface } from 'calypso/me/account/with-default-interface';
-import EmailVerificationBanner from 'calypso/me/email-verification-banner';
+import { EmailVerificationBannerV2 } from 'calypso/me/email-verification-banner';
 import ReauthRequired from 'calypso/me/reauth-required';
 import { recordGoogleEvent, recordTracksEvent } from 'calypso/state/analytics/actions';
 import {
@@ -100,6 +100,7 @@ class Account extends Component {
 		formsSubmitting: {},
 		usernameAction: 'new',
 		validationResult: false,
+		accountSubmitDisable: false,
 	};
 
 	componentDidUpdate() {
@@ -533,6 +534,7 @@ class Account extends Component {
 
 	shouldDisableAccountSubmitButton() {
 		return (
+			this.state.accountSubmitDisable ||
 			! this.hasUnsavedUserSettings( ACCOUNT_FIELDS ) ||
 			this.getDisabledState( ACCOUNT_FORM_NAME ) ||
 			this.hasEmailValidationError()
@@ -895,7 +897,11 @@ class Account extends Component {
 						}
 					) }
 				/>
-				<EmailVerificationBanner />
+				<EmailVerificationBannerV2
+					setIsBusy={ ( isBusy ) => {
+						this.state.accountSubmitDisable = isBusy;
+					} }
+				/>
 				<SectionHeader label={ translate( 'Account Information' ) } />
 				<Card className="account__settings">
 					<form onChange={ markChanged } onSubmit={ this.saveAccountSettings }>

client/me/email-verification-banner/index.tsx

@@ -1,11 +1,15 @@
-import { useTranslate } from 'i18n-calypso';
-import { useState } from 'react';
+import { Substitution, useTranslate } from 'i18n-calypso';
+import React, { useCallback, useState } from 'react';
 import Banner from 'calypso/components/banner';
 import EmailVerificationDialog from 'calypso/components/email-verification/email-verification-dialog';
-import { useSelector } from 'calypso/state';
+import useGetEmailToVerify from 'calypso/components/email-verification/hooks/use-get-email-to-verify';
+import { emailFormEventEmitter } from 'calypso/me/account/account-email-field';
+import { useDispatch, useSelector } from 'calypso/state';
 import { isCurrentUserEmailVerified } from 'calypso/state/current-user/selectors';
+import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import isPendingEmailChange from 'calypso/state/selectors/is-pending-email-change';
-
+import { setUserSetting } from 'calypso/state/user-settings/actions';
+import { saveUnsavedUserSettings } from 'calypso/state/user-settings/thunks';
 import './style.scss';
 
 const EmailVerificationBanner: React.FC< {
@@ -54,4 +58,79 @@ const EmailVerificationBanner: React.FC< {
 	);
 };
 
+interface Props {
+	setIsBusy: ( isBusy: boolean ) => void;
+}
+
+const EmailVerificationBannerV2: React.FC< Props > = ( { setIsBusy } ) => {
+	const dispatch = useDispatch();
+	const translate = useTranslate();
+	const emailToVerify = useGetEmailToVerify();
+	const [ isSendingEmail, setIsSendingEmail ] = useState( false );
+
+	const highlightEmailInput = useCallback( () => {
+		emailFormEventEmitter?.dispatchEvent( new Event( 'highlightInput' ) );
+	}, [] );
+
+	const resendEmailToVerify = useCallback( async () => {
+		setIsBusy( true );
+		setIsSendingEmail( true );
+		try {
+			dispatch( setUserSetting( 'user_email', emailToVerify ) );
+			await dispatch( saveUnsavedUserSettings( [ 'user_email' ] ) );
+			dispatch(
+				successNotice(
+					translate(
+						'We sent an email to %(email)s. Please check your inbox to verify your email.',
+						{
+							args: { email: emailToVerify as Substitution },
+						}
+					)
+				)
+			);
+		} catch ( err ) {
+			dispatch(
+				errorNotice(
+					err instanceof Error
+						? err.message
+						: translate( 'There was an error while resending the email. Please try again.' )
+				)
+			);
+		} finally {
+			setIsBusy( false );
+			setIsSendingEmail( false );
+		}
+	}, [ dispatch, emailToVerify, setIsBusy, translate ] );
+
+	if ( ! emailToVerify ) {
+		return null;
+	}
+
+	const description = translate(
+		'Check your inbox at {{strong}}%(email)s{{/strong}} for the confirmation email, or click "Resend email" to get a new one.',
+		{
+			args: { email: emailToVerify as Substitution },
+			components: {
+				strong: <strong className="email-verification-banner__highlight" />,
+			},
+		}
+	);
+
+	return (
+		<Banner
+			className="email-verification-banner"
+			icon="notice"
+			title={ translate( 'Verify your email' ) }
+			description={ description }
+			callToAction={ translate( 'Resend email' ) }
+			onClick={ resendEmailToVerify }
+			secondaryCallToAction={ translate( 'Update email' ) }
+			secondaryOnClick={ highlightEmailInput }
+			disableHref
+			isBusy={ isSendingEmail }
+		/>
+	);
+};
+
+export { EmailVerificationBannerV2 };
 export default EmailVerificationBanner;

client/me/email-verification-banner/style.scss

@@ -1,4 +1,24 @@
+@import "@wordpress/base-styles/breakpoints";
+
 .email-verification-banner {
 	--color-accent: var(--studio-red);
 	--color-accent-60: var(--studio-red-60);
+
+	.banner__action {
+		display: flex;
+	}
+
+	@media (max-width: $break-xlarge) {
+		.banner__content {
+			flex-direction: column;
+		}
+		.banner__action {
+			padding-top: 12px;
+			width: 100%;
+			justify-content: flex-end;
+		}
+		.banner__icons {
+			align-self: flex-start;
+		}
+	}
 }