@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/access-code-sign-in/access-code-sign-in.js

@@ -1,127 +1,150 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { AccessCodeField } from "../../particles/access-code-field/access-code-field.js";
-import { EmailField, isValidEmail } from "../../particles/email-field/email-field.js";
+import { isValidEmail } from "../../particles/email-field/email-field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
-import { useDataOverride } from "../../sdk/data/data-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useSession } from "../session/session.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useSignIn } from "../sign-in/sign-in.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/matter/access-code-sign-in/access-code-sign-in.tsx
-const fragment = `
-  fragment AccessCodeSignInData on Query {
-    clientProfile {
-      __typename
-      id
-      email
-    }
-    sessionAuthProviders {
-      accessKeyAuthentication
-    }
-  }
-`;
 const ACCESS_CODE_SIGN_IN_CONTEXT_UNSET = Symbol("AccessCodeSignInContextUnset");
 const AccessCodeSignInContext = createContext(ACCESS_CODE_SIGN_IN_CONTEXT_UNSET);
 /**
-* Read the stepper state (email, step, authenticationToken) from the nearest `AccessCodeSignInRoot`.
-* Throws when called outside that subtree — a misplaced control is a composition bug that should
-* surface immediately, mirroring `useShippingSimulator()`/`useSession()`.
+* Read the stepper state (step, authenticationToken, requestedEmail) from the nearest
+* `AccessCodeSignInRoot`. Throws when called outside that subtree — a misplaced control is a
+* composition bug that should surface immediately, mirroring `useShippingSimulator()`/`useSession()`.
+* A part outside any `SignInRoot` reports that missing ancestor first, since it is the one to add first.
 */
 function useAccessCodeSignIn() {
+	useSignIn();
 	const ctx = useContext(AccessCodeSignInContext);
 	if (ctx === ACCESS_CODE_SIGN_IN_CONTEXT_UNSET) throw new Error("AccessCodeSignIn components must be used inside AccessCodeSignInRoot.");
 	return ctx;
 }
-function requestErrorMessage(error, props) {
-	switch (error.code) {
-		case "ACCESS_CODE_SEND_LIMIT": return resolveAuthoredCopy(props.sendLimitMessage, error.message);
-		case "BLOCKED": return resolveAuthoredCopy(props.blockedMessage, error.message);
-		case "NETWORK_ERROR": return resolveAuthoredCopy(props.networkErrorMessage, error.message);
-		default: return error.message;
+const AccessCodeRequestControlContent = defineContentType({
+	id: "access-code-request-control",
+	title: "Access Code Request Control",
+	description: "The inline messages shown when sending the access code fails.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			sendLimitMessage: {
+				type: "string",
+				title: "Send-limit message",
+				description: "Shown when too many codes were requested for the address.",
+				format: "icu-message",
+				messageSource: "Too many codes requested. Try again later."
+			},
+			blockedMessage: {
+				type: "string",
+				title: "Blocked message",
+				description: "Shown when the account is blocked. Names no duration: the account service returns none.",
+				format: "icu-message",
+				messageSource: "This account is blocked. Contact support."
+			},
+			networkErrorMessage: {
+				type: "string",
+				title: "Generic error message",
+				description: "Shown for a network failure and for any refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Something went wrong. Please try again."
+			}
+		}
 	}
-}
-function validateErrorMessage(error, props) {
-	switch (error.code) {
-		case "INVALID_ACCESS_CODE": return resolveAuthoredCopy(props.invalidCodeMessage, error.message);
-		case "BLOCKED": return resolveAuthoredCopy(props.blockedMessage, error.message);
-		case "MISSING_AUTH_CONTEXT": return resolveAuthoredCopy(props.missingAuthContextMessage, error.message);
-		case "NETWORK_ERROR": return resolveAuthoredCopy(props.networkErrorMessage, error.message);
-		default: return error.message;
+});
+const AccessCodeValidateControlContent = defineContentType({
+	id: "access-code-validate-control",
+	title: "Access Code Validate Control",
+	description: "The inline messages shown when the access code is refused.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			invalidCodeMessage: {
+				type: "string",
+				title: "Invalid code message",
+				description: "Shown when the code is wrong or expired.",
+				format: "icu-message",
+				messageSource: "That code is incorrect or expired."
+			},
+			blockedMessage: {
+				type: "string",
+				title: "Blocked message",
+				description: "Shown when the account is blocked. Names no duration: the account service returns none.",
+				format: "icu-message",
+				messageSource: "This account is blocked. Contact support."
+			},
+			missingAuthContextMessage: {
+				type: "string",
+				title: "Missing sign-in context message",
+				description: "Shown when the request lost the context the code was issued for. Should not occur on a correct flow.",
+				format: "icu-message",
+				messageSource: "Something went wrong. Please try again."
+			},
+			networkErrorMessage: {
+				type: "string",
+				title: "Generic error message",
+				description: "Shown for a network failure and for any refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Something went wrong. Please try again."
+			}
+		}
 	}
