@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/sign-in-form/sign-in-form.js

@@ -1,183 +1,183 @@
 "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 { EmailField, isValidEmail } from "../../particles/email-field/email-field.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.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 { useSession } from "../session/session.js";
 import { Button } from "../../particles/button/button.js";
+import { useSignIn } from "../sign-in/sign-in.js";
+import { useSignInDisclosureOpen } from "../sign-in-disclosure/sign-in-disclosure.js";
 import { PasswordField } from "../../particles/password-field/password-field.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/sign-in-form/sign-in-form.tsx
-const fragment = `
-  fragment SignInFormData on Query {
-    clientProfile {
-      __typename
-      id
-      email
-    }
-  }
-`;
+const SignInFormContent = defineContentType({
+	id: "sign-in-form",
+	title: "Sign In Form",
+	description: "Labels and error messages of the password sign-in step.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			passwordLabel: {
+				type: "string",
+				title: "Password label",
+				format: "icu-message",
+				messageSource: "Password"
+			},
+			showPasswordLabel: {
+				type: "string",
+				title: "Show password label",
+				format: "icu-message",
+				messageSource: "Show password"
+			},
+			hidePasswordLabel: {
+				type: "string",
+				title: "Hide password label",
+				format: "icu-message",
+				messageSource: "Hide password"
+			},
+			submitLabel: {
+				type: "string",
+				title: "Submit label",
+				format: "icu-message",
+				messageSource: "Sign In"
+			},
+			passwordRequiredMessage: {
+				type: "string",
+				title: "Password required message",
+				format: "icu-message",
+				messageSource: "Enter your password."
+			},
+			invalidCredentialsMessage: {
+				type: "string",
+				title: "Invalid credentials message",
+				format: "icu-message",
+				messageSource: "Incorrect email or password. Please try again."
+			},
+			blockedMessage: {
+				type: "string",
+				title: "Blocked account message",
+				format: "icu-message",
+				messageSource: "Access to this account is temporarily blocked. Please try again later."
+			},
+			networkErrorMessage: {
+				type: "string",
+				title: "Network error message",
+				format: "icu-message",
+				messageSource: "Unable to complete the request. Please try again."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Generic error message",
+				format: "icu-message",
+				messageSource: "Unable to sign in. Please try again."
+			}
+		}
+	}
+});
 /**
-* Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,
-* ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from
-* loginWithPassword but share the untyped `code: string` field, so they fall through to the
+* Maps the first resolved SessionUserError to the `sign-in-form` message that words it.
+* INVALID_ACCESS_CODE, ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable
+* from loginWithPassword but share the untyped `code: string` field, so they fall through to the
 * generic message defensively, alongside any future/unknown code.
 */
