P2 signup: add 'post-email confirmation' screen

client/assets/stylesheets/_p2-extends.scss

@@ -89,6 +89,7 @@
 	margin: 0 0 1em;
 	padding: 1em 2em;
 	transition: 0.2s ease-in-out;
+	height: auto;
 	width: 100%;
 
 	&:hover {

client/lib/signup/step-actions/index.js

@@ -926,6 +926,16 @@ export function excludeStepIfEmailVerified( stepName, defaultDependencies, nextP
 		return;
 	}
 
+	/* For the P2 signup flow, if we displayed the email verification step before,
+	   we need to display it again when the user comes back to the flow
+	   after verification. */
+	if (
+		nextProps.flowName === 'p2-new' &&
+		nextProps?.progress[ stepName ]?.status === 'in-progress'
+	) {
+		return;
+	}
+
 	if ( ! nextProps.isEmailVerified ) {
 		return;
 	}

client/signup/steps/p2-confirm-email/index.jsx

@@ -1,14 +1,23 @@
 import { Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
+import { check } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useSelector, useDispatch } from 'react-redux';
 import wpcom from 'calypso/lib/wp';
 import P2StepWrapper from 'calypso/signup/p2-step-wrapper';
 import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
+import { saveSignupStep } from 'calypso/state/signup/progress/actions';
 import './style.scss';
 
-function P2ConfirmEmail( { flowName, stepName, positionInFlow } ) {
+function P2ConfirmEmail( {
+	flowName,
+	goToNextStep,
+	isEmailVerified,
+	positionInFlow,
+	stepName,
+	submitSignupStep,
+} ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 	const userEmail = useSelector( getCurrentUserEmail );
@@ -27,13 +36,23 @@ function P2ConfirmEmail( { flowName, stepName, positionInFlow } ) {
 		</svg>
 	);
 
+	// Remember that we loaded, not skipped, this step for the user.
+	useEffect( () => {
+		dispatch( saveSignupStep( { stepName } ) );
+	}, [ dispatch, stepName ] );
+
 	const handleResendEmailClick = () => {
 		if ( emailResendCount >= EMAIL_RESEND_MAX ) {
 			return;
 		}
 
 		wpcom.req
-			.post( '/me/send-verification-email' )
+			.post( {
+				path: '/me/send-verification-email',
+				body: {
+					from: 'p2-signup',
+				},
+			} )
 			.then( () => {
 				setEmailResendCount( emailResendCount + 1 );
 				dispatch(
@@ -45,15 +64,18 @@ function P2ConfirmEmail( { flowName, stepName, positionInFlow } ) {
 			} );
 	};
 
-	return (
-		<P2StepWrapper
-			flowName={ flowName }
-			stepName={ stepName }
-			positionInFlow={ positionInFlow }
-			headerIcon={ mailIcon }
-			headerText={ translate( 'Check your email' ) }
-		>
-			<div className="p2-confirm-email">
+	const handleNextStepClick = ( option ) => {
+		submitSignupStep( {
+			stepName,
+			option,
+		} );
+
+		goToNextStep();
+	};
+
+	const renderCheckEmailNotice = () => {
+		return (
+			<>
 				<div className="p2-confirm-email__message">
 					{ translate(
 						"We've sent an email with a verification link to {{strong}}%(email)s{{/strong}}. Please follow that link to confirm your email address and continue.",
@@ -75,6 +97,43 @@ function P2ConfirmEmail( { flowName, stepName, positionInFlow } ) {
 						</div>
 					</div>
 				) }
+			</>
+		);
+	};
+
+	const renderPostConfirmationNotice = () => {
+		return (
+			<>
+				<div className="p2-confirm-email__message">
+					{ translate(
+						"Thanks for confirming your email address. Your account is now active. We're almost finished!"
+					) }
+				</div>
+				<div className="p2-confirm-email__buttons">
+					<Button
+						className="p2-confirm-email__continue"
+						isPrimary={ true }
+						onClick={ handleNextStepClick }
+					>
+						{ translate( 'Continue' ) }
+					</Button>
+				</div>
+			</>
+		);
+	};
+
+	return (
+		<P2StepWrapper
+			flowName={ flowName }
+			stepName={ stepName }
+			positionInFlow={ positionInFlow }
+			headerIcon={ isEmailVerified ? check : mailIcon }
+			headerText={
+				isEmailVerified ? translate( 'Email confirmed' ) : translate( 'Check your email' )
+			}
+		>
+			<div className="p2-confirm-email">
+				{ isEmailVerified ? renderPostConfirmationNotice() : renderCheckEmailNotice() }
 			</div>
 		</P2StepWrapper>
 	);

client/signup/steps/p2-confirm-email/style.scss

@@ -45,6 +45,11 @@
 			box-shadow: none;
 		}
 	}
+
+	button.p2-confirm-email__continue {
+		margin-top: 2.5em;
+		max-width: 228px;
+	}
 }
 
 .p2-confirm-email__message {
@@ -66,6 +71,7 @@
 .p2-confirm-email__buttons {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 }
 
 .p2-confirm-email__buttons-separator {