-}
+});
+const ACCESS_CODE_REQUEST_ERROR_FIELDS = {
+	ACCESS_CODE_SEND_LIMIT: "sendLimitMessage",
+	BLOCKED: "blockedMessage",
+	NETWORK_ERROR: "networkErrorMessage",
+	MISSING_AUTH_CONTEXT: "networkErrorMessage",
+	INVALID_CREDENTIALS: "networkErrorMessage",
+	INVALID_ACCESS_CODE: "networkErrorMessage"
+};
+const ACCESS_CODE_VALIDATE_ERROR_FIELDS = {
+	INVALID_ACCESS_CODE: "invalidCodeMessage",
+	BLOCKED: "blockedMessage",
+	MISSING_AUTH_CONTEXT: "missingAuthContextMessage",
+	NETWORK_ERROR: "networkErrorMessage",
+	INVALID_CREDENTIALS: "networkErrorMessage",
+	ACCESS_CODE_SEND_LIMIT: "networkErrorMessage"
+};
 const AccessCodeSignInRootDefinition = defineComponent({
 	name: "AccessCodeSignInRoot",
 	importPath: "@vtex/faststore/components",
 	component: AccessCodeSignInRoot,
-	fragment,
-	fetchStrategy: "reactive",
-	requiresContext: "session",
+	requiresContext: "sign-in",
 	editor: {
 		label: "Access Code Sign-In",
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Self-gating root of the anonymous-or-identified, email + access-code sign-in: renders nothing once loggedIn or when the account disables accessKeyAuthentication, but is available from the anonymous state onward. Owns a locally-typed draft email (never written to the cart) and the request/validate stepper. Must be inside SessionRoot. See access-code-sign-in.md."
-});
-const AccessCodeEmailControlDefinition = defineComponent({
-	name: "AccessCodeEmailControl",
-	importPath: "@vtex/faststore/components",
-	component: AccessCodeEmailControl,
-	editor: {
-		label: "Access Code Email",
-		category: "identity"
-	},
-	schema: {
-		label: {
-			type: "string",
-			label: "Label"
-		},
-		placeholder: {
-			type: "string",
-			label: "Placeholder"
-		},
-		invalidEmailMessage: {
-			type: "string",
-			label: "Invalid email message"
-		}
-	},
-	guideline: "The draft email input for the access-code flow: visible only at the request step, pre-fills from clientProfile.email when known but never persists an edit anywhere — it is purely the argument requestAccessCode/validateAccessCode dispatch with. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+	guideline: "Root of the access-code method of the sign-in surface: renders nothing until the account configuration has arrived, when the account disables the access code, while another method is the active one, and once loggedIn. Owns the request/validate stepper, the authenticationToken and the address the code was requested for; the email field is SignInEmailControl's. Must be inside SignInRoot. See access-code-sign-in.md."
 });
 const AccessCodeRequestControlDefinition = defineComponent({
 	name: "AccessCodeRequestControl",
 	importPath: "@vtex/faststore/components",
 	component: AccessCodeRequestControl,
+	content: AccessCodeRequestControlContent,
 	actions: { session: ["requestAccessCode"] },
 	editor: {
 		label: "Access Code Request",
 		category: "identity"
 	},
-	schema: {
-		label: {
-			type: "string",
-			label: "Label"
-		},
-		sendLimitMessage: {
-			type: "string",
-			label: "Send-limit message"
-		},
-		blockedMessage: {
-			type: "string",
-			label: "Blocked message"
-		},
-		networkErrorMessage: {
-			type: "string",
-			label: "Network error message"
-		}
-	},
-	guideline: "Send-code step: disabled until the Root-owned draft email is a valid, non-empty address; dispatches $actions.session.requestAccessCode with it and advances the stepper on success. Failures render inline, never as a blocking error. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+	schema: { label: {
+		type: "string",
+		label: "Label"
+	} },
+	guideline: "Send-code step: disabled until the shared SignInRoot email draft is a valid, non-empty address; dispatches $actions.session.requestAccessCode with it and advances the stepper on success. Failures render inline, never as a blocking error. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
 });
 const AccessCodeValidateControlDefinition = defineComponent({
 	name: "AccessCodeValidateControl",
 	importPath: "@vtex/faststore/components",
 	component: AccessCodeValidateControl,
+	content: AccessCodeValidateControlContent,
 	actions: { session: ["validateAccessCode"] },
 	editor: {
 		label: "Access Code Validate",
@@ -144,73 +167,205 @@ const AccessCodeValidateControlDefinition = defineComponent({
 			type: "number",
 			default: 6,
 			label: "Code length"
-		},
-		invalidCodeMessage: {
+		}
+	},
+	guideline: "Code-entry step: composes AccessCodeField and dispatches $actions.session.validateAccessCode with the address the code was requested for and the authenticationToken, never the live email draft; a successful validate flips the session reactively and hides the Root. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+});
+const AccessCodeSentNoticeContent = defineContentType({
+	id: "access-code-sent-notice",
+	title: "Access Code Sent Notice",
+	description: "Confirmation that names the address the access code was sent to.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { template: {
 			type: "string",
-			label: "Invalid code message"
-		},
-		blockedMessage: {
+			title: "Template",
+			format: "icu-message",
+			messageSource: "We sent an access code to {email}.",
+			messageArguments: {
+				type: "object",
+				properties: { email: { type: "string" } }
+			},
+			messageExample: { email: "shopper@example.com" }
+		} }
+	}
+});
+const AccessCodeSentNoticeDefinition = defineComponent({
+	name: "AccessCodeSentNotice",
+	importPath: "@vtex/faststore/components",
+	component: AccessCodeSentNotice,
+	content: AccessCodeSentNoticeContent,
+	editor: {
+		label: "Access Code Sent Notice",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Confirmation shown at the validate step only: names the address the code was sent to, read from the Root's pinned address and never from the live email draft. The sentence is the $content field template, an ICU message whose {email} argument is the address. Announced once as a status. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+});
+const AccessCodeResendContent = defineContentType({
+	id: "access-code-resend",
+	title: "Access Code Resend",
+	description: "Label of the resend button while the resend pace has not elapsed, and the inline messages shown when resending fails.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			sendLimitMessage: {
+				type: "string",
+				title: "Send-limit message",
+				description: "Shown when too many codes were requested for the address.",
+				format: "icu-message",
+				messageSource: "Too many codes requested. Try again later."
+			},
+			blockedMessage: {
+				type: "string",
+				title: "Blocked message",
+				description: "Shown when the account is blocked. Names no duration: the account service returns none.",
+				format: "icu-message",
+				messageSource: "This account is blocked. Contact support."
+			},
+			networkErrorMessage: {
+				type: "string",
+				title: "Generic error message",
+				description: "Shown for a network failure and for any refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Something went wrong. Please try again."
+			},
+			countdownTemplate: {
+				type: "string",
+				title: "Countdown template",
+				format: "icu-message",
+				messageSource: "Resend code in {seconds}s",
+				messageArguments: {
+					type: "object",
+					properties: { seconds: { type: "integer" } }
+				},
+				messageExample: { seconds: 42 }
+			}
+		}
+	}
+});
+const ACCESS_CODE_RESEND_ERROR_FIELDS = { ...ACCESS_CODE_REQUEST_ERROR_FIELDS };
+const AccessCodeResendControlDefinition = defineComponent({
+	name: "AccessCodeResendControl",
+	importPath: "@vtex/faststore/components",
+	component: AccessCodeResendControl,
+	content: AccessCodeResendContent,
+	actions: { session: ["requestAccessCode"] },
+	editor: {
+		label: "Access Code Resend",
+		category: "identity"
+	},
+	schema: {
+		label: {
 			type: "string",
-			label: "Blocked message"
+			label: "Label"
 		},
-		networkErrorMessage: {
+		pendingLabel: {
 			type: "string",
-			label: "Network error message"
+			label: "Pending label"
 		}
 	},
-	guideline: "Code-entry step: composes AccessCodeField and dispatches $actions.session.validateAccessCode with the Root-owned email and authenticationToken; a successful validate flips the session reactively and hides the Root. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+	guideline: "Validate-step only: dispatches $actions.session.requestAccessCode again with the address the first code was sent to, never the live email draft, and replaces the token. Inert for a fixed interval after each code is sent, counting the seconds down in its own label through the $content field countdownTemplate (an ICU message with a {seconds} argument). The interval is not authorable. Failures render inline. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
 });
+const AccessCodeCorrectEmailControlDefinition = defineComponent({
+	name: "AccessCodeCorrectEmailControl",
+	importPath: "@vtex/faststore/components",
+	component: AccessCodeCorrectEmailControl,
+	editor: {
+		label: "Access Code Correct E-mail",
+		category: "identity"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Label"
+	} },
+	guideline: "Validate-step only: returns the shopper to the send step and discards the earlier request whole (token, pinned address and resend pace), so a corrected address starts a genuinely new request. Never held by the resend pace. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md."
+});
+/** The in-flight label: an authored `pendingLabel` with content, else `label`, so the button never blanks. */
+function pendingLabelOr(pendingLabel, label) {
+	return pendingLabel?.trim() ? pendingLabel : label ?? "";
+}
+const INITIAL_STEPPER = {
+	step: "request",
+	authenticationToken: null,
+	requestedEmail: null,
+	resendAvailableAt: null
+};
 /**
-* Data-owning root of the access-code sign-in flow. Self-gates on two signals:
-* `useSession().state !== 'loggedIn'` (available from anonymous through identified; hides once
-* signed in) and `sessionAuthProviders.accessKeyAuthentication === true`. An unresolved fragment
-* read (`$data` still `null`) is treated as "provider not enabled" — the flow stays hidden rather
-* than flashing. Owns the `step`/`authenticationToken` stepper plus a locally-typed draft `email`
-* as local state, broadcasting all of it through context to its children. The draft email pre-fills
-* from `clientProfile.email` once (for an already-identified shopper) but a shopper edit is never
-* persisted anywhere by this family — it is purely the requestAccessCode/validateAccessCode
-* argument; the server sets clientProfileData.email as a side effect of a successful validate.
-* Reacts automatically once `useSession()` flips to `loggedIn` — no manual unmount call anywhere in
-* this family.
+* Root of the access-code method of the sign-in surface. It declares no fragment and reads no data of
+* its own: the gate is the three `sign-in` context reads (`resolved`, `accessCodeEnabled` and
+* `method === 'accessCode'`) plus the session read (`state !== 'loggedIn'`), so a store enabling both
+* methods shows the code step only while the access code is the method showing. It returns `null`
+* rather than unmounting, so its `useState` — the stepper, the token and the pinned address — survives
+* a method switch and a gate close.
+*
+* Owns the `step`/`authenticationToken` stepper, the address the token was issued for and the resend
+* deadline, broadcasting them through context. The shared email draft is `SignInRoot`'s, never this
+* family's; the validate dispatch reads the pinned `requestedEmail` instead, because the server rejects a
+* `validateAccessCode` whose email differs from the `requestAccessCode` that issued the token. The
+* deadline lives here, not on the resend control, because this Root returns `null` on a method switch and
+* unmounts every child with it. Everything clears together — `resetToRequest()` — on any change of
+* `useSession().state` other than the session resolving, so a stale token, address and countdown never greet
+* the next shopper. This Root never unmounts, so that reaction is the only thing that clears it: no manual call
+* anywhere in this family.
 */
