@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/delivery-options/delivery-options-controller.d.ts

@@ -1,6 +1,8 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ShippingOption } from "../shipping-simulator/shipping-simulator.js";
+import { ShippingOptionSelectUserError } from "../../sdk/shipping/option-select-operations.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
 import { RawDeliveryOptionsData } from "./use-delivery-option-selection.js";
 import { ComponentPropsWithRef, ReactNode } from "react";
@@ -10,8 +12,8 @@ export type DeliveryOptionsContextValue = Readonly<{
   options: ShippingOption[];
   /** Group value: the persisted `selectedOptionId` for real data, local state under mock. */
   selectedOptionId: string | null;
-  /** First `userError` message from the latest real selection, or `null`. */
-  selectionError: string | null;
+  /** The first `userError` from the latest real selection, or `null`. */
+  selectionError: ShippingOptionSelectUserError | null;
   /** Selects an option and closes the surface once the selection resolves without a `userError`. */
   selectOption: (optionId: string) => void;
 }>;
@@ -30,20 +32,78 @@ export type DeliveryOptionsControllerProps = {
   /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */
   children?: ReactNode;
 };
-export type DeliveryOptionsSummaryProps = ComponentPropsWithRef<'span'> & {
+export type DeliveryOptionsSummaryProps = ComponentPropsWithRef<'span'> & MessageLocaleProp & {
   /** Optional prefix shown before the summary value (e.g. "Forma de entrega"). */
   label?: string;
-  /** Text shown while nothing is selected. */
-  placeholder?: string;
   /** Separator between the selected option name and price. */
   separator?: string;
+  /** The placeholder shown while nothing is selected, and the text that replaces a zero price. */
+  $content?: ContentValue<typeof DeliveryOptionsSummaryContent>;
+};
+export type DeliveryOptionsListProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
+  /** Words the selection error by its code. */
+  $content?: ContentValue<typeof DeliveryOptionsListContent>;
 };
-export type DeliveryOptionsListProps = ComponentPropsWithRef<'div'>;
 export declare const DeliveryOptionsControllerDefinition: ComponentDefinition<DeliveryOptionsControllerProps>;
+export declare const DeliveryOptionsSummaryContent: {
+  readonly id: "delivery-options-summary";
+  readonly title: "Delivery Options Summary";
+  readonly description: "Text shown while nothing is selected, and instead of a zero price for the selected option.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly placeholder: {
+        readonly type: "string";
+        readonly title: "Placeholder";
+        readonly format: "icu-message";
+        readonly messageSource: "Select a delivery option";
+      };
+      readonly freeLabel: {
+        readonly type: "string";
+        readonly title: "Free price label";
+        readonly format: "icu-message";
+        readonly messageSource: "Free";
+      };
+    };
+  };
+};
 export declare const DeliveryOptionsSummaryDefinition: ComponentDefinition<DeliveryOptionsSummaryProps>;
-export declare const DeliveryOptionsListDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DeliveryOptionsListContent: {
+  readonly id: "delivery-options-list";
+  readonly title: "Delivery Options List";
+  readonly description: "Messages shown when a delivery option selection is refused, one per error code the shopper can act on.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly optionUnavailableMessage: {
+        readonly type: "string";
+        readonly title: "Option unavailable message";
+        readonly description: "Shown when the picked option is no longer offered for the cart.";
+        readonly format: "icu-message";
+        readonly messageSource: "This delivery option is no longer available. Choose another one.";
+      };
+      readonly missingAddressMessage: {
+        readonly type: "string";
+        readonly title: "Missing address message";
+        readonly description: "Shown when no delivery address is saved on the cart yet.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a delivery address before choosing a delivery option.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Generic failure message";
+        readonly description: "Shown for a network failure and for every refusal the shopper cannot act on.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to update the delivery option. Please try again.";
+      };
+    };
+  };
+};
+export declare const DeliveryOptionsListDefinition: ComponentDefinition<DeliveryOptionsListProps>;
 export declare function DeliveryOptionsController({ $data, $actions: $actionsProp, mockOptions, children }: Readonly<DeliveryOptionsControllerProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
-export declare function DeliveryOptionsSummary({ label, placeholder, separator, className, ...props }: DeliveryOptionsSummaryProps): import("react/jsx-runtime").JSX.Element;
-export declare function DeliveryOptionsList({ className, children, ...props }: DeliveryOptionsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeliveryOptionsSummary({ $content, $locale, label, separator, className, ...props }: DeliveryOptionsSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeliveryOptionsList({ $content, $locale, className, children, ...props }: DeliveryOptionsListProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=delivery-options-controller.d.ts.map

package/dist/matter/delivery-options/delivery-options-controller.js

@@ -1,8 +1,11 @@
 "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 { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
-import { OptionItemContext, ShippingSimulatorContext, ShippingSimulatorOptionName, ShippingSimulatorOptionPrice } from "../shipping-simulator/shipping-simulator.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
+import { OptionItemContext, ShippingSimulatorContext, ShippingSimulatorOptionName, ShippingSimulatorOptionPrice, isFreeAmount } from "../shipping-simulator/shipping-simulator.js";
 import { useDeliveryOptionSelection } from "./use-delivery-option-selection.js";
 import { DeliveryOptionsListBody } from "./delivery-options.js";
 import { cloneElement, createContext, isValidElement, useContext, useMemo, useState } from "react";
@@ -86,10 +89,34 @@ const DeliveryOptionsControllerDefinition = defineComponent({
 	} },
 	guideline: "State-only controller for a collapsed delivery-option picker: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled — the surface opens from its trigger and closes once a real selection succeeds; a userError keeps it open. Renders no markup and bakes no styling: compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, place a DeliveryOptionsSummary inside the trigger (echoes the selected name + price, or a placeholder) and a DeliveryOptionsList inside the popup (the option radio group; put the reused ShippingSimulatorOption leaves as its children). Selection dispatches $actions.shipping.selectOption; mockOptions is a local/dev-only fallback. Mirrors the CartOpenOnAdd / ShippingAddressSavedAddressDrawerController pattern."
 });
+const DeliveryOptionsSummaryContent = defineContentType({
+	id: "delivery-options-summary",
+	title: "Delivery Options Summary",
+	description: "Text shown while nothing is selected, and instead of a zero price for the selected option.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			placeholder: {
+				type: "string",
+				title: "Placeholder",
+				format: "icu-message",
+				messageSource: "Select a delivery option"
+			},
+			freeLabel: {
+				type: "string",
+				title: "Free price label",
+				format: "icu-message",
+				messageSource: "Free"
+			}
+		}
+	}
+});
 const DeliveryOptionsSummaryDefinition = defineComponent({
 	name: "DeliveryOptionsSummary",
 	importPath: "@vtex/faststore/components",
 	component: DeliveryOptionsSummary,
+	content: DeliveryOptionsSummaryContent,
 	requiresContext: "delivery-options",
 	editor: {
 		label: "Delivery Options Summary",
@@ -100,30 +127,66 @@ const DeliveryOptionsSummaryDefinition = defineComponent({
 			type: "string",
 			label: "Trigger label prefix"
 		},
-		placeholder: {
-			type: "string",
-			default: "Selecionar forma de entrega",
-			label: "Placeholder"
-		},
 		separator: {
 			type: "string",
 			default: " — ",
 			label: "Summary separator"
 		}
 	},
-	guideline: "The collapsed picker trigger echo: renders the selected option name + price (reusing the FSPG-832 option leaves), or a placeholder while nothing is selected. Place it inside the DialogTrigger / DrawerTrigger of a DeliveryOptionsController subtree. Reads the shared selection context, so it reflects the current pick — real or mockOptions. Must be inside DeliveryOptionsController."
+	guideline: "The collapsed picker trigger echo: renders the selected option name + price (reusing the FSPG-832 option leaves), or its $content.placeholder while nothing is selected; its $content.freeLabel replaces a zero price. Place it inside the DialogTrigger / DrawerTrigger of a DeliveryOptionsController subtree. Reads the shared selection context, so it reflects the current pick — real or mockOptions. Must be inside DeliveryOptionsController."
 });
+const DeliveryOptionsListContent = defineContentType({
+	id: "delivery-options-list",
+	title: "Delivery Options List",
+	description: "Messages shown when a delivery option selection is refused, one per error code the shopper can act on.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			optionUnavailableMessage: {
+				type: "string",
+				title: "Option unavailable message",
+				description: "Shown when the picked option is no longer offered for the cart.",
+				format: "icu-message",
+				messageSource: "This delivery option is no longer available. Choose another one."
+			},
+			missingAddressMessage: {
+				type: "string",
+				title: "Missing address message",
+				description: "Shown when no delivery address is saved on the cart yet.",
+				format: "icu-message",
+				messageSource: "Enter a delivery address before choosing a delivery option."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Generic failure message",
+				description: "Shown for a network failure and for every refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Unable to update the delivery option. Please try again."
+			}
+		}
+	}
+});
+/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */
+const DELIVERY_OPTIONS_LIST_ERROR_FIELDS = {
+	OPTION_UNAVAILABLE: "optionUnavailableMessage",
+	MISSING_SHIPPING_ADDRESS: "missingAddressMessage",
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
 const DeliveryOptionsListDefinition = defineComponent({
 	name: "DeliveryOptionsList",
 	importPath: "@vtex/faststore/components",
 	component: DeliveryOptionsList,
+	content: DeliveryOptionsListContent,
 	requiresContext: "delivery-options",
 	editor: {
 		label: "Delivery Options List",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "The collapsed picker body: the whole-cart option list as a radio group bound to the selected option, plus the inline selection error (role=\"alert\"). Place it inside the DialogPopup / DrawerPopup of a DeliveryOptionsController subtree, with the reused option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as its children template. Picking a row dispatches the selection and closes the surface on success. Must be inside DeliveryOptionsController."
+	guideline: "The collapsed picker body: the whole-cart option list as a radio group bound to the selected option, plus the inline selection error (role=\"alert\"), worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). Place it inside the DialogPopup / DrawerPopup of a DeliveryOptionsController subtree, with the reused option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as its children template. Picking a row dispatches the selection and closes the surface on success. Must be inside DeliveryOptionsController."
 });
 function DeliveryOptionsController({ $data, $actions: $actionsProp, mockOptions, children }) {
 	const $actions = useActionsOverride($actionsProp);
@@ -158,8 +221,9 @@ function DeliveryOptionsController({ $data, $actions: $actionsProp, mockOptions,
 		})
 	});
 }
