@vtex/faststore 0.0.4 → 0.0.6

package/dist/matter/identity-edit/identity-edit.js

@@ -20,7 +20,7 @@ const IdentityEditControllerDefinition = defineComponent({
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form's confirmation stays readable and ClientProfileForm never needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a ClientProfileForm, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own."
+	guideline: "Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form stays open and no descendant needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a FormRoot over ClientProfileFieldset, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own."
 });
 const IdentitySummaryViewDefinition = defineComponent({
 	name: "IdentitySummaryView",
@@ -44,7 +44,7 @@ const IdentityEditFormDefinition = defineComponent({
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose ClientProfileFormRoot and its parts inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController."
+	guideline: "Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose a FormRoot holding ClientProfileFieldset and its controls inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController."
 });
 const IdentityEditButtonDefinition = defineComponent({
 	name: "IdentityEditButton",

package/dist/matter/identity-edit/identity-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"identity-edit.js","names":[],"sources":["../../../src/matter/identity-edit/identity-edit.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo, useState } from 'react';\n\n// ---------------------------------------------------------------------------\n// Identity view/edit toggle.\n//\n// The identity section shows a summary of who the shopper is until they ask to change it, and returns to\n// the summary when they say so — this component owns the mode rather than a page authoring it\n// (ADR-0006). Saving does not move it; whether it should is a sequencing question left to the\n// flow-of-steps RFC (#611). The sibling of the delivery section's `ShippingAddressEditController`, and\n// its own component because the two differ in the parts that are domain knowledge. See identity-edit.md.\n// ---------------------------------------------------------------------------\n\n/** Internal: the section's two states never reach the schema, because each has its own component. */\ntype IdentityEditMode = 'view' | 'edit';\n\ntype IdentityEditContextValue = {\n  mode: IdentityEditMode;\n  setMode: (mode: IdentityEditMode) => void;\n};\n\nconst IdentityEditContext = createContext<IdentityEditContextValue | undefined>(undefined);\n\nfunction useIdentityEditContext(): IdentityEditContextValue {\n  const ctx = useContext(IdentityEditContext);\n  if (!ctx) {\n    throw new Error(\n      'IdentitySummaryView, IdentityEditForm and the edit buttons must be used inside an IdentityEditController.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentityEditControllerProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditPanelProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditButtonProps = {\n  /** Text shown when no children are composed. */\n  label?: string;\n  className?: string;\n  /** Compose custom button content (e.g. an Icon plus text); falls back to `label`. */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentityEditControllerDefinition = defineComponent<IdentityEditControllerProps>({\n  name: 'IdentityEditController',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditController,\n  providesContext: 'identity-edit',\n  editor: { label: 'Identity Edit Controller', category: 'commerce' },\n  schema: {},\n  guideline:\n    \"Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form's confirmation stays readable and ClientProfileForm never needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a ClientProfileForm, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own.\",\n});\n\nexport const IdentitySummaryViewDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentitySummaryView',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryView,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Summary View', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the summary, and nothing while it shows the form. Takes no props: which state it gates is which component it is. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditFormDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentityEditForm',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditForm,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Form', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose ClientProfileFormRoot and its parts inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'editar', label: 'Button label' },\n  },\n  guideline:\n    'Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on `label`. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditCancelButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditCancelButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditCancelButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Cancel Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'cancelar', label: 'Button label' },\n  },\n  guideline:\n    'Returns the identity section to its summary without saving. Place it inside an IdentityEditForm. Must be inside an IdentityEditController.',\n});\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\n/**\n * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.\n *\n * The mode moves only when the shopper presses one of this section's own buttons. Saving the form does\n * not close the section — the confirmation stays readable, and whether finishing a form should collapse\n * anything is a sequencing question this component deliberately has no opinion on.\n */\nexport function IdentityEditController({ children }: IdentityEditControllerProps) {\n  const [mode, setMode] = useState<IdentityEditMode>('view');\n\n  const value = useMemo<IdentityEditContextValue>(() => ({ mode, setMode }), [mode]);\n\n  return <IdentityEditContext.Provider value={value}>{children}</IdentityEditContext.Provider>;\n}\n\n/** Renders its children only while the section shows the summary. */\nexport function IdentitySummaryView({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'view') return null;\n  return <>{children}</>;\n}\n\n/** Renders its children only while the section shows the form. */\nexport function IdentityEditForm({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'edit') return null;\n  return <>{children}</>;\n}\n\n/** Opens the form. Renders `children` or the `label` fallback. */\nexport function IdentityEditButton({ label = 'editar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-button=\"\" className={className} onClick={() => setMode('edit')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n/** Returns to the summary without saving. Renders `children` or the `label` fallback. */\nexport function IdentityEditCancelButton({ label = 'cancelar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-cancel-button=\"\" className={className} onClick={() => setMode('view')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentityEdit = {\n  Controller: IdentityEditController,\n  ControllerDefinition: IdentityEditControllerDefinition,\n  SummaryView: IdentitySummaryView,\n  SummaryViewDefinition: IdentitySummaryViewDefinition,\n  Form: IdentityEditForm,\n  FormDefinition: IdentityEditFormDefinition,\n  EditButton: IdentityEditButton,\n  EditButtonDefinition: IdentityEditButtonDefinition,\n  CancelButton: IdentityEditCancelButton,\n  CancelButtonDefinition: IdentityEditCancelButtonDefinition,\n};\n"],"mappings":";;;;;;AAuBA,MAAM,sBAAsB,cAAoD,KAAA,CAAS;AAEzF,SAAS,yBAAmD;CAC1D,MAAM,MAAM,WAAW,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MACR,2GACF;CAEF,OAAO;AACT;AA0BA,MAAa,mCAAmC,gBAA6C;CAC3F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA4B,UAAU;CAAW;CAClE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAAwC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAwC;CAChF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAW;CAC5D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,+BAA+B,gBAAyC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAS;CAC5D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAU,OAAO;CAAe,EACpE;CACA,WACE;AACJ,CAAC;AAED,MAAa,qCAAqC,gBAAyC;CACzF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA+B,UAAU;CAAS;CACnE,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAY,OAAO;CAAe,EACtE;CACA,WACE;AACJ,CAAC;;;;;;;;AAaD,SAAgB,uBAAuB,EAAE,YAAyC;CAChF,MAAM,CAAC,MAAM,WAAW,SAA2B,MAAM;CAEzD,MAAM,QAAQ,eAAyC;EAAE;EAAM;CAAQ,IAAI,CAAC,IAAI,CAAC;CAEjF,OAAO,oBAAC,oBAAoB,UAArB;EAAqC;EAAQ;CAAuC,CAAA;AAC7F;;AAGA,SAAgB,oBAAoB,EAAE,YAAoC;CACxE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,iBAAiB,EAAE,YAAoC;CACrE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,mBAAmB,EAAE,QAAQ,UAAU,WAAW,YAAqC;CACrG,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,gCAA6B;EAAc;EAAW,eAAe,QAAQ,MAAM;EACtG,UAAA,YAAY;CACP,CAAA;AAEZ;;AAGA,SAAgB,yBAAyB,EAAE,QAAQ,YAAY,WAAW,YAAqC;CAC7G,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,uCAAoC;EAAc;EAAW,eAAe,QAAQ,MAAM;EAC7G,UAAA,YAAY;CACP,CAAA;AAEZ;AAMA,MAAa,eAAe;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,sBAAsB;CACtB,cAAc;CACd,wBAAwB;AAC1B"}
+{"version":3,"file":"identity-edit.js","names":[],"sources":["../../../src/matter/identity-edit/identity-edit.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo, useState } from 'react';\n\n// ---------------------------------------------------------------------------\n// Identity view/edit toggle.\n//\n// The identity section shows a summary of who the shopper is until they ask to change it, and returns to\n// the summary when they say so — this component owns the mode rather than a page authoring it\n// (ADR-0006). Saving does not move it; whether it should is a sequencing question left to the\n// flow-of-steps RFC (#611). The delivery section owns no such mode of its own — its view/edit toggle\n// was removed with no replacement, so ShippingAddressFieldset always renders once resolved. See\n// identity-edit.md.\n// ---------------------------------------------------------------------------\n\n/** Internal: the section's two states never reach the schema, because each has its own component. */\ntype IdentityEditMode = 'view' | 'edit';\n\ntype IdentityEditContextValue = {\n  mode: IdentityEditMode;\n  setMode: (mode: IdentityEditMode) => void;\n};\n\nconst IdentityEditContext = createContext<IdentityEditContextValue | undefined>(undefined);\n\nfunction useIdentityEditContext(): IdentityEditContextValue {\n  const ctx = useContext(IdentityEditContext);\n  if (!ctx) {\n    throw new Error(\n      'IdentitySummaryView, IdentityEditForm and the edit buttons must be used inside an IdentityEditController.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentityEditControllerProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditPanelProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditButtonProps = {\n  /** Text shown when no children are composed. */\n  label?: string;\n  className?: string;\n  /** Compose custom button content (e.g. an Icon plus text); falls back to `label`. */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentityEditControllerDefinition = defineComponent<IdentityEditControllerProps>({\n  name: 'IdentityEditController',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditController,\n  providesContext: 'identity-edit',\n  editor: { label: 'Identity Edit Controller', category: 'commerce' },\n  schema: {},\n  guideline:\n    \"Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form stays open and no descendant needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a FormRoot over ClientProfileFieldset, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own.\",\n});\n\nexport const IdentitySummaryViewDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentitySummaryView',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryView,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Summary View', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the summary, and nothing while it shows the form. Takes no props: which state it gates is which component it is. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditFormDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentityEditForm',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditForm,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Form', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose a FormRoot holding ClientProfileFieldset and its controls inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'editar', label: 'Button label' },\n  },\n  guideline:\n    'Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on `label`. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditCancelButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditCancelButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditCancelButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Cancel Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'cancelar', label: 'Button label' },\n  },\n  guideline:\n    'Returns the identity section to its summary without saving. Place it inside an IdentityEditForm. Must be inside an IdentityEditController.',\n});\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\n/**\n * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.\n *\n * The mode moves only when the shopper presses one of this section's own buttons. Saving the form does\n * not close the section — the confirmation stays readable, and whether finishing a form should collapse\n * anything is a sequencing question this component deliberately has no opinion on.\n */\nexport function IdentityEditController({ children }: IdentityEditControllerProps) {\n  const [mode, setMode] = useState<IdentityEditMode>('view');\n\n  const value = useMemo<IdentityEditContextValue>(() => ({ mode, setMode }), [mode]);\n\n  return <IdentityEditContext.Provider value={value}>{children}</IdentityEditContext.Provider>;\n}\n\n/** Renders its children only while the section shows the summary. */\nexport function IdentitySummaryView({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'view') return null;\n  return <>{children}</>;\n}\n\n/** Renders its children only while the section shows the form. */\nexport function IdentityEditForm({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'edit') return null;\n  return <>{children}</>;\n}\n\n/** Opens the form. Renders `children` or the `label` fallback. */\nexport function IdentityEditButton({ label = 'editar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-button=\"\" className={className} onClick={() => setMode('edit')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n/** Returns to the summary without saving. Renders `children` or the `label` fallback. */\nexport function IdentityEditCancelButton({ label = 'cancelar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-cancel-button=\"\" className={className} onClick={() => setMode('view')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentityEdit = {\n  Controller: IdentityEditController,\n  ControllerDefinition: IdentityEditControllerDefinition,\n  SummaryView: IdentitySummaryView,\n  SummaryViewDefinition: IdentitySummaryViewDefinition,\n  Form: IdentityEditForm,\n  FormDefinition: IdentityEditFormDefinition,\n  EditButton: IdentityEditButton,\n  EditButtonDefinition: IdentityEditButtonDefinition,\n  CancelButton: IdentityEditCancelButton,\n  CancelButtonDefinition: IdentityEditCancelButtonDefinition,\n};\n"],"mappings":";;;;;;AAwBA,MAAM,sBAAsB,cAAoD,KAAA,CAAS;AAEzF,SAAS,yBAAmD;CAC1D,MAAM,MAAM,WAAW,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MACR,2GACF;CAEF,OAAO;AACT;AA0BA,MAAa,mCAAmC,gBAA6C;CAC3F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA4B,UAAU;CAAW;CAClE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAAwC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAwC;CAChF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAW;CAC5D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,+BAA+B,gBAAyC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAS;CAC5D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAU,OAAO;CAAe,EACpE;CACA,WACE;AACJ,CAAC;AAED,MAAa,qCAAqC,gBAAyC;CACzF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA+B,UAAU;CAAS;CACnE,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAY,OAAO;CAAe,EACtE;CACA,WACE;AACJ,CAAC;;;;;;;;AAaD,SAAgB,uBAAuB,EAAE,YAAyC;CAChF,MAAM,CAAC,MAAM,WAAW,SAA2B,MAAM;CAEzD,MAAM,QAAQ,eAAyC;EAAE;EAAM;CAAQ,IAAI,CAAC,IAAI,CAAC;CAEjF,OAAO,oBAAC,oBAAoB,UAArB;EAAqC;EAAQ;CAAuC,CAAA;AAC7F;;AAGA,SAAgB,oBAAoB,EAAE,YAAoC;CACxE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,iBAAiB,EAAE,YAAoC;CACrE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,mBAAmB,EAAE,QAAQ,UAAU,WAAW,YAAqC;CACrG,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,gCAA6B;EAAc;EAAW,eAAe,QAAQ,MAAM;EACtG,UAAA,YAAY;CACP,CAAA;AAEZ;;AAGA,SAAgB,yBAAyB,EAAE,QAAQ,YAAY,WAAW,YAAqC;CAC7G,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,uCAAoC;EAAc;EAAW,eAAe,QAAQ,MAAM;EAC7G,UAAA,YAAY;CACP,CAAA;AAEZ;AAMA,MAAa,eAAe;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,sBAAsB;CACtB,cAAc;CACd,wBAAwB;AAC1B"}

package/dist/matter/identity-summary/identity-summary.js

@@ -47,7 +47,7 @@ const IdentitySummaryRootDefinition = defineComponent({
 		default: "Unable to sign out. Please try again.",
 		label: "Sign-out error message"
 	} },
-	guideline: "Read-only identity summary data root: reads the shopper profile, provides it plus a sign-out action to descendants, and self-gates (renders nothing in the anonymous state). Must be inside SessionRoot. Wrap the parts in an IdentityEditController for the summary/form swap: an IdentitySummaryView holding these parts, an IdentityEditForm holding a ClientProfileForm. See identity-summary.md."
+	guideline: "Read-only identity summary data root: reads the shopper profile, provides it plus a sign-out action to descendants, and self-gates (renders nothing in the anonymous state). Must be inside SessionRoot. Wrap the parts in an IdentityEditController for the summary/form swap: an IdentitySummaryView holding these parts, an IdentityEditForm holding a FormRoot over ClientProfileFieldset. See identity-summary.md."
 });
 const IdentitySummarySelectedSummaryDefinition = defineComponent({
 	name: "IdentitySummarySelectedSummary",
@@ -182,7 +182,7 @@ function IdentitySummaryRoot({ signOutErrorMessage = "Unable to sign out. Please
 			const errors = await $actions?.session?.logout?.() ?? [];
 			if (errors.length > 0) setSignOutError(errors[0]?.message ?? signOutErrorMessage);
 		} catch (error) {
-			console.error("[IdentitySummary] logout failed:", error);
+			console.error("[IdentitySummary] logout failed:", error instanceof Error ? error.name : "UnknownError");
 			setSignOutError(signOutErrorMessage);
 		} finally {
 			setSignOutPending(false);

package/dist/matter/identity-summary/identity-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"identity-summary.js","names":[],"sources":["../../../src/matter/identity-summary/identity-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useState } from 'react';\nimport { Badge } from '../../particles/badge/badge.js';\nimport { applyPhoneMask, type PhoneCountry } from '../../particles/phone-field/phone-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { type SessionState, useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — colocated self-contained data root (ADR-0011).\n// Reads only `clientProfile` (the fields this read-only summary displays). The\n// edit surface is a separately-composed `ClientProfileForm`, which owns its own\n// fragment and identity actions.\n//\n// Single top-level entity → the compiler delivers `$data` UNWRAPPED, i.e. the\n// `ClientProfile` value directly, not `{ clientProfile: ... }` (ADR-0015 arity-1).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment IdentitySummaryData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n      firstName\n      lastName\n      phone\n      document\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * The `$data` slice forwarded by the reactive runtime — the unwrapped `ClientProfile` entity.\n * The fragment selects a single top-level field, so the compiler hands the entity value directly\n * (not a `{ clientProfile: ... }` wrapper); ADR-0015.\n */\nexport type IdentitySummaryData = {\n  email?: string | null;\n  firstName?: string | null;\n  lastName?: string | null;\n  phone?: string | null;\n  document?: string | null;\n} | null;\n\n// ---------------------------------------------------------------------------\n// Context — data + session state + sign-out, provided by IdentitySummaryRoot.\n// The summary/form swap is owned by `IdentityEditController`, which moves only on its own buttons\n// (ADR-0006) — this matter owns only the identity data and the sign-out action, never a bespoke toggle.\n// ---------------------------------------------------------------------------\n\ntype IdentitySummaryContextValue = {\n  state: SessionState;\n  firstName: string;\n  lastName: string;\n  email: string;\n  phone: string;\n  document: string;\n  handleSignOut: () => void;\n  signOutPending: boolean;\n  signOutError: string | null;\n};\n\nconst IDENTITY_SUMMARY_CONTEXT_UNSET = Symbol('IdentitySummaryContextUnset');\n\nconst IdentitySummaryContext = createContext<IdentitySummaryContextValue | typeof IDENTITY_SUMMARY_CONTEXT_UNSET>(\n  IDENTITY_SUMMARY_CONTEXT_UNSET,\n);\n\nfunction useIdentitySummaryContext(): IdentitySummaryContextValue {\n  const ctx = useContext(IdentitySummaryContext);\n  if (ctx === IDENTITY_SUMMARY_CONTEXT_UNSET) {\n    throw new Error('IdentitySummary components must be used inside IdentitySummaryRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentitySummaryRootProps = {\n  /** Error message shown when the sign-out mutation returns user errors. */\n  signOutErrorMessage?: string;\n  className?: string;\n  children?: ReactNode;\n  /** `IdentitySummaryData` slice forwarded by the reactive runtime. */\n  $data?: IdentitySummaryData;\n  /** Compiler-injected action surface; carries `session.logout`. */\n  $actions?: ComponentActions;\n};\n\nexport type IdentitySummarySelectedSummaryProps = {\n  /** Phone display country; selects the mask applied to the stored E.164 value. */\n  country?: PhoneCountry;\n  /** Badge label in the `identified` session state. */\n  identifiedBadgeLabel?: string;\n  /** Badge label in the `loggedIn` session state. */\n  loggedInBadgeLabel?: string;\n  className?: string;\n  /** Compose custom read-only content; falls back to the default badge + details when omitted. */\n  children?: ReactNode;\n};\n\nexport type IdentitySummaryBadgeProps = {\n  /** Badge label in the `identified` session state. */\n  identifiedLabel?: string;\n  /** Badge label in the `loggedIn` session state. */\n  loggedInLabel?: string;\n  className?: string;\n};\n\nexport type IdentitySummaryFieldProps = {\n  className?: string;\n};\n\nexport type IdentitySummaryPhoneProps = {\n  /** Phone display country; selects the mask applied to the stored E.164 value. */\n  country?: PhoneCountry;\n  className?: string;\n};\n\nexport type IdentitySummarySignOutButtonProps = {\n  label?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type IdentitySummaryErrorProps = {\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentitySummaryRootDefinition = defineComponent<IdentitySummaryRootProps>({\n  name: 'IdentitySummaryRoot',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'session',\n  providesContext: 'identity-summary',\n  actions: { session: ['logout'] },\n  editor: { label: 'Identity Summary Root', category: 'identity' },\n  schema: {\n    signOutErrorMessage: {\n      type: 'string',\n      default: 'Unable to sign out. Please try again.',\n      label: 'Sign-out error message',\n    },\n  },\n  guideline:\n    'Read-only identity summary data root: reads the shopper profile, provides it plus a sign-out action to descendants, and self-gates (renders nothing in the anonymous state). Must be inside SessionRoot. Wrap the parts in an IdentityEditController for the summary/form swap: an IdentitySummaryView holding these parts, an IdentityEditForm holding a ClientProfileForm. See identity-summary.md.',\n});\n\nexport const IdentitySummarySelectedSummaryDefinition = defineComponent<IdentitySummarySelectedSummaryProps>({\n  name: 'IdentitySummarySelectedSummary',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummarySelectedSummary,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Selected Summary', category: 'identity' },\n  schema: {},\n  guideline:\n    'Default composition of the identity summary: badge, name, e-mail, phone, document, in that order. It is a shortcut, not the only way — to change the order, drop a field, or interleave anything else, compose IdentitySummaryBadge / Name / Email / Phone / Document directly instead. It offers nothing to the schema: its country and badge-label props configure the default composition only, and are withheld from the schema because a page that set one here and then composed children would watch it vanish. A composed summary configures the leaf instead — the phone mask country on IdentitySummaryPhone, the labels on IdentitySummaryBadge. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryBadgeDefinition = defineComponent<IdentitySummaryBadgeProps>({\n  name: 'IdentitySummaryBadge',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryBadge,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Badge', category: 'identity' },\n  schema: {\n    identifiedLabel: { type: 'string', default: 'Guest', label: 'Identified badge label' },\n    loggedInLabel: { type: 'string', default: 'Signed in', label: 'Logged-in badge label' },\n  },\n  guideline:\n    'Session-state badge for the identity summary. Place it wherever the summary should carry it; order is composition, not a prop. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryNameDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryName',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryName,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Name', category: 'identity' },\n  schema: {},\n  guideline:\n    \"The shopper's full name, or nothing when the profile has neither first nor last name. Place it in whatever order the summary should read. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryEmailDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryEmail',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryEmail,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Email', category: 'identity' },\n  schema: {},\n  guideline: \"The shopper's e-mail, or nothing when absent. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryPhoneDefinition = defineComponent<IdentitySummaryPhoneProps>({\n  name: 'IdentitySummaryPhone',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryPhone,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Phone', category: 'identity' },\n  schema: {\n    country: { type: 'string', label: 'Phone country (US or BR)' },\n  },\n  guideline:\n    \"The shopper's phone, or nothing when absent. Masked for `country` when one is set; rendered as stored otherwise, since each mask truncates to its own country's length. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryDocumentDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryDocument',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryDocument,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Document', category: 'identity' },\n  schema: {},\n  guideline: \"The shopper's tax document, or nothing when absent. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummarySignOutButtonDefinition = defineComponent<IdentitySummarySignOutButtonProps>({\n  name: 'IdentitySummarySignOutButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummarySignOutButton,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Sign Out Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'Sign out', label: 'Button label' },\n  },\n  guideline:\n    'Dispatches $actions.session.logout (async/pessimistic): carries data-fs-identity-summary-pending while in flight and disables itself. Compose an Icon + text as children, or rely on `label`. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryErrorDefinition = defineComponent<IdentitySummaryErrorProps>({\n  name: 'IdentitySummaryError',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryError,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Error', category: 'content' },\n  schema: {},\n  guideline:\n    'Renders the inline sign-out error (role=\"alert\") when the logout mutation returns a user error, else nothing. Must be a descendant of IdentitySummaryRoot.',\n});\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/**\n * Data root for the identity summary. Reads the shopper profile from its colocated fragment,\n * enforces the SessionRoot ancestor via `useSession()`, and self-gates to null in the anonymous\n * state. Owns the sign-out mutation state (pending/error) and broadcasts everything the read-only\n * parts and the sign-out button need through `IdentitySummaryContext`.\n */\nexport function IdentitySummaryRoot({\n  signOutErrorMessage = 'Unable to sign out. Please try again.',\n  className,\n  children,\n  $data: $dataProp,\n  $actions: $actionsProp,\n}: Readonly<IdentitySummaryRootProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  // Enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { state } = useSession();\n\n  const [signOutPending, setSignOutPending] = useState(false);\n  const [signOutError, setSignOutError] = useState<string | null>(null);\n\n  async function handleSignOut() {\n    setSignOutPending(true);\n    setSignOutError(null);\n    try {\n      const errors: readonly SessionUserError[] = (await $actions?.session?.logout?.()) ?? [];\n      if (errors.length > 0) setSignOutError(errors[0]?.message ?? signOutErrorMessage);\n    } catch (error) {\n      // A logout that throws rather than resolving userErrors would otherwise leave the shopper still\n      // signed in with nothing on screen, and escape as an unhandled rejection.\n      console.error('[IdentitySummary] logout failed:', error);\n      setSignOutError(signOutErrorMessage);\n    } finally {\n      setSignOutPending(false);\n    }\n  }\n\n  // Self-gate: nothing to show for an anonymous or unresolved session.\n  if (state === 'anonymous') return null;\n\n  const contextValue: IdentitySummaryContextValue = {\n    state,\n    firstName: $data?.firstName ?? '',\n    lastName: $data?.lastName ?? '',\n    email: $data?.email ?? '',\n    phone: $data?.phone ?? '',\n    document: $data?.document ?? '',\n    handleSignOut,\n    signOutPending,\n    signOutError,\n  };\n\n  return (\n    <IdentitySummaryContext.Provider value={contextValue}>\n      <div\n        className={className}\n        data-fs-identity-summary=\"\"\n        {...(signOutPending ? { 'data-fs-identity-summary-pending': '' } : {})}\n      >\n        {children}\n      </div>\n    </IdentitySummaryContext.Provider>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Read-only summary\n// ---------------------------------------------------------------------------\n\n/**\n * Read-only identity display: a session-state badge plus name, email, phone, and document.\n *\n * The props below configure the default composition only — composing children replaces it wholesale,\n * and a leaf placed there takes its own props (`IdentitySummaryPhone` its `country`,\n * `IdentitySummaryBadge` its labels). They are deliberately absent from the schema, so a page cannot\n * set one here and watch it disappear behind composed children.\n */\nexport function IdentitySummarySelectedSummary({\n  country,\n  identifiedBadgeLabel = 'Guest',\n  loggedInBadgeLabel = 'Signed in',\n  className,\n  children,\n}: IdentitySummarySelectedSummaryProps) {\n  return (\n    <div className={className} data-fs-identity-summary-summary=\"\">\n      {children ?? (\n        <>\n          <IdentitySummaryBadge identifiedLabel={identifiedBadgeLabel} loggedInLabel={loggedInBadgeLabel} />\n          <IdentitySummaryName />\n          <IdentitySummaryEmail />\n          <IdentitySummaryPhone country={country} />\n          <IdentitySummaryDocument />\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Session-state badge. Renders `identifiedLabel` for a guest and `loggedInLabel` once authenticated. */\nexport function IdentitySummaryBadge({\n  identifiedLabel = 'Guest',\n  loggedInLabel = 'Signed in',\n  className,\n}: IdentitySummaryBadgeProps) {\n  const { state } = useIdentitySummaryContext();\n  return (\n    <Badge className={className} data-fs-identity-summary-badge=\"\" data-fs-identity-summary-state={state}>\n      {state === 'loggedIn' ? loggedInLabel : identifiedLabel}\n    </Badge>\n  );\n}\n\n/** The shopper's full name. Renders nothing when the profile carries neither name. */\nexport function IdentitySummaryName({ className }: IdentitySummaryFieldProps) {\n  const { firstName, lastName } = useIdentitySummaryContext();\n  const fullName = [firstName, lastName].filter(Boolean).join(' ');\n  if (!fullName) return null;\n  return (\n    <p className={className} data-fs-identity-summary-name=\"\">\n      {fullName}\n    </p>\n  );\n}\n\n/** The shopper's e-mail. Renders nothing when absent. */\nexport function IdentitySummaryEmail({ className }: IdentitySummaryFieldProps) {\n  const { email } = useIdentitySummaryContext();\n  if (!email) return null;\n  return (\n    <p className={className} data-fs-identity-summary-email=\"\">\n      {email}\n    </p>\n  );\n}\n\n/** E.164 prefixes for the countries the masks understand. */\nconst COUNTRY_PREFIX: Record<PhoneCountry, string> = { BR: '+55', US: '+1' };\n\n/**\n * The shopper's phone, masked for `country`. Renders nothing when absent, and renders the stored value\n * as-is whenever the mask does not apply to it — no country given, or a stored E.164 number belonging to\n * a different one. Each mask truncates to its own country's length, so applying the wrong one prints a\n * number that is not the shopper's, with nothing to signal that digits were dropped.\n */\nexport function IdentitySummaryPhone({ country, className }: IdentitySummaryPhoneProps) {\n  const { phone } = useIdentitySummaryContext();\n  if (!phone) return null;\n  const maskApplies = country !== undefined && (!phone.startsWith('+') || phone.startsWith(COUNTRY_PREFIX[country]));\n  return (\n    <p className={className} data-fs-identity-summary-phone=\"\">\n      {maskApplies && country ? applyPhoneMask(phone, country) : phone}\n    </p>\n  );\n}\n\n/** The shopper's tax document. Renders nothing when absent. */\nexport function IdentitySummaryDocument({ className }: IdentitySummaryFieldProps) {\n  const { document } = useIdentitySummaryContext();\n  if (!document) return null;\n  return (\n    <p className={className} data-fs-identity-summary-document=\"\">\n      {document}\n    </p>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Sign-out button + error (domain-coupled; the summary/form swap is IdentityEditController's)\n// ---------------------------------------------------------------------------\n\n/** Dispatches the sign-out mutation (async/pessimistic). */\nexport function IdentitySummarySignOutButton({\n  label = 'Sign out',\n  className,\n  children,\n}: IdentitySummarySignOutButtonProps) {\n  const { handleSignOut, signOutPending } = useIdentitySummaryContext();\n  return (\n    <button\n      type=\"button\"\n      data-fs-identity-summary-sign-out=\"\"\n      className={className}\n      disabled={signOutPending}\n      {...(signOutPending ? { 'data-fs-identity-summary-pending': '' } : {})}\n      onClick={handleSignOut}\n    >\n      {children ?? label}\n    </button>\n  );\n}\n\n/** Renders the inline sign-out user error, or nothing when there is none. */\nexport function IdentitySummaryError({ className }: IdentitySummaryErrorProps) {\n  const { signOutError } = useIdentitySummaryContext();\n  if (!signOutError) return null;\n  return (\n    <div role=\"alert\" className={className} data-fs-identity-summary-error=\"\">\n      {signOutError}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentitySummary = {\n  Badge: IdentitySummaryBadge,\n  BadgeDefinition: IdentitySummaryBadgeDefinition,\n  Name: IdentitySummaryName,\n  NameDefinition: IdentitySummaryNameDefinition,\n  Email: IdentitySummaryEmail,\n  EmailDefinition: IdentitySummaryEmailDefinition,\n  Phone: IdentitySummaryPhone,\n  PhoneDefinition: IdentitySummaryPhoneDefinition,\n  Document: IdentitySummaryDocument,\n  DocumentDefinition: IdentitySummaryDocumentDefinition,\n  Root: IdentitySummaryRoot,\n  RootDefinition: IdentitySummaryRootDefinition,\n  SelectedSummary: IdentitySummarySelectedSummary,\n  SelectedSummaryDefinition: IdentitySummarySelectedSummaryDefinition,\n  SignOutButton: IdentitySummarySignOutButton,\n  SignOutButtonDefinition: IdentitySummarySignOutButtonDefinition,\n  Error: IdentitySummaryError,\n  ErrorDefinition: IdentitySummaryErrorDefinition,\n};\n"],"mappings":"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"}
+{"version":3,"file":"identity-summary.js","names":[],"sources":["../../../src/matter/identity-summary/identity-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useState } from 'react';\nimport { Badge } from '../../particles/badge/badge.js';\nimport { applyPhoneMask, type PhoneCountry } from '../../particles/phone-field/phone-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { type SessionState, useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — colocated self-contained data root (ADR-0011).\n// Reads only `clientProfile` (the fields this read-only summary displays). The\n// edit surface is a separately-composed FormRoot over `ClientProfileFieldset`, which owns its own\n// fragment and identity actions.\n//\n// Single top-level entity → the compiler delivers `$data` UNWRAPPED, i.e. the\n// `ClientProfile` value directly, not `{ clientProfile: ... }` (ADR-0015 arity-1).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment IdentitySummaryData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n      firstName\n      lastName\n      phone\n      document\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * The `$data` slice forwarded by the reactive runtime — the unwrapped `ClientProfile` entity.\n * The fragment selects a single top-level field, so the compiler hands the entity value directly\n * (not a `{ clientProfile: ... }` wrapper); ADR-0015.\n */\nexport type IdentitySummaryData = {\n  email?: string | null;\n  firstName?: string | null;\n  lastName?: string | null;\n  phone?: string | null;\n  document?: string | null;\n} | null;\n\n// ---------------------------------------------------------------------------\n// Context — data + session state + sign-out, provided by IdentitySummaryRoot.\n// The summary/form swap is owned by `IdentityEditController`, which moves only on its own buttons\n// (ADR-0006) — this matter owns only the identity data and the sign-out action, never a bespoke toggle.\n// ---------------------------------------------------------------------------\n\ntype IdentitySummaryContextValue = {\n  state: SessionState;\n  firstName: string;\n  lastName: string;\n  email: string;\n  phone: string;\n  document: string;\n  handleSignOut: () => void;\n  signOutPending: boolean;\n  signOutError: string | null;\n};\n\nconst IDENTITY_SUMMARY_CONTEXT_UNSET = Symbol('IdentitySummaryContextUnset');\n\nconst IdentitySummaryContext = createContext<IdentitySummaryContextValue | typeof IDENTITY_SUMMARY_CONTEXT_UNSET>(\n  IDENTITY_SUMMARY_CONTEXT_UNSET,\n);\n\nfunction useIdentitySummaryContext(): IdentitySummaryContextValue {\n  const ctx = useContext(IdentitySummaryContext);\n  if (ctx === IDENTITY_SUMMARY_CONTEXT_UNSET) {\n    throw new Error('IdentitySummary components must be used inside IdentitySummaryRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentitySummaryRootProps = {\n  /** Error message shown when the sign-out mutation returns user errors. */\n  signOutErrorMessage?: string;\n  className?: string;\n  children?: ReactNode;\n  /** `IdentitySummaryData` slice forwarded by the reactive runtime. */\n  $data?: IdentitySummaryData;\n  /** Compiler-injected action surface; carries `session.logout`. */\n  $actions?: ComponentActions;\n};\n\nexport type IdentitySummarySelectedSummaryProps = {\n  /** Phone display country; selects the mask applied to the stored E.164 value. */\n  country?: PhoneCountry;\n  /** Badge label in the `identified` session state. */\n  identifiedBadgeLabel?: string;\n  /** Badge label in the `loggedIn` session state. */\n  loggedInBadgeLabel?: string;\n  className?: string;\n  /** Compose custom read-only content; falls back to the default badge + details when omitted. */\n  children?: ReactNode;\n};\n\nexport type IdentitySummaryBadgeProps = {\n  /** Badge label in the `identified` session state. */\n  identifiedLabel?: string;\n  /** Badge label in the `loggedIn` session state. */\n  loggedInLabel?: string;\n  className?: string;\n};\n\nexport type IdentitySummaryFieldProps = {\n  className?: string;\n};\n\nexport type IdentitySummaryPhoneProps = {\n  /** Phone display country; selects the mask applied to the stored E.164 value. */\n  country?: PhoneCountry;\n  className?: string;\n};\n\nexport type IdentitySummarySignOutButtonProps = {\n  label?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type IdentitySummaryErrorProps = {\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentitySummaryRootDefinition = defineComponent<IdentitySummaryRootProps>({\n  name: 'IdentitySummaryRoot',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'session',\n  providesContext: 'identity-summary',\n  actions: { session: ['logout'] },\n  editor: { label: 'Identity Summary Root', category: 'identity' },\n  schema: {\n    signOutErrorMessage: {\n      type: 'string',\n      default: 'Unable to sign out. Please try again.',\n      label: 'Sign-out error message',\n    },\n  },\n  guideline:\n    'Read-only identity summary data root: reads the shopper profile, provides it plus a sign-out action to descendants, and self-gates (renders nothing in the anonymous state). Must be inside SessionRoot. Wrap the parts in an IdentityEditController for the summary/form swap: an IdentitySummaryView holding these parts, an IdentityEditForm holding a FormRoot over ClientProfileFieldset. See identity-summary.md.',\n});\n\nexport const IdentitySummarySelectedSummaryDefinition = defineComponent<IdentitySummarySelectedSummaryProps>({\n  name: 'IdentitySummarySelectedSummary',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummarySelectedSummary,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Selected Summary', category: 'identity' },\n  schema: {},\n  guideline:\n    'Default composition of the identity summary: badge, name, e-mail, phone, document, in that order. It is a shortcut, not the only way — to change the order, drop a field, or interleave anything else, compose IdentitySummaryBadge / Name / Email / Phone / Document directly instead. It offers nothing to the schema: its country and badge-label props configure the default composition only, and are withheld from the schema because a page that set one here and then composed children would watch it vanish. A composed summary configures the leaf instead — the phone mask country on IdentitySummaryPhone, the labels on IdentitySummaryBadge. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryBadgeDefinition = defineComponent<IdentitySummaryBadgeProps>({\n  name: 'IdentitySummaryBadge',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryBadge,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Badge', category: 'identity' },\n  schema: {\n    identifiedLabel: { type: 'string', default: 'Guest', label: 'Identified badge label' },\n    loggedInLabel: { type: 'string', default: 'Signed in', label: 'Logged-in badge label' },\n  },\n  guideline:\n    'Session-state badge for the identity summary. Place it wherever the summary should carry it; order is composition, not a prop. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryNameDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryName',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryName,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Name', category: 'identity' },\n  schema: {},\n  guideline:\n    \"The shopper's full name, or nothing when the profile has neither first nor last name. Place it in whatever order the summary should read. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryEmailDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryEmail',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryEmail,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Email', category: 'identity' },\n  schema: {},\n  guideline: \"The shopper's e-mail, or nothing when absent. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryPhoneDefinition = defineComponent<IdentitySummaryPhoneProps>({\n  name: 'IdentitySummaryPhone',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryPhone,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Phone', category: 'identity' },\n  schema: {\n    country: { type: 'string', label: 'Phone country (US or BR)' },\n  },\n  guideline:\n    \"The shopper's phone, or nothing when absent. Masked for `country` when one is set; rendered as stored otherwise, since each mask truncates to its own country's length. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummaryDocumentDefinition = defineComponent<IdentitySummaryFieldProps>({\n  name: 'IdentitySummaryDocument',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryDocument,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Document', category: 'identity' },\n  schema: {},\n  guideline: \"The shopper's tax document, or nothing when absent. Must be a descendant of IdentitySummaryRoot.\",\n});\n\nexport const IdentitySummarySignOutButtonDefinition = defineComponent<IdentitySummarySignOutButtonProps>({\n  name: 'IdentitySummarySignOutButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummarySignOutButton,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Sign Out Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'Sign out', label: 'Button label' },\n  },\n  guideline:\n    'Dispatches $actions.session.logout (async/pessimistic): carries data-fs-identity-summary-pending while in flight and disables itself. Compose an Icon + text as children, or rely on `label`. Must be a descendant of IdentitySummaryRoot.',\n});\n\nexport const IdentitySummaryErrorDefinition = defineComponent<IdentitySummaryErrorProps>({\n  name: 'IdentitySummaryError',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryError,\n  requiresContext: 'identity-summary',\n  editor: { label: 'Identity Summary Error', category: 'content' },\n  schema: {},\n  guideline:\n    'Renders the inline sign-out error (role=\"alert\") when the logout mutation returns a user error, else nothing. Must be a descendant of IdentitySummaryRoot.',\n});\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n/**\n * Data root for the identity summary. Reads the shopper profile from its colocated fragment,\n * enforces the SessionRoot ancestor via `useSession()`, and self-gates to null in the anonymous\n * state. Owns the sign-out mutation state (pending/error) and broadcasts everything the read-only\n * parts and the sign-out button need through `IdentitySummaryContext`.\n */\nexport function IdentitySummaryRoot({\n  signOutErrorMessage = 'Unable to sign out. Please try again.',\n  className,\n  children,\n  $data: $dataProp,\n  $actions: $actionsProp,\n}: Readonly<IdentitySummaryRootProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  // Enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { state } = useSession();\n\n  const [signOutPending, setSignOutPending] = useState(false);\n  const [signOutError, setSignOutError] = useState<string | null>(null);\n\n  async function handleSignOut() {\n    setSignOutPending(true);\n    setSignOutError(null);\n    try {\n      const errors: readonly SessionUserError[] = (await $actions?.session?.logout?.()) ?? [];\n      if (errors.length > 0) setSignOutError(errors[0]?.message ?? signOutErrorMessage);\n    } catch (error) {\n      // A logout that throws rather than resolving userErrors would otherwise leave the shopper still\n      // signed in with nothing on screen, and escape as an unhandled rejection.\n      console.error('[IdentitySummary] logout failed:', error instanceof Error ? error.name : 'UnknownError');\n      setSignOutError(signOutErrorMessage);\n    } finally {\n      setSignOutPending(false);\n    }\n  }\n\n  // Self-gate: nothing to show for an anonymous or unresolved session.\n  if (state === 'anonymous') return null;\n\n  const contextValue: IdentitySummaryContextValue = {\n    state,\n    firstName: $data?.firstName ?? '',\n    lastName: $data?.lastName ?? '',\n    email: $data?.email ?? '',\n    phone: $data?.phone ?? '',\n    document: $data?.document ?? '',\n    handleSignOut,\n    signOutPending,\n    signOutError,\n  };\n\n  return (\n    <IdentitySummaryContext.Provider value={contextValue}>\n      <div\n        className={className}\n        data-fs-identity-summary=\"\"\n        {...(signOutPending ? { 'data-fs-identity-summary-pending': '' } : {})}\n      >\n        {children}\n      </div>\n    </IdentitySummaryContext.Provider>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Read-only summary\n// ---------------------------------------------------------------------------\n\n/**\n * Read-only identity display: a session-state badge plus name, email, phone, and document.\n *\n * The props below configure the default composition only — composing children replaces it wholesale,\n * and a leaf placed there takes its own props (`IdentitySummaryPhone` its `country`,\n * `IdentitySummaryBadge` its labels). They are deliberately absent from the schema, so a page cannot\n * set one here and watch it disappear behind composed children.\n */\nexport function IdentitySummarySelectedSummary({\n  country,\n  identifiedBadgeLabel = 'Guest',\n  loggedInBadgeLabel = 'Signed in',\n  className,\n  children,\n}: IdentitySummarySelectedSummaryProps) {\n  return (\n    <div className={className} data-fs-identity-summary-summary=\"\">\n      {children ?? (\n        <>\n          <IdentitySummaryBadge identifiedLabel={identifiedBadgeLabel} loggedInLabel={loggedInBadgeLabel} />\n          <IdentitySummaryName />\n          <IdentitySummaryEmail />\n          <IdentitySummaryPhone country={country} />\n          <IdentitySummaryDocument />\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Session-state badge. Renders `identifiedLabel` for a guest and `loggedInLabel` once authenticated. */\nexport function IdentitySummaryBadge({\n  identifiedLabel = 'Guest',\n  loggedInLabel = 'Signed in',\n  className,\n}: IdentitySummaryBadgeProps) {\n  const { state } = useIdentitySummaryContext();\n  return (\n    <Badge className={className} data-fs-identity-summary-badge=\"\" data-fs-identity-summary-state={state}>\n      {state === 'loggedIn' ? loggedInLabel : identifiedLabel}\n    </Badge>\n  );\n}\n\n/** The shopper's full name. Renders nothing when the profile carries neither name. */\nexport function IdentitySummaryName({ className }: IdentitySummaryFieldProps) {\n  const { firstName, lastName } = useIdentitySummaryContext();\n  const fullName = [firstName, lastName].filter(Boolean).join(' ');\n  if (!fullName) return null;\n  return (\n    <p className={className} data-fs-identity-summary-name=\"\">\n      {fullName}\n    </p>\n  );\n}\n\n/** The shopper's e-mail. Renders nothing when absent. */\nexport function IdentitySummaryEmail({ className }: IdentitySummaryFieldProps) {\n  const { email } = useIdentitySummaryContext();\n  if (!email) return null;\n  return (\n    <p className={className} data-fs-identity-summary-email=\"\">\n      {email}\n    </p>\n  );\n}\n\n/** E.164 prefixes for the countries the masks understand. */\nconst COUNTRY_PREFIX: Record<PhoneCountry, string> = { BR: '+55', US: '+1' };\n\n/**\n * The shopper's phone, masked for `country`. Renders nothing when absent, and renders the stored value\n * as-is whenever the mask does not apply to it — no country given, or a stored E.164 number belonging to\n * a different one. Each mask truncates to its own country's length, so applying the wrong one prints a\n * number that is not the shopper's, with nothing to signal that digits were dropped.\n */\nexport function IdentitySummaryPhone({ country, className }: IdentitySummaryPhoneProps) {\n  const { phone } = useIdentitySummaryContext();\n  if (!phone) return null;\n  const maskApplies = country !== undefined && (!phone.startsWith('+') || phone.startsWith(COUNTRY_PREFIX[country]));\n  return (\n    <p className={className} data-fs-identity-summary-phone=\"\">\n      {maskApplies && country ? applyPhoneMask(phone, country) : phone}\n    </p>\n  );\n}\n\n/** The shopper's tax document. Renders nothing when absent. */\nexport function IdentitySummaryDocument({ className }: IdentitySummaryFieldProps) {\n  const { document } = useIdentitySummaryContext();\n  if (!document) return null;\n  return (\n    <p className={className} data-fs-identity-summary-document=\"\">\n      {document}\n    </p>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Sign-out button + error (domain-coupled; the summary/form swap is IdentityEditController's)\n// ---------------------------------------------------------------------------\n\n/** Dispatches the sign-out mutation (async/pessimistic). */\nexport function IdentitySummarySignOutButton({\n  label = 'Sign out',\n  className,\n  children,\n}: IdentitySummarySignOutButtonProps) {\n  const { handleSignOut, signOutPending } = useIdentitySummaryContext();\n  return (\n    <button\n      type=\"button\"\n      data-fs-identity-summary-sign-out=\"\"\n      className={className}\n      disabled={signOutPending}\n      {...(signOutPending ? { 'data-fs-identity-summary-pending': '' } : {})}\n      onClick={handleSignOut}\n    >\n      {children ?? label}\n    </button>\n  );\n}\n\n/** Renders the inline sign-out user error, or nothing when there is none. */\nexport function IdentitySummaryError({ className }: IdentitySummaryErrorProps) {\n  const { signOutError } = useIdentitySummaryContext();\n  if (!signOutError) return null;\n  return (\n    <div role=\"alert\" className={className} data-fs-identity-summary-error=\"\">\n      {signOutError}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentitySummary = {\n  Badge: IdentitySummaryBadge,\n  BadgeDefinition: IdentitySummaryBadgeDefinition,\n  Name: IdentitySummaryName,\n  NameDefinition: IdentitySummaryNameDefinition,\n  Email: IdentitySummaryEmail,\n  EmailDefinition: IdentitySummaryEmailDefinition,\n  Phone: IdentitySummaryPhone,\n  PhoneDefinition: IdentitySummaryPhoneDefinition,\n  Document: IdentitySummaryDocument,\n  DocumentDefinition: IdentitySummaryDocumentDefinition,\n  Root: IdentitySummaryRoot,\n  RootDefinition: IdentitySummaryRootDefinition,\n  SelectedSummary: IdentitySummarySelectedSummary,\n  SelectedSummaryDefinition: IdentitySummarySelectedSummaryDefinition,\n  SignOutButton: IdentitySummarySignOutButton,\n  SignOutButtonDefinition: IdentitySummarySignOutButtonDefinition,\n  Error: IdentitySummaryError,\n  ErrorDefinition: IdentitySummaryErrorDefinition,\n};\n"],"mappings":"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"}

package/dist/matter/installments/installments-select.d.ts

@@ -0,0 +1,42 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { InstallmentOption } from "./installments.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/installments/installments-select.d.ts
+/**
+ * `$data` forwarded by the reactive runtime — the unwrapped value of the `payment` top-level field on
+ * `InstallmentsSelectData on Query` (arity-1 fragment, ADR-0015), not a `{ payment: … }` wrapper.
+ * Every field optional, mirroring `InstallmentsData`: `$data` arrives partial while the entity
+ * resolves.
+ */
+export type InstallmentsSelectData = {
+  installmentOptions?: readonly InstallmentOption[];
+  selectedInstallment?: {
+    count: number;
+  } | null;
+} | null;
+export type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /** Placeholders `{count}` / `{value}`, matching `Installments`'/`PaymentSummary`'s convention. */
+  installmentTemplate?: string;
+  /** Appended when a tier's `interestRate` is `0`. */
+  interestFreeLabel?: string;
+  /** Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`. */
+  interestTemplate?: string;
+  /**
+   * Accessible name for the control, rendered as `Select.Label` (Decision 13, always renders).
+   * Resolved through `resolveAuthoredCopy` (T38): an authored empty or whitespace-only string falls
+   * back to the default rather than rendering a nameless combobox.
+   */
+  label?: string;
+  /** Shown on the closed control when the bound count matches no rendered tier (Decision 6/FR-8). */
+  placeholder?: string;
+  /** `InstallmentsSelectData` slice forwarded by the reactive runtime. */
+  $data?: InstallmentsSelectData;
+  /** Compiler-injected action surface; carries `payment.setInstallments`. */
+  $actions?: ComponentActions;
+};
+export declare const InstallmentsSelectDefinition: ComponentDefinition<InstallmentsSelectProps>;
+export declare function InstallmentsSelect({ installmentTemplate, interestFreeLabel, interestTemplate, label, placeholder, $data, $actions: $actionsProp, className, ...props }: InstallmentsSelectProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=installments-select.d.ts.map

package/dist/matter/installments/installments-select.js

@@ -0,0 +1,167 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { Select } from "../../particles/select/select.js";
+import { useInstallmentsSelection } from "./use-installments-selection.js";
+import { installmentLabel } from "./installments.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const InstallmentsSelectDefinition = defineComponent({
+	name: "InstallmentsSelect",
+	importPath: "@vtex/faststore/components",
+	component: InstallmentsSelect,
+	fragment: `
+  fragment InstallmentsSelectData on Query {
+    payment {
+      __typename
+      id
+      installmentOptions {
+        __typename
+        methodId
+        bin
+        installments {
+          __typename
+          count
+          value {
+            amount
+            currencyCode
+          }
+          interestRate
+        }
+      }
+      selectedInstallment {
+        __typename
+        count
+      }
+    }
+  }
+`,
+	fetchStrategy: "reactive",
+	requiresContext: "payment",
+	actions: { payment: ["setInstallments"] },
+	docPath: "./installments.md",
+	editor: {
+		label: "Installments Select",
+		category: "commerce"
+	},
+	schema: {
+		installmentTemplate: {
+			type: "string",
+			default: "{count}x of {value}",
+			label: "Installment template"
+		},
+		interestFreeLabel: {
+			type: "string",
+			default: "interest-free",
+			label: "Interest-free label"
+		},
+		interestTemplate: {
+			type: "string",
+			default: "{rate}% interest",
+			label: "Interest template"
+		},
+		label: {
+			type: "string",
+			default: "Installments",
+			label: "Accessible label"
+		},
+		placeholder: {
+			type: "string",
+			default: "Select an installment plan",
+			label: "Placeholder"
+		}
+	},
+	guideline: "Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md."
+});
+/**
+* Resolves `Select.Root`'s `onValueChange` value into a dispatch, or a no-op. Exported so a test can
+* invoke it directly (Decision 7): `SelectRootProps.onValueChange` is `(value: string | null) => void`,
+* unlike `RadioGroupProps`', and `Number(null)` is `0` — `paymentInstallmentSelect` would reject count
+* `0` as `INVALID_INSTALLMENT_COUNT`. Base UI's `Select.Root` never actually calls `onValueChange` with
+* `null` through a user-reachable path once every `Select.Item` carries a non-null `value` (mirrors
+* `billing-address.tsx`'s own `handleCountryChange` reasoning), so this guard has no interaction that
+* could exercise it end-to-end — the direct-invocation test is the only way to cover it.
+*/
+function handleInstallmentSelectValueChange(value, selectInstallment) {
+	if (value === null) return;
+	selectInstallment(Number(value));
+}
+function InstallmentsSelect({ installmentTemplate = "{count}x of {value}", interestFreeLabel = "interest-free", interestTemplate = "{rate}% interest", label, placeholder = "Select an installment plan", $data, $actions: $actionsProp, className, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const { locale } = useStorefrontContext();
+	const { tiers, selectedCount, state, isPending, selectionError, selectInstallment, placing, cardPaymentCollapsed } = useInstallmentsSelection({
+		$data,
+		$actions
+	});
+	if (cardPaymentCollapsed) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		inert: placing,
+		"aria-disabled": placing || void 0,
+		"data-fs-installments": "",
+		"data-fs-installments-control": "select",
+		"data-fs-installments-state": state,
+		"aria-busy": isPending || void 0,
+		...placing ? { "data-fs-installments-placing": "" } : {},
+		children: [selectionError ? /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			"data-fs-installments-error": "",
+			children: selectionError
+		}) : null, tiers.length > 0 ? /* @__PURE__ */ jsxs(Select.Root, {
+			value: String(selectedCount),
+			onValueChange: (value) => handleInstallmentSelectValueChange(value, selectInstallment),
+			disabled: isPending,
+			children: [
+				/* @__PURE__ */ jsx(Select.Label, {
+					"data-fs-installments-label": "",
+					children: resolveAuthoredCopy(label, "Installments")
+				}),
+				/* @__PURE__ */ jsxs(Select.Trigger, {
+					"data-fs-installments-trigger": "",
+					disabled: isPending,
+					children: [/* @__PURE__ */ jsx(Select.Value, {
+						"data-fs-installments-value": "",
+						children: (value) => {
+							const tier = tiers.find((candidate) => String(candidate.count) === value);
+							return tier ? installmentLabel({
+								tier,
+								locale,
+								installmentTemplate,
+								interestFreeLabel,
+								interestTemplate
+							}) : placeholder;
+						}
+					}), /* @__PURE__ */ jsx(Select.Icon, {
+						"data-fs-installments-icon": "",
+						children: "▾"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: tiers.map((tier) => {
+					const text = installmentLabel({
+						tier,
+						locale,
+						installmentTemplate,
+						interestFreeLabel,
+						interestTemplate
+					});
+					return /* @__PURE__ */ jsx(Select.Item, {
+						value: String(tier.count),
+						label: text,
+						"data-fs-installments-option": "",
+						children: /* @__PURE__ */ jsx("span", {
+							"data-fs-installments-option-label": "",
+							children: text
+						})
+					}, tier.count);
+				}) }) }) }) })
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { InstallmentsSelect, InstallmentsSelectDefinition, handleInstallmentSelectValueChange };
+
+//# sourceMappingURL=installments-select.js.map

package/dist/matter/installments/installments-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"installments-select.js","names":[],"sources":["../../../src/matter/installments/installments-select.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Select } from '../../particles/select/select.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { type InstallmentOption, installmentLabel } from './installments.js';\nimport { useInstallmentsSelection } from './use-installments-selection.js';\n\n/**\n * `InstallmentsSelect` matter (T90, specs/render-installments-as-a-radio-group.md;\n * docs/features/credit-card/rfc.md § D4, \"a radio/select\"). The collapsed sibling of `Installments`:\n * the same installment tiers, the same server-bound selection, and the same write path, rendered as a\n * single closed Base UI Select control instead of a stacked `RadioGroup` — for a narrow payment\n * column, a drawer, or a mobile checkout where twelve stacked rows do not fit (Decision 1: a second\n * registered component, never a rendering prop on `Installments`).\n *\n * Reads and dispatches through `useInstallmentsSelection()` — the same engine `Installments` uses —\n * so matching, tier resolution, state derivation, the BIN-confirmation pending gate, and the dispatch\n * itself cannot drift between the two surfaces (Decision 3). Formats each option with the same\n * `installmentLabel` function the radio surface uses (FR-5), driven by the same four authorable copy\n * props with the same shipped pt-BR defaults, so a store moving between surfaces carries its copy\n * across unchanged.\n *\n * Declares its own `fragment InstallmentsSelectData on Query`, selection-set-identical to\n * `InstallmentsData` under a distinct name (Decision 4) — two registered components must not share one\n * fragment *name*, which would collide once both sit on a page.\n *\n * The popup is composed inside `Select.Portal`, teleported to `<body>` (Decision 5, reversing this\n * spec's own first draft): both shipped `Select` consumers (`billing-address.tsx`, `shipping-address.tsx`)\n * do the same, and the payment controller composes this leaf inside overlay popups where the portal's\n * clipping protection matters. The accepted cost — a store's descendant-selector styling and compound\n * swatches cannot reach the popup's internals — is recorded there, not solved here.\n *\n * The closed control's text is resolved locally from this component's own `tiers` (Decision 6), never\n * from Base UI's automatic item-label lookup, so it is correct before the popup has ever been opened;\n * a bound count matching no rendered tier shows the authorable `placeholder` instead of a fabricated\n * label (FR-8). `Select.Label` always renders (Decision 13), giving the control a programmatic\n * accessible name (FR-14) with no mode prop — the FPM forbids a `showX` switch inside one component. No\n * `modal` prop is authored (Decision 14): the particle's own default (`true`) is inherited unchanged,\n * matching both shipped consumers.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — raw template literal, identical selection set to `InstallmentsData`\n// (`installments.tsx`) apart from the name (Decision 4; INV-8 asserts the two stay identical).\n// `total` stays deselected — neither surface renders or computes against it. `payment { id }` is\n// mandatory: it is what lets the action's echoed `payment` re-normalize the entity these fragments\n// read.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment InstallmentsSelectData on Query {\n    payment {\n      __typename\n      id\n      installmentOptions {\n        __typename\n        methodId\n        bin\n        installments {\n          __typename\n          count\n          value {\n            amount\n            currencyCode\n          }\n          interestRate\n        }\n      }\n      selectedInstallment {\n        __typename\n        count\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * `$data` forwarded by the reactive runtime — the unwrapped value of the `payment` top-level field on\n * `InstallmentsSelectData on Query` (arity-1 fragment, ADR-0015), not a `{ payment: … }` wrapper.\n * Every field optional, mirroring `InstallmentsData`: `$data` arrives partial while the entity\n * resolves.\n */\nexport type InstallmentsSelectData = {\n  installmentOptions?: readonly InstallmentOption[];\n  selectedInstallment?: { count: number } | null;\n} | null;\n\nexport type InstallmentsSelectProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** Placeholders `{count}` / `{value}`, matching `Installments`'/`PaymentSummary`'s convention. */\n  installmentTemplate?: string;\n  /** Appended when a tier's `interestRate` is `0`. */\n  interestFreeLabel?: string;\n  /** Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`. */\n  interestTemplate?: string;\n  /**\n   * Accessible name for the control, rendered as `Select.Label` (Decision 13, always renders).\n   * Resolved through `resolveAuthoredCopy` (T38): an authored empty or whitespace-only string falls\n   * back to the default rather than rendering a nameless combobox.\n   */\n  label?: string;\n  /** Shown on the closed control when the bound count matches no rendered tier (Decision 6/FR-8). */\n  placeholder?: string;\n  /** `InstallmentsSelectData` slice forwarded by the reactive runtime. */\n  $data?: InstallmentsSelectData;\n  /** Compiler-injected action surface; carries `payment.setInstallments`. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const InstallmentsSelectDefinition = defineComponent<InstallmentsSelectProps>({\n  name: 'InstallmentsSelect',\n  importPath: '@vtex/faststore/components',\n  component: InstallmentsSelect,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  actions: { payment: ['setInstallments'] },\n  // Required: the catalog builder resolves a doc by the `<basename>.md` convention\n  // (`installments-select.md`, which does not exist) and silently drops the key without an explicit\n  // docPath — mirrors `PaymentSectionController`'s identical need (`payment-controller.tsx:113`).\n  docPath: './installments.md',\n  editor: { label: 'Installments Select', category: 'commerce' },\n  schema: {\n    installmentTemplate: { type: 'string', default: '{count}x of {value}', label: 'Installment template' },\n    interestFreeLabel: { type: 'string', default: 'interest-free', label: 'Interest-free label' },\n    interestTemplate: { type: 'string', default: '{rate}% interest', label: 'Interest template' },\n    label: { type: 'string', default: 'Installments', label: 'Accessible label' },\n    placeholder: { type: 'string', default: 'Select an installment plan', label: 'Placeholder' },\n  },\n  guideline:\n    \"Collapsed installment picker for checkout: a single closed control (Base UI Select) showing the persisted selection's label, expanding into one option per tier the matched option carries — count, per-installment value, and interest, formatted identically to Installments (the API guarantees a 1x tier is present in every option). Reads the same Query.payment data and dispatches the same $actions.payment.setInstallments as Installments — the two are alternative renderings of one engine, so pick whichever fits the layout: this one for a narrow column, a drawer, or a mobile checkout; Installments when stacked rows fit. Must be inside a PaymentSectionRoot or PaymentSectionController — place it as a sibling of CardEntry and SavedCards, never nested inside either. Renders its own options from real data — no children. The popup is portalled to <body>: the label, trigger, value, icon, and inline error stay reachable from a store's style array, but the option list does not — see installments.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * Resolves `Select.Root`'s `onValueChange` value into a dispatch, or a no-op. Exported so a test can\n * invoke it directly (Decision 7): `SelectRootProps.onValueChange` is `(value: string | null) => void`,\n * unlike `RadioGroupProps`', and `Number(null)` is `0` — `paymentInstallmentSelect` would reject count\n * `0` as `INVALID_INSTALLMENT_COUNT`. Base UI's `Select.Root` never actually calls `onValueChange` with\n * `null` through a user-reachable path once every `Select.Item` carries a non-null `value` (mirrors\n * `billing-address.tsx`'s own `handleCountryChange` reasoning), so this guard has no interaction that\n * could exercise it end-to-end — the direct-invocation test is the only way to cover it.\n */\nexport function handleInstallmentSelectValueChange(\n  value: string | null,\n  selectInstallment: (count: number) => void,\n): void {\n  if (value === null) return;\n  selectInstallment(Number(value));\n}\n\nexport function InstallmentsSelect({\n  installmentTemplate = '{count}x of {value}',\n  interestFreeLabel = 'interest-free',\n  interestTemplate = '{rate}% interest',\n  label,\n  placeholder = 'Select an installment plan',\n  $data,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: InstallmentsSelectProps) {\n  const $actions = useActionsOverride($actionsProp);\n  // T192: the formatting locale is the storefront's, never an authored prop (RFC localization § 10).\n  const { locale } = useStorefrontContext();\n  const { tiers, selectedCount, state, isPending, selectionError, selectInstallment, placing, cardPaymentCollapsed } =\n    useInstallmentsSelection({\n      $data,\n      $actions,\n    });\n\n  // T191 (FR-7): nothing renders while the card payment is collapsed. Returned after the last hook, so\n  // this instance stays mounted and keeps its local state.\n  if (cardPaymentCollapsed) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-installments=\"\"\n      data-fs-installments-control=\"select\"\n      data-fs-installments-state={state}\n      aria-busy={isPending || undefined}\n      {...(placing ? { 'data-fs-installments-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-installments-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {tiers.length > 0 ? (\n        <Select.Root\n          value={String(selectedCount)}\n          onValueChange={(value) => handleInstallmentSelectValueChange(value, selectInstallment)}\n          disabled={isPending}\n        >\n          <Select.Label data-fs-installments-label=\"\">{resolveAuthoredCopy(label, 'Installments')}</Select.Label>\n          <Select.Trigger data-fs-installments-trigger=\"\" disabled={isPending}>\n            <Select.Value data-fs-installments-value=\"\">\n              {(value) => {\n                const tier = tiers.find((candidate) => String(candidate.count) === value);\n                return tier\n                  ? installmentLabel({ tier, locale, installmentTemplate, interestFreeLabel, interestTemplate })\n                  : placeholder;\n              }}\n            </Select.Value>\n            <Select.Icon data-fs-installments-icon=\"\">▾</Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Positioner>\n              <Select.Popup>\n                <Select.List>\n                  {tiers.map((tier) => {\n                    const text = installmentLabel({\n                      tier,\n                      locale,\n                      installmentTemplate,\n                      interestFreeLabel,\n                      interestTemplate,\n                    });\n                    return (\n                      <Select.Item\n                        key={tier.count}\n                        value={String(tier.count)}\n                        label={text}\n                        data-fs-installments-option=\"\"\n                      >\n                        <span data-fs-installments-option-label=\"\">{text}</span>\n                      </Select.Item>\n                    );\n                  })}\n                </Select.List>\n              </Select.Popup>\n            </Select.Positioner>\n          </Select.Portal>\n        </Select.Root>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/installments/installments.d.ts

@@ -0,0 +1,58 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { findInstallmentOption, resolveInstallmentTiers } from "./use-installments-selection.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/installments/installments.d.ts
+export type InstallmentMoney = Readonly<{
+  amount: number;
+  currencyCode: string;
+}>;
+export type InstallmentTier = Readonly<{
+  count: number;
+  value: InstallmentMoney;
+  interestRate: number;
+}>;
+export type InstallmentOption = Readonly<{
+  methodId: string;
+  bin: string | null;
+  installments: readonly InstallmentTier[];
+}>;
+/**
+ * `$data` forwarded by the reactive runtime — the unwrapped value of the `payment` top-level field
+ * on `InstallmentsData on Query` (arity-1 fragment, ADR-0015), not a `{ payment: … }` wrapper.
+ * Every field optional, mirroring `PaymentSummaryData` / `PaymentSectionData`: `$data` arrives
+ * partial while the entity resolves.
+ */
+export type InstallmentsData = {
+  installmentOptions?: readonly InstallmentOption[];
+  selectedInstallment?: {
+    count: number;
+  } | null;
+} | null;
+export type InstallmentsProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /** Placeholders `{count}` / `{value}`, matching `PaymentSummary`'s / `PricingInstallment`'s convention. */
+  installmentTemplate?: string;
+  /** Appended when a tier's `interestRate` is `0`. */
+  interestFreeLabel?: string;
+  /**
+   * Placeholder `{rate}`; appended instead of `interestFreeLabel` when a tier's `interestRate` is above `0`.
+   * `{rate}` is the order form's `interestRate` (hundredths of a percent) divided by 100: `100` renders `1`.
+   */
+  interestTemplate?: string;
+  /**
+   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).
+   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to
+   * the default rather than rendering a nameless group.
+   */
+  legend?: string;
+  /** `InstallmentsData` slice forwarded by the reactive runtime. */
+  $data?: InstallmentsData;
+  /** Compiler-injected action surface; carries `payment.setInstallments`. */
+  $actions?: ComponentActions;
+};
+export declare const InstallmentsDefinition: ComponentDefinition<InstallmentsProps>;
+export declare function Installments({ installmentTemplate, interestFreeLabel, interestTemplate, legend, $data, $actions: $actionsProp, className, ...props }: InstallmentsProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { findInstallmentOption, resolveInstallmentTiers };
+//# sourceMappingURL=installments.d.ts.map