-function AccessCodeSignInRoot({ $data: $dataProp, className, children, ...props }) {
-	const $data = useDataOverride($dataProp);
-	const { state } = useSession();
-	const [step, setStep] = useState("request");
-	const [authenticationToken, setAuthenticationToken] = useState(null);
-	const startValidation = useCallback((token) => {
-		setAuthenticationToken(token);
-		setStep("validate");
+function AccessCodeSignInRoot({ className, children, ...props }) {
+	const { state, loading } = useSession();
+	const { resolved, accessCodeEnabled, method } = useSignIn();
+	const wasLoading = useRef(loading);
+	const [stepper, setStepper] = useState(INITIAL_STEPPER);
+	const [, tick] = useReducer((count) => count + 1, 0);
+	const startValidation = useCallback((token, requestedEmail) => {
+		setStepper({
+			step: "validate",
+			authenticationToken: token,
+			requestedEmail,
+			resendAvailableAt: Date.now() + 6e4
+		});
 	}, []);
-	const savedEmail = $data?.clientProfile?.email ?? "";
-	const [email, setEmailState] = useState("");
-	const [touched, setTouched] = useState(false);
-	useEffect(() => {
-		if (step === "request" && !touched) setEmailState(savedEmail);
-	}, [
-		savedEmail,
-		touched,
-		step
-	]);
-	const setEmail = useCallback((next) => {
-		setTouched(true);
-		setEmailState(next);
+	const resetToRequest = useCallback(() => {
+		setStepper(INITIAL_STEPPER);
 	}, []);
-	const providerEnabled = $data?.sessionAuthProviders?.accessKeyAuthentication ?? false;
+	useEffect(() => {
+		if (!wasLoading.current) resetToRequest();
+	}, [state, resetToRequest]);
+	useEffect(() => {
+		wasLoading.current = loading;
+	}, [loading]);
+	const { step, authenticationToken, requestedEmail, resendAvailableAt } = stepper;
+	useEffect(() => {
+		if (resendAvailableAt == null) return;
+		const interval = setInterval(() => {
+			if (Date.now() < resendAvailableAt) {
+				tick();
+				return;
+			}
+			setStepper((current) => current.resendAvailableAt === resendAvailableAt ? {
+				...current,
+				resendAvailableAt: null
+			} : current);
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, [resendAvailableAt]);
+	const resendAvailableInSeconds = resendAvailableAt == null ? 0 : Math.max(0, Math.ceil((resendAvailableAt - Date.now()) / 1e3));
 	const contextValue = useMemo(() => ({
-		email,
-		setEmail,
 		step,
 		authenticationToken,
-		startValidation
+		requestedEmail,
+		startValidation,
+		resendAvailableInSeconds,
+		resetToRequest
 	}), [
-		email,
-		setEmail,
 		step,
 		authenticationToken,
-		startValidation
+		requestedEmail,
+		startValidation,
+		resendAvailableInSeconds,
+		resetToRequest
 	]);
-	if (!(state !== "loggedIn" && providerEnabled)) return null;
+	if (!(state !== "loggedIn" && resolved && accessCodeEnabled && method === "accessCode")) return null;
 	return /* @__PURE__ */ jsx(AccessCodeSignInContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
@@ -222,54 +377,50 @@ function AccessCodeSignInRoot({ $data: $dataProp, className, children, ...props
 	});
 }
 /**
-* The draft email input for the access-code flow. Renders only at the request step. Bound to the
-* Root's local `email`/`setEmail` — never a fragment, never a mutation of its own; typing here
-* never touches the cart. Format validation is `EmailField`'s own blur-triggered check (never
-* per-keystroke); `invalidEmailMessage` is only its fallback text, mirroring how
-* `EmailIdentificationControl` defers to the same particle for the same reason.
-*/
-function AccessCodeEmailControl({ label, placeholder, invalidEmailMessage, className, ...props }) {
-	const { step, email, setEmail } = useAccessCodeSignIn();
-	if (step !== "request") return null;
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		className,
-		"data-fs-access-code-email-control": "",
-		children: /* @__PURE__ */ jsx(EmailField, {
-			label,
-			placeholder,
-			value: email,
-			onValueChange: setEmail,
-			errorMessage: invalidEmailMessage
-		})
-	});
-}
-/**
-* Renders only while the Root's stepper is at `step === 'request'`. Reads the draft email from
-* context and dispatches `$actions.session.requestAccessCode({ email })` once it is a valid,
+* Renders only while the Root's stepper is at `step === 'request'`. Reads the shared draft email from
+* `useSignIn()` and dispatches `$actions.session.requestAccessCode({ email })` once it is a valid,
 * non-empty address (no account-existence pre-check beyond that format gate). On a result with a
-* non-null token and no `userErrors`, advances the Root's stepper. Every `userErrors` entry renders
-* inline via a host-supplied, per-code message; the step never changes on error, so the shopper can
+* non-null token and no `userErrors`, advances the Root's stepper and hands it the exact address that
+* was dispatched, so the validate step is bound to it. Every `userErrors` entry renders
+* inline, worded by the `$content` field for its code; the step never changes on error, so the shopper can
 * retry or abandon the method and continue as a guest.
+*
+* A result that arrives after the session changed under it is dropped rather than written: the Root
+* cleared the stepper for that change, and writing the result would bind the next shopper to the
+* address and the live token of the one who pressed send.
 */
-function AccessCodeRequestControl({ label, pendingLabel, sendLimitMessage, blockedMessage, networkErrorMessage, onRequested, $actions: $actionsProp, className, ...props }) {
+function AccessCodeRequestControl({ label, pendingLabel, onRequested, $content, $locale, $actions: $actionsProp, className, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
-	const { step, email, startValidation } = useAccessCodeSignIn();
+	const { step, startValidation } = useAccessCodeSignIn();
+	const { format } = useMessageFormatter(AccessCodeRequestControlContent, $content);
+	const { email } = useSignIn();
+	const { state, loading } = useSession();
 	const [pending, setPending] = useState(false);
 	const [error, setError] = useState(null);
+	const liveSession = useRef({});
+	const wasLoading = useRef(loading);
+	useEffect(() => {
+		if (!wasLoading.current) liveSession.current = { state };
+	}, [state]);
+	useEffect(() => {
+		wasLoading.current = loading;
+	}, [loading]);
 	if (step !== "request") return null;
 	const canSubmit = !pending && isValidEmail(email);
 	async function handleClick() {
 		if (!canSubmit) return;
+		const requestedEmail = email.trim();
+		const sessionAtPress = liveSession.current;
 		setPending(true);
 		setError(null);
 		try {
-			const result = await $actions?.session?.requestAccessCode?.({ email }) ?? {
+			const result = await $actions?.session?.requestAccessCode?.({ email: requestedEmail }) ?? {
 				authenticationToken: null,
 				userErrors: []
 			};
+			if (liveSession.current !== sessionAtPress) return;
 			if (result.authenticationToken && result.userErrors.length === 0) {
-				startValidation(result.authenticationToken);
+				startValidation(result.authenticationToken, requestedEmail);
 				onRequested?.(result.authenticationToken);
 				return;
 			}
@@ -279,11 +430,7 @@ function AccessCodeRequestControl({ label, pendingLabel, sendLimitMessage, block
 			setPending(false);
 		}
 	}
-	const message = error ? requestErrorMessage(error, {
-		sendLimitMessage,
-		blockedMessage,
-		networkErrorMessage
-	}) : null;
+	const message = error ? formatErrorCode(AccessCodeRequestControlContent, ACCESS_CODE_REQUEST_ERROR_FIELDS, error, format, "networkErrorMessage") : null;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className,
@@ -296,8 +443,8 @@ function AccessCodeRequestControl({ label, pendingLabel, sendLimitMessage, block
 			"aria-busy": pending || void 0,
 			"data-fs-access-code-request-submit": "",
 			"data-fs-button": "",
-			children: pending ? resolveAuthoredCopy(pendingLabel, label ?? "") : label
-		}), message ? /* @__PURE__ */ jsx("div", {
+			children: pending ? pendingLabelOr(pendingLabel, label) : label
+		}), error ? /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-access-code-request-error": "",
 			children: message
@@ -307,29 +454,34 @@ function AccessCodeRequestControl({ label, pendingLabel, sendLimitMessage, block
 /**
 * Renders only while the Root's stepper is at `step === 'validate'`. Composes `AccessCodeField` for
 * the code value and a submit control, disabled below `codeLength` (a UX courtesy, never a
-* validity claim). Dispatches `$actions.session.validateAccessCode` with the email and
-* `authenticationToken` read from context. On a non-empty `userErrors` result, sets the field's
-* `invalid`/`errorMessage` from a host-supplied per-code message and retains the code/token so the
-* shopper can retry without re-requesting. On success it calls the optional `onValidated` and renders
+* validity claim). Dispatches `$actions.session.validateAccessCode` with the pinned `requestedEmail`
+* and `authenticationToken` read from context — never the live `sign-in` draft. On a non-empty
+* `userErrors` result, sets the field's `invalid`/`errorMessage` from the `$content` field for its code
+* and retains the code/token so the shopper can retry without re-requesting. On success it calls the optional `onValidated` and renders
 * no local "success" UI — `useSession()` flipping to `loggedIn` is what makes the whole Root
 * disappear.
 */
-function AccessCodeValidateControl({ label, placeholder, submitLabel, codeLength = 6, invalidCodeMessage, blockedMessage, missingAuthContextMessage, networkErrorMessage, onValidated, $actions: $actionsProp, className, ...props }) {
+function AccessCodeValidateControl({ label, placeholder, submitLabel, codeLength = 6, onValidated, $content, $locale, $actions: $actionsProp, className, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
-	const { step, email, authenticationToken } = useAccessCodeSignIn();
+	const { format } = useMessageFormatter(AccessCodeValidateControlContent, $content);
+	const { step, requestedEmail, authenticationToken } = useAccessCodeSignIn();
 	const [code, setCode] = useState("");
 	const [pending, setPending] = useState(false);
 	const [error, setError] = useState(null);
-	if (step !== "validate") return null;
-	const canSubmit = !pending && code.length >= codeLength && authenticationToken != null;
+	if (step !== "validate") {
+		if (code) setCode("");
+		if (error) setError(null);
+		return null;
+	}
+	const canSubmit = !pending && code.length >= codeLength && authenticationToken != null && requestedEmail != null;
 	async function handleSubmit(event) {
 		event.preventDefault();
-		if (!canSubmit || authenticationToken == null) return;
+		if (!canSubmit || authenticationToken == null || requestedEmail == null) return;
 		setPending(true);
 		setError(null);
 		try {
 			const [firstError] = await $actions?.session?.validateAccessCode?.({
-				email,
+				email: requestedEmail,
 				accessCode: code,
 				authenticationToken
 			}) ?? [];
@@ -346,12 +498,7 @@ function AccessCodeValidateControl({ label, placeholder, submitLabel, codeLength
 		setCode(next);
 		if (error) setError(null);
 	}
-	const errorMessage = error ? validateErrorMessage(error, {
-		invalidCodeMessage,
-		blockedMessage,
-		missingAuthContextMessage,
-		networkErrorMessage
-	}) : void 0;
+	const errorMessage = error ? formatErrorCode(AccessCodeValidateControlContent, ACCESS_CODE_VALIDATE_ERROR_FIELDS, error, format, "networkErrorMessage") : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className,
@@ -379,13 +526,137 @@ function AccessCodeValidateControl({ label, placeholder, submitLabel, codeLength
 		})
 	});
 }
+/**
+* Renders only at the validate step. Names the address the code was dispatched to — the Root's pinned
+* `requestedEmail`, never the live `sign-in` draft, which a shopper edit or a profile re-seed can move
+* after the request. The `template` message's `email` argument is the address. The wrapper is an
+* `output`, whose implicit `status` role announces the confirmation once, when it appears.
+*/
+function AccessCodeSentNotice({ $content, $locale, className, ...props }) {
+	const { step, requestedEmail } = useAccessCodeSignIn();
+	const { format } = useMessageFormatter(AccessCodeSentNoticeContent, $content);
+	if (step !== "validate" || requestedEmail == null) return null;
+	return /* @__PURE__ */ jsx("output", {
+		...props,
+		className,
+		"data-fs-access-code-sent-notice": "",
+		children: format("template", { email: requestedEmail })
+	});
+}
+/**
+* Renders only at the validate step. Dispatches `$actions.session.requestAccessCode` with the Root's
+* pinned `requestedEmail` — never the live draft, so a second code goes to the address the shopper was
+* told about — and replaces the token with the one it returns through the same `startValidation` that
+* the request control uses, which re-pins the same address and re-arms the pace. Inert until the pace
+* has elapsed, with the whole seconds left in its own label. A failure renders inline and leaves the
+* step, the token and the pace untouched: no code was sent, so none is paced.
+*
+* A result that arrives after the request it answered has been discarded (the shopper went back, the
+* session changed, the Root closed) is dropped rather than written, so a token is never re-paired with
+* the address that was left.
+*/
+function AccessCodeResendControl({ label, pendingLabel, onResent, $content, $locale, $actions: $actionsProp, className, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const { step, authenticationToken, requestedEmail, resendAvailableInSeconds, startValidation } = useAccessCodeSignIn();
+	const { format } = useMessageFormatter(AccessCodeResendContent, $content);
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState(null);
+	const liveToken = useRef(authenticationToken);
+	useEffect(() => {
+		liveToken.current = authenticationToken;
+		return () => {
+			liveToken.current = null;
+		};
+	}, [authenticationToken]);
+	if (step !== "validate" || requestedEmail == null) {
+		if (error) setError(null);
+		return null;
+	}
+	const paced = resendAvailableInSeconds > 0;
+	const canSubmit = !pending && !paced;
+	async function handleClick() {
+		if (!canSubmit || requestedEmail == null) return;
+		const pinnedEmail = requestedEmail;
+		const tokenAtPress = authenticationToken;
+		setPending(true);
+		setError(null);
+		try {
+			const result = await $actions?.session?.requestAccessCode?.({ email: pinnedEmail }) ?? {
+				authenticationToken: null,
+				userErrors: []
+			};
+			if (liveToken.current !== tokenAtPress) return;
+			if (result.authenticationToken && result.userErrors.length === 0) {
+				startValidation(result.authenticationToken, pinnedEmail);
+				onResent?.(result.authenticationToken);
+				return;
+			}
+			const [firstError] = result.userErrors;
+			if (firstError) setError(firstError);
+		} finally {
+			setPending(false);
+		}
+	}
+	const message = error ? formatErrorCode(AccessCodeResendContent, ACCESS_CODE_RESEND_ERROR_FIELDS, error, format, "networkErrorMessage") : null;
+	const pacedLabel = paced ? format("countdownTemplate", { seconds: resendAvailableInSeconds }) : label;
+	const buttonLabel = pending ? pendingLabelOr(pendingLabel, label) : pacedLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-access-code-resend-control": "",
+		...paced ? { "data-fs-access-code-resend-waiting": "" } : {},
+		...pending ? { "data-fs-access-code-resend-pending": "" } : {},
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClick,
+			disabled: !canSubmit,
+			"aria-busy": pending || void 0,
+			"data-fs-access-code-resend-submit": "",
+			"data-fs-button": "",
+			children: buttonLabel
+		}), error ? /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			"data-fs-access-code-resend-error": "",
+			children: message
+		}) : null]
+	});
+}
+/**
+* Renders only at the validate step. Calls the Root's `resetToRequest()`, which discards the step, the
+* token, the pinned address and the resend pace in one transition. The shopper lands on the request step
+* with the shared draft still in the field to edit; the next request pins whatever address they send and
+* the token the server issues for it, and the earlier token is unreachable. Never held by the pace: the
+* pace counts codes sent, and a shopper who mistyped is not made to wait for the address they meant.
+*/
+function AccessCodeCorrectEmailControl({ label, onCorrected, className, ...props }) {
+	const { step, resetToRequest } = useAccessCodeSignIn();
+	if (step !== "validate") return null;
+	function handleClick() {
+		resetToRequest();
+		onCorrected?.();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-access-code-correct-email-control": "",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClick,
+			"data-fs-access-code-correct-email-button": "",
+			"data-fs-button": "",
+			children: label
+		})
+	});
+}
 const AccessCodeSignIn = {
 	Root: AccessCodeSignInRoot,
-	Email: AccessCodeEmailControl,
 	Request: AccessCodeRequestControl,
-	Validate: AccessCodeValidateControl
+	SentNotice: AccessCodeSentNotice,
+	Validate: AccessCodeValidateControl,
+	Resend: AccessCodeResendControl,
+	CorrectEmail: AccessCodeCorrectEmailControl
 };
 //#endregion
-export { AccessCodeEmailControl, AccessCodeEmailControlDefinition, AccessCodeRequestControl, AccessCodeRequestControlDefinition, AccessCodeSignIn, AccessCodeSignInRoot, AccessCodeSignInRootDefinition, AccessCodeValidateControl, AccessCodeValidateControlDefinition };
+export { ACCESS_CODE_REQUEST_ERROR_FIELDS, ACCESS_CODE_RESEND_ERROR_FIELDS, ACCESS_CODE_VALIDATE_ERROR_FIELDS, AccessCodeCorrectEmailControl, AccessCodeCorrectEmailControlDefinition, AccessCodeRequestControl, AccessCodeRequestControlContent, AccessCodeRequestControlDefinition, AccessCodeResendContent, AccessCodeResendControl, AccessCodeResendControlDefinition, AccessCodeSentNotice, AccessCodeSentNoticeContent, AccessCodeSentNoticeDefinition, AccessCodeSignIn, AccessCodeSignInRoot, AccessCodeSignInRootDefinition, AccessCodeValidateControl, AccessCodeValidateControlContent, AccessCodeValidateControlDefinition, useAccessCodeSignIn };
 
 //# sourceMappingURL=access-code-sign-in.js.map