-function DeliveryOptionsSummary({ label, placeholder = "Selecionar forma de entrega", separator = " — ", className, ...props }) {
+function DeliveryOptionsSummary({ $content, $locale, label, separator = " — ", className, ...props }) {
 	const { options, selectedOptionId } = useDeliveryOptions();
+	const { format } = useMessageFormatter(DeliveryOptionsSummaryContent, $content);
 	const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;
 	return /* @__PURE__ */ jsxs("span", {
 		...props,
@@ -178,28 +242,30 @@ function DeliveryOptionsSummary({ label, placeholder = "Selecionar forma de entr
 						"data-fs-delivery-options-summary-separator": "",
 						children: separator
 					}),
-					/* @__PURE__ */ jsx(ShippingSimulatorOptionPrice, {})
+					/* @__PURE__ */ jsx(ShippingSimulatorOptionPrice, { children: isFreeAmount(selectedOption.price.amount) ? format("freeLabel") : void 0 })
 				]
 			})
 		}) : /* @__PURE__ */ jsx("span", {
 			"data-fs-delivery-options-summary-placeholder": "",
-			children: placeholder
+			children: format("placeholder")
 		})]
 	});
 }
-function DeliveryOptionsList({ className, children, ...props }) {
+function DeliveryOptionsList({ $content, $locale, className, children, ...props }) {
 	const { options, selectedOptionId, selectionError, selectOption } = useDeliveryOptions();
+	const { format } = useMessageFormatter(DeliveryOptionsListContent, $content);
+	const errorMessage = selectionError ? formatErrorCode(DeliveryOptionsListContent, DELIVERY_OPTIONS_LIST_ERROR_FIELDS, selectionError, format, "genericErrorMessage") : null;
 	return /* @__PURE__ */ jsx(DeliveryOptionsListBody, {
 		...props,
 		className,
 		options,
 		selectedOptionId,
-		selectionError,
+		selectionError: errorMessage,
 		onSelectOption: selectOption,
 		children
 	});
 }
 //#endregion
-export { DeliveryOptionsController, DeliveryOptionsControllerDefinition, DeliveryOptionsList, DeliveryOptionsListDefinition, DeliveryOptionsSummary, DeliveryOptionsSummaryDefinition, useDeliveryOptions };
+export { DELIVERY_OPTIONS_LIST_ERROR_FIELDS, DeliveryOptionsController, DeliveryOptionsControllerDefinition, DeliveryOptionsList, DeliveryOptionsListContent, DeliveryOptionsListDefinition, DeliveryOptionsSummary, DeliveryOptionsSummaryContent, DeliveryOptionsSummaryDefinition, useDeliveryOptions };
 
 //# sourceMappingURL=delivery-options-controller.js.map

package/dist/matter/delivery-options/delivery-options-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-options-controller.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options-controller.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  cloneElement,\n  createContext,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport {\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n  ShippingSimulatorOptionName,\n  ShippingSimulatorOptionPrice,\n} from '../shipping-simulator/shipping-simulator.js';\nimport { DeliveryOptionsListBody } from './delivery-options.js';\nimport { type RawDeliveryOptionsData, useDeliveryOptionSelection } from './use-delivery-option-selection.js';\n\n/**\n * The collapsed delivery-option surfaces (centered modal / slide-in panel) as a controller +\n * composed particles, replacing the former monolithic `DeliveryOptionsDialog` / `DeliveryOptionsDrawer`\n * (Decision 8). The page composes a raw `DialogRoot` or `DrawerRoot` and each of its particles\n * (`DialogTrigger` / `DialogBackdrop` / `DialogPopup` …) directly as `page.json` nodes, so every part\n * is a swatch-addressable node with zero Tailwind baked into the package — the portaled backdrop/popup\n * a descendant selector could not reach in the monolith are now first-class nodes (Decision 9).\n *\n * `DeliveryOptionsController` owns state only and renders no markup: it runs the shared\n * `useDeliveryOptionSelection` engine, holds the open state, and provides both the FSPG-832\n * `ShippingSimulatorContext` and a `DeliveryOptions` selection context to its subtree, then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`. A single engine behind the\n * context keeps the trigger echo (`DeliveryOptionsSummary`) and the option list (`DeliveryOptionsList`)\n * on one selection state, so even a local `mockOptions` pick reflects on the trigger.\n *\n * Selection follows the shared rule (INV-10/11): a real pick dispatches `shipping.selectOption` and\n * the surface closes only once it resolves without a `userError`; a rejected pick keeps it open with\n * the inline `role=\"alert\"`; a `mockOptions` pick updates local state and closes immediately.\n */\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsControllerData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Selection context — provided by DeliveryOptionsController, read by the leaves\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsContextValue = Readonly<{\n  /** Resolved option rows (real when the fetch has any, else the `mockOptions` fallback). */\n  options: ShippingOption[];\n  /** Group value: the persisted `selectedOptionId` for real data, local state under mock. */\n  selectedOptionId: string | null;\n  /** First `userError` message from the latest real selection, or `null`. */\n  selectionError: string | null;\n  /** Selects an option and closes the surface once the selection resolves without a `userError`. */\n  selectOption: (optionId: string) => void;\n}>;\n\nconst DELIVERY_OPTIONS_UNSET = Symbol('DeliveryOptionsContextUnset');\n\nconst DeliveryOptionsContextInternal = createContext<DeliveryOptionsContextValue | typeof DELIVERY_OPTIONS_UNSET>(\n  DELIVERY_OPTIONS_UNSET,\n);\n\n/**\n * Read the delivery-option selection state from the nearest `DeliveryOptionsController`. Throws when\n * called outside a controller subtree.\n */\nexport function useDeliveryOptions(): DeliveryOptionsContextValue {\n  const ctx = useContext(DeliveryOptionsContextInternal);\n  if (ctx === DELIVERY_OPTIONS_UNSET) {\n    throw new Error('useDeliveryOptions() must be used inside a <DeliveryOptionsController> subtree.');\n  }\n  return ctx;\n}\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both\n// `DialogRoot` and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsControllerProps = {\n  /** Shipping slice forwarded by the reactive runtime; `null` until shipping resolves. */\n  $data?: RawDeliveryOptionsData | null;\n  /** Compiler-injected action surface; carries `shipping.selectOption`. */\n  $actions?: ComponentActions;\n  /** Local/dev fallback rows, used only when the reactive fetch resolves no options. */\n  mockOptions?: ShippingOption[];\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\nexport type DeliveryOptionsSummaryProps = ComponentPropsWithRef<'span'> & {\n  /** Optional prefix shown before the summary value (e.g. \"Forma de entrega\"). */\n  label?: string;\n  /** Text shown while nothing is selected. */\n  placeholder?: string;\n  /** Separator between the selected option name and price. */\n  separator?: string;\n};\n\nexport type DeliveryOptionsListProps = ComponentPropsWithRef<'div'>;\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const DeliveryOptionsControllerDefinition = defineComponent<DeliveryOptionsControllerProps>({\n  name: 'DeliveryOptionsController',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  // Its own `delivery-options` selection context, plus the reused option leaves' runtime contexts\n  // (Decision 2): `shipping-simulator-option` for the leaves composed under DeliveryOptionsList, and\n  // the outer `shipping-simulator` this controller also provides at runtime.\n  providesContext: ['delivery-options', 'shipping-simulator', 'shipping-simulator-option'],\n  editor: { label: 'Delivery Options Controller', category: 'commerce' },\n  schema: {\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  guideline:\n    'State-only controller for a collapsed delivery-option picker: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled — the surface opens from its trigger and closes once a real selection succeeds; a userError keeps it open. Renders no markup and bakes no styling: compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, place a DeliveryOptionsSummary inside the trigger (echoes the selected name + price, or a placeholder) and a DeliveryOptionsList inside the popup (the option radio group; put the reused ShippingSimulatorOption leaves as its children). Selection dispatches $actions.shipping.selectOption; mockOptions is a local/dev-only fallback. Mirrors the CartOpenOnAdd / ShippingAddressSavedAddressDrawerController pattern.',\n});\n\nexport const DeliveryOptionsSummaryDefinition = defineComponent<DeliveryOptionsSummaryProps>({\n  name: 'DeliveryOptionsSummary',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsSummary,\n  requiresContext: 'delivery-options',\n  editor: { label: 'Delivery Options Summary', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Trigger label prefix' },\n    placeholder: { type: 'string', default: 'Selecionar forma de entrega', label: 'Placeholder' },\n    separator: { type: 'string', default: ' — ', label: 'Summary separator' },\n  },\n  guideline:\n    'The collapsed picker trigger echo: renders the selected option name + price (reusing the FSPG-832 option leaves), or a placeholder while nothing is selected. Place it inside the DialogTrigger / DrawerTrigger of a DeliveryOptionsController subtree. Reads the shared selection context, so it reflects the current pick — real or mockOptions. Must be inside DeliveryOptionsController.',\n});\n\nexport const DeliveryOptionsListDefinition = defineComponent<DeliveryOptionsListProps>({\n  name: 'DeliveryOptionsList',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsList,\n  requiresContext: 'delivery-options',\n  editor: { label: 'Delivery Options List', category: 'commerce' },\n  schema: {},\n  guideline:\n    'The collapsed picker body: the whole-cart option list as a radio group bound to the selected option, plus the inline selection error (role=\"alert\"). Place it inside the DialogPopup / DrawerPopup of a DeliveryOptionsController subtree, with the reused option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as its children template. Picking a row dispatches the selection and closes the surface on success. Must be inside DeliveryOptionsController.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function DeliveryOptionsController({\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  children,\n}: Readonly<DeliveryOptionsControllerProps>) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n  const [open, setOpen] = useState(false);\n\n  const delivery = useMemo<DeliveryOptionsContextValue>(\n    () => ({\n      options,\n      selectedOptionId,\n      selectionError,\n      selectOption: (optionId: string) =>\n        selectOption(optionId, {\n          onSettled: (ok) => {\n            if (ok) setOpen(false);\n          },\n        }),\n    }),\n    [options, selectedOptionId, selectionError, selectOption],\n  );\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <DeliveryOptionsContextInternal value={delivery}>\n        {cloneElement(children, { open, onOpenChange: (next: boolean) => setOpen(next) })}\n      </DeliveryOptionsContextInternal>\n    </ShippingSimulatorContext>\n  );\n}\n\nexport function DeliveryOptionsSummary({\n  label,\n  placeholder = 'Selecionar forma de entrega',\n  separator = ' — ',\n  className,\n  ...props\n}: DeliveryOptionsSummaryProps) {\n  const { options, selectedOptionId } = useDeliveryOptions();\n  const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;\n\n  return (\n    <span {...props} className={className} data-fs-delivery-options-summary=\"\">\n      {label ? <span data-fs-delivery-options-summary-label=\"\">{label}</span> : null}\n      {selectedOption ? (\n        <OptionItemContext value={selectedOption}>\n          <span data-fs-delivery-options-summary-value=\"\">\n            <ShippingSimulatorOptionName />\n            <span data-fs-delivery-options-summary-separator=\"\">{separator}</span>\n            <ShippingSimulatorOptionPrice />\n          </span>\n        </OptionItemContext>\n      ) : (\n        <span data-fs-delivery-options-summary-placeholder=\"\">{placeholder}</span>\n      )}\n    </span>\n  );\n}\n\nexport function DeliveryOptionsList({ className, children, ...props }: DeliveryOptionsListProps) {\n  const { options, selectedOptionId, selectionError, selectOption } = useDeliveryOptions();\n\n  return (\n    <DeliveryOptionsListBody\n      {...props}\n      className={className}\n      options={options}\n      selectedOptionId={selectedOptionId}\n      selectionError={selectionError}\n      onSelectOption={selectOption}\n    >\n      {children}\n    </DeliveryOptionsListBody>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;AAyC/B,MAAM,yBAAyB,OAAO,6BAA6B;AAEnE,MAAM,iCAAiC,cACrC,sBACF;;;;;AAMA,SAAgB,qBAAkD;CAChE,MAAM,MAAM,WAAW,8BAA8B;CACrD,IAAI,QAAQ,wBACV,MAAM,IAAI,MAAM,iFAAiF;CAEnG,OAAO;AACT;AAuCA,MAAa,sCAAsC,gBAAgD;CACjG,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE;CAItC,iBAAiB;EAAC;EAAoB;EAAsB;CAA2B;CACvF,QAAQ;EAAE,OAAO;EAA+B,UAAU;CAAW;CACrE,QAAQ,EACN,aAAa;EAAE,MAAM;EAAS,OAAO;CAAwE,EAC/G;CACA,WACE;AACJ,CAAC;AAED,MAAa,mCAAmC,gBAA6C;CAC3F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA4B,UAAU;CAAW;CAClE,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAuB;EACvD,aAAa;GAAE,MAAM;GAAU,SAAS;GAA+B,OAAO;EAAc;EAC5F,WAAW;GAAE,MAAM;GAAU,SAAS;GAAO,OAAO;EAAoB;CAC1E;CACA,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAMD,SAAgB,0BAA0B,EACxC,OACA,UAAU,cACV,aACA,YAC2C;CAC3C,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,EAAE,SAAS,kBAAkB,gBAAgB,cAAc,iBAAiB,2BAA2B;EAC3G;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,WAAW,eACR;EACL;EACA;EACA;EACA,eAAe,aACb,aAAa,UAAU,EACrB,YAAY,OAAO;GACjB,IAAI,IAAI,QAAQ,KAAK;EACvB,EACF,CAAC;CACL,IACA;EAAC;EAAS;EAAkB;EAAgB;CAAY,CAC1D;CAEA,IAAI,CAAC,eAAiC,QAAQ,GAC5C,OAAO;CAGT,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,gCAAD;GAAgC,OAAO;GACpC,UAAA,aAAa,UAAU;IAAE;IAAM,eAAe,SAAkB,QAAQ,IAAI;GAAE,CAAC;EAClD,CAAA;CACR,CAAA;AAE9B;AAEA,SAAgB,uBAAuB,EACrC,OACA,cAAc,+BACd,YAAY,OACZ,WACA,GAAG,SAC2B;CAC9B,MAAM,EAAE,SAAS,qBAAqB,mBAAmB;CACzD,MAAM,iBAAiB,QAAQ,MAAM,WAAW,OAAO,OAAO,gBAAgB,KAAK;CAEnF,OACE,qBAAC,QAAD;EAAM,GAAI;EAAkB;EAAW,oCAAiC;EAAxE,UAAA,CACG,QAAQ,oBAAC,QAAD;GAAM,0CAAuC;GAAI,UAAA;EAAY,CAAA,IAAI,MACzE,iBACC,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,qBAAC,QAAD;IAAM,0CAAuC;IAA7C,UAAA;KACE,oBAAC,6BAAD,CAA8B,CAAA;KAC9B,oBAAC,QAAD;MAAM,8CAA2C;MAAI,UAAA;KAAgB,CAAA;KACrE,oBAAC,8BAAD,CAA+B,CAAA;IAC3B;;EACW,CAAA,IAEnB,oBAAC,QAAD;GAAM,gDAA6C;GAAI,UAAA;EAAkB,CAAA,CAEvE;;AAEV;AAEA,SAAgB,oBAAoB,EAAE,WAAW,UAAU,GAAG,SAAmC;CAC/F,MAAM,EAAE,SAAS,kBAAkB,gBAAgB,iBAAiB,mBAAmB;CAEvF,OACE,oBAAC,yBAAD;EACE,GAAI;EACO;EACF;EACS;EACF;EAChB,gBAAgB;EAEf;CACsB,CAAA;AAE7B"}
+{"version":3,"file":"delivery-options-controller.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options-controller.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 {\n  type ComponentPropsWithRef,\n  cloneElement,\n  createContext,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport type { ShippingOptionSelectUserError } from '../../sdk/shipping/option-select-operations.js';\nimport {\n  isFreeAmount,\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n  ShippingSimulatorOptionName,\n  ShippingSimulatorOptionPrice,\n} from '../shipping-simulator/shipping-simulator.js';\nimport { DeliveryOptionsListBody } from './delivery-options.js';\nimport {\n  type DeliveryOptionSelectErrorCode,\n  type RawDeliveryOptionsData,\n  useDeliveryOptionSelection,\n} from './use-delivery-option-selection.js';\n\n/**\n * The collapsed delivery-option surfaces (centered modal / slide-in panel) as a controller +\n * composed particles, replacing the former monolithic `DeliveryOptionsDialog` / `DeliveryOptionsDrawer`\n * (Decision 8). The page composes a raw `DialogRoot` or `DrawerRoot` and each of its particles\n * (`DialogTrigger` / `DialogBackdrop` / `DialogPopup` …) directly as `page.json` nodes, so every part\n * is a swatch-addressable node with zero Tailwind baked into the package — the portaled backdrop/popup\n * a descendant selector could not reach in the monolith are now first-class nodes (Decision 9).\n *\n * `DeliveryOptionsController` owns state only and renders no markup: it runs the shared\n * `useDeliveryOptionSelection` engine, holds the open state, and provides both the FSPG-832\n * `ShippingSimulatorContext` and a `DeliveryOptions` selection context to its subtree, then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`. A single engine behind the\n * context keeps the trigger echo (`DeliveryOptionsSummary`) and the option list (`DeliveryOptionsList`)\n * on one selection state, so even a local `mockOptions` pick reflects on the trigger.\n *\n * Selection follows the shared rule (INV-10/11): a real pick dispatches `shipping.selectOption` and\n * the surface closes only once it resolves without a `userError`; a rejected pick keeps it open with\n * the inline `role=\"alert\"`; a `mockOptions` pick updates local state and closes immediately.\n */\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsControllerData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Selection context — provided by DeliveryOptionsController, read by the leaves\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsContextValue = Readonly<{\n  /** Resolved option rows (real when the fetch has any, else the `mockOptions` fallback). */\n  options: ShippingOption[];\n  /** Group value: the persisted `selectedOptionId` for real data, local state under mock. */\n  selectedOptionId: string | null;\n  /** The first `userError` from the latest real selection, or `null`. */\n  selectionError: ShippingOptionSelectUserError | null;\n  /** Selects an option and closes the surface once the selection resolves without a `userError`. */\n  selectOption: (optionId: string) => void;\n}>;\n\nconst DELIVERY_OPTIONS_UNSET = Symbol('DeliveryOptionsContextUnset');\n\nconst DeliveryOptionsContextInternal = createContext<DeliveryOptionsContextValue | typeof DELIVERY_OPTIONS_UNSET>(\n  DELIVERY_OPTIONS_UNSET,\n);\n\n/**\n * Read the delivery-option selection state from the nearest `DeliveryOptionsController`. Throws when\n * called outside a controller subtree.\n */\nexport function useDeliveryOptions(): DeliveryOptionsContextValue {\n  const ctx = useContext(DeliveryOptionsContextInternal);\n  if (ctx === DELIVERY_OPTIONS_UNSET) {\n    throw new Error('useDeliveryOptions() must be used inside a <DeliveryOptionsController> subtree.');\n  }\n  return ctx;\n}\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both\n// `DialogRoot` and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsControllerProps = {\n  /** Shipping slice forwarded by the reactive runtime; `null` until shipping resolves. */\n  $data?: RawDeliveryOptionsData | null;\n  /** Compiler-injected action surface; carries `shipping.selectOption`. */\n  $actions?: ComponentActions;\n  /** Local/dev fallback rows, used only when the reactive fetch resolves no options. */\n  mockOptions?: ShippingOption[];\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\nexport type DeliveryOptionsSummaryProps = ComponentPropsWithRef<'span'> &\n  MessageLocaleProp & {\n    /** Optional prefix shown before the summary value (e.g. \"Forma de entrega\"). */\n    label?: string;\n    /** Separator between the selected option name and price. */\n    separator?: string;\n    /** The placeholder shown while nothing is selected, and the text that replaces a zero price. */\n    $content?: ContentValue<typeof DeliveryOptionsSummaryContent>;\n  };\n\nexport type DeliveryOptionsListProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    /** Words the selection error by its code. */\n    $content?: ContentValue<typeof DeliveryOptionsListContent>;\n  };\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const DeliveryOptionsControllerDefinition = defineComponent<DeliveryOptionsControllerProps>({\n  name: 'DeliveryOptionsController',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  // Its own `delivery-options` selection context, plus the reused option leaves' runtime contexts\n  // (Decision 2): `shipping-simulator-option` for the leaves composed under DeliveryOptionsList, and\n  // the outer `shipping-simulator` this controller also provides at runtime.\n  providesContext: ['delivery-options', 'shipping-simulator', 'shipping-simulator-option'],\n  editor: { label: 'Delivery Options Controller', category: 'commerce' },\n  schema: {\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  guideline:\n    'State-only controller for a collapsed delivery-option picker: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled — the surface opens from its trigger and closes once a real selection succeeds; a userError keeps it open. Renders no markup and bakes no styling: compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, place a DeliveryOptionsSummary inside the trigger (echoes the selected name + price, or a placeholder) and a DeliveryOptionsList inside the popup (the option radio group; put the reused ShippingSimulatorOption leaves as its children). Selection dispatches $actions.shipping.selectOption; mockOptions is a local/dev-only fallback. Mirrors the CartOpenOnAdd / ShippingAddressSavedAddressDrawerController pattern.',\n});\n\nexport const DeliveryOptionsSummaryContent = defineContentType({\n  id: 'delivery-options-summary',\n  title: 'Delivery Options Summary',\n  description: 'Text shown while nothing is selected, and instead of a zero price for the selected option.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      placeholder: {\n        type: 'string',\n        title: 'Placeholder',\n        format: 'icu-message',\n        messageSource: 'Select a delivery option',\n      },\n      freeLabel: { type: 'string', title: 'Free price label', format: 'icu-message', messageSource: 'Free' },\n    },\n  },\n});\n\nexport const DeliveryOptionsSummaryDefinition = defineComponent<DeliveryOptionsSummaryProps>({\n  name: 'DeliveryOptionsSummary',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsSummary,\n  content: DeliveryOptionsSummaryContent,\n  requiresContext: 'delivery-options',\n  editor: { label: 'Delivery Options Summary', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Trigger label prefix' },\n    separator: { type: 'string', default: ' — ', label: 'Summary separator' },\n  },\n  guideline:\n    'The collapsed picker trigger echo: renders the selected option name + price (reusing the FSPG-832 option leaves), or its $content.placeholder while nothing is selected; its $content.freeLabel replaces a zero price. Place it inside the DialogTrigger / DrawerTrigger of a DeliveryOptionsController subtree. Reads the shared selection context, so it reflects the current pick — real or mockOptions. Must be inside DeliveryOptionsController.',\n});\n\nexport const DeliveryOptionsListContent = defineContentType({\n  id: 'delivery-options-list',\n  title: 'Delivery Options List',\n  description: 'Messages shown when a delivery option selection is refused, one per error code the shopper can act on.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      optionUnavailableMessage: {\n        type: 'string',\n        title: 'Option unavailable message',\n        description: 'Shown when the picked option is no longer offered for the cart.',\n        format: 'icu-message',\n        messageSource: 'This delivery option is no longer available. Choose another one.',\n      },\n      missingAddressMessage: {\n        type: 'string',\n        title: 'Missing address message',\n        description: 'Shown when no delivery address is saved on the cart yet.',\n        format: 'icu-message',\n        messageSource: 'Enter a delivery address before choosing a delivery option.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Generic failure message',\n        description: 'Shown for a network failure and for every refusal the shopper cannot act on.',\n        format: 'icu-message',\n        messageSource: 'Unable to update the delivery option. Please try again.',\n      },\n    },\n  },\n});\n\n/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */\nexport const DELIVERY_OPTIONS_LIST_ERROR_FIELDS = {\n  OPTION_UNAVAILABLE: 'optionUnavailableMessage',\n  MISSING_SHIPPING_ADDRESS: 'missingAddressMessage',\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<DeliveryOptionSelectErrorCode, MessageFieldName<typeof DeliveryOptionsListContent>>;\n\nexport const DeliveryOptionsListDefinition = defineComponent<DeliveryOptionsListProps>({\n  name: 'DeliveryOptionsList',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsList,\n  content: DeliveryOptionsListContent,\n  requiresContext: 'delivery-options',\n  editor: { label: 'Delivery Options List', category: 'commerce' },\n  schema: {},\n  guideline:\n    'The collapsed picker body: the whole-cart option list as a radio group bound to the selected option, plus the inline selection error (role=\"alert\"), worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). Place it inside the DialogPopup / DrawerPopup of a DeliveryOptionsController subtree, with the reused option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as its children template. Picking a row dispatches the selection and closes the surface on success. Must be inside DeliveryOptionsController.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function DeliveryOptionsController({\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  children,\n}: Readonly<DeliveryOptionsControllerProps>) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n  const [open, setOpen] = useState(false);\n\n  const delivery = useMemo<DeliveryOptionsContextValue>(\n    () => ({\n      options,\n      selectedOptionId,\n      selectionError,\n      selectOption: (optionId: string) =>\n        selectOption(optionId, {\n          onSettled: (ok) => {\n            if (ok) setOpen(false);\n          },\n        }),\n    }),\n    [options, selectedOptionId, selectionError, selectOption],\n  );\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <DeliveryOptionsContextInternal value={delivery}>\n        {cloneElement(children, { open, onOpenChange: (next: boolean) => setOpen(next) })}\n      </DeliveryOptionsContextInternal>\n    </ShippingSimulatorContext>\n  );\n}\n\nexport function DeliveryOptionsSummary({\n  $content,\n  $locale,\n  label,\n  separator = ' — ',\n  className,\n  ...props\n}: DeliveryOptionsSummaryProps) {\n  const { options, selectedOptionId } = useDeliveryOptions();\n  const { format } = useMessageFormatter(DeliveryOptionsSummaryContent, $content);\n  const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;\n\n  return (\n    <span {...props} className={className} data-fs-delivery-options-summary=\"\">\n      {label ? <span data-fs-delivery-options-summary-label=\"\">{label}</span> : null}\n      {selectedOption ? (\n        <OptionItemContext value={selectedOption}>\n          <span data-fs-delivery-options-summary-value=\"\">\n            <ShippingSimulatorOptionName />\n            <span data-fs-delivery-options-summary-separator=\"\">{separator}</span>\n            <ShippingSimulatorOptionPrice>\n              {isFreeAmount(selectedOption.price.amount) ? format('freeLabel') : undefined}\n            </ShippingSimulatorOptionPrice>\n          </span>\n        </OptionItemContext>\n      ) : (\n        <span data-fs-delivery-options-summary-placeholder=\"\">{format('placeholder')}</span>\n      )}\n    </span>\n  );\n}\n\nexport function DeliveryOptionsList({ $content, $locale, className, children, ...props }: DeliveryOptionsListProps) {\n  const { options, selectedOptionId, selectionError, selectOption } = useDeliveryOptions();\n  const { format } = useMessageFormatter(DeliveryOptionsListContent, $content);\n  const errorMessage = selectionError\n    ? formatErrorCode(\n        DeliveryOptionsListContent,\n        DELIVERY_OPTIONS_LIST_ERROR_FIELDS,\n        selectionError,\n        format,\n        'genericErrorMessage',\n      )\n    : null;\n\n  return (\n    <DeliveryOptionsListBody\n      {...props}\n      className={className}\n      options={options}\n      selectedOptionId={selectedOptionId}\n      selectionError={errorMessage}\n      onSelectOption={selectOption}\n    >\n      {children}\n    </DeliveryOptionsListBody>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/delivery-options/delivery-options.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 { ShippingOption } from "../shipping-simulator/shipping-simulator.js";
@@ -5,7 +6,9 @@ import { ComponentActions } from "../../sdk/actions/types.js";
 import { RawDeliveryOptionsData } from "./use-delivery-option-selection.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/matter/delivery-options/delivery-options.d.ts
-export type DeliveryOptionsRootProps = ComponentPropsWithRef<'div'> & {
+export type DeliveryOptionsRootProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
+  /** Words the selection error by its code. */
+  $content?: ContentValue<typeof DeliveryOptionsRootContent>;
   /**
    * Shipping slice forwarded by the reactive runtime (`ReactiveDataProvider`) — it is the value of
    * the `shipping` top-level field on `DeliveryOptionsData on Query`, not the wrapping
@@ -25,7 +28,39 @@ export type DeliveryOptionsRootProps = ComponentPropsWithRef<'div'> & {
    */
   mockOptions?: ShippingOption[];
 };
+export declare const DeliveryOptionsRootContent: {
+  readonly id: "delivery-options-root";
+  readonly title: "Delivery Options";
+  readonly description: "Messages shown when a delivery option selection is refused, one per error code the shopper can act on.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly optionUnavailableMessage: {
+        readonly type: "string";
+        readonly title: "Option unavailable message";
+        readonly description: "Shown when the picked option is no longer offered for the cart.";
+        readonly format: "icu-message";
+        readonly messageSource: "This delivery option is no longer available. Choose another one.";
+      };
+      readonly missingAddressMessage: {
+        readonly type: "string";
+        readonly title: "Missing address message";
+        readonly description: "Shown when no delivery address is saved on the cart yet.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a delivery address before choosing a delivery option.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Generic failure message";
+        readonly description: "Shown for a network failure and for every refusal the shopper cannot act on.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to update the delivery option. Please try again.";
+      };
+    };
+  };
+};
 export declare const DeliveryOptionsRootDefinition: ComponentDefinition<DeliveryOptionsRootProps>;
