@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/delivery-options/use-delivery-option-selection.d.ts

@@ -1,4 +1,5 @@
 import { ShippingOption } from "../shipping-simulator/shipping-simulator.js";
+import "../../sdk/shipping/option-select-operations.js";
 import "../../sdk/actions/types.js";
 //#region src/matter/delivery-options/use-delivery-option-selection.d.ts
 export type RawDeliveryOptionsData = {

package/dist/matter/delivery-options/use-delivery-option-selection.js

@@ -49,7 +49,7 @@ function useDeliveryOptionSelection({ $data: $dataProp, $actions, mockOptions })
 			if (selectionToken.current !== token) return;
 			const [firstError] = userErrors;
 			if (firstError) {
-				setSelectionError(firstError.message);
+				setSelectionError(firstError);
 				callbacks?.onSettled?.(false);
 			} else callbacks?.onSettled?.(true);
 		});

package/dist/matter/delivery-options/use-delivery-option-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-delivery-option-selection.js","names":[],"sources":["../../../src/matter/delivery-options/use-delivery-option-selection.ts"],"sourcesContent":["'use client';\n\nimport { useMemo, useRef, useState } from 'react';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { ShippingOption, ShippingSimulatorContextValue } from '../shipping-simulator/shipping-simulator.js';\n\n// ---------------------------------------------------------------------------\n// Raw data type (shape of the reactive fragment result). `$data` is the unwrapped\n// `Shipping` entity the reactive runtime forwards (Decision 7 / INV-7), not `{ shipping: … }`.\n// Shared by DeliveryOptionsRoot and its collapsed variants (Accordion/Dialog/Drawer), all of\n// which read the same `shipping { options … selectedOptionId }` selection.\n// ---------------------------------------------------------------------------\n\nexport type RawDeliveryOptionsData = {\n  options: ShippingOption[];\n  selectedOptionId: string | null;\n};\n\nconst EMPTY_OPTIONS: ShippingOption[] = [];\n\n/**\n * Joins the structural classes a collapsed variant always applies (positioning, sizing, animation)\n * with the page-supplied visual override, dropping empty slots. Keeps the visual layer out of the\n * component (Free Particle Model) while guaranteeing the overlay still positions itself.\n */\nexport function cx(...classes: Array<string | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type DeliveryOptionSelection = {\n  /** Real options when the fetch has any, else the `mockOptions` fallback, else empty. */\n  options: ShippingOption[];\n  /** Group value: the persisted `selectedOptionId` for real data, local state under mock. */\n  selectedOptionId: string | null;\n  /** True while the mock fallback is showing (no real options + `mockOptions` present). */\n  usingMockOptions: boolean;\n  /** Message of the first `userError` from the latest real selection, or `null`. */\n  selectionError: string | null;\n  /**\n   * Selects an option. Under mock data the choice is local-only and never dispatches the action.\n   * Under real data it dispatches `shipping.selectOption`, request-sequenced so only the latest\n   * click wins the error state. `onSettled(ok)` fires once the selection resolves — `ok` is `false`\n   * when the mutation surfaced a `userError` (or no action was injected) — letting collapsed\n   * variants close only on success.\n   */\n  selectOption: (optionId: string, callbacks?: { onSettled?: (ok: boolean) => void }) => void;\n  /** The FSPG-832 simulator context value (inert simulation fields) providers must supply. */\n  contextValue: ShippingSimulatorContextValue;\n};\n\n/**\n * Shared selection engine behind `DeliveryOptionsRoot` and its collapsed variants\n * (`DeliveryOptionsAccordion` / `Dialog` / `Drawer`). It owns the four behaviours the spec\n * requires identically across every surface, so they cannot drift apart:\n *\n * - real-vs-mock option resolution — real options of any length always win (INV-8);\n * - the local mock selection, reset whenever the real↔mock boundary flips so a stale mock\n *   choice from before a real-options interlude never reappears (Decision 7);\n * - the reactive `selectedOptionId` binding (Decision 5 — no local state for real data);\n * - the request-sequenced `selectOption` dispatch that resolves `userErrors` for inline display\n *   (US-4), guarding against an earlier click's result overwriting a later one.\n *\n * Callers render `selectionError` (as `role=\"alert\"`) and wire `contextValue` themselves; the\n * collapsed variants additionally use `onSettled` to close their panel only on success.\n */\nexport function useDeliveryOptionSelection({\n  $data: $dataProp,\n  $actions,\n  mockOptions,\n}: {\n  $data?: RawDeliveryOptionsData | null;\n  $actions?: ComponentActions;\n  mockOptions?: ShippingOption[];\n}): DeliveryOptionSelection {\n  const $data = useDataOverride($dataProp);\n  const realOptions = $data?.options;\n  const usingMockOptions = !realOptions?.length && !!mockOptions?.length;\n  const options = realOptions?.length ? realOptions : (mockOptions ?? EMPTY_OPTIONS);\n\n  const [mockSelectedOptionId, setMockSelectedOptionId] = useState<string | null>(null);\n  const [wasUsingMockOptions, setWasUsingMockOptions] = useState(usingMockOptions);\n  if (usingMockOptions !== wasUsingMockOptions) {\n    setWasUsingMockOptions(usingMockOptions);\n    setMockSelectedOptionId(null);\n  }\n  const selectedOptionId = usingMockOptions ? mockSelectedOptionId : ($data?.selectedOptionId ?? null);\n\n  const [selectionError, setSelectionError] = useState<string | null>(null);\n  const selectionToken = useRef(0);\n\n  function selectOption(optionId: string, callbacks?: { onSettled?: (ok: boolean) => void }) {\n    if (usingMockOptions) {\n      setMockSelectedOptionId(optionId);\n      callbacks?.onSettled?.(true);\n      return;\n    }\n    setSelectionError(null);\n    const dispatch = $actions?.shipping?.selectOption;\n    if (!dispatch) {\n      callbacks?.onSettled?.(false);\n      return;\n    }\n    const token = ++selectionToken.current;\n    dispatch(optionId).then((userErrors) => {\n      if (selectionToken.current !== token) return;\n      const [firstError] = userErrors;\n      if (firstError) {\n        setSelectionError(firstError.message);\n        callbacks?.onSettled?.(false);\n      } else {\n        callbacks?.onSettled?.(true);\n      }\n    });\n  }\n\n  const contextValue = useMemo<ShippingSimulatorContextValue>(\n    () => ({\n      postalCode: '',\n      setPostalCode: () => {},\n      status: 'idle',\n      shippingOptions: options,\n      userErrors: [],\n      submit: () => {},\n    }),\n    [options],\n  );\n\n  return { options, selectedOptionId, usingMockOptions, selectionError, selectOption, contextValue };\n}\n"],"mappings":";;;;AAmBA,MAAM,gBAAkC,CAAC;;;;;;;;;;;;;;;;AA+CzC,SAAgB,2BAA2B,EACzC,OAAO,WACP,UACA,eAK0B;CAC1B,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,cAAc,OAAO;CAC3B,MAAM,mBAAmB,CAAC,aAAa,UAAU,CAAC,CAAC,aAAa;CAChE,MAAM,UAAU,aAAa,SAAS,cAAe,eAAe;CAEpE,MAAM,CAAC,sBAAsB,2BAA2B,SAAwB,IAAI;CACpF,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,gBAAgB;CAC/E,IAAI,qBAAqB,qBAAqB;EAC5C,uBAAuB,gBAAgB;EACvC,wBAAwB,IAAI;CAC9B;CACA,MAAM,mBAAmB,mBAAmB,uBAAwB,OAAO,oBAAoB;CAE/F,MAAM,CAAC,gBAAgB,qBAAqB,SAAwB,IAAI;CACxE,MAAM,iBAAiB,OAAO,CAAC;CAE/B,SAAS,aAAa,UAAkB,WAAmD;EACzF,IAAI,kBAAkB;GACpB,wBAAwB,QAAQ;GAChC,WAAW,YAAY,IAAI;GAC3B;EACF;EACA,kBAAkB,IAAI;EACtB,MAAM,WAAW,UAAU,UAAU;EACrC,IAAI,CAAC,UAAU;GACb,WAAW,YAAY,KAAK;GAC5B;EACF;EACA,MAAM,QAAQ,EAAE,eAAe;EAC/B,SAAS,QAAQ,CAAC,CAAC,MAAM,eAAe;GACtC,IAAI,eAAe,YAAY,OAAO;GACtC,MAAM,CAAC,cAAc;GACrB,IAAI,YAAY;IACd,kBAAkB,WAAW,OAAO;IACpC,WAAW,YAAY,KAAK;GAC9B,OACE,WAAW,YAAY,IAAI;EAE/B,CAAC;CACH;CAcA,OAAO;EAAE;EAAS;EAAkB;EAAkB;EAAgB;EAAc,cAZ/D,eACZ;GACL,YAAY;GACZ,qBAAqB,CAAC;GACtB,QAAQ;GACR,iBAAiB;GACjB,YAAY,CAAC;GACb,cAAc,CAAC;EACjB,IACA,CAAC,OAAO,CAGqF;CAAE;AACnG"}
+{"version":3,"file":"use-delivery-option-selection.js","names":[],"sources":["../../../src/matter/delivery-options/use-delivery-option-selection.ts"],"sourcesContent":["'use client';\n\nimport { useMemo, useRef, useState } from 'react';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { ShippingOptionSelectUserError } from '../../sdk/shipping/option-select-operations.js';\nimport type { ShippingOption, ShippingSimulatorContextValue } from '../shipping-simulator/shipping-simulator.js';\n\n// ---------------------------------------------------------------------------\n// Raw data type (shape of the reactive fragment result). `$data` is the unwrapped\n// `Shipping` entity the reactive runtime forwards (Decision 7 / INV-7), not `{ shipping: … }`.\n// Shared by DeliveryOptionsRoot and its collapsed variants (Accordion/Dialog/Drawer), all of\n// which read the same `shipping { options … selectedOptionId }` selection.\n// ---------------------------------------------------------------------------\n\nexport type RawDeliveryOptionsData = {\n  options: ShippingOption[];\n  selectedOptionId: string | null;\n};\n\nconst EMPTY_OPTIONS: ShippingOption[] = [];\n\n/**\n * The codes a selection can resolve: `ShippingOptionSelectErrorCode` (the sdk types `code` as a string)\n * plus the client-minted transport failure. Each surface words them from its own `$content`.\n */\nexport type DeliveryOptionSelectErrorCode =\n  | 'MISSING_CART_CONTEXT'\n  | 'CART_NOT_FOUND'\n  | 'OPTION_UNAVAILABLE'\n  | 'MISSING_SHIPPING_ADDRESS'\n  | 'NETWORK_ERROR';\n\n/**\n * Joins the structural classes a collapsed variant always applies (positioning, sizing, animation)\n * with the page-supplied visual override, dropping empty slots. Keeps the visual layer out of the\n * component (Free Particle Model) while guaranteeing the overlay still positions itself.\n */\nexport function cx(...classes: Array<string | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type DeliveryOptionSelection = {\n  /** Real options when the fetch has any, else the `mockOptions` fallback, else empty. */\n  options: ShippingOption[];\n  /** Group value: the persisted `selectedOptionId` for real data, local state under mock. */\n  selectedOptionId: string | null;\n  /** True while the mock fallback is showing (no real options + `mockOptions` present). */\n  usingMockOptions: boolean;\n  /** The first `userError` from the latest real selection, or `null`. */\n  selectionError: ShippingOptionSelectUserError | null;\n  /**\n   * Selects an option. Under mock data the choice is local-only and never dispatches the action.\n   * Under real data it dispatches `shipping.selectOption`, request-sequenced so only the latest\n   * click wins the error state. `onSettled(ok)` fires once the selection resolves — `ok` is `false`\n   * when the mutation surfaced a `userError` (or no action was injected) — letting collapsed\n   * variants close only on success.\n   */\n  selectOption: (optionId: string, callbacks?: { onSettled?: (ok: boolean) => void }) => void;\n  /** The FSPG-832 simulator context value (inert simulation fields) providers must supply. */\n  contextValue: ShippingSimulatorContextValue;\n};\n\n/**\n * Shared selection engine behind `DeliveryOptionsRoot` and its collapsed variants\n * (`DeliveryOptionsAccordion` / `Dialog` / `Drawer`). It owns the four behaviours the spec\n * requires identically across every surface, so they cannot drift apart:\n *\n * - real-vs-mock option resolution — real options of any length always win (INV-8);\n * - the local mock selection, reset whenever the real↔mock boundary flips so a stale mock\n *   choice from before a real-options interlude never reappears (Decision 7);\n * - the reactive `selectedOptionId` binding (Decision 5 — no local state for real data);\n * - the request-sequenced `selectOption` dispatch that resolves `userErrors` for inline display\n *   (US-4), guarding against an earlier click's result overwriting a later one.\n *\n * Callers render `selectionError` (as `role=\"alert\"`) and wire `contextValue` themselves; the\n * collapsed variants additionally use `onSettled` to close their panel only on success.\n */\nexport function useDeliveryOptionSelection({\n  $data: $dataProp,\n  $actions,\n  mockOptions,\n}: {\n  $data?: RawDeliveryOptionsData | null;\n  $actions?: ComponentActions;\n  mockOptions?: ShippingOption[];\n}): DeliveryOptionSelection {\n  const $data = useDataOverride($dataProp);\n  const realOptions = $data?.options;\n  const usingMockOptions = !realOptions?.length && !!mockOptions?.length;\n  const options = realOptions?.length ? realOptions : (mockOptions ?? EMPTY_OPTIONS);\n\n  const [mockSelectedOptionId, setMockSelectedOptionId] = useState<string | null>(null);\n  const [wasUsingMockOptions, setWasUsingMockOptions] = useState(usingMockOptions);\n  if (usingMockOptions !== wasUsingMockOptions) {\n    setWasUsingMockOptions(usingMockOptions);\n    setMockSelectedOptionId(null);\n  }\n  const selectedOptionId = usingMockOptions ? mockSelectedOptionId : ($data?.selectedOptionId ?? null);\n\n  const [selectionError, setSelectionError] = useState<ShippingOptionSelectUserError | null>(null);\n  const selectionToken = useRef(0);\n\n  function selectOption(optionId: string, callbacks?: { onSettled?: (ok: boolean) => void }) {\n    if (usingMockOptions) {\n      setMockSelectedOptionId(optionId);\n      callbacks?.onSettled?.(true);\n      return;\n    }\n    setSelectionError(null);\n    const dispatch = $actions?.shipping?.selectOption;\n    if (!dispatch) {\n      callbacks?.onSettled?.(false);\n      return;\n    }\n    const token = ++selectionToken.current;\n    dispatch(optionId).then((userErrors) => {\n      if (selectionToken.current !== token) return;\n      const [firstError] = userErrors;\n      if (firstError) {\n        setSelectionError(firstError);\n        callbacks?.onSettled?.(false);\n      } else {\n        callbacks?.onSettled?.(true);\n      }\n    });\n  }\n\n  const contextValue = useMemo<ShippingSimulatorContextValue>(\n    () => ({\n      postalCode: '',\n      setPostalCode: () => {},\n      status: 'idle',\n      shippingOptions: options,\n      userErrors: [],\n      submit: () => {},\n    }),\n    [options],\n  );\n\n  return { options, selectedOptionId, usingMockOptions, selectionError, selectOption, contextValue };\n}\n"],"mappings":";;;;AAoBA,MAAM,gBAAkC,CAAC;;;;;;;;;;;;;;;;AA0DzC,SAAgB,2BAA2B,EACzC,OAAO,WACP,UACA,eAK0B;CAC1B,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,cAAc,OAAO;CAC3B,MAAM,mBAAmB,CAAC,aAAa,UAAU,CAAC,CAAC,aAAa;CAChE,MAAM,UAAU,aAAa,SAAS,cAAe,eAAe;CAEpE,MAAM,CAAC,sBAAsB,2BAA2B,SAAwB,IAAI;CACpF,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,gBAAgB;CAC/E,IAAI,qBAAqB,qBAAqB;EAC5C,uBAAuB,gBAAgB;EACvC,wBAAwB,IAAI;CAC9B;CACA,MAAM,mBAAmB,mBAAmB,uBAAwB,OAAO,oBAAoB;CAE/F,MAAM,CAAC,gBAAgB,qBAAqB,SAA+C,IAAI;CAC/F,MAAM,iBAAiB,OAAO,CAAC;CAE/B,SAAS,aAAa,UAAkB,WAAmD;EACzF,IAAI,kBAAkB;GACpB,wBAAwB,QAAQ;GAChC,WAAW,YAAY,IAAI;GAC3B;EACF;EACA,kBAAkB,IAAI;EACtB,MAAM,WAAW,UAAU,UAAU;EACrC,IAAI,CAAC,UAAU;GACb,WAAW,YAAY,KAAK;GAC5B;EACF;EACA,MAAM,QAAQ,EAAE,eAAe;EAC/B,SAAS,QAAQ,CAAC,CAAC,MAAM,eAAe;GACtC,IAAI,eAAe,YAAY,OAAO;GACtC,MAAM,CAAC,cAAc;GACrB,IAAI,YAAY;IACd,kBAAkB,UAAU;IAC5B,WAAW,YAAY,KAAK;GAC9B,OACE,WAAW,YAAY,IAAI;EAE/B,CAAC;CACH;CAcA,OAAO;EAAE;EAAS;EAAkB;EAAkB;EAAgB;EAAc,cAZ/D,eACZ;GACL,YAAY;GACZ,qBAAqB,CAAC;GACtB,QAAQ;GACR,iBAAiB;GACjB,YAAY,CAAC;GACb,cAAc,CAAC;EACjB,IACA,CAAC,OAAO,CAGqF;CAAE;AACnG"}