-function mapSessionErrorMessage(error, messages) {
+function mapSessionErrorField(error) {
 	if (!error) return null;
 	switch (error.code) {
-		case "INVALID_CREDENTIALS": return messages.invalidCredentialsMessage;
-		case "BLOCKED": return messages.blockedMessage;
-		case "NETWORK_ERROR": return messages.networkErrorMessage;
-		default: return messages.genericErrorMessage;
+		case "INVALID_CREDENTIALS": return "invalidCredentialsMessage";
+		case "BLOCKED": return "blockedMessage";
+		case "NETWORK_ERROR": return "networkErrorMessage";
+		default: return "genericErrorMessage";
 	}
 }
 const SignInFormDefinition = defineComponent({
 	name: "SignInForm",
 	importPath: "@vtex/faststore/components",
 	component: SignInForm,
-	fragment,
-	fetchStrategy: "reactive",
+	content: SignInFormContent,
 	actions: { session: ["loginWithPassword"] },
-	requiresContext: "session",
+	requiresContext: "sign-in",
 	editor: {
 		label: "Sign In Form",
 		category: "identity"
 	},
-	schema: {
-		emailLabel: {
-			type: "string",
-			default: "Email",
-			label: "Email label"
-		},
-		emailPlaceholder: {
-			type: "string",
-			default: "you@example.com",
-			label: "Email placeholder"
-		},
-		passwordLabel: {
-			type: "string",
-			default: "Password",
-			label: "Password label"
-		},
-		passwordPlaceholder: {
-			type: "string",
-			default: "",
-			label: "Password placeholder"
-		},
-		showPasswordLabel: {
-			type: "string",
-			default: "Show password",
-			label: "Show password label"
-		},
-		hidePasswordLabel: {
-			type: "string",
-			default: "Hide password",
-			label: "Hide password label"
-		},
-		submitLabel: {
-			type: "string",
-			default: "Sign In",
-			label: "Submit label"
-		},
-		invalidEmailMessage: {
-			type: "string",
-			default: "Enter a valid email address.",
-			label: "Invalid email message"
-		},
-		passwordRequiredMessage: {
-			type: "string",
-			default: "Enter your password.",
-			label: "Password required message"
-		},
-		invalidCredentialsMessage: {
-			type: "string",
-			default: "Incorrect email or password. Please try again.",
-			label: "Invalid credentials message"
-		},
-		blockedMessage: {
-			type: "string",
-			default: "This account has been blocked. Please contact support.",
-			label: "Blocked account message"
-		},
-		networkErrorMessage: {
-			type: "string",
-			default: "Unable to complete the request. Please try again.",
-			label: "Network error message"
-		},
-		genericErrorMessage: {
-			type: "string",
-			default: "Unable to sign in. Please try again.",
-			label: "Generic error message"
-		}
-	},
-	guideline: "Combined email+password sign-in form dispatching $actions.session.loginWithPassword; pre-fills the email from clientProfile.email, self-hides once the session is loggedIn, and exposes data-fs-sign-in-form-pending while the submit is in flight. Must be inside SessionRoot. See sign-in-form.md."
+	schema: { passwordPlaceholder: {
+		type: "string",
+		default: "",
+		label: "Password placeholder"
+	} },
+	guideline: "Password step of the sign-in surface: a password field and a submit dispatching $actions.session.loginWithPassword with the shared SignInRoot email draft. Renders only while the account has resolved, enables passwords, the password method is showing and the shopper is not loggedIn; otherwise nothing. Rejected credentials render beside the password field, every other failure in data-fs-sign-in-form-error. Labels and error messages are $content fields of sign-in-form. Reads no data of its own and renders no email field: compose SignInEmailControl beside it. Must be inside SignInRoot. See sign-in-form.md."
 });
 /**
-* Matter that composes `EmailField` + `PasswordField` under one submit and dispatches
-* `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`
-* (colocated reactive fragment) and the identity tri-state from `useSession()` (which also
-* enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.
-* Client-side validation (email format, password presence) blocks the dispatch before any network
-* round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct
-* from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and
-* `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.
+* Password method of the sign-in surface. It declares no fragment and reads no data of its own: the
+* gate is the `sign-in` context (`resolved`, `passwordEnabled` and `method === 'password'`) plus the
+* session read (`state !== 'loggedIn'`), so a store enabling both methods shows the password step only
+* while it is the method showing, and a store that disables passwords never shows it. It returns `null`
+* rather than unmounting, so a half-typed password survives a method switch.
+*
+* The email is the shared draft `SignInRoot` owns, read at submit time and trimmed; this form renders no
+* email field, and the submit stays disabled until that draft is a valid address. The password-presence
+* check runs on submit. The awaited dispatch's first `userError` maps to a `sign-in-form` message:
+* `INVALID_CREDENTIALS` is a claim about the password the shopper typed, so it renders on the
+* `PasswordField`; every other code is a claim about the account or the request and renders in
+* `data-fs-sign-in-form-error`. A dispatched attempt clears the password, accepted or rejected, and leaves the shared email alone.
+* While the write is in flight the password and submit are disabled and `data-fs-sign-in-form-pending` is
+* present so a checkout-CTA guard can block. The password clears when the session reaches `loggedIn`, and
+* when a `SignInModalPanel` hosting it closes: this form never unmounts, so it would otherwise outlive the
+* session it was typed for, and sit in the hidden panel after the shopper changed their mind.
 */
-function SignInForm({ emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, showPasswordLabel, hidePasswordLabel, submitLabel = "Sign In", invalidEmailMessage = "Enter a valid email address.", passwordRequiredMessage = "Enter your password.", invalidCredentialsMessage = "Incorrect email or password. Please try again.", blockedMessage = "This account has been blocked. Please contact support.", networkErrorMessage = "Unable to complete the request. Please try again.", genericErrorMessage = "Unable to sign in. Please try again.", $data: $dataProp, $actions: $actionsProp, className }) {
-	const $data = useDataOverride($dataProp);
+function SignInForm({ passwordPlaceholder, $content, $actions: $actionsProp, className }) {
 	const $actions = useActionsOverride($actionsProp);
 	const { state } = useSession();
-	const savedEmail = $data?.email ?? "";
-	const [email, setEmail] = useState(savedEmail);
+	const { email, method, passwordEnabled, resolved } = useSignIn();
+	const { format } = useMessageFormatter(SignInFormContent, $content);
 	const [password, setPassword] = useState("");
 	const [pending, setPending] = useState(false);
-	const [emailError, setEmailError] = useState(null);
 	const [passwordError, setPasswordError] = useState(null);
 	const [formError, setFormError] = useState(null);
+	const dispatching = useRef(false);
+	const panelOpen = useSignInDisclosureOpen();
 	useEffect(() => {
-		setEmail(savedEmail);
-	}, [savedEmail]);
-	if (state === "loggedIn") return null;
-	function handleEmailChange(next) {
-		setEmail(next);
-		if (emailError) setEmailError(null);
-	}
+		if (state === "loggedIn" || panelOpen === false) {
+			setPassword("");
+			setPasswordError(null);
+			setFormError(null);
+		}
+	}, [state, panelOpen]);
+	if (!(state !== "loggedIn" && resolved && passwordEnabled && method === "password")) return null;
+	const canSubmit = !pending && isValidEmail(email);
 	function handlePasswordChange(next) {
 		setPassword(next);
 		if (passwordError) setPasswordError(null);
 	}
 	async function handleSubmit(event) {
 		event.preventDefault();
-		const trimmedEmail = email.trim();
-		if (!isValidEmail(trimmedEmail)) {
-			setEmailError(invalidEmailMessage);
-			return;
-		}
+		if (!canSubmit || dispatching.current) return;
 		if (password.length === 0) {
-			setPasswordError(passwordRequiredMessage);
+			setPasswordError("passwordRequiredMessage");
 			return;
 		}
-		setEmailError(null);
+		const requestedEmail = email.trim();
 		setPasswordError(null);
 		setFormError(null);
+		dispatching.current = true;
 		setPending(true);
 		try {
 			const errors = await $actions?.session?.loginWithPassword?.({
-				email: trimmedEmail,
+				email: requestedEmail,
 				password
 			}) ?? [];
 			if (errors.length > 0) {
-				setFormError(mapSessionErrorMessage(errors[0], {
-					invalidCredentialsMessage,
-					blockedMessage,
-					networkErrorMessage,
-					genericErrorMessage
-				}));
-				setPassword("");
+				const field = mapSessionErrorField(errors[0]);
+				if (errors[0]?.code === "INVALID_CREDENTIALS") setPasswordError(field);
+				else setFormError(field);
 			}
+			setPassword("");
 		} finally {
+			dispatching.current = false;
 			setPending(false);
 		}
 	}
@@ -187,42 +187,32 @@ function SignInForm({ emailLabel, emailPlaceholder, passwordLabel, passwordPlace
 		...pending ? { "data-fs-sign-in-form-pending": "" } : {},
 		onSubmit: handleSubmit,
 		children: [
-			/* @__PURE__ */ jsx(EmailField, {
-				label: emailLabel,
-				placeholder: emailPlaceholder,
-				value: email,
-				disabled: pending,
-				invalid: emailError != null,
-				errorMessage: emailError ?? void 0,
-				onValueChange: handleEmailChange,
-				required: true
-			}),
 			/* @__PURE__ */ jsx(PasswordField, {
-				label: passwordLabel,
+				label: format("passwordLabel"),
 				placeholder: passwordPlaceholder,
 				value: password,
 				disabled: pending,
 				invalid: passwordError != null,
-				errorMessage: passwordError ?? void 0,
-				showPasswordLabel,
-				hidePasswordLabel,
+				errorMessage: passwordError ? format(passwordError) : void 0,
+				showPasswordLabel: format("showPasswordLabel"),
+				hidePasswordLabel: format("hidePasswordLabel"),
 				onValueChange: handlePasswordChange
 			}),
 			formError ? /* @__PURE__ */ jsx("div", {
 				"data-fs-sign-in-form-error": "",
 				role: "alert",
-				children: formError
+				children: format(formError)
 			}) : null,
 			/* @__PURE__ */ jsx(Button, {
 				type: "submit",
-				disabled: pending,
+				disabled: !canSubmit,
 				"data-fs-sign-in-form-submit": "",
-				children: submitLabel
+				children: format("submitLabel")
 			})
 		]
 	});
 }
 //#endregion