-export declare function DeliveryOptionsRoot({ $data, $actions: $actionsProp, mockOptions, className, children, ...props }: DeliveryOptionsRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeliveryOptionsRoot({ $content, $locale, $data, $actions: $actionsProp, mockOptions, className, children, ...props }: DeliveryOptionsRootProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=delivery-options.d.ts.map

package/dist/matter/delivery-options/delivery-options.js

@@ -1,16 +1,31 @@
 "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 { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { RadioGroup, RadioRoot } from "../../particles/radio/radio.js";
 import { OptionItemContext, ShippingSimulatorContext } from "../shipping-simulator/shipping-simulator.js";
 import { useDeliveryOptionSelection } from "./use-delivery-option-selection.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const DeliveryOptionsRootDefinition = defineComponent({
-	name: "DeliveryOptionsRoot",
-	importPath: "@vtex/faststore/components",
-	component: DeliveryOptionsRoot,
-	fragment: `
+//#region src/matter/delivery-options/delivery-options.tsx
+/**
+* The `DeliveryOptions` matter section (docs/storefront-core/reference-cart.md § Delivery, T3 of the Single Address
+* Delivery epic). `DeliveryOptionsRoot` is a reactive Root over the persisted `Shipping` entity
+* (Decision 1) that becomes the THIRD provider of the FSPG-832 option-leaf runtime contexts —
+* `ShippingSimulatorContext` and the per-option `OptionItemContext` — alongside the two existing
+* simulator Roots (Decision 2), so `ShippingSimulatorOption` / `OptionName` / `OptionEstimate` /
+* `OptionPrice` / `OptionFreeBadge` render identically here with zero edits to those leaves.
+* `children` is the per-option template, rendered once per option inside a `RadioRoot` (radio
+* particle) whose group value is bound directly to `selectedOptionId` (Decision 5 — no local
+* selection state); changing it fires the `shipping.selectOption` action. Fields the reused leaves
+* do not read for this section (`postalCode`, `setPostalCode`, `submit`, `status`) are inert
+* defaults, satisfying the shared context type without a simulation flow. Exception: while
+* rendering `mockOptions` (no real data), selection is local-only and never dispatches the action —
+* see `mockOptions` on `DeliveryOptionsRootProps`.
+*/
+const fragment = `
   fragment DeliveryOptionsData on Query {
     shipping {
       id
@@ -34,7 +49,45 @@ const DeliveryOptionsRootDefinition = defineComponent({
       selectedOptionId
     }
   }
-`,
+`;
+const DeliveryOptionsRootContent = defineContentType({
+	id: "delivery-options-root",
+	title: "Delivery Options",
+	description: "Messages shown when a delivery option selection is refused, one per error code the shopper can act on.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			optionUnavailableMessage: {
+				type: "string",
+				title: "Option unavailable message",
+				description: "Shown when the picked option is no longer offered for the cart.",
+				format: "icu-message",
+				messageSource: "This delivery option is no longer available. Choose another one."
+			},
+			missingAddressMessage: {
+				type: "string",
+				title: "Missing address message",
+				description: "Shown when no delivery address is saved on the cart yet.",
+				format: "icu-message",
+				messageSource: "Enter a delivery address before choosing a delivery option."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Generic failure message",
+				description: "Shown for a network failure and for every refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Unable to update the delivery option. Please try again."
+			}
+		}
+	}
+});
+const DeliveryOptionsRootDefinition = defineComponent({
+	name: "DeliveryOptionsRoot",
+	importPath: "@vtex/faststore/components",
+	component: DeliveryOptionsRoot,
+	content: DeliveryOptionsRootContent,
+	fragment,
 	fetchStrategy: "reactive",
 	actions: { shipping: ["selectOption"] },
 	editor: {
@@ -46,8 +99,16 @@ const DeliveryOptionsRootDefinition = defineComponent({
 		label: "Mock options (local/dev fallback, ignored once real data has options)"
 	} },
 	providesContext: ["shipping-simulator", "shipping-simulator-option"],
-	guideline: "Root for the whole-cart delivery-option list at the delivery step: renders Shipping.options as a radio group bound to selectedOptionId, reusing the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children. Selecting a row dispatches $actions.shipping.selectOption. No local selection state — the group value is always the server selectedOptionId. mockOptions is a local/dev-only fallback rendered when the real fetch has no options; omit it in production."
+	guideline: "Root for the whole-cart delivery-option list at the delivery step: renders Shipping.options as a radio group bound to selectedOptionId, reusing the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children. Selecting a row dispatches $actions.shipping.selectOption; a refusal shows inline, worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). No local selection state — the group value is always the server selectedOptionId. mockOptions is a local/dev-only fallback rendered when the real fetch has no options; omit it in production."
 });
+/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */
+const DELIVERY_OPTIONS_ROOT_ERROR_FIELDS = {
+	OPTION_UNAVAILABLE: "optionUnavailableMessage",
+	MISSING_SHIPPING_ADDRESS: "missingAddressMessage",
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
 /**
 * The list body shared by `DeliveryOptionsRoot` (always-open) and `DeliveryOptionsList` (the
 * collapsed-surface body under `DeliveryOptionsController`): the inline selection error plus the
@@ -62,11 +123,11 @@ function DeliveryOptionsListBody({ options, selectedOptionId, selectionError, on
 		...props,
 		className,
 		"data-fs-delivery-options": "",
-		children: [selectionError ? /* @__PURE__ */ jsx("div", {
+		children: [selectionError === null ? null : /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-delivery-options-error": "",
 			children: selectionError
-		}) : null, options.length > 0 ? /* @__PURE__ */ jsx(RadioGroup, {
+		}), options.length > 0 ? /* @__PURE__ */ jsx(RadioGroup, {
 			value: selectedOptionId ?? "",
 			onValueChange: onSelectOption,
 			children: options.map((option) => /* @__PURE__ */ jsx(OptionItemContext, {
@@ -79,13 +140,15 @@ function DeliveryOptionsListBody({ options, selectedOptionId, selectionError, on
 		}) : null]
 	});
 }
-function DeliveryOptionsRoot({ $data, $actions: $actionsProp, mockOptions, className, children, ...props }) {
+function DeliveryOptionsRoot({ $content, $locale, $data, $actions: $actionsProp, mockOptions, className, children, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
 	const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({
 		$data,
 		$actions,
 		mockOptions
 	});
+	const { format } = useMessageFormatter(DeliveryOptionsRootContent, $content);
+	const errorMessage = selectionError ? formatErrorCode(DeliveryOptionsRootContent, DELIVERY_OPTIONS_ROOT_ERROR_FIELDS, selectionError, format, "genericErrorMessage") : null;
 	return /* @__PURE__ */ jsx(ShippingSimulatorContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(DeliveryOptionsListBody, {
@@ -93,13 +156,13 @@ function DeliveryOptionsRoot({ $data, $actions: $actionsProp, mockOptions, class
 			className,
 			options,
 			selectedOptionId,
-			selectionError,
+			selectionError: errorMessage,
 			onSelectOption: (optionId) => selectOption(optionId),
 			children
 		})
 	});
 }
 //#endregion
-export { DeliveryOptionsListBody, DeliveryOptionsRoot, DeliveryOptionsRootDefinition };
+export { DELIVERY_OPTIONS_ROOT_ERROR_FIELDS, DeliveryOptionsListBody, DeliveryOptionsRoot, DeliveryOptionsRootContent, DeliveryOptionsRootDefinition };
 
 //# sourceMappingURL=delivery-options.js.map

package/dist/matter/delivery-options/delivery-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-options.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { RadioGroup, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport {\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n} from '../shipping-simulator/shipping-simulator.js';\nimport { type RawDeliveryOptionsData, useDeliveryOptionSelection } from './use-delivery-option-selection.js';\n\n/**\n * The `DeliveryOptions` matter section (docs/storefront-core/reference-cart.md § Delivery, T3 of the Single Address\n * Delivery epic). `DeliveryOptionsRoot` is a reactive Root over the persisted `Shipping` entity\n * (Decision 1) that becomes the THIRD provider of the FSPG-832 option-leaf runtime contexts —\n * `ShippingSimulatorContext` and the per-option `OptionItemContext` — alongside the two existing\n * simulator Roots (Decision 2), so `ShippingSimulatorOption` / `OptionName` / `OptionEstimate` /\n * `OptionPrice` / `OptionFreeBadge` render identically here with zero edits to those leaves.\n * `children` is the per-option template, rendered once per option inside a `RadioRoot` (radio\n * particle) whose group value is bound directly to `selectedOptionId` (Decision 5 — no local\n * selection state); changing it fires the `shipping.selectOption` action. Fields the reused leaves\n * do not read for this section (`postalCode`, `setPostalCode`, `submit`, `status`) are inert\n * defaults, satisfying the shared context type without a simulation flow. Exception: while\n * rendering `mockOptions` (no real data), selection is local-only and never dispatches the action —\n * see `mockOptions` on `DeliveryOptionsRootProps`.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, matching the ShippingSimulator matter's own convention\n// (not yet migrated to the codegen `graphql()` pipeline; see codegen.ts's documents glob comment).\n//\n// Selects `shipping { id ... }` (not shown in the spec's fragment snippet) so Apollo's\n// InMemoryCache normalizes `Shipping` by id — required for `shippingOptionSelect`'s returned\n// `shipping` to update the same cache entity this fragment reads (Decision 1/Decision 5's\n// \"reactive cache, no local state\" only holds if both sides normalize to the same entity).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsRootProps = ComponentPropsWithRef<'div'> & {\n  /**\n   * Shipping slice forwarded by the reactive runtime (`ReactiveDataProvider`) — it is the value of\n   * the `shipping` top-level field on `DeliveryOptionsData on Query`, not the wrapping\n   * `{ shipping: … }` shape. Receives `null` when shipping has not yet resolved.\n   */\n  $data?: RawDeliveryOptionsData | null;\n  /** Compiler-injected action surface; carries `shipping.selectOption`. */\n  $actions?: ComponentActions;\n  /**\n   * Local/dev fallback rows, used only when the reactive fetch resolves no options — real data\n   * always wins the moment it has any. `Shipping.options` is non-nullable, so a genuinely empty\n   * cart is indistinguishable from \"no data yet\" at this prop's shape; setting `mockOptions` is an\n   * explicit per-page opt-in that accepts showing these rows in both cases. Omit on production\n   * pages. Selecting a mock row is handled entirely with local state and never calls\n   * `$actions.shipping.selectOption` — there is no real cart/address for the real mutation to act\n   * on, so dispatching it would only ever surface a domain error (e.g. `MISSING_SHIPPING_ADDRESS`).\n   */\n  mockOptions?: ShippingOption[];\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const DeliveryOptionsRootDefinition = defineComponent<DeliveryOptionsRootProps>({\n  name: 'DeliveryOptionsRoot',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  editor: { label: 'Delivery Options', category: 'commerce' },\n  schema: {\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  // Re-provides the reused option leaves' runtime contexts (Decision 2): the inner\n  // `shipping-simulator-option` token is required — the option leaves compose as direct children\n  // here with no `ShippingSimulatorOptions` node between them — and the outer `shipping-simulator`\n  // token reflects the `ShippingSimulatorContext` this Root also provides at runtime.\n  providesContext: ['shipping-simulator', 'shipping-simulator-option'],\n  guideline:\n    'Root for the whole-cart delivery-option list at the delivery step: renders Shipping.options as a radio group bound to selectedOptionId, reusing the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children. Selecting a row dispatches $actions.shipping.selectOption. No local selection state — the group value is always the server selectedOptionId. mockOptions is a local/dev-only fallback rendered when the real fetch has no options; omit it in production.',\n});\n\n// ---------------------------------------------------------------------------\n// Shared list body\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsListBodyProps = ComponentPropsWithRef<'div'> & {\n  /** Resolved option rows (real or mock), supplied by the caller's selection engine. */\n  options: ShippingOption[];\n  /** Group value bound to the radio group; `null` renders nothing selected. */\n  selectedOptionId: string | null;\n  /** First `userError` message from the latest selection, or `null`; rendered as `role=\"alert\"`. */\n  selectionError: string | null;\n  /** Dispatched on a row change with the picked option id. */\n  onSelectOption: (optionId: string) => void;\n};\n\n/**\n * The list body shared by `DeliveryOptionsRoot` (always-open) and `DeliveryOptionsList` (the\n * collapsed-surface body under `DeliveryOptionsController`): the inline selection error plus the\n * radio group of options, reusing the FSPG-832 option leaves as the per-option `children` template.\n * It owns no data or selection engine — the caller resolves `options` / `selectedOptionId` /\n * `selectionError` and supplies the `onSelect` dispatch, so both surfaces render through one\n * component and cannot drift. Not registered: it renders no independently placeable part of its own\n * (the `data-fs-delivery-options` container hook and the reused leaves are the addressable parts).\n */\nexport function DeliveryOptionsListBody({\n  options,\n  selectedOptionId,\n  selectionError,\n  onSelectOption,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsListBodyProps) {\n  return (\n    <div {...props} className={className} data-fs-delivery-options=\"\">\n      {selectionError ? (\n        <div role=\"alert\" data-fs-delivery-options-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {options.length > 0 ? (\n        <RadioGroup value={selectedOptionId ?? ''} onValueChange={onSelectOption}>\n          {options.map((option) => (\n            <OptionItemContext key={option.id} value={option}>\n              <RadioRoot value={option.id}>{children}</RadioRoot>\n            </OptionItemContext>\n          ))}\n        </RadioGroup>\n      ) : null}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function DeliveryOptionsRoot({\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsRootProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <DeliveryOptionsListBody\n        {...props}\n        className={className}\n        options={options}\n        selectedOptionId={selectedOptionId}\n        selectionError={selectionError}\n        onSelectOption={(optionId) => selectOption(optionId)}\n      >\n        {children}\n      </DeliveryOptionsListBody>\n    </ShippingSimulatorContext>\n  );\n}\n"],"mappings":";;;;;;;;AA+FA,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;;;;;;;;;CACA,eAAe;CACf,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE;CACtC,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAW;CAC1D,QAAQ,EACN,aAAa;EAAE,MAAM;EAAS,OAAO;CAAwE,EAC/G;CAKA,iBAAiB,CAAC,sBAAsB,2BAA2B;CACnE,WACE;AACJ,CAAC;;;;;;;;;;AA0BD,SAAgB,wBAAwB,EACtC,SACA,kBACA,gBACA,gBACA,WACA,UACA,GAAG,SAC4B;CAC/B,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,4BAAyB;EAA/D,UAAA,CACG,iBACC,oBAAC,OAAD;GAAK,MAAK;GAAQ,kCAA+B;GAC9C,UAAA;EACE,CAAA,IACH,MACH,QAAQ,SAAS,IAChB,oBAAC,YAAD;GAAY,OAAO,oBAAoB;GAAI,eAAe;GACvD,UAAA,QAAQ,KAAK,WACZ,oBAAC,mBAAD;IAAmC,OAAO;IACxC,UAAA,oBAAC,WAAD;KAAW,OAAO,OAAO;KAAK;IAAoB,CAAA;GACjC,GAFK,OAAO,EAEZ,CACpB;EACS,CAAA,IACV,IACD;;AAET;AAMA,SAAgB,oBAAoB,EAClC,OACA,UAAU,cACV,aACA,WACA,UACA,GAAG,SACwB;CAC3B,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,EAAE,SAAS,kBAAkB,gBAAgB,cAAc,iBAAiB,2BAA2B;EAC3G;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,yBAAD;GACE,GAAI;GACO;GACF;GACS;GACF;GAChB,iBAAiB,aAAa,aAAa,QAAQ;GAElD;EACsB,CAAA;CACD,CAAA;AAE9B"}
+{"version":3,"file":"delivery-options.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options.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 { RadioGroup, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport {\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n} from '../shipping-simulator/shipping-simulator.js';\nimport {\n  type DeliveryOptionSelectErrorCode,\n  type RawDeliveryOptionsData,\n  useDeliveryOptionSelection,\n} from './use-delivery-option-selection.js';\n\n/**\n * The `DeliveryOptions` matter section (docs/storefront-core/reference-cart.md § Delivery, T3 of the Single Address\n * Delivery epic). `DeliveryOptionsRoot` is a reactive Root over the persisted `Shipping` entity\n * (Decision 1) that becomes the THIRD provider of the FSPG-832 option-leaf runtime contexts —\n * `ShippingSimulatorContext` and the per-option `OptionItemContext` — alongside the two existing\n * simulator Roots (Decision 2), so `ShippingSimulatorOption` / `OptionName` / `OptionEstimate` /\n * `OptionPrice` / `OptionFreeBadge` render identically here with zero edits to those leaves.\n * `children` is the per-option template, rendered once per option inside a `RadioRoot` (radio\n * particle) whose group value is bound directly to `selectedOptionId` (Decision 5 — no local\n * selection state); changing it fires the `shipping.selectOption` action. Fields the reused leaves\n * do not read for this section (`postalCode`, `setPostalCode`, `submit`, `status`) are inert\n * defaults, satisfying the shared context type without a simulation flow. Exception: while\n * rendering `mockOptions` (no real data), selection is local-only and never dispatches the action —\n * see `mockOptions` on `DeliveryOptionsRootProps`.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, matching the ShippingSimulator matter's own convention\n// (not yet migrated to the codegen `graphql()` pipeline; see codegen.ts's documents glob comment).\n//\n// Selects `shipping { id ... }` (not shown in the spec's fragment snippet) so Apollo's\n// InMemoryCache normalizes `Shipping` by id — required for `shippingOptionSelect`'s returned\n// `shipping` to update the same cache entity this fragment reads (Decision 1/Decision 5's\n// \"reactive cache, no local state\" only holds if both sides normalize to the same entity).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DeliveryOptionsRootProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    /** Words the selection error by its code. */\n    $content?: ContentValue<typeof DeliveryOptionsRootContent>;\n    /**\n     * Shipping slice forwarded by the reactive runtime (`ReactiveDataProvider`) — it is the value of\n     * the `shipping` top-level field on `DeliveryOptionsData on Query`, not the wrapping\n     * `{ shipping: … }` shape. Receives `null` when shipping has not yet resolved.\n     */\n    $data?: RawDeliveryOptionsData | null;\n    /** Compiler-injected action surface; carries `shipping.selectOption`. */\n    $actions?: ComponentActions;\n    /**\n     * Local/dev fallback rows, used only when the reactive fetch resolves no options — real data\n     * always wins the moment it has any. `Shipping.options` is non-nullable, so a genuinely empty\n     * cart is indistinguishable from \"no data yet\" at this prop's shape; setting `mockOptions` is an\n     * explicit per-page opt-in that accepts showing these rows in both cases. Omit on production\n     * pages. Selecting a mock row is handled entirely with local state and never calls\n     * `$actions.shipping.selectOption` — there is no real cart/address for the real mutation to act\n     * on, so dispatching it would only ever surface a domain error (e.g. `MISSING_SHIPPING_ADDRESS`).\n     */\n    mockOptions?: ShippingOption[];\n  };\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const DeliveryOptionsRootContent = defineContentType({\n  id: 'delivery-options-root',\n  title: 'Delivery Options',\n  description: 'Messages shown when a delivery option selection is refused, one per error code the shopper can act on.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      optionUnavailableMessage: {\n        type: 'string',\n        title: 'Option unavailable message',\n        description: 'Shown when the picked option is no longer offered for the cart.',\n        format: 'icu-message',\n        messageSource: 'This delivery option is no longer available. Choose another one.',\n      },\n      missingAddressMessage: {\n        type: 'string',\n        title: 'Missing address message',\n        description: 'Shown when no delivery address is saved on the cart yet.',\n        format: 'icu-message',\n        messageSource: 'Enter a delivery address before choosing a delivery option.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Generic failure message',\n        description: 'Shown for a network failure and for every refusal the shopper cannot act on.',\n        format: 'icu-message',\n        messageSource: 'Unable to update the delivery option. Please try again.',\n      },\n    },\n  },\n});\n\nexport const DeliveryOptionsRootDefinition = defineComponent<DeliveryOptionsRootProps>({\n  name: 'DeliveryOptionsRoot',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsRoot,\n  content: DeliveryOptionsRootContent,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  editor: { label: 'Delivery Options', category: 'commerce' },\n  schema: {\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  // Re-provides the reused option leaves' runtime contexts (Decision 2): the inner\n  // `shipping-simulator-option` token is required — the option leaves compose as direct children\n  // here with no `ShippingSimulatorOptions` node between them — and the outer `shipping-simulator`\n  // token reflects the `ShippingSimulatorContext` this Root also provides at runtime.\n  providesContext: ['shipping-simulator', 'shipping-simulator-option'],\n  guideline:\n    'Root for the whole-cart delivery-option list at the delivery step: renders Shipping.options as a radio group bound to selectedOptionId, reusing the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children. Selecting a row dispatches $actions.shipping.selectOption; a refusal shows inline, worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). No local selection state — the group value is always the server selectedOptionId. mockOptions is a local/dev-only fallback rendered when the real fetch has no options; omit it in production.',\n});\n\n// ---------------------------------------------------------------------------\n// Shared list body\n// ---------------------------------------------------------------------------\n\n/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */\nexport const DELIVERY_OPTIONS_ROOT_ERROR_FIELDS = {\n  OPTION_UNAVAILABLE: 'optionUnavailableMessage',\n  MISSING_SHIPPING_ADDRESS: 'missingAddressMessage',\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<DeliveryOptionSelectErrorCode, MessageFieldName<typeof DeliveryOptionsRootContent>>;\n\nexport type DeliveryOptionsListBodyProps = ComponentPropsWithRef<'div'> & {\n  /** Resolved option rows (real or mock), supplied by the caller's selection engine. */\n  options: ShippingOption[];\n  /** Group value bound to the radio group; `null` renders nothing selected. */\n  selectedOptionId: string | null;\n  /** The caller's wording of the latest selection's first `userError`, or `null`; rendered as `role=\"alert\"`. */\n  selectionError: string | null;\n  /** Dispatched on a row change with the picked option id. */\n  onSelectOption: (optionId: string) => void;\n};\n\n/**\n * The list body shared by `DeliveryOptionsRoot` (always-open) and `DeliveryOptionsList` (the\n * collapsed-surface body under `DeliveryOptionsController`): the inline selection error plus the\n * radio group of options, reusing the FSPG-832 option leaves as the per-option `children` template.\n * It owns no data or selection engine — the caller resolves `options` / `selectedOptionId` /\n * `selectionError` and supplies the `onSelect` dispatch, so both surfaces render through one\n * component and cannot drift. Not registered: it renders no independently placeable part of its own\n * (the `data-fs-delivery-options` container hook and the reused leaves are the addressable parts).\n */\nexport function DeliveryOptionsListBody({\n  options,\n  selectedOptionId,\n  selectionError,\n  onSelectOption,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsListBodyProps) {\n  return (\n    <div {...props} className={className} data-fs-delivery-options=\"\">\n      {selectionError === null ? null : (\n        <div role=\"alert\" data-fs-delivery-options-error=\"\">\n          {selectionError}\n        </div>\n      )}\n      {options.length > 0 ? (\n        <RadioGroup value={selectedOptionId ?? ''} onValueChange={onSelectOption}>\n          {options.map((option) => (\n            <OptionItemContext key={option.id} value={option}>\n              <RadioRoot value={option.id}>{children}</RadioRoot>\n            </OptionItemContext>\n          ))}\n        </RadioGroup>\n      ) : null}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function DeliveryOptionsRoot({\n  $content,\n  $locale,\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsRootProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n  const { format } = useMessageFormatter(DeliveryOptionsRootContent, $content);\n  const errorMessage = selectionError\n    ? formatErrorCode(\n        DeliveryOptionsRootContent,\n        DELIVERY_OPTIONS_ROOT_ERROR_FIELDS,\n        selectionError,\n        format,\n        'genericErrorMessage',\n      )\n    : null;\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <DeliveryOptionsListBody\n        {...props}\n        className={className}\n        options={options}\n        selectedOptionId={selectedOptionId}\n        selectionError={errorMessage}\n        onSelectOption={(optionId) => selectOption(optionId)}\n      >\n        {children}\n      </DeliveryOptionsListBody>\n    </ShippingSimulatorContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;AA0D/B,MAAa,6BAA6B,kBAAkB;CAC1D,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,0BAA0B;IACxB,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;GACjB;GACA,uBAAuB;IACrB,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;GACjB;GACA,qBAAqB;IACnB,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;AAED,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT;CACA,eAAe;CACf,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE;CACtC,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAW;CAC1D,QAAQ,EACN,aAAa;EAAE,MAAM;EAAS,OAAO;CAAwE,EAC/G;CAKA,iBAAiB,CAAC,sBAAsB,2BAA2B;CACnE,WACE;AACJ,CAAC;;AAOD,MAAa,qCAAqC;CAChD,oBAAoB;CACpB,0BAA0B;CAC1B,sBAAsB;CACtB,gBAAgB;CAChB,eAAe;AACjB;;;;;;;;;;AAsBA,SAAgB,wBAAwB,EACtC,SACA,kBACA,gBACA,gBACA,WACA,UACA,GAAG,SAC4B;CAC/B,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,4BAAyB;EAA/D,UAAA,CACG,mBAAmB,OAAO,OACzB,oBAAC,OAAD;GAAK,MAAK;GAAQ,kCAA+B;GAC9C,UAAA;EACE,CAAA,GAEN,QAAQ,SAAS,IAChB,oBAAC,YAAD;GAAY,OAAO,oBAAoB;GAAI,eAAe;GACvD,UAAA,QAAQ,KAAK,WACZ,oBAAC,mBAAD;IAAmC,OAAO;IACxC,UAAA,oBAAC,WAAD;KAAW,OAAO,OAAO;KAAK;IAAoB,CAAA;GACjC,GAFK,OAAO,EAEZ,CACpB;EACS,CAAA,IACV,IACD;;AAET;AAMA,SAAgB,oBAAoB,EAClC,UACA,SACA,OACA,UAAU,cACV,aACA,WACA,UACA,GAAG,SACwB;CAC3B,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,EAAE,SAAS,kBAAkB,gBAAgB,cAAc,iBAAiB,2BAA2B;EAC3G;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,WAAW,oBAAoB,4BAA4B,QAAQ;CAC3E,MAAM,eAAe,iBACjB,gBACE,4BACA,oCACA,gBACA,QACA,qBACF,IACA;CAEJ,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,yBAAD;GACE,GAAI;GACO;GACF;GACS;GAClB,gBAAgB;GAChB,iBAAiB,aAAa,aAAa,QAAQ;GAElD;EACsB,CAAA;CACD,CAAA;AAE9B"}