package/dist/matter/email-identification/email-identification.d.ts

@@ -1,19 +1,40 @@
+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/matter/email-identification/email-identification.d.ts
+export declare const EmailIdentificationControlContent: {
+  readonly id: "email-identification-control";
+  readonly title: "Email Identification Control";
+  readonly description: "The inline message shown when saving the email fails.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Save failure message";
+        readonly description: "Shown for a network failure and for any refusal the shopper cannot act on.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to save your details. Please try again.";
+      };
+    };
+  };
+};
 /** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */
 export type EmailIdentificationSlice = {
   email?: string | null;
 };
-export type EmailIdentificationControlProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {
+export type EmailIdentificationControlProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & MessageLocaleProp & {
   /** Accessible label passed to the EmailField. */
   label?: string;
   /** Input placeholder passed to the EmailField. */
   placeholder?: string;
   /** Inline error text for an invalid email format (port of `checkout/form-messages.invalid-email`). */
   invalidEmailMessage?: string;
+  /** The inline message for a refused save. */
+  $content?: ContentValue<typeof EmailIdentificationControlContent>;
   /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */
   $data?: EmailIdentificationSlice | null;
   /** Compiler-injected action surface; carries `identity.clientProfileUpdate`. */
@@ -29,9 +50,10 @@ export declare const EmailIdentificationControlDefinition: ComponentDefinition<E
  * flight the field is disabled and `data-fs-email-identification-pending` is present so a
  * checkout-CTA guard can block. When the session reports `canEditData: false` (identified but
  * unauthenticated claimed profile — VTEX refuses the write server-side) the field renders disabled
- * with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline; the
+ * with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline, worded by the
+ * `$content` field for their code (genericErrorMessage for a code it does not know); the
  * session state is never computed locally.
  */
-export declare function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $data: $dataProp, $actions: $actionsProp, className, ...props }: EmailIdentificationControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $content, $locale, $data: $dataProp, $actions: $actionsProp, className, ...props }: EmailIdentificationControlProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=email-identification.d.ts.map