-export { SignInForm, SignInFormDefinition, mapSessionErrorMessage };
+export { SignInForm, SignInFormContent, SignInFormDefinition, mapSessionErrorField };
 
 //# sourceMappingURL=sign-in-form.js.map

package/dist/matter/sign-in-form/sign-in-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign-in-form.js","names":[],"sources":["../../../src/matter/sign-in-form/sign-in-form.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { EmailField, isValidEmail } from '../../particles/email-field/email-field.js';\nimport { PasswordField } from '../../particles/password-field/password-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — reads only clientProfile.email, the minimal slice this\n// matter owns for the pre-fill. Authored as a raw string (not the codegen graphql() factory),\n// mirroring EmailIdentificationControl; the compiler derives the entity fragment on `clientProfile`\n// and subscribes reactively.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SignInFormData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */\nexport type SignInFormSlice = Readonly<{ email?: string | null }>;\n\nexport type SignInFormMessages = Readonly<{\n  invalidCredentialsMessage: string;\n  blockedMessage: string;\n  networkErrorMessage: string;\n  genericErrorMessage: string;\n}>;\n\nexport type SignInFormProps = Readonly<{\n  emailLabel?: string;\n  emailPlaceholder?: string;\n  passwordLabel?: string;\n  passwordPlaceholder?: string;\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  submitLabel?: string;\n  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */\n  invalidEmailMessage?: string;\n  /** Inline error when the password field is submitted empty (this form owns the presence check). */\n  passwordRequiredMessage?: string;\n  invalidCredentialsMessage?: string;\n  blockedMessage?: string;\n  networkErrorMessage?: string;\n  genericErrorMessage?: string;\n  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */\n  $data?: SignInFormSlice | null;\n  /** Compiler-injected action surface; carries `session.loginWithPassword`. */\n  $actions?: ComponentActions;\n  className?: string;\n}>;\n\n// ---------------------------------------------------------------------------\n// Error mapping — pure, unit-tested.\n// ---------------------------------------------------------------------------\n\n/**\n * Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,\n * ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from\n * loginWithPassword but share the untyped `code: string` field, so they fall through to the\n * generic message defensively, alongside any future/unknown code.\n */\nexport function mapSessionErrorMessage(\n  error: SessionUserError | undefined,\n  messages: SignInFormMessages,\n): string | null {\n  if (!error) return null;\n  switch (error.code) {\n    case 'INVALID_CREDENTIALS':\n      return messages.invalidCredentialsMessage;\n    case 'BLOCKED':\n      return messages.blockedMessage;\n    case 'NETWORK_ERROR':\n      return messages.networkErrorMessage;\n    default:\n      return messages.genericErrorMessage;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const SignInFormDefinition = defineComponent<SignInFormProps>({\n  name: 'SignInForm',\n  importPath: '@vtex/faststore/components',\n  component: SignInForm,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { session: ['loginWithPassword'] },\n  requiresContext: 'session',\n  editor: { label: 'Sign In Form', category: 'identity' },\n  schema: {\n    emailLabel: { type: 'string', default: 'Email', label: 'Email label' },\n    emailPlaceholder: { type: 'string', default: 'you@example.com', label: 'Email placeholder' },\n    passwordLabel: { type: 'string', default: 'Password', label: 'Password label' },\n    passwordPlaceholder: { type: 'string', default: '', label: 'Password placeholder' },\n    showPasswordLabel: { type: 'string', default: 'Show password', label: 'Show password label' },\n    hidePasswordLabel: { type: 'string', default: 'Hide password', label: 'Hide password label' },\n    submitLabel: { type: 'string', default: 'Sign In', label: 'Submit label' },\n    invalidEmailMessage: { type: 'string', default: 'Enter a valid email address.', label: 'Invalid email message' },\n    passwordRequiredMessage: {\n      type: 'string',\n      default: 'Enter your password.',\n      label: 'Password required message',\n    },\n    invalidCredentialsMessage: {\n      type: 'string',\n      default: 'Incorrect email or password. Please try again.',\n      label: 'Invalid credentials message',\n    },\n    blockedMessage: {\n      type: 'string',\n      default: 'This account has been blocked. Please contact support.',\n      label: 'Blocked account message',\n    },\n    networkErrorMessage: {\n      type: 'string',\n      default: 'Unable to complete the request. Please try again.',\n      label: 'Network error message',\n    },\n    genericErrorMessage: {\n      type: 'string',\n      default: 'Unable to sign in. Please try again.',\n      label: 'Generic error message',\n    },\n  },\n  guideline:\n    'Combined email+password sign-in form dispatching $actions.session.loginWithPassword; pre-fills the email from clientProfile.email, self-hides once the session is loggedIn, and exposes data-fs-sign-in-form-pending while the submit is in flight. Must be inside SessionRoot. See sign-in-form.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Matter that composes `EmailField` + `PasswordField` under one submit and dispatches\n * `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`\n * (colocated reactive fragment) and the identity tri-state from `useSession()` (which also\n * enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.\n * Client-side validation (email format, password presence) blocks the dispatch before any network\n * round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct\n * from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and\n * `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.\n */\nexport function SignInForm({\n  emailLabel,\n  emailPlaceholder,\n  passwordLabel,\n  passwordPlaceholder,\n  showPasswordLabel,\n  hidePasswordLabel,\n  submitLabel = 'Sign In',\n  invalidEmailMessage = 'Enter a valid email address.',\n  passwordRequiredMessage = 'Enter your password.',\n  invalidCredentialsMessage = 'Incorrect email or password. Please try again.',\n  blockedMessage = 'This account has been blocked. Please contact support.',\n  networkErrorMessage = 'Unable to complete the request. Please try again.',\n  genericErrorMessage = 'Unable to sign in. Please try again.',\n  $data: $dataProp,\n  $actions: $actionsProp,\n  className,\n}: SignInFormProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  // Reads the tri-state for self-gating and, as a side effect, throws when rendered outside\n  // <SessionRoot> — called unconditionally, before any early return.\n  const { state } = useSession();\n\n  const savedEmail = $data?.email ?? '';\n  const [email, setEmail] = useState(savedEmail);\n  const [password, setPassword] = useState('');\n  const [pending, setPending] = useState(false);\n  const [emailError, setEmailError] = useState<string | null>(null);\n  const [passwordError, setPasswordError] = useState<string | null>(null);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  // Sync the pre-fill when the saved profile email resolves or changes, mirroring\n  // EmailIdentificationControl's pre-fill sync.\n  useEffect(() => {\n    setEmail(savedEmail);\n  }, [savedEmail]);\n\n  // An already-authenticated shopper is never offered a sign-in form.\n  if (state === 'loggedIn') return null;\n\n  function handleEmailChange(next: string) {\n    setEmail(next);\n    if (emailError) setEmailError(null);\n  }\n\n  function handlePasswordChange(next: string) {\n    setPassword(next);\n    if (passwordError) setPasswordError(null);\n  }\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n\n    const trimmedEmail = email.trim();\n    if (!isValidEmail(trimmedEmail)) {\n      setEmailError(invalidEmailMessage);\n      return;\n    }\n\n    if (password.length === 0) {\n      setPasswordError(passwordRequiredMessage);\n      return;\n    }\n\n    // Client-side checks passed — clear any prior field-level/form-level errors before dispatching.\n    setEmailError(null);\n    setPasswordError(null);\n    setFormError(null);\n    setPending(true);\n\n    try {\n      // Awaited (async/pessimistic): the cache flip is read on the next render via useSession(),\n      // never assumed here.\n      const errors = (await $actions?.session?.loginWithPassword?.({ email: trimmedEmail, password })) ?? [];\n\n      if (errors.length > 0) {\n        setFormError(\n          mapSessionErrorMessage(errors[0], {\n            invalidCredentialsMessage,\n            blockedMessage,\n            networkErrorMessage,\n            genericErrorMessage,\n          }),\n        );\n        // Credential hygiene: drop the rejected password, keep the email.\n        setPassword('');\n      }\n    } finally {\n      setPending(false);\n    }\n  }\n\n  return (\n    <form\n      className={className}\n      data-fs-sign-in-form=\"\"\n      {...(pending ? { 'data-fs-sign-in-form-pending': '' } : {})}\n      onSubmit={handleSubmit}\n    >\n      <EmailField\n        label={emailLabel}\n        placeholder={emailPlaceholder}\n        value={email}\n        disabled={pending}\n        invalid={emailError != null}\n        errorMessage={emailError ?? undefined}\n        onValueChange={handleEmailChange}\n        required\n      />\n      <PasswordField\n        label={passwordLabel}\n        placeholder={passwordPlaceholder}\n        value={password}\n        disabled={pending}\n        invalid={passwordError != null}\n        errorMessage={passwordError ?? undefined}\n        showPasswordLabel={showPasswordLabel}\n        hidePasswordLabel={hidePasswordLabel}\n        onValueChange={handlePasswordChange}\n      />\n      {formError ? (\n        <div data-fs-sign-in-form-error=\"\" role=\"alert\">\n          {formError}\n        </div>\n      ) : null}\n      <Button type=\"submit\" disabled={pending} data-fs-sign-in-form-submit=\"\">\n        {submitLabel}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sign-in-form.js","names":[],"sources":["../../../src/matter/sign-in-form/sign-in-form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport type { FormEvent } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { isValidEmail } from '../../particles/email-field/email-field.js';\nimport { PasswordField } from '../../particles/password-field/password-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { useSession } from '../session/session.js';\nimport { useSignIn } from '../sign-in/sign-in.js';\nimport { useSignInDisclosureOpen } from '../sign-in-disclosure/sign-in-disclosure.js';\n\n// ---------------------------------------------------------------------------\n// Content\n// ---------------------------------------------------------------------------\n\nexport const SignInFormContent = defineContentType({\n  id: 'sign-in-form',\n  title: 'Sign In Form',\n  description: 'Labels and error messages of the password sign-in step.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      passwordLabel: { type: 'string', title: 'Password label', format: 'icu-message', messageSource: 'Password' },\n      showPasswordLabel: {\n        type: 'string',\n        title: 'Show password label',\n        format: 'icu-message',\n        messageSource: 'Show password',\n      },\n      hidePasswordLabel: {\n        type: 'string',\n        title: 'Hide password label',\n        format: 'icu-message',\n        messageSource: 'Hide password',\n      },\n      submitLabel: { type: 'string', title: 'Submit label', format: 'icu-message', messageSource: 'Sign In' },\n      passwordRequiredMessage: {\n        type: 'string',\n        title: 'Password required message',\n        format: 'icu-message',\n        messageSource: 'Enter your password.',\n      },\n      invalidCredentialsMessage: {\n        type: 'string',\n        title: 'Invalid credentials message',\n        format: 'icu-message',\n        messageSource: 'Incorrect email or password. Please try again.',\n      },\n      // Temporarily, and with no time: VTEX ID reports BlockedUser with no duration, so any deadline\n      // here would be invented. Saying \"contact support\" sent a shopper somewhere that cannot help\n      // with a block that lifts on its own. See the RFC's Open question 2.\n      blockedMessage: {\n        type: 'string',\n        title: 'Blocked account message',\n        format: 'icu-message',\n        messageSource: 'Access to this account is temporarily blocked. Please try again later.',\n      },\n      networkErrorMessage: {\n        type: 'string',\n        title: 'Network error message',\n        format: 'icu-message',\n        messageSource: 'Unable to complete the request. Please try again.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Generic error message',\n        format: 'icu-message',\n        messageSource: 'Unable to sign in. Please try again.',\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The `sign-in-form` message a rejected sign-in renders. */\nexport type SignInFormErrorField = Extract<\n  MessageFieldName<typeof SignInFormContent>,\n  | 'passwordRequiredMessage'\n  | 'invalidCredentialsMessage'\n  | 'blockedMessage'\n  | 'networkErrorMessage'\n  | 'genericErrorMessage'\n>;\n\nexport type SignInFormProps = MessageLocaleProp &\n  Readonly<{\n    passwordPlaceholder?: string;\n    /** Labels and error messages; see `SignInFormContent`. */\n    $content?: ContentValue<typeof SignInFormContent>;\n    /** Compiler-injected action surface; carries `session.loginWithPassword`. */\n    $actions?: ComponentActions;\n    className?: string;\n  }>;\n\n// ---------------------------------------------------------------------------\n// Error mapping — pure, unit-tested.\n// ---------------------------------------------------------------------------\n\n/**\n * Maps the first resolved SessionUserError to the `sign-in-form` message that words it.\n * INVALID_ACCESS_CODE, ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable\n * from loginWithPassword but share the untyped `code: string` field, so they fall through to the\n * generic message defensively, alongside any future/unknown code.\n */\nexport function mapSessionErrorField(error: SessionUserError | undefined): SignInFormErrorField | null {\n  if (!error) return null;\n  switch (error.code) {\n    case 'INVALID_CREDENTIALS':\n      return 'invalidCredentialsMessage';\n    case 'BLOCKED':\n      return 'blockedMessage';\n    case 'NETWORK_ERROR':\n      return 'networkErrorMessage';\n    default:\n      return 'genericErrorMessage';\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const SignInFormDefinition = defineComponent<SignInFormProps>({\n  name: 'SignInForm',\n  importPath: '@vtex/faststore/components',\n  component: SignInForm,\n  content: SignInFormContent,\n  actions: { session: ['loginWithPassword'] },\n  requiresContext: 'sign-in',\n  editor: { label: 'Sign In Form', category: 'identity' },\n  schema: {\n    passwordPlaceholder: { type: 'string', default: '', label: 'Password placeholder' },\n  },\n  guideline:\n    'Password step of the sign-in surface: a password field and a submit dispatching $actions.session.loginWithPassword with the shared SignInRoot email draft. Renders only while the account has resolved, enables passwords, the password method is showing and the shopper is not loggedIn; otherwise nothing. Rejected credentials render beside the password field, every other failure in data-fs-sign-in-form-error. Labels and error messages are $content fields of sign-in-form. Reads no data of its own and renders no email field: compose SignInEmailControl beside it. Must be inside SignInRoot. See sign-in-form.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Password method of the sign-in surface. It declares no fragment and reads no data of its own: the\n * gate is the `sign-in` context (`resolved`, `passwordEnabled` and `method === 'password'`) plus the\n * session read (`state !== 'loggedIn'`), so a store enabling both methods shows the password step only\n * while it is the method showing, and a store that disables passwords never shows it. It returns `null`\n * rather than unmounting, so a half-typed password survives a method switch.\n *\n * The email is the shared draft `SignInRoot` owns, read at submit time and trimmed; this form renders no\n * email field, and the submit stays disabled until that draft is a valid address. The password-presence\n * check runs on submit. The awaited dispatch's first `userError` maps to a `sign-in-form` message:\n * `INVALID_CREDENTIALS` is a claim about the password the shopper typed, so it renders on the\n * `PasswordField`; every other code is a claim about the account or the request and renders in\n * `data-fs-sign-in-form-error`. A dispatched attempt clears the password, accepted or rejected, and leaves the shared email alone.\n * While the write is in flight the password and submit are disabled and `data-fs-sign-in-form-pending` is\n * present so a checkout-CTA guard can block. The password clears when the session reaches `loggedIn`, and\n * when a `SignInModalPanel` hosting it closes: this form never unmounts, so it would otherwise outlive the\n * session it was typed for, and sit in the hidden panel after the shopper changed their mind.\n */\nexport function SignInForm({ passwordPlaceholder, $content, $actions: $actionsProp, className }: SignInFormProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { state } = useSession();\n  const { email, method, passwordEnabled, resolved } = useSignIn();\n  const { format } = useMessageFormatter(SignInFormContent, $content);\n\n  const [password, setPassword] = useState('');\n  const [pending, setPending] = useState(false);\n  // The field that words each error, formatted at render.\n  const [passwordError, setPasswordError] = useState<SignInFormErrorField | null>(null);\n  const [formError, setFormError] = useState<SignInFormErrorField | null>(null);\n  // `pending` is state, so two submits delivered in one batch both read it as false. The ref closes that window.\n  const dispatching = useRef(false);\n\n  // `false` while the panel of the enclosing `SignInDisclosureRoot` is closed, `undefined` outside one: no close to follow.\n  const panelOpen = useSignInDisclosureOpen();\n\n  // This form never unmounts, so a typed password and the errors about it would otherwise outlive the\n  // session they belong to, or the panel the shopper closed, and greet whoever uses the page next.\n  useEffect(() => {\n    if (state === 'loggedIn' || panelOpen === false) {\n      setPassword('');\n      setPasswordError(null);\n      setFormError(null);\n    }\n  }, [state, panelOpen]);\n\n  // `resolved` first: an unresolved read leaves every flag `false`, which looks like an account that\n  // enables nothing.\n  const gated = state !== 'loggedIn' && resolved && passwordEnabled && method === 'password';\n  if (!gated) return null;\n\n  const canSubmit = !pending && isValidEmail(email);\n\n  function handlePasswordChange(next: string) {\n    setPassword(next);\n    if (passwordError) setPasswordError(null);\n  }\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!canSubmit || dispatching.current) return;\n\n    if (password.length === 0) {\n      setPasswordError('passwordRequiredMessage');\n      return;\n    }\n\n    // The address this render's draft holds, trimmed: the dispatch cannot move if the draft is edited while it\n    // is in flight.\n    const requestedEmail = email.trim();\n\n    // Presence check passed — clear any prior errors before dispatching.\n    setPasswordError(null);\n    setFormError(null);\n    dispatching.current = true;\n    setPending(true);\n\n    try {\n      // Awaited (async/pessimistic): the cache flip is read on the next render via useSession(),\n      // never assumed here.\n      const errors = (await $actions?.session?.loginWithPassword?.({ email: requestedEmail, password })) ?? [];\n\n      if (errors.length > 0) {\n        const field = mapSessionErrorField(errors[0]);\n        if (errors[0]?.code === 'INVALID_CREDENTIALS') setPasswordError(field);\n        else setFormError(field);\n      }\n      // Credential hygiene: the password has been sent, whatever the answer, so drop it and keep the shared email.\n      // The `loggedIn` effect covers the session flip; this covers a flip that does not arrive.\n      setPassword('');\n    } finally {\n      dispatching.current = false;\n      setPending(false);\n    }\n  }\n\n  return (\n    <form\n      className={className}\n      data-fs-sign-in-form=\"\"\n      {...(pending ? { 'data-fs-sign-in-form-pending': '' } : {})}\n      onSubmit={handleSubmit}\n    >\n      <PasswordField\n        label={format('passwordLabel')}\n        placeholder={passwordPlaceholder}\n        value={password}\n        disabled={pending}\n        invalid={passwordError != null}\n        errorMessage={passwordError ? format(passwordError) : undefined}\n        showPasswordLabel={format('showPasswordLabel')}\n        hidePasswordLabel={format('hidePasswordLabel')}\n        onValueChange={handlePasswordChange}\n      />\n      {formError ? (\n        <div data-fs-sign-in-form-error=\"\" role=\"alert\">\n          {format(formError)}\n        </div>\n      ) : null}\n      <Button type=\"submit\" disabled={!canSubmit} data-fs-sign-in-form-submit=\"\">\n        {format('submitLabel')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/binding-switcher/binding-switcher.d.ts

@@ -1,8 +1,33 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/particles/binding-switcher/binding-switcher.d.ts
+export declare const BindingSwitcherContent: {
+  readonly id: "binding-switcher";
+  readonly title: "Binding Switcher";
+  readonly description: "Label of the binding select and the notice shown when a page has no equivalent in the chosen binding.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Language";
+      };
+      readonly notice: {
+        readonly type: "string";
+        readonly title: "No-equivalent notice";
+        readonly description: "Shown when the page loaded with fs_notice=no-equivalent.";
+        readonly format: "icu-message";
+        readonly messageSource: "This page isn't available in the selected language.";
+      };
+    };
+  };
+};
 export type BindingSwitcherBinding = {
   locale?: unknown;
   currency?: unknown;
@@ -20,19 +45,15 @@ export declare function bindingSwitcherOptions(bindings: Record<string, BindingS
   id: string;
   label: string;
 }[];
-export declare const NOTICE_DEFAULT = "This page isn't available in the selected language.";
-export declare const LABEL_DEFAULT = "Language";
-export type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+export type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
   /** `foundation.json` `localization.bindings`, keyed by binding id. No library default. */
   bindings?: Record<string, BindingSwitcherBinding> | null;
-  /** Accessible name, rendered as `Select.Label`. */
-  label?: string;
-  /** Shown when the page loaded with `fs_notice=no-equivalent`. */
-  notice?: string;
   /** Injected from `actions: { locale: ['set'] }`. */
   $actions?: ComponentActions;
+  /** `label` is the accessible name, rendered as `Select.Label`; `notice` shows on `fs_notice=no-equivalent`. */
+  $content?: ContentValue<typeof BindingSwitcherContent>;
 };
 export declare const BindingSwitcherDefinition: ComponentDefinition<BindingSwitcherProps>;
-export declare function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, className, ...props }: BindingSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BindingSwitcher({ bindings, $actions: $actionsProp, $locale, $content, className, ...props }: BindingSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=binding-switcher.d.ts.map

package/dist/particles/binding-switcher/binding-switcher.js

@@ -1,14 +1,39 @@
 "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 { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
 import { Select } from "../select/select.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/particles/binding-switcher/binding-switcher.tsx
+const BindingSwitcherContent = defineContentType({
+	id: "binding-switcher",
+	title: "Binding Switcher",
+	description: "Label of the binding select and the notice shown when a page has no equivalent in the chosen binding.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Language"
+			},
+			notice: {
+				type: "string",
+				title: "No-equivalent notice",
+				description: "Shown when the page loaded with fs_notice=no-equivalent.",
+				format: "icu-message",
+				messageSource: "This page isn't available in the selected language."
+			}
+		}
+	}
+});
 /**
 * `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an
 * own key, the value is a non-null object, and `locale` is a string. Fewer than two counted
@@ -61,38 +86,25 @@ function compareOptions(a, b, activeLocale) {
 		return a.label.localeCompare(b.label) || a.id.localeCompare(b.id);
 	}
 }
