Confirm email - use pattern validation

support-e2e/tests/test/checkout.ts

@@ -58,7 +58,8 @@ export const testCheckout = (testDetails: TestDetails) => {
 		context,
 		baseURL,
 	}) => {
-		const url = `/${internationalisationId.toLowerCase()}/checkout?product=${product}&ratePlan=${ratePlan}`;
+		// Temporary opt out of this test
+		const url = `/${internationalisationId.toLowerCase()}/checkout?product=${product}&ratePlan=${ratePlan}#ab-confirmEmail=control`;
 		const page = await context.newPage();
 		await setupPage(page, context, baseURL, url);
 

support-frontend/assets/helpers/abTests/abtestDefinitions.ts

@@ -109,4 +109,25 @@ export const tests: Tests = {
 		targetPage: pageUrlRegexes.contributions.allLandingPagesAndThankyouPages,
 		excludeContributionsOnlyCountries: true,
 	},
+	confirmEmail: {
+		variants: [
+			{
+				id: 'control',
+			},
+			{
+				id: 'variant',
+			},
+		],
+		audiences: {
+			ALL: {
+				offset: 0,
+				size: 1,
+			},
+		},
+		isActive: true,
+		referrerControlled: false, // ab-test name not needed to be in paramURL
+		seed: 5,
+		targetPage: pageUrlRegexes.contributions.genericCheckoutOnly,
+		excludeContributionsOnlyCountries: false,
+	},
 };

support-frontend/assets/pages/[countryGroupId]/checkout/components/PersonalDetailsFields.tsx

@@ -1,5 +1,6 @@
 import { TextInput } from '@guardian/source/react-components';
-import { useState } from 'react';
+import escapeStringRegexp from 'escape-string-regexp';
+import { useRef, useState } from 'react';
 import {
 	doesNotContainExtendedEmojiOrLeadingSpace,
 	preventDefaultValidityMessage,
@@ -14,6 +15,9 @@ type PersonalDetailsFieldsProps = {
 	email: string;
 	setEmail: (value: string) => void;
 	isEmailAddressReadOnly: boolean;
+	requireConfirmedEmail: boolean;
+	confirmedEmail: string;
+	setConfirmedEmail: (value: string) => void;
 };
 
 export function PersonalDetailsFields({
@@ -25,10 +29,16 @@ export function PersonalDetailsFields({
 	email,
 	setEmail,
 	isEmailAddressReadOnly,
+	requireConfirmedEmail,
+	confirmedEmail,
+	setConfirmedEmail,
 }: PersonalDetailsFieldsProps) {
 	const [firstNameError, setFirstNameError] = useState<string>();
 	const [lastNameError, setLastNameError] = useState<string>();
 	const [emailError, setEmailError] = useState<string>();
+	const [confirmedEmailError, setConfirmedEmailError] = useState<string>();
+
+	const confirmEmailRef = useRef<HTMLDivElement>(null);
 
 	return (
 		<>
@@ -45,6 +55,7 @@ export function PersonalDetailsFields({
 					}}
 					onBlur={(event) => {
 						event.target.checkValidity();
+						confirmEmailRef.current?.querySelector('input')?.checkValidity();
 					}}
 					readOnly={isEmailAddressReadOnly}
 					name="email"
@@ -66,6 +77,42 @@ export function PersonalDetailsFields({
 					}}
 				/>
 			</div>
+			{requireConfirmedEmail && !isEmailAddressReadOnly && (
+				<div ref={confirmEmailRef}>
+					<TextInput
+						id="confirm-email"
+						data-qm-masking="blocklist"
+						label="Confirm email address"
+						value={confirmedEmail}
+						type="email"
+						autoComplete="email"
+						onChange={(event) => {
+							setConfirmedEmail(event.currentTarget.value);
+						}}
+						onBlur={(event) => {
+							event.target.checkValidity();
+						}}
+						name="confirm-email"
+						required
+						maxLength={80}
+						error={confirmedEmailError}
+						pattern={escapeStringRegexp(email)}
+						onInvalid={(event) => {
+							preventDefaultValidityMessage(event.currentTarget);
+							const validityState = event.currentTarget.validity;
+							if (validityState.valid) {
+								setConfirmedEmailError(undefined);
+							} else {
+								if (validityState.valueMissing) {
+									setConfirmedEmailError('Please confirm your email address.');
+								} else {
+									setConfirmedEmailError('The email addresses do not match.');
+								}
+							}
+						}}
+					/>
+				</div>
+			)}
 			{children}
 			<div>
 				<TextInput

support-frontend/assets/pages/[countryGroupId]/components/checkoutComponent.tsx

@@ -248,6 +248,8 @@ export function CheckoutComponent({
 		abParticipations.newspaperArchiveBenefit ?? '',
 	);
 
+	const inConfirmEmailVariant = abParticipations.confirmEmail === 'variant';
+
 	const productDescription = showNewspaperArchiveBenefit
 		? productCatalogDescriptionNewBenefits(countryGroupId)[productKey]
 		: productCatalogDescription[productKey];
@@ -368,6 +370,7 @@ export function CheckoutComponent({
 	const [firstName, setFirstName] = useState(user?.firstName ?? '');
 	const [lastName, setLastName] = useState(user?.lastName ?? '');
 	const [email, setEmail] = useState(user?.email ?? '');
+	const [confirmedEmail, setConfirmedEmail] = useState('');
 
 	/** Delivery and billing addresses */
 	const [deliveryPostcode, setDeliveryPostcode] = useState('');
@@ -425,6 +428,7 @@ export function CheckoutComponent({
 
 	const formOnSubmit = async (formData: FormData) => {
 		setIsProcessingPayment(true);
+
 		/**
 		 * The validation for this is currently happening on the client side form validation
 		 * So we'll assume strings are not null.
@@ -558,10 +562,6 @@ export function CheckoutComponent({
 			labels: ['generic-checkout'],
 		};
 
-		if (stripeExpressCheckoutPaymentType === 'link') {
-			referrerAcquisitionData.labels.push('express-checkout-link');
-		}
-
 		if (paymentMethod && paymentFields) {
 			/** TODO
 			 * - add debugInfo
@@ -871,6 +871,8 @@ export function CheckoutComponent({
 
 										event.billingDetails?.email &&
 											setEmail(event.billingDetails.email);
+										event.billingDetails?.email &&
+											setConfirmedEmail(event.billingDetails.email);
 
 										setPaymentMethod('StripeExpressCheckoutElement');
 										setStripeExpressCheckoutPaymentType(
@@ -934,6 +936,11 @@ export function CheckoutComponent({
 								setLastName={(lastName) => setLastName(lastName)}
 								email={email}
 								setEmail={(email) => setEmail(email)}
+								requireConfirmedEmail={inConfirmEmailVariant}
+								confirmedEmail={confirmedEmail}
+								setConfirmedEmail={(confirmedEmail) =>
+									setConfirmedEmail(confirmedEmail)
+								}
 							>
 								<Signout isSignedIn={isSignedIn} />
 							</PersonalDetailsFields>

support-frontend/package.json

@@ -97,6 +97,7 @@
 		"@types/uuid": "^9.0.2",
 		"classnames": "^2.5.1",
 		"dompurify": "^3.2.0",
+		"escape-string-regexp": "5.0.0",
 		"framer-motion": "^1.11.1",
 		"lodash.debounce": "^4.0.6",
 		"mockdate": "^3.0.5",

support-frontend/yarn.lock

@@ -5700,6 +5700,11 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
+[email protected]:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"