package/dist/matter/email-identification/email-identification.js

@@ -1,17 +1,17 @@
 "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 { EmailField, isValidEmail } from "../../particles/email-field/email-field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { useSession } from "../session/session.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-const EmailIdentificationControlDefinition = defineComponent({
-	name: "EmailIdentificationControl",
-	importPath: "@vtex/faststore/components",
-	component: EmailIdentificationControl,
-	fragment: `
+//#region src/matter/email-identification/email-identification.tsx
+const fragment = `
   fragment EmailIdentificationData on Query {
     clientProfile {
       __typename
@@ -19,7 +19,39 @@ const EmailIdentificationControlDefinition = defineComponent({
       email
     }
   }
-`,
+`;
+const EmailIdentificationControlContent = defineContentType({
+	id: "email-identification-control",
+	title: "Email Identification Control",
+	description: "The inline message shown when saving the email fails.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { genericErrorMessage: {
+			type: "string",
+			title: "Save failure message",
+			description: "Shown for a network failure and for any refusal the shopper cannot act on.",
+			format: "icu-message",
+			messageSource: "Unable to save your details. Please try again."
+		} }
+	}
+});
+/**
+* `ClientProfileUpdateErrorCode` of API Core's schema plus the client-minted transport failure. None is
+* something the shopper can fix by editing the email, so all share the generic message.
+*/
+const EMAIL_IDENTIFICATION_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NO_PROFILE_FIELD_PROVIDED: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
+const EmailIdentificationControlDefinition = defineComponent({
+	name: "EmailIdentificationControl",
+	importPath: "@vtex/faststore/components",
+	component: EmailIdentificationControl,
+	content: EmailIdentificationControlContent,
+	fragment,
 	fetchStrategy: "reactive",
 	actions: { identity: ["clientProfileUpdate"] },
 	requiresContext: "session",
@@ -41,7 +73,7 @@ const EmailIdentificationControlDefinition = defineComponent({
 			label: "Invalid email message"
 		}
 	},
-	guideline: "Checkout-bound email field: pre-fills from clientProfile.email and persists a valid changed email via $actions.identity.clientProfileUpdate (anonymous→identified). Must be inside SessionRoot. See email-identification.md."
+	guideline: "Checkout-bound email field: pre-fills from clientProfile.email and persists a valid changed email via $actions.identity.clientProfileUpdate (anonymous→identified); a refused save shows the $content field genericErrorMessage. Must be inside SessionRoot. See email-identification.md."
 });
 /**
 * Matter that binds the presentational `EmailField` to the User Identity foundation. It reads
@@ -52,12 +84,14 @@ const EmailIdentificationControlDefinition = defineComponent({
 * flight the field is disabled and `data-fs-email-identification-pending` is present so a
 * checkout-CTA guard can block. When the session reports `canEditData: false` (identified but
 * unauthenticated claimed profile — VTEX refuses the write server-side) the field renders disabled
-* with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline; the
+* with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline, worded by the
+* `$content` field for their code (genericErrorMessage for a code it does not know); the
 * session state is never computed locally.
 */