-const NOTICE_DEFAULT = "This page isn't available in the selected language.";
 /** How long the control stays disabled after a started navigation that never unloads the page. */
 const NAVIGATION_TIMEOUT_MS = 1e4;
-const LABEL_DEFAULT = "Language";
 const BindingSwitcherDefinition = defineComponent({
 	name: "BindingSwitcher",
 	importPath: "@vtex/faststore/components",
 	component: BindingSwitcher,
+	content: BindingSwitcherContent,
 	editor: {
 		label: "Binding Switcher",
 		category: "action"
 	},
 	actions: { locale: ["set"] },
-	schema: {
-		bindings: {
-			type: "object",
-			label: "Bindings"
-		},
-		label: {
-			type: "string",
-			default: "Language",
-			label: "Label"
-		},
-		notice: {
-			type: "string",
-			default: "This page isn't available in the selected language.",
-			label: "Notice"
-		}
-	},
-	guideline: "Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings."
+	schema: { bindings: {
+		type: "object",
+		label: "Bindings"
+	} },
+	guideline: "Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings. Its label and no-equivalent notice come from the $content fields label and notice."
 });
-function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, className, ...props }) {
+function BindingSwitcher({ bindings, $actions: $actionsProp, $locale, $content, className, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
 	const { bindingId, locale } = useStorefrontContext();
 	const options = useMemo(() => bindingSwitcherOptions(bindings, locale), [bindings, locale]);
@@ -101,8 +113,7 @@ function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, clas
 	const [noticePath, setNoticePath] = useState(null);
 	const noticeVisible = noticePath !== null && noticePath === path;
 	const pendingTimeout = useRef(void 0);
-	const labelText = resolveAuthoredCopy(label, LABEL_DEFAULT);
-	const noticeText = resolveAuthoredCopy(notice, NOTICE_DEFAULT);
+	const messages = useMessageFormatter(BindingSwitcherContent, $content);
 	const optionCount = options.length;
 	useEffect(() => {
 		if (optionCount < 2) return;
@@ -152,13 +163,13 @@ function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, clas
 		...pending ? { "data-fs-binding-switcher-pending": "" } : {},
 		children: [noticeVisible ? /* @__PURE__ */ jsx("output", {
 			"data-fs-binding-switcher-notice": "",
-			children: noticeText
+			children: messages.format("notice")
 		}) : null, /* @__PURE__ */ jsxs(Select.Root, {
 			value: bindingId,
 			onValueChange: handleChange,
 			disabled: pending,
 			children: [
-				/* @__PURE__ */ jsx(Select.Label, { children: labelText }),
+				/* @__PURE__ */ jsx(Select.Label, { children: messages.format("label") }),
 				/* @__PURE__ */ jsxs(Select.Trigger, {
 					disabled: pending,
 					children: [/* @__PURE__ */ jsx(Select.Value, { children: (value) => options.find((option) => option.id === value)?.label ?? value ?? "" }), /* @__PURE__ */ jsx(Select.Icon, { children: "▾" })]
@@ -178,6 +189,6 @@ function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, clas
 	});
 }
 //#endregion
-export { BindingSwitcher, BindingSwitcherDefinition, LABEL_DEFAULT, NOTICE_DEFAULT, bindingSwitcherOptions };
+export { BindingSwitcher, BindingSwitcherContent, BindingSwitcherDefinition, bindingSwitcherOptions };
 
 //# sourceMappingURL=binding-switcher.js.map