-function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $data: $dataProp, $actions: $actionsProp, className, ...props }) {
+function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $content, $locale, $data: $dataProp, $actions: $actionsProp, className, ...props }) {
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
+	const { format } = useMessageFormatter(EmailIdentificationControlContent, $content);
 	const { canEditData } = useSession();
 	const readOnly = !canEditData;
 	const savedEmail = $data?.email ?? "";
@@ -67,6 +101,9 @@ function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $
 	useEffect(() => {
 		setValue(savedEmail);
 	}, [savedEmail]);
+	function serverErrorMessage(error) {
+		return formatErrorCode(EmailIdentificationControlContent, EMAIL_IDENTIFICATION_ERROR_FIELDS, error, format, "genericErrorMessage");
+	}
 	function handleValueChange(next) {
 		setValue(next);
 		if (serverError) setServerError(null);
@@ -83,7 +120,7 @@ function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $
 		setServerError(null);
 		try {
 			const errors = await $actions?.identity?.clientProfileUpdate?.({ email: trimmed }) ?? [];
-			if (errors.length > 0) setServerError(errors[0]?.message ?? null);
+			if (errors.length > 0) setServerError(errors[0] ?? null);
 		} finally {
 			setPending(false);
 		}
@@ -100,7 +137,7 @@ function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $
 			value,
 			disabled: pending || readOnly,
 			invalid: serverError != null,
-			errorMessage: serverError ?? invalidEmailMessage,
+			errorMessage: serverError ? serverErrorMessage(serverError) : invalidEmailMessage,
 			onValueChange: handleValueChange,
 			onBlur: handleBlur,
 			required: true
@@ -108,6 +145,6 @@ function EmailIdentificationControl({ label, placeholder, invalidEmailMessage, $
 	});
 }
 //#endregion
-export { EmailIdentificationControl, EmailIdentificationControlDefinition };
+export { EMAIL_IDENTIFICATION_ERROR_FIELDS, EmailIdentificationControl, EmailIdentificationControlContent, EmailIdentificationControlDefinition };
 
 //# sourceMappingURL=email-identification.js.map

package/dist/matter/email-identification/email-identification.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-identification.js","names":[],"sources":["../../../src/matter/email-identification/email-identification.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useEffect, useState } from 'react';\nimport { EmailField, isValidEmail } from '../../particles/email-field/email-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 { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — reads only clientProfile.email.\n// Authored as a raw string (not the codegen graphql() factory), mirroring the ShippingSimulator\n// matter: the compiler derives the entity fragment on `clientProfile` and subscribes reactively.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment EmailIdentificationData 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 EmailIdentificationSlice = {\n  email?: string | null;\n};\n\nexport type EmailIdentificationControlProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {\n  /** Accessible label passed to the EmailField. */\n  label?: string;\n  /** Input placeholder passed to the EmailField. */\n  placeholder?: string;\n  /** Inline error text for an invalid email format (port of `checkout/form-messages.invalid-email`). */\n  invalidEmailMessage?: string;\n  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */\n  $data?: EmailIdentificationSlice | null;\n  /** Compiler-injected action surface; carries `identity.clientProfileUpdate`. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const EmailIdentificationControlDefinition = defineComponent<EmailIdentificationControlProps>({\n  name: 'EmailIdentificationControl',\n  importPath: '@vtex/faststore/components',\n  component: EmailIdentificationControl,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { identity: ['clientProfileUpdate'] },\n  requiresContext: 'session',\n  editor: { label: 'Email Identification', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    invalidEmailMessage: { type: 'string', label: 'Invalid email message' },\n  },\n  guideline:\n    'Checkout-bound email field: pre-fills from clientProfile.email and persists a valid changed email via $actions.identity.clientProfileUpdate (anonymous→identified). Must be inside SessionRoot. See email-identification.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Matter that binds the presentational `EmailField` to the User Identity foundation. It reads\n * `clientProfile.email` (colocated reactive fragment) for the pre-fill, reads the identification\n * tri-state and `canEditData` from `useSession()` (which also enforces the `SessionRoot` ancestor),\n * and on a **valid, changed** email persists only the `email` field through\n * `$actions.identity.clientProfileUpdate` (async / pessimistic, Decision 1). While the write is in\n * flight the field is disabled and `data-fs-email-identification-pending` is present so a\n * checkout-CTA guard can block. When the session reports `canEditData: false` (identified but\n * unauthenticated claimed profile — VTEX refuses the write server-side) the field renders disabled\n * with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline; the\n * session state is never computed locally.\n */\nexport function EmailIdentificationControl({\n  label,\n  placeholder,\n  invalidEmailMessage,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: EmailIdentificationControlProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  // Also enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { canEditData } = useSession();\n  // VTEX refuses profile edits for an identified-but-unauthenticated claimed profile; render the\n  // field read-only instead of accepting a write that is doomed server-side.\n  const readOnly = !canEditData;\n\n  const savedEmail = $data?.email ?? '';\n  const [value, setValue] = useState(savedEmail);\n  const [pending, setPending] = useState(false);\n  const [serverError, setServerError] = useState<string | null>(null);\n\n  // Sync the pre-fill when the saved profile email resolves or changes (identified/logged-in shopper).\n  // Does not fire while the shopper is typing, since `savedEmail` only changes when the profile does.\n  useEffect(() => {\n    setValue(savedEmail);\n  }, [savedEmail]);\n\n  function handleValueChange(next: string) {\n    setValue(next);\n    if (serverError) setServerError(null);\n  }\n\n  async function handleBlur() {\n    const trimmed = value.trim();\n    // Cleared field → re-fill with the saved email; clearing must not visually \"un-identify\"\n    // (changing email = switching user is a deliberate act, done by typing a new one).\n    if (trimmed === '' && savedEmail !== '') {\n      setValue(savedEmail);\n      return;\n    }\n    // Invalid format → EmailField shows its own inline error; no persist, no step advance.\n    if (!isValidEmail(trimmed)) return;\n    // Unchanged → nothing to persist.\n    if (trimmed === savedEmail) return;\n\n    setPending(true);\n    setServerError(null);\n    try {\n      const errors = (await $actions?.identity?.clientProfileUpdate?.({ email: trimmed })) ?? [];\n      if (errors.length > 0) setServerError(errors[0]?.message ?? null);\n    } finally {\n      setPending(false);\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-email-identification-control=\"\"\n      {...(pending ? { 'data-fs-email-identification-pending': '' } : {})}\n      {...(readOnly ? { 'data-fs-email-identification-readonly': '' } : {})}\n    >\n      <EmailField\n        label={label}\n        placeholder={placeholder}\n        value={value}\n        disabled={pending || readOnly}\n        invalid={serverError != null}\n        errorMessage={serverError ?? invalidEmailMessage}\n        onValueChange={handleValueChange}\n        onBlur={handleBlur}\n        required\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAqDA,MAAa,uCAAuC,gBAAiD;CACnG,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;CACA,eAAe;CACf,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;CAC7C,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAW;CAC9D,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,qBAAqB;GAAE,MAAM;GAAU,OAAO;EAAwB;CACxE;CACA,WACE;AACJ,CAAC;;;;;;;;;;;;;AAkBD,SAAgB,2BAA2B,EACzC,OACA,aACA,qBACA,OAAO,WACP,UAAU,cACV,WACA,GAAG,SAC+B;CAClC,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAEhD,MAAM,EAAE,gBAAgB,WAAW;CAGnC,MAAM,WAAW,CAAC;CAElB,MAAM,aAAa,OAAO,SAAS;CACnC,MAAM,CAAC,OAAO,YAAY,SAAS,UAAU;CAC7C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAIlE,gBAAgB;EACd,SAAS,UAAU;CACrB,GAAG,CAAC,UAAU,CAAC;CAEf,SAAS,kBAAkB,MAAc;EACvC,SAAS,IAAI;EACb,IAAI,aAAa,eAAe,IAAI;CACtC;CAEA,eAAe,aAAa;EAC1B,MAAM,UAAU,MAAM,KAAK;EAG3B,IAAI,YAAY,MAAM,eAAe,IAAI;GACvC,SAAS,UAAU;GACnB;EACF;EAEA,IAAI,CAAC,aAAa,OAAO,GAAG;EAE5B,IAAI,YAAY,YAAY;EAE5B,WAAW,IAAI;EACf,eAAe,IAAI;EACnB,IAAI;GACF,MAAM,SAAU,MAAM,UAAU,UAAU,sBAAsB,EAAE,OAAO,QAAQ,CAAC,KAAM,CAAC;GACzF,IAAI,OAAO,SAAS,GAAG,eAAe,OAAO,EAAE,EAAE,WAAW,IAAI;EAClE,UAAU;GACR,WAAW,KAAK;EAClB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACO;EACX,wCAAqC;EACrC,GAAK,UAAU,EAAE,wCAAwC,GAAG,IAAI,CAAC;EACjE,GAAK,WAAW,EAAE,yCAAyC,GAAG,IAAI,CAAC;EAEnE,UAAA,oBAAC,YAAD;GACS;GACM;GACN;GACP,UAAU,WAAW;GACrB,SAAS,eAAe;GACxB,cAAc,eAAe;GAC7B,eAAe;GACf,QAAQ;GACR,UAAA;EACD,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"email-identification.js","names":[],"sources":["../../../src/matter/email-identification/email-identification.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 { ComponentPropsWithRef } from 'react';\nimport { useEffect, useState } from 'react';\nimport { EmailField, isValidEmail } from '../../particles/email-field/email-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 { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport type { ClientProfileUserError } from '../../sdk/identity/operations.js';\nimport { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — reads only clientProfile.email.\n// Authored as a raw string (not the codegen graphql() factory), mirroring the ShippingSimulator\n// matter: the compiler derives the entity fragment on `clientProfile` and subscribes reactively.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment EmailIdentificationData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const EmailIdentificationControlContent = defineContentType({\n  id: 'email-identification-control',\n  title: 'Email Identification Control',\n  description: 'The inline message shown when saving the email fails.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Save failure message',\n        description: 'Shown for a network failure and for any refusal the shopper cannot act on.',\n        format: 'icu-message',\n        messageSource: 'Unable to save your details. Please try again.',\n      },\n    },\n  },\n});\n\n/**\n * `ClientProfileUpdateErrorCode` of API Core's schema plus the client-minted transport failure. None is\n * something the shopper can fix by editing the email, so all share the generic message.\n */\nexport const EMAIL_IDENTIFICATION_ERROR_FIELDS = {\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NO_PROFILE_FIELD_PROVIDED: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<string, MessageFieldName<typeof EmailIdentificationControlContent>>;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */\nexport type EmailIdentificationSlice = {\n  email?: string | null;\n};\n\nexport type EmailIdentificationControlProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> &\n  MessageLocaleProp & {\n    /** Accessible label passed to the EmailField. */\n    label?: string;\n    /** Input placeholder passed to the EmailField. */\n    placeholder?: string;\n    /** Inline error text for an invalid email format (port of `checkout/form-messages.invalid-email`). */\n    invalidEmailMessage?: string;\n    /** The inline message for a refused save. */\n    $content?: ContentValue<typeof EmailIdentificationControlContent>;\n    /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */\n    $data?: EmailIdentificationSlice | null;\n    /** Compiler-injected action surface; carries `identity.clientProfileUpdate`. */\n    $actions?: ComponentActions;\n  };\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const EmailIdentificationControlDefinition = defineComponent<EmailIdentificationControlProps>({\n  name: 'EmailIdentificationControl',\n  importPath: '@vtex/faststore/components',\n  component: EmailIdentificationControl,\n  content: EmailIdentificationControlContent,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { identity: ['clientProfileUpdate'] },\n  requiresContext: 'session',\n  editor: { label: 'Email Identification', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    invalidEmailMessage: { type: 'string', label: 'Invalid email message' },\n  },\n  guideline:\n    'Checkout-bound email field: pre-fills from clientProfile.email and persists a valid changed email via $actions.identity.clientProfileUpdate (anonymous→identified); a refused save shows the $content field genericErrorMessage. Must be inside SessionRoot. See email-identification.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Matter that binds the presentational `EmailField` to the User Identity foundation. It reads\n * `clientProfile.email` (colocated reactive fragment) for the pre-fill, reads the identification\n * tri-state and `canEditData` from `useSession()` (which also enforces the `SessionRoot` ancestor),\n * and on a **valid, changed** email persists only the `email` field through\n * `$actions.identity.clientProfileUpdate` (async / pessimistic, Decision 1). While the write is in\n * flight the field is disabled and `data-fs-email-identification-pending` is present so a\n * checkout-CTA guard can block. When the session reports `canEditData: false` (identified but\n * unauthenticated claimed profile — VTEX refuses the write server-side) the field renders disabled\n * with `data-fs-email-identification-readonly`. Server `userErrors` are surfaced inline, worded by the\n * `$content` field for their code (genericErrorMessage for a code it does not know); the\n * session state is never computed locally.\n */\nexport function EmailIdentificationControl({\n  label,\n  placeholder,\n  invalidEmailMessage,\n  $content,\n  $locale,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: EmailIdentificationControlProps) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const { format } = useMessageFormatter(EmailIdentificationControlContent, $content);\n  // Also enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { canEditData } = useSession();\n  // VTEX refuses profile edits for an identified-but-unauthenticated claimed profile; render the\n  // field read-only instead of accepting a write that is doomed server-side.\n  const readOnly = !canEditData;\n\n  const savedEmail = $data?.email ?? '';\n  const [value, setValue] = useState(savedEmail);\n  const [pending, setPending] = useState(false);\n  const [serverError, setServerError] = useState<ClientProfileUserError | null>(null);\n\n  // Sync the pre-fill when the saved profile email resolves or changes (identified/logged-in shopper).\n  // Does not fire while the shopper is typing, since `savedEmail` only changes when the profile does.\n  useEffect(() => {\n    setValue(savedEmail);\n  }, [savedEmail]);\n\n  function serverErrorMessage(error: ClientProfileUserError): string {\n    return formatErrorCode(\n      EmailIdentificationControlContent,\n      EMAIL_IDENTIFICATION_ERROR_FIELDS,\n      error,\n      format,\n      'genericErrorMessage',\n    );\n  }\n\n  function handleValueChange(next: string) {\n    setValue(next);\n    if (serverError) setServerError(null);\n  }\n\n  async function handleBlur() {\n    const trimmed = value.trim();\n    // Cleared field → re-fill with the saved email; clearing must not visually \"un-identify\"\n    // (changing email = switching user is a deliberate act, done by typing a new one).\n    if (trimmed === '' && savedEmail !== '') {\n      setValue(savedEmail);\n      return;\n    }\n    // Invalid format → EmailField shows its own inline error; no persist, no step advance.\n    if (!isValidEmail(trimmed)) return;\n    // Unchanged → nothing to persist.\n    if (trimmed === savedEmail) return;\n\n    setPending(true);\n    setServerError(null);\n    try {\n      const errors = (await $actions?.identity?.clientProfileUpdate?.({ email: trimmed })) ?? [];\n      if (errors.length > 0) setServerError(errors[0] ?? null);\n    } finally {\n      setPending(false);\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-email-identification-control=\"\"\n      {...(pending ? { 'data-fs-email-identification-pending': '' } : {})}\n      {...(readOnly ? { 'data-fs-email-identification-readonly': '' } : {})}\n    >\n      <EmailField\n        label={label}\n        placeholder={placeholder}\n        value={value}\n        disabled={pending || readOnly}\n        invalid={serverError != null}\n        errorMessage={serverError ? serverErrorMessage(serverError) : invalidEmailMessage}\n        onValueChange={handleValueChange}\n        onBlur={handleBlur}\n        required\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAM,WAAyB;;;;;;;;;AAc/B,MAAa,oCAAoC,kBAAkB;CACjE,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY,EACV,qBAAqB;GACnB,MAAM;GACN,OAAO;GACP,aAAa;GACb,QAAQ;GACR,eAAe;EACjB,EACF;CACF;AACF,CAAC;;;;;AAMD,MAAa,oCAAoC;CAC/C,sBAAsB;CACtB,gBAAgB;CAChB,2BAA2B;CAC3B,eAAe;AACjB;AA+BA,MAAa,uCAAuC,gBAAiD;CACnG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT;CACA,eAAe;CACf,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;CAC7C,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAW;CAC9D,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,qBAAqB;GAAE,MAAM;GAAU,OAAO;EAAwB;CACxE;CACA,WACE;AACJ,CAAC;;;;;;;;;;;;;;AAmBD,SAAgB,2BAA2B,EACzC,OACA,aACA,qBACA,UACA,SACA,OAAO,WACP,UAAU,cACV,WACA,GAAG,SAC+B;CAClC,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,EAAE,WAAW,oBAAoB,mCAAmC,QAAQ;CAElF,MAAM,EAAE,gBAAgB,WAAW;CAGnC,MAAM,WAAW,CAAC;CAElB,MAAM,aAAa,OAAO,SAAS;CACnC,MAAM,CAAC,OAAO,YAAY,SAAS,UAAU;CAC7C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAAwC,IAAI;CAIlF,gBAAgB;EACd,SAAS,UAAU;CACrB,GAAG,CAAC,UAAU,CAAC;CAEf,SAAS,mBAAmB,OAAuC;EACjE,OAAO,gBACL,mCACA,mCACA,OACA,QACA,qBACF;CACF;CAEA,SAAS,kBAAkB,MAAc;EACvC,SAAS,IAAI;EACb,IAAI,aAAa,eAAe,IAAI;CACtC;CAEA,eAAe,aAAa;EAC1B,MAAM,UAAU,MAAM,KAAK;EAG3B,IAAI,YAAY,MAAM,eAAe,IAAI;GACvC,SAAS,UAAU;GACnB;EACF;EAEA,IAAI,CAAC,aAAa,OAAO,GAAG;EAE5B,IAAI,YAAY,YAAY;EAE5B,WAAW,IAAI;EACf,eAAe,IAAI;EACnB,IAAI;GACF,MAAM,SAAU,MAAM,UAAU,UAAU,sBAAsB,EAAE,OAAO,QAAQ,CAAC,KAAM,CAAC;GACzF,IAAI,OAAO,SAAS,GAAG,eAAe,OAAO,MAAM,IAAI;EACzD,UAAU;GACR,WAAW,KAAK;EAClB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACO;EACX,wCAAqC;EACrC,GAAK,UAAU,EAAE,wCAAwC,GAAG,IAAI,CAAC;EACjE,GAAK,WAAW,EAAE,yCAAyC,GAAG,IAAI,CAAC;EAEnE,UAAA,oBAAC,YAAD;GACS;GACM;GACN;GACP,UAAU,WAAW;GACrB,SAAS,eAAe;GACxB,cAAc,cAAc,mBAAmB,WAAW,IAAI;GAC9D,eAAe;GACf,QAAQ;GACR,UAAA;EACD,CAAA;CACE,CAAA;AAET"}

package/dist/matter/free-shipping-progress/free-shipping-progress.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentPropsWithRef } from "react";
@@ -27,17 +28,88 @@ export type FreeShippingProgressRootProps = ComponentPropsWithRef<'div'> & {
   itemsTotal?: number;
   $data?: FreeShippingProgressData['cart'] | null;
 };
-export type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'>;
-export type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> & {
-  label?: string;
-  qualifiedLabel?: string;
+export declare const FreeShippingProgressMessageContent: {
+  readonly id: "free-shipping-progress-message";
+  readonly title: "Free Shipping Progress Message";
+  readonly description: "The below-threshold and earned free-shipping messages.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Below-threshold label";
+        readonly description: "Shown while the cart is below the threshold; value is the formatted amount still missing.";
+        readonly format: "icu-message";
+        readonly messageSource: "{value} away from free shipping";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly value: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly value: "$25.00";
+        };
+      };
+      readonly qualifiedLabel: {
+        readonly type: "string";
+        readonly title: "Qualified label";
+        readonly format: "icu-message";
+        readonly messageSource: "You got free shipping!";
+      };
+    };
+  };
+};
+export declare const FreeShippingProgressBarContent: {
+  readonly id: "free-shipping-progress-bar";
+  readonly title: "Free Shipping Progress Bar";
+  readonly description: "The value text a screen reader announces for the progress bar.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly valueText: {
+        readonly type: "string";
+        readonly title: "Below-threshold value text";
+        readonly description: "Announced while the cart is below the threshold; value is the formatted amount still missing.";
+        readonly format: "icu-message";
+        readonly messageSource: "{value} left for free shipping";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly value: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly value: "$25.00";
+        };
+      };
+      readonly qualifiedValueText: {
+        readonly type: "string";
+        readonly title: "Qualified value text";
+        readonly format: "icu-message";
+        readonly messageSource: "Free shipping earned";
+      };
+    };
+  };
+};
+export type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
+  $content?: ContentValue<typeof FreeShippingProgressBarContent>;
+};
+export type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
+  $content?: ContentValue<typeof FreeShippingProgressMessageContent>;
 };
 export declare const FreeShippingProgressRootDefinition: ComponentDefinition<FreeShippingProgressRootProps>;
-export declare const FreeShippingProgressBarDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FreeShippingProgressBarDefinition: ComponentDefinition<FreeShippingProgressBarProps>;
 export declare const FreeShippingProgressMessageDefinition: ComponentDefinition<FreeShippingProgressMessageProps>;
 export declare function FreeShippingProgressRoot({ threshold, remaining, qualified, itemsTotal, $data: $dataProp, className, children, ...props }: FreeShippingProgressRootProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function FreeShippingProgressBar({ className, ...props }: FreeShippingProgressBarProps): import("react/jsx-runtime").JSX.Element;
-export declare function FreeShippingProgressMessage({ label, qualifiedLabel, className, children, ...props }: FreeShippingProgressMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function FreeShippingProgressBar({ $content, $locale, className, ...props }: FreeShippingProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function FreeShippingProgressMessage({ $content, $locale, className, children, ...props }: FreeShippingProgressMessageProps): import("react/jsx-runtime").JSX.Element;
 export declare const FreeShippingProgress: {
   Root: typeof FreeShippingProgressRoot;
   Bar: typeof FreeShippingProgressBar;

package/dist/matter/free-shipping-progress/free-shipping-progress.js

@@ -1,13 +1,73 @@
 "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 { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { isFiniteAmount } from "../cart/cart.js";
 import { Meter } from "../../particles/meter/meter.js";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/matter/free-shipping-progress/free-shipping-progress.tsx
+const FreeShippingProgressMessageContent = defineContentType({
+	id: "free-shipping-progress-message",
+	title: "Free Shipping Progress Message",
+	description: "The below-threshold and earned free-shipping messages.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Below-threshold label",
+				description: "Shown while the cart is below the threshold; value is the formatted amount still missing.",
+				format: "icu-message",
+				messageSource: "{value} away from free shipping",
+				messageArguments: {
+					type: "object",
+					properties: { value: { type: "string" } }
+				},
+				messageExample: { value: "$25.00" }
+			},
+			qualifiedLabel: {
+				type: "string",
+				title: "Qualified label",
+				format: "icu-message",
+				messageSource: "You got free shipping!"
+			}
+		}
+	}
+});
+const FreeShippingProgressBarContent = defineContentType({
+	id: "free-shipping-progress-bar",
+	title: "Free Shipping Progress Bar",
+	description: "The value text a screen reader announces for the progress bar.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			valueText: {
+				type: "string",
+				title: "Below-threshold value text",
+				description: "Announced while the cart is below the threshold; value is the formatted amount still missing.",
+				format: "icu-message",
+				messageSource: "{value} left for free shipping",
+				messageArguments: {
+					type: "object",
+					properties: { value: { type: "string" } }
+				},
+				messageExample: { value: "$25.00" }
+			},
+			qualifiedValueText: {
+				type: "string",
+				title: "Qualified value text",
+				format: "icu-message",
+				messageSource: "Free shipping earned"
+			}
+		}
+	}
+});
 const fragment = `
   fragment FreeShippingProgressData on Query {
     cart {
@@ -122,34 +182,25 @@ const FreeShippingProgressBarDefinition = defineComponent({
 	name: "FreeShippingProgressBar",
 	importPath: "@vtex/faststore/components",
 	component: FreeShippingProgressBar,
+	content: FreeShippingProgressBarContent,
 	editor: {
 		label: "Free Shipping Progress Bar",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Meter bar that fills toward the free-shipping goal, full when earned. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
+	guideline: "Meter bar that fills toward the free-shipping goal, full when earned; screen readers announce the $content fields valueText ({value} is the formatted remaining amount) and qualifiedValueText. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
 });
 const FreeShippingProgressMessageDefinition = defineComponent({
 	name: "FreeShippingProgressMessage",
 	importPath: "@vtex/faststore/components",
 	component: FreeShippingProgressMessage,
+	content: FreeShippingProgressMessageContent,
 	editor: {
 		label: "Free Shipping Progress Message",
 		category: "commerce"
 	},
-	schema: {
-		label: {
-			type: "string",
-			default: "faltam {value} para frete grátis",
-			label: "Below-threshold Label"
-		},
-		qualifiedLabel: {
-			type: "string",
-			default: "você ganhou frete grátis!",
-			label: "Qualified Label"
-		}
-	},
-	guideline: "Below-threshold vs earned copy, front-formatted from the active storefront context. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
+	schema: {},
+	guideline: "Below-threshold vs earned copy from the $content fields label ({value} is the formatted remaining amount) and qualifiedLabel; children replace both. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
 });
 function FreeShippingProgressRoot({ threshold, remaining, qualified, itemsTotal, $data: $dataProp, className, children, ...props }) {
 	const { currency } = useStorefrontContext();
@@ -176,11 +227,13 @@ function FreeShippingProgressRoot({ threshold, remaining, qualified, itemsTotal,
 		})
 	});
 }
-function FreeShippingProgressBar({ className, ...props }) {
+function FreeShippingProgressBar({ $content, $locale, className, ...props }) {
 	const { fill, isQualified, liveRemaining } = useFreeShippingProgress();
 	const { locale, currency } = useStorefrontContext();
-	const ariaValueText = isQualified ? "frete grátis conquistado" : `${formatCurrency(liveRemaining, locale, currency)} restantes para frete grátis`;
+	const { format } = useMessageFormatter(FreeShippingProgressBarContent, $content);
+	const ariaValueText = isQualified ? format("qualifiedValueText") : format("valueText", { value: formatCurrency(liveRemaining, locale, currency) });
 	return /* @__PURE__ */ jsx(Meter.Root, {
+		"aria-label": "Progresso para frete grátis",
 		...props,
 		value: Math.round(fill * 100),
 		min: 0,
@@ -191,15 +244,19 @@ function FreeShippingProgressBar({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(Meter.Track, { children: /* @__PURE__ */ jsx(Meter.Indicator, {}) })
 	});
 }
-function FreeShippingProgressMessage({ label = "faltam {value} para frete grátis", qualifiedLabel = "você ganhou frete grátis!", className, children, ...props }) {
+function FreeShippingProgressMessage({ $content, $locale, className, children, ...props }) {
 	const { isQualified, liveRemaining } = useFreeShippingProgress();
 	const { locale, currency } = useStorefrontContext();
-	const text = isQualified ? qualifiedLabel : label.replace("{value}", formatCurrency(liveRemaining, locale, currency));
+	const { format } = useMessageFormatter(FreeShippingProgressMessageContent, $content);
+	function message() {
+		if (isQualified) return format("qualifiedLabel");
+		return format("label", { value: formatCurrency(liveRemaining, locale, currency) });
+	}
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className,
 		"data-fs-free-shipping-progress-message": "",
-		children: children ?? text
+		children: children ?? message()
 	});
 }
 const FreeShippingProgress = {
@@ -208,6 +265,6 @@ const FreeShippingProgress = {
 	Message: FreeShippingProgressMessage
 };
 //#endregion
-export { FreeShippingProgress, FreeShippingProgressBar, FreeShippingProgressBarDefinition, FreeShippingProgressMessage, FreeShippingProgressMessageDefinition, FreeShippingProgressRoot, FreeShippingProgressRootDefinition };
+export { FreeShippingProgress, FreeShippingProgressBar, FreeShippingProgressBarContent, FreeShippingProgressBarDefinition, FreeShippingProgressMessage, FreeShippingProgressMessageContent, FreeShippingProgressMessageDefinition, FreeShippingProgressRoot, FreeShippingProgressRootDefinition };
 
 //# sourceMappingURL=free-shipping-progress.js.map

package/dist/matter/free-shipping-progress/free-shipping-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"free-shipping-progress.js","names":[],"sources":["../../../src/matter/free-shipping-progress/free-shipping-progress.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext } from 'react';\nimport { Meter } from '../../particles/meter/meter.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { isFiniteAmount } from '../cart/cart.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = { amount: number | string; currencyCode: string };\n\ntype FreeShippingProgressData = {\n  cart?: {\n    id: string;\n    totalizers?: { id: string; value: MoneyValue }[] | null;\n    freeShippingProgress?: {\n      threshold: MoneyValue | null;\n      remaining: MoneyValue;\n      qualified: boolean;\n    } | null;\n  } | null;\n};\n\ntype FreeShippingProgressContextValue = {\n  isQualified: boolean;\n  fill: number;\n  liveRemaining: number;\n};\n\nexport type FreeShippingProgressRootProps = ComponentPropsWithRef<'div'> & {\n  threshold?: number;\n  remaining?: number;\n  qualified?: boolean;\n  itemsTotal?: number;\n  $data?: FreeShippingProgressData['cart'] | null;\n};\n\nexport type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'>;\nexport type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  qualifiedLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — narrow cart slice (Items totalizer + freeShippingProgress)\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment FreeShippingProgressData on Query {\n    cart {\n      id\n      totalizers {\n        id\n        value {\n          amount\n          currencyCode\n        }\n      }\n      freeShippingProgress {\n        threshold {\n          amount\n          currencyCode\n        }\n        remaining {\n          amount\n          currencyCode\n        }\n        qualified\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst FSP_CONTEXT_UNSET = Symbol('FreeShippingProgressContextUnset');\n\nconst FreeShippingProgressContext = createContext<FreeShippingProgressContextValue | typeof FSP_CONTEXT_UNSET>(\n  FSP_CONTEXT_UNSET,\n);\n\nfunction useFreeShippingProgress(): FreeShippingProgressContextValue {\n  const ctx = useContext(FreeShippingProgressContext);\n  if (ctx === FSP_CONTEXT_UNSET) {\n    throw new Error('useFreeShippingProgress() must be used inside a <FreeShippingProgressRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatCurrency(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(Math.max(value, 0), 1);\n}\n\ntype FreeShippingProgressCart = NonNullable<FreeShippingProgressData['cart']>;\ntype FreeShippingProgressState = NonNullable<FreeShippingProgressCart['freeShippingProgress']>;\n\nfunction previewCart(\n  {\n    threshold,\n    remaining,\n    qualified,\n    itemsTotal,\n  }: Pick<FreeShippingProgressRootProps, 'threshold' | 'remaining' | 'qualified' | 'itemsTotal'>,\n  currency: string,\n): FreeShippingProgressCart | null {\n  if (qualified === undefined && threshold === undefined && remaining === undefined && itemsTotal === undefined) {\n    return null;\n  }\n  return {\n    id: 'preview',\n    totalizers:\n      itemsTotal === undefined ? [] : [{ id: 'Items', value: { amount: itemsTotal, currencyCode: currency } }],\n    freeShippingProgress: {\n      threshold: threshold == null ? null : { amount: threshold, currencyCode: currency },\n      remaining: { amount: remaining ?? threshold ?? 0, currencyCode: currency },\n      qualified: qualified ?? false,\n    },\n  };\n}\n\n// The server measures the Items totalizer, never the grand total (shipping and discounts do not count).\nfunction itemsSubtotal(cart: FreeShippingProgressCart): number | null {\n  const itemsAmount = cart.totalizers?.find((totalizer) => totalizer.id === 'Items')?.value.amount;\n  return isFiniteAmount(itemsAmount) ? Number(itemsAmount) : null;\n}\n\n// Usable threshold: present, finite, positive. Null/NaN/zero → no fill, no remaining.\nfunction usableThreshold(threshold: MoneyValue | null): number | null {\n  if (threshold == null) return null;\n  const parsed = Number(threshold.amount);\n  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;\n}\n\nfunction fillRatio(isQualified: boolean, thresholdAmount: number | null, covered: number): number {\n  if (isQualified) return 1;\n  if (thresholdAmount === null) return 0;\n  return clamp01(covered / thresholdAmount);\n}\n\nfunction computeProgress(\n  fsp: FreeShippingProgressState,\n  items: number | null,\n  thresholdAmount: number | null,\n): FreeShippingProgressContextValue {\n  if (items === null) {\n    // No usable Items amount: show the server's own answer rather than guess.\n    const isQualified = fsp.qualified;\n    const liveRemaining =\n      !isQualified && isFiniteAmount(fsp.remaining.amount) ? Math.max(Number(fsp.remaining.amount), 0) : 0;\n    const fill = fillRatio(isQualified, thresholdAmount, (thresholdAmount ?? 0) - liveRemaining);\n    return { isQualified, fill, liveRemaining };\n  }\n\n  const isQualified = fsp.qualified || (thresholdAmount !== null && items >= thresholdAmount);\n  const liveRemaining = isQualified || thresholdAmount === null ? 0 : Math.max(thresholdAmount - items, 0);\n  return { isQualified, fill: fillRatio(isQualified, thresholdAmount, items), liveRemaining };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const FreeShippingProgressRootDefinition = defineComponent<FreeShippingProgressRootProps>({\n  name: 'FreeShippingProgressRoot',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Free Shipping Progress', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Free-shipping progress bar for the top of a cart/mini-cart drawer: shows how much more to spend for free shipping and flips to an earned state when met. Renders nothing until a destination and an eligible promotion exist (self-hides on null). See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressBarDefinition = defineComponent<FreeShippingProgressBarProps>({\n  name: 'FreeShippingProgressBar',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressBar,\n  editor: { label: 'Free Shipping Progress Bar', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Meter bar that fills toward the free-shipping goal, full when earned. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressMessageDefinition = defineComponent<FreeShippingProgressMessageProps>({\n  name: 'FreeShippingProgressMessage',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressMessage,\n  editor: { label: 'Free Shipping Progress Message', category: 'commerce' },\n  schema: {\n    label: { type: 'string', default: 'faltam {value} para frete grátis', label: 'Below-threshold Label' },\n    qualifiedLabel: { type: 'string', default: 'você ganhou frete grátis!', label: 'Qualified Label' },\n  },\n  guideline:\n    'Below-threshold vs earned copy, front-formatted from the active storefront context. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function FreeShippingProgressRoot({\n  threshold,\n  remaining,\n  qualified,\n  itemsTotal,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressRootProps) {\n  // Only the synthesized preview cart below needs it; the leaves read the context where they format.\n  const { currency } = useStorefrontContext();\n  const $data = useDataOverride($dataProp);\n\n  // Story / presentational overrides synthesize the field when no live cart is present.\n  const cart = $data ?? previewCart({ threshold, remaining, qualified, itemsTotal }, currency);\n\n  const fsp = cart?.freeShippingProgress;\n  if (!cart || fsp == null) return null;\n\n  const { isQualified, fill, liveRemaining } = computeProgress(\n    fsp,\n    itemsSubtotal(cart),\n    usableThreshold(fsp.threshold),\n  );\n\n  const value: FreeShippingProgressContextValue = { isQualified, fill, liveRemaining };\n\n  return (\n    <FreeShippingProgressContext value={value}>\n      <div {...props} className={className} data-fs-free-shipping-progress-root=\"\">\n        {children}\n      </div>\n    </FreeShippingProgressContext>\n  );\n}\n\nexport function FreeShippingProgressBar({ className, ...props }: FreeShippingProgressBarProps) {\n  const { fill, isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const ariaValueText = isQualified\n    ? 'frete grátis conquistado'\n    : `${formatCurrency(liveRemaining, locale, currency)} restantes para frete grátis`;\n\n  return (\n    <Meter.Root\n      {...props}\n      value={Math.round(fill * 100)}\n      min={0}\n      max={100}\n      getAriaValueText={() => ariaValueText}\n      className={className}\n      data-fs-free-shipping-progress-bar=\"\"\n    >\n      <Meter.Track>\n        <Meter.Indicator />\n      </Meter.Track>\n    </Meter.Root>\n  );\n}\n\nexport function FreeShippingProgressMessage({\n  label = 'faltam {value} para frete grátis',\n  qualifiedLabel = 'você ganhou frete grátis!',\n  className,\n  children,\n  ...props\n}: FreeShippingProgressMessageProps) {\n  const { isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const text = isQualified ? qualifiedLabel : label.replace('{value}', formatCurrency(liveRemaining, locale, currency));\n\n  return (\n    <div {...props} className={className} data-fs-free-shipping-progress-message=\"\">\n      {children ?? text}\n    </div>\n  );\n}\n\nexport const FreeShippingProgress = {\n  Root: FreeShippingProgressRoot,\n  Bar: FreeShippingProgressBar,\n  Message: FreeShippingProgressMessage,\n};\n"],"mappings":"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"}
+{"version":3,"file":"free-shipping-progress.js","names":[],"sources":["../../../src/matter/free-shipping-progress/free-shipping-progress.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext } from 'react';\nimport { Meter } from '../../particles/meter/meter.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { isFiniteAmount } from '../cart/cart.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = { amount: number | string; currencyCode: string };\n\ntype FreeShippingProgressData = {\n  cart?: {\n    id: string;\n    totalizers?: { id: string; value: MoneyValue }[] | null;\n    freeShippingProgress?: {\n      threshold: MoneyValue | null;\n      remaining: MoneyValue;\n      qualified: boolean;\n    } | null;\n  } | null;\n};\n\ntype FreeShippingProgressContextValue = {\n  isQualified: boolean;\n  fill: number;\n  liveRemaining: number;\n};\n\nexport type FreeShippingProgressRootProps = ComponentPropsWithRef<'div'> & {\n  threshold?: number;\n  remaining?: number;\n  qualified?: boolean;\n  itemsTotal?: number;\n  $data?: FreeShippingProgressData['cart'] | null;\n};\n\nexport const FreeShippingProgressMessageContent = defineContentType({\n  id: 'free-shipping-progress-message',\n  title: 'Free Shipping Progress Message',\n  description: 'The below-threshold and earned free-shipping messages.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: {\n        type: 'string',\n        title: 'Below-threshold label',\n        description: 'Shown while the cart is below the threshold; value is the formatted amount still missing.',\n        format: 'icu-message',\n        messageSource: '{value} away from free shipping',\n        messageArguments: { type: 'object', properties: { value: { type: 'string' } } },\n        messageExample: { value: '$25.00' },\n      },\n      qualifiedLabel: {\n        type: 'string',\n        title: 'Qualified label',\n        format: 'icu-message',\n        messageSource: 'You got free shipping!',\n      },\n    },\n  },\n});\n\nexport const FreeShippingProgressBarContent = defineContentType({\n  id: 'free-shipping-progress-bar',\n  title: 'Free Shipping Progress Bar',\n  description: 'The value text a screen reader announces for the progress bar.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      valueText: {\n        type: 'string',\n        title: 'Below-threshold value text',\n        description: 'Announced while the cart is below the threshold; value is the formatted amount still missing.',\n        format: 'icu-message',\n        messageSource: '{value} left for free shipping',\n        messageArguments: { type: 'object', properties: { value: { type: 'string' } } },\n        messageExample: { value: '$25.00' },\n      },\n      qualifiedValueText: {\n        type: 'string',\n        title: 'Qualified value text',\n        format: 'icu-message',\n        messageSource: 'Free shipping earned',\n      },\n    },\n  },\n});\n\nexport type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof FreeShippingProgressBarContent>;\n  };\nexport type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof FreeShippingProgressMessageContent>;\n  };\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — narrow cart slice (Items totalizer + freeShippingProgress)\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment FreeShippingProgressData on Query {\n    cart {\n      id\n      totalizers {\n        id\n        value {\n          amount\n          currencyCode\n        }\n      }\n      freeShippingProgress {\n        threshold {\n          amount\n          currencyCode\n        }\n        remaining {\n          amount\n          currencyCode\n        }\n        qualified\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst FSP_CONTEXT_UNSET = Symbol('FreeShippingProgressContextUnset');\n\nconst FreeShippingProgressContext = createContext<FreeShippingProgressContextValue | typeof FSP_CONTEXT_UNSET>(\n  FSP_CONTEXT_UNSET,\n);\n\nfunction useFreeShippingProgress(): FreeShippingProgressContextValue {\n  const ctx = useContext(FreeShippingProgressContext);\n  if (ctx === FSP_CONTEXT_UNSET) {\n    throw new Error('useFreeShippingProgress() must be used inside a <FreeShippingProgressRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatCurrency(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(Math.max(value, 0), 1);\n}\n\ntype FreeShippingProgressCart = NonNullable<FreeShippingProgressData['cart']>;\ntype FreeShippingProgressState = NonNullable<FreeShippingProgressCart['freeShippingProgress']>;\n\nfunction previewCart(\n  {\n    threshold,\n    remaining,\n    qualified,\n    itemsTotal,\n  }: Pick<FreeShippingProgressRootProps, 'threshold' | 'remaining' | 'qualified' | 'itemsTotal'>,\n  currency: string,\n): FreeShippingProgressCart | null {\n  if (qualified === undefined && threshold === undefined && remaining === undefined && itemsTotal === undefined) {\n    return null;\n  }\n  return {\n    id: 'preview',\n    totalizers:\n      itemsTotal === undefined ? [] : [{ id: 'Items', value: { amount: itemsTotal, currencyCode: currency } }],\n    freeShippingProgress: {\n      threshold: threshold == null ? null : { amount: threshold, currencyCode: currency },\n      remaining: { amount: remaining ?? threshold ?? 0, currencyCode: currency },\n      qualified: qualified ?? false,\n    },\n  };\n}\n\n// The server measures the Items totalizer, never the grand total (shipping and discounts do not count).\nfunction itemsSubtotal(cart: FreeShippingProgressCart): number | null {\n  const itemsAmount = cart.totalizers?.find((totalizer) => totalizer.id === 'Items')?.value.amount;\n  return isFiniteAmount(itemsAmount) ? Number(itemsAmount) : null;\n}\n\n// Usable threshold: present, finite, positive. Null/NaN/zero → no fill, no remaining.\nfunction usableThreshold(threshold: MoneyValue | null): number | null {\n  if (threshold == null) return null;\n  const parsed = Number(threshold.amount);\n  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;\n}\n\nfunction fillRatio(isQualified: boolean, thresholdAmount: number | null, covered: number): number {\n  if (isQualified) return 1;\n  if (thresholdAmount === null) return 0;\n  return clamp01(covered / thresholdAmount);\n}\n\nfunction computeProgress(\n  fsp: FreeShippingProgressState,\n  items: number | null,\n  thresholdAmount: number | null,\n): FreeShippingProgressContextValue {\n  if (items === null) {\n    // No usable Items amount: show the server's own answer rather than guess.\n    const isQualified = fsp.qualified;\n    const liveRemaining =\n      !isQualified && isFiniteAmount(fsp.remaining.amount) ? Math.max(Number(fsp.remaining.amount), 0) : 0;\n    const fill = fillRatio(isQualified, thresholdAmount, (thresholdAmount ?? 0) - liveRemaining);\n    return { isQualified, fill, liveRemaining };\n  }\n\n  const isQualified = fsp.qualified || (thresholdAmount !== null && items >= thresholdAmount);\n  const liveRemaining = isQualified || thresholdAmount === null ? 0 : Math.max(thresholdAmount - items, 0);\n  return { isQualified, fill: fillRatio(isQualified, thresholdAmount, items), liveRemaining };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const FreeShippingProgressRootDefinition = defineComponent<FreeShippingProgressRootProps>({\n  name: 'FreeShippingProgressRoot',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Free Shipping Progress', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Free-shipping progress bar for the top of a cart/mini-cart drawer: shows how much more to spend for free shipping and flips to an earned state when met. Renders nothing until a destination and an eligible promotion exist (self-hides on null). See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressBarDefinition = defineComponent<FreeShippingProgressBarProps>({\n  name: 'FreeShippingProgressBar',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressBar,\n  content: FreeShippingProgressBarContent,\n  editor: { label: 'Free Shipping Progress Bar', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Meter bar that fills toward the free-shipping goal, full when earned; screen readers announce the $content fields valueText ({value} is the formatted remaining amount) and qualifiedValueText. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressMessageDefinition = defineComponent<FreeShippingProgressMessageProps>({\n  name: 'FreeShippingProgressMessage',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressMessage,\n  content: FreeShippingProgressMessageContent,\n  editor: { label: 'Free Shipping Progress Message', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Below-threshold vs earned copy from the $content fields label ({value} is the formatted remaining amount) and qualifiedLabel; children replace both. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function FreeShippingProgressRoot({\n  threshold,\n  remaining,\n  qualified,\n  itemsTotal,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressRootProps) {\n  // Only the synthesized preview cart below needs it; the leaves read the context where they format.\n  const { currency } = useStorefrontContext();\n  const $data = useDataOverride($dataProp);\n\n  // Story / presentational overrides synthesize the field when no live cart is present.\n  const cart = $data ?? previewCart({ threshold, remaining, qualified, itemsTotal }, currency);\n\n  const fsp = cart?.freeShippingProgress;\n  if (!cart || fsp == null) return null;\n\n  const { isQualified, fill, liveRemaining } = computeProgress(\n    fsp,\n    itemsSubtotal(cart),\n    usableThreshold(fsp.threshold),\n  );\n\n  const value: FreeShippingProgressContextValue = { isQualified, fill, liveRemaining };\n\n  return (\n    <FreeShippingProgressContext value={value}>\n      <div {...props} className={className} data-fs-free-shipping-progress-root=\"\">\n        {children}\n      </div>\n    </FreeShippingProgressContext>\n  );\n}\n\nexport function FreeShippingProgressBar({ $content, $locale, className, ...props }: FreeShippingProgressBarProps) {\n  const { fill, isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const { format } = useMessageFormatter(FreeShippingProgressBarContent, $content);\n  const ariaValueText = isQualified\n    ? format('qualifiedValueText')\n    : format('valueText', { value: formatCurrency(liveRemaining, locale, currency) });\n\n  return (\n    <Meter.Root\n      aria-label=\"Progresso para frete grátis\"\n      {...props}\n      value={Math.round(fill * 100)}\n      min={0}\n      max={100}\n      getAriaValueText={() => ariaValueText}\n      className={className}\n      data-fs-free-shipping-progress-bar=\"\"\n    >\n      <Meter.Track>\n        <Meter.Indicator />\n      </Meter.Track>\n    </Meter.Root>\n  );\n}\n\nexport function FreeShippingProgressMessage({\n  $content,\n  $locale,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressMessageProps) {\n  const { isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const { format } = useMessageFormatter(FreeShippingProgressMessageContent, $content);\n\n  function message(): string {\n    if (isQualified) return format('qualifiedLabel');\n    return format('label', { value: formatCurrency(liveRemaining, locale, currency) });\n  }\n\n  return (\n    <div {...props} className={className} data-fs-free-shipping-progress-message=\"\">\n      {children ?? message()}\n    </div>\n  );\n}\n\nexport const FreeShippingProgress = {\n  Root: FreeShippingProgressRoot,\n  Bar: FreeShippingProgressBar,\n  Message: FreeShippingProgressMessage,\n};\n"],"mappings":";;;;;;;;;;;;AA0CA,MAAa,qCAAqC,kBAAkB;CAClE,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IACL,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;IACf,kBAAkB;KAAE,MAAM;KAAU,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE;IAAE;IAC9E,gBAAgB,EAAE,OAAO,SAAS;GACpC;GACA,gBAAgB;IACd,MAAM;IACN,OAAO;IACP,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;AAED,MAAa,iCAAiC,kBAAkB;CAC9D,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,WAAW;IACT,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;IACf,kBAAkB;KAAE,MAAM;KAAU,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE;IAAE;IAC9E,gBAAgB,EAAE,OAAO,SAAS;GACpC;GACA,oBAAoB;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;AAeD,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;AA8B/B,MAAM,oBAAoB,OAAO,kCAAkC;AAEnE,MAAM,8BAA8B,cAClC,iBACF;AAEA,SAAS,0BAA4D;CACnE,MAAM,MAAM,WAAW,2BAA2B;CAClD,IAAI,QAAQ,mBACV,MAAM,IAAI,MAAM,qFAAqF;CAEvG,OAAO;AACT;AAMA,SAAS,eAAe,OAAe,QAAgB,UAA0B;CAC/E,OAAO,IAAI,KAAK,aAAa,QAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAO,KAAK;AACpF;AAEA,SAAS,QAAQ,OAAuB;CACtC,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;AACvC;AAKA,SAAS,YACP,EACE,WACA,WACA,WACA,cAEF,UACiC;CACjC,IAAI,cAAc,KAAA,KAAa,cAAc,KAAA,KAAa,cAAc,KAAA,KAAa,eAAe,KAAA,GAClG,OAAO;CAET,OAAO;EACL,IAAI;EACJ,YACE,eAAe,KAAA,IAAY,CAAC,IAAI,CAAC;GAAE,IAAI;GAAS,OAAO;IAAE,QAAQ;IAAY,cAAc;GAAS;EAAE,CAAC;EACzG,sBAAsB;GACpB,WAAW,aAAa,OAAO,OAAO;IAAE,QAAQ;IAAW,cAAc;GAAS;GAClF,WAAW;IAAE,QAAQ,aAAa,aAAa;IAAG,cAAc;GAAS;GACzE,WAAW,aAAa;EAC1B;CACF;AACF;AAGA,SAAS,cAAc,MAA+C;CACpE,MAAM,cAAc,KAAK,YAAY,MAAM,cAAc,UAAU,OAAO,OAAO,CAAC,EAAE,MAAM;CAC1F,OAAO,eAAe,WAAW,IAAI,OAAO,WAAW,IAAI;AAC7D;AAGA,SAAS,gBAAgB,WAA6C;CACpE,IAAI,aAAa,MAAM,OAAO;CAC9B,MAAM,SAAS,OAAO,UAAU,MAAM;CACtC,OAAO,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS;AAC1D;AAEA,SAAS,UAAU,aAAsB,iBAAgC,SAAyB;CAChG,IAAI,aAAa,OAAO;CACxB,IAAI,oBAAoB,MAAM,OAAO;CACrC,OAAO,QAAQ,UAAU,eAAe;AAC1C;AAEA,SAAS,gBACP,KACA,OACA,iBACkC;CAClC,IAAI,UAAU,MAAM;EAElB,MAAM,cAAc,IAAI;EACxB,MAAM,gBACJ,CAAC,eAAe,eAAe,IAAI,UAAU,MAAM,IAAI,KAAK,IAAI,OAAO,IAAI,UAAU,MAAM,GAAG,CAAC,IAAI;EAErG,OAAO;GAAE;GAAa,MADT,UAAU,aAAa,kBAAkB,mBAAmB,KAAK,aACrD;GAAG;EAAc;CAC5C;CAEA,MAAM,cAAc,IAAI,aAAc,oBAAoB,QAAQ,SAAS;CAC3E,MAAM,gBAAgB,eAAe,oBAAoB,OAAO,IAAI,KAAK,IAAI,kBAAkB,OAAO,CAAC;CACvG,OAAO;EAAE;EAAa,MAAM,UAAU,aAAa,iBAAiB,KAAK;EAAG;CAAc;AAC5F;AAMA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,wCAAwC,gBAAkD;CACrG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAkC,UAAU;CAAW;CACxE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAMD,SAAgB,yBAAyB,EACvC,WACA,WACA,WACA,YACA,OAAO,WACP,WACA,UACA,GAAG,SAC6B;CAEhC,MAAM,EAAE,aAAa,qBAAqB;CAI1C,MAAM,OAHQ,gBAAgB,SAGb,KAAK,YAAY;EAAE;EAAW;EAAW;EAAW;CAAW,GAAG,QAAQ;CAE3F,MAAM,MAAM,MAAM;CAClB,IAAI,CAAC,QAAQ,OAAO,MAAM,OAAO;CAEjC,MAAM,EAAE,aAAa,MAAM,kBAAkB,gBAC3C,KACA,cAAc,IAAI,GAClB,gBAAgB,IAAI,SAAS,CAC/B;CAIA,OACE,oBAAC,6BAAD;EAA6B,OAAO;GAHY;GAAa;GAAM;EAG3B;EACtC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAkB;GAAW,uCAAoC;GACvE;EACE,CAAA;CACsB,CAAA;AAEjC;AAEA,SAAgB,wBAAwB,EAAE,UAAU,SAAS,WAAW,GAAG,SAAuC;CAChH,MAAM,EAAE,MAAM,aAAa,kBAAkB,wBAAwB;CACrE,MAAM,EAAE,QAAQ,aAAa,qBAAqB;CAClD,MAAM,EAAE,WAAW,oBAAoB,gCAAgC,QAAQ;CAC/E,MAAM,gBAAgB,cAClB,OAAO,oBAAoB,IAC3B,OAAO,aAAa,EAAE,OAAO,eAAe,eAAe,QAAQ,QAAQ,EAAE,CAAC;CAElF,OACE,oBAAC,MAAM,MAAP;EACE,cAAW;EACX,GAAI;EACJ,OAAO,KAAK,MAAM,OAAO,GAAG;EAC5B,KAAK;EACL,KAAK;EACL,wBAAwB;EACb;EACX,sCAAmC;EAEnC,UAAA,oBAAC,MAAM,OAAP,EAAA,UACE,oBAAC,MAAM,WAAP,CAAkB,CAAA,EACP,CAAA;CACH,CAAA;AAEhB;AAEA,SAAgB,4BAA4B,EAC1C,UACA,SACA,WACA,UACA,GAAG,SACgC;CACnC,MAAM,EAAE,aAAa,kBAAkB,wBAAwB;CAC/D,MAAM,EAAE,QAAQ,aAAa,qBAAqB;CAClD,MAAM,EAAE,WAAW,oBAAoB,oCAAoC,QAAQ;CAEnF,SAAS,UAAkB;EACzB,IAAI,aAAa,OAAO,OAAO,gBAAgB;EAC/C,OAAO,OAAO,SAAS,EAAE,OAAO,eAAe,eAAe,QAAQ,QAAQ,EAAE,CAAC;CACnF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,0CAAuC;EAC1E,UAAA,YAAY,QAAQ;CAClB,CAAA;AAET;AAEA,MAAa,uBAAuB;CAClC,MAAM;CACN,KAAK;CACL,SAAS;AACX"}