@vtex/faststore 0.0.2 → 0.0.4

package/dist/matter/buy-button/buy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"buy-button.js","names":[],"sources":["../../../src/matter/buy-button/buy-button.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, Suspense, useContext, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { HotDataProvider } from '../../sdk/data/hot-data-provider.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantBuyButtonDataFragment } from '../../sdk/generated/graphql.js';\nimport { resolveDefaultSeller } from '../../sdk/seller.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\nimport { useProductQuantity } from '../product-quantity/product-quantity.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment BuyButtonData on Query {\n    productBySlug(slug: $slug) {\n      id\n      title\n      slug\n      images(first: 1) {\n        edges {\n          node {\n            url\n            altText\n          }\n        }\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sku\n            availableForSale\n            sellers {\n              id\n              isDefault\n              offer {\n                price { amount currencyCode }\n                listPrice { amount currencyCode }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// Variant slice carrying the selected variant's availability plus its default seller, authored via\n// graphql() so HotDataProvider gets a TypedDocumentNode. Declared so codegen scans the source and\n// emits VariantBuyButtonDataFragment; the fragment is spread into variantQuery at the GraphQL layer,\n// so the variable is unused at runtime. `offer` is selected only as the same purchasability gate the\n// product transform applies — the buy button never displays price.\nconst _variantFragment = graphql(`\n  fragment VariantBuyButtonData on Variant {\n    __typename\n    id\n    availableForSale\n    sellers {\n      id\n      isDefault\n      offer {\n        price { amount currencyCode }\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantBuyButtonQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantBuyButtonData\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = {\n  amount: number;\n  currencyCode: string;\n};\n\ntype RawBuyButtonData = {\n  id: string;\n  title: string;\n  slug: string;\n  images: {\n    edges: Array<{\n      node: {\n        url: string;\n        altText: string | null;\n      };\n    }>;\n  };\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sku: string;\n        availableForSale: boolean;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n          offer: {\n            price: MoneyValue;\n            listPrice: MoneyValue;\n          } | null;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonLabels = defineContentType({\n  id: 'buy-button-labels',\n  title: 'Buy Button Labels',\n  description: 'Editorial labels for the add-to-cart button.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    required: ['availableLabel', 'unavailableLabel'],\n    properties: {\n      availableLabel: { type: 'string', minLength: 1, title: 'Available label', default: 'Comprar' },\n      unavailableLabel: { type: 'string', minLength: 1, title: 'Unavailable label', default: 'Indisponivel' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype BuyButtonContextData = {\n  available: boolean;\n  /** Identifiers passed to useCart().addItem when the button is clicked. */\n  variantId: string;\n  seller: string;\n};\n\ntype BuyButtonContextValue = BuyButtonContextData | null;\n\nconst BUYBUTTON_CONTEXT_UNSET = Symbol('BuyButtonContextUnset');\n\nexport type BuyButtonRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: RawBuyButtonData | null;\n  /** Page-supplied viewed SKU; adds this variant before the shopper interacts. A published swatch\n   *  selection wins over it once set. */\n  selectedVariantId?: string;\n};\n\nexport type BuyButtonButtonProps = ComponentPropsWithRef<'button'> & {\n  availableLabel?: string;\n  unavailableLabel?: string;\n  /** Merchant-authored labels, sliced from the page/layout content entry; win over the label props\n   *  when present. Absent in a non-CMS store — the label props (and their defaults) are the fallback. */\n  $content?: ContentValue<typeof BuyButtonLabels>;\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst BuyButtonContext = createContext<BuyButtonContextValue | typeof BUYBUTTON_CONTEXT_UNSET>(BUYBUTTON_CONTEXT_UNSET);\n\nfunction useBuyButton(): BuyButtonContextValue {\n  const ctx = useContext(BuyButtonContext);\n  if (ctx === BUYBUTTON_CONTEXT_UNSET) {\n    throw new Error('BuyButton components must be used inside BuyButtonRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\n// Builds the add-to-cart context from a variant: the SKU (its Node id), its default seller, and its\n// availability. A variant whose resolved seller has no purchasable offer yields null (the button does\n// not render). Shared by the product-level and selected-variant transforms so the default-seller +\n// offer gate lives in one place.\nfunction buyButtonContextFromVariant(variant: {\n  id: string;\n  availableForSale: boolean;\n  sellers: readonly { id: string; isDefault: boolean; offer: unknown }[];\n}): BuyButtonContextData | null {\n  const seller = resolveDefaultSeller(variant.sellers);\n  if (!seller?.offer) return null;\n\n  return {\n    available: variant.availableForSale,\n    variantId: variant.id,\n    seller: seller.id,\n  };\n}\n\nfunction transformBuyButtonData(data: RawBuyButtonData): BuyButtonContextData | null {\n  const edge = data.variants.edges[0];\n  if (!edge) return null;\n\n  return buyButtonContextFromVariant(edge.node);\n}\n\nexport function transformVariantBuyButtonData(variant: VariantBuyButtonDataFragment): BuyButtonContextData | null {\n  return buyButtonContextFromVariant(variant);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonRootDefinition = defineComponent<BuyButtonRootProps>({\n  name: 'BuyButtonRoot',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonRoot,\n  fragment,\n  skeleton: BuyButtonSkeleton,\n  editor: { label: 'Buy Button', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'Data provider for the buy button; place it on PDPs with BuyButtonButton as a child. Adds the variant the shopper picks (it reads the published VariantSelector selection), sending that SKU and its seller to the cart; the selectedVariantId prop is an optional pre-selection fallback, and it falls back to the product first variant on a variant fetch error. Cart writes flow through $actions.cart, so no CartRoot ancestor is required. See buy-button.md.',\n});\n\nexport const BuyButtonButtonDefinition = defineComponent({\n  name: 'BuyButtonButton',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonButton,\n  content: BuyButtonLabels,\n  editor: { label: 'Buy Button Action', category: 'commerce' },\n  schema: {\n    availableLabel: { type: 'string', default: 'Comprar', label: 'Available label' },\n    unavailableLabel: { type: 'string', default: 'Indisponivel', label: 'Unavailable label' },\n  },\n  actions: { cart: ['addItem'] },\n  guideline:\n    'The add-to-cart button; must be a descendant of BuyButtonRoot. Cart writes flow through $actions.cart, so no CartRoot ancestor is required.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonRoot({ $data, selectedVariantId, children, ...props }: BuyButtonRootProps) {\n  const productSlice = $data ?? null;\n\n  // Read the shopper's published variant selection so the button adds the variant the shopper picked\n  // — the selected SKU, its seller, and its availability — without a page navigation, scoped to this\n  // product. The explicit selectedVariantId prop is the pre-selection fallback; the live published\n  // selection wins once set.\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null);\n  const activeVariantId = publishedVariantId ?? selectedVariantId;\n\n  if (activeVariantId) {\n    return (\n      <Suspense fallback={null}>\n        <HotDataProvider\n          query={variantQuery}\n          variables={{ id: activeVariantId }}\n          field=\"node\"\n          fallbackData={productSlice}\n        >\n          <BuyButtonProvider fallbackProductSlice={productSlice} {...props}>\n            {children}\n          </BuyButtonProvider>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const contextValue = productSlice ? transformBuyButtonData(productSlice) : null;\n\n  return (\n    <BuyButtonView contextValue={contextValue} {...props}>\n      {children}\n    </BuyButtonView>\n  );\n}\n\ntype BuyButtonProviderProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  fallbackProductSlice: RawBuyButtonData | null;\n};\n\n// Reads the override written by the nested HotDataProvider: a Variant node when the variant fetch\n// succeeds, or the product slice (fallbackData) on error/null. Dispatch on __typename so the whole\n// add-to-cart context — availability, the SKU (variantId), and the seller — resolves from the\n// selected variant; always source the product path from the explicit fallback prop so a mis-passed\n// Product node id can never crash the variant transform.\nfunction BuyButtonProvider({ fallbackProductSlice, ...viewProps }: BuyButtonProviderProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let contextValue: BuyButtonContextValue = null;\n  if (overrideTypename === 'Variant') {\n    contextValue = transformVariantBuyButtonData(override as VariantBuyButtonDataFragment);\n  } else if (fallbackProductSlice) {\n    contextValue = transformBuyButtonData(fallbackProductSlice);\n  }\n\n  return <BuyButtonView contextValue={contextValue} {...viewProps} />;\n}\n\ntype BuyButtonViewProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  contextValue: BuyButtonContextValue;\n};\n\nfunction BuyButtonView({ contextValue, className, children, ...props }: BuyButtonViewProps) {\n  return (\n    <BuyButtonContext value={contextValue}>\n      <div {...props} className={className} data-fs-buy-button=\"\">\n        {children}\n      </div>\n    </BuyButtonContext>\n  );\n}\n\nexport function BuyButtonButton({\n  availableLabel = 'Comprar',\n  unavailableLabel = 'Indisponivel',\n  className,\n  children,\n  onClick,\n  $content,\n  $actions,\n  ...props\n}: BuyButtonButtonProps) {\n  const ctx = useBuyButton();\n  // `addItem` is async with no optimistic response, so the button owns its pending state locally\n  // (the action surface no longer exposes a shared `addItemPending`).\n  const [addItemPending, setAddItemPending] = useState(false);\n  const { quantity } = useProductQuantity();\n\n  if (!ctx) return null;\n\n  const { available, variantId, seller } = ctx;\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const addItem = $actions?.cart?.addItem;\n    if (addItem) {\n      setAddItemPending(true);\n      void addItem({ variantId, seller, quantity }).finally(() => setAddItemPending(false));\n    }\n    onClick?.(e);\n  }\n\n  const isUnavailable = !available;\n  const defaultText = isUnavailable\n    ? ($content?.unavailableLabel ?? unavailableLabel)\n    : ($content?.availableLabel ?? availableLabel);\n\n  return (\n    <Button\n      {...props}\n      className={className}\n      onClick={handleClick}\n      disabled={isUnavailable || addItemPending}\n      aria-busy={addItemPending || undefined}\n      data-fs-buy-button-button=\"\"\n      {...(isUnavailable ? { 'data-fs-buy-button-unavailable': '' } : {})}\n      {...(addItemPending ? { 'data-fs-buy-button-pending': '' } : {})}\n    >\n      {children ?? defaultText}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-buy-button-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-buy-button-skeleton-line=\"\" />\n    </div>\n  );\n}\n\nBuyButtonRoot.Skeleton = BuyButtonSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const BuyButton = {\n  Root: BuyButtonRoot,\n  Button: BuyButtonButton,\n  Skeleton: BuyButtonSkeleton,\n};\n"],"mappings":"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"}
+{"version":3,"file":"buy-button.js","names":[],"sources":["../../../src/matter/buy-button/buy-button.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, Suspense, useContext, useState } from 'react';\nimport { Button } from '../../particles/button/button.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 { HotDataProvider } from '../../sdk/data/hot-data-provider.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantBuyButtonDataFragment } from '../../sdk/generated/graphql.js';\nimport { resolveDefaultSeller } from '../../sdk/seller.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\nimport { useProductQuantity } from '../product-quantity/product-quantity.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment BuyButtonData on Query {\n    productBySlug(slug: $slug) {\n      id\n      title\n      slug\n      images(first: 1) {\n        edges {\n          node {\n            url\n            altText\n          }\n        }\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sku\n            availableForSale\n            sellers {\n              id\n              isDefault\n              offer {\n                price { amount currencyCode }\n                listPrice { amount currencyCode }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// Variant slice carrying the selected variant's availability plus its default seller, authored via\n// graphql() so HotDataProvider gets a TypedDocumentNode. Declared so codegen scans the source and\n// emits VariantBuyButtonDataFragment; the fragment is spread into variantQuery at the GraphQL layer,\n// so the variable is unused at runtime. `offer` is selected only as the same purchasability gate the\n// product transform applies — the buy button never displays price.\nconst _variantFragment = graphql(`\n  fragment VariantBuyButtonData on Variant {\n    __typename\n    id\n    availableForSale\n    sellers {\n      id\n      isDefault\n      offer {\n        price { amount currencyCode }\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantBuyButtonQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantBuyButtonData\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = {\n  amount: number;\n  currencyCode: string;\n};\n\ntype RawBuyButtonData = {\n  id: string;\n  title: string;\n  slug: string;\n  images: {\n    edges: Array<{\n      node: {\n        url: string;\n        altText: string | null;\n      };\n    }>;\n  };\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sku: string;\n        availableForSale: boolean;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n          offer: {\n            price: MoneyValue;\n            listPrice: MoneyValue;\n          } | null;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonLabels = defineContentType({\n  id: 'buy-button-labels',\n  title: 'Buy Button Labels',\n  description: 'Editorial labels for the add-to-cart button.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    required: ['availableLabel', 'unavailableLabel'],\n    properties: {\n      availableLabel: { type: 'string', minLength: 1, title: 'Available label', default: 'Comprar' },\n      unavailableLabel: { type: 'string', minLength: 1, title: 'Unavailable label', default: 'Indisponivel' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype BuyButtonContextData = {\n  available: boolean;\n  /** Identifiers passed to useCart().addItem when the button is clicked. */\n  variantId: string;\n  seller: string;\n};\n\ntype BuyButtonContextValue = BuyButtonContextData | null;\n\nconst BUYBUTTON_CONTEXT_UNSET = Symbol('BuyButtonContextUnset');\n\nexport type BuyButtonRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: RawBuyButtonData | null;\n  /** Page-supplied viewed SKU; adds this variant before the shopper interacts. A published swatch\n   *  selection wins over it once set. */\n  selectedVariantId?: string;\n};\n\nexport type BuyButtonButtonProps = ComponentPropsWithRef<'button'> & {\n  availableLabel?: string;\n  unavailableLabel?: string;\n  /** Merchant-authored labels, sliced from the page/layout content entry; win over the label props\n   *  when present. Absent in a non-CMS store — the label props (and their defaults) are the fallback. */\n  $content?: ContentValue<typeof BuyButtonLabels>;\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst BuyButtonContext = createContext<BuyButtonContextValue | typeof BUYBUTTON_CONTEXT_UNSET>(BUYBUTTON_CONTEXT_UNSET);\n\nfunction useBuyButton(): BuyButtonContextValue {\n  const ctx = useContext(BuyButtonContext);\n  if (ctx === BUYBUTTON_CONTEXT_UNSET) {\n    throw new Error('BuyButton components must be used inside BuyButtonRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\n// Builds the add-to-cart context from a variant: the SKU (its Node id), its default seller, and its\n// availability. A variant whose resolved seller has no purchasable offer yields null (the button does\n// not render). Shared by the product-level and selected-variant transforms so the default-seller +\n// offer gate lives in one place.\nfunction buyButtonContextFromVariant(variant: {\n  id: string;\n  availableForSale: boolean;\n  sellers: readonly { id: string; isDefault: boolean; offer: unknown }[];\n}): BuyButtonContextData | null {\n  const seller = resolveDefaultSeller(variant.sellers);\n  if (!seller?.offer) return null;\n\n  return {\n    available: variant.availableForSale,\n    variantId: variant.id,\n    seller: seller.id,\n  };\n}\n\nfunction transformBuyButtonData(data: RawBuyButtonData): BuyButtonContextData | null {\n  const edge = data.variants.edges[0];\n  if (!edge) return null;\n\n  return buyButtonContextFromVariant(edge.node);\n}\n\nexport function transformVariantBuyButtonData(variant: VariantBuyButtonDataFragment): BuyButtonContextData | null {\n  return buyButtonContextFromVariant(variant);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonRootDefinition = defineComponent<BuyButtonRootProps>({\n  name: 'BuyButtonRoot',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonRoot,\n  fragment,\n  skeleton: BuyButtonSkeleton,\n  editor: { label: 'Buy Button', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'Data provider for the buy button; place it on PDPs with BuyButtonButton as a child. Adds the variant the shopper picks (it reads the published VariantSelector selection), sending that SKU and its seller to the cart; the selectedVariantId prop is an optional pre-selection fallback, and it falls back to the product first variant on a variant fetch error. Cart writes flow through $actions.cart, so no CartRoot ancestor is required. See buy-button.md.',\n});\n\nexport const BuyButtonButtonDefinition = defineComponent({\n  name: 'BuyButtonButton',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonButton,\n  content: BuyButtonLabels,\n  editor: { label: 'Buy Button Action', category: 'commerce' },\n  schema: {\n    availableLabel: { type: 'string', default: 'Comprar', label: 'Available label' },\n    unavailableLabel: { type: 'string', default: 'Indisponivel', label: 'Unavailable label' },\n  },\n  actions: { cart: ['addItem'] },\n  guideline:\n    'The add-to-cart button; must be a descendant of BuyButtonRoot. Cart writes flow through $actions.cart, so no CartRoot ancestor is required.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonRoot({ $data, selectedVariantId, children, ...props }: BuyButtonRootProps) {\n  const productSlice = $data ?? null;\n\n  // Read the shopper's published variant selection so the button adds the variant the shopper picked\n  // — the selected SKU, its seller, and its availability — without a page navigation, scoped to this\n  // product. The explicit selectedVariantId prop is the pre-selection fallback; the live published\n  // selection wins once set.\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null);\n  const activeVariantId = publishedVariantId ?? selectedVariantId;\n\n  if (activeVariantId) {\n    return (\n      <Suspense fallback={null}>\n        <HotDataProvider\n          query={variantQuery}\n          variables={{ id: activeVariantId }}\n          field=\"node\"\n          fallbackData={productSlice}\n        >\n          <BuyButtonProvider fallbackProductSlice={productSlice} {...props}>\n            {children}\n          </BuyButtonProvider>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const contextValue = productSlice ? transformBuyButtonData(productSlice) : null;\n\n  return (\n    <BuyButtonView contextValue={contextValue} {...props}>\n      {children}\n    </BuyButtonView>\n  );\n}\n\ntype BuyButtonProviderProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  fallbackProductSlice: RawBuyButtonData | null;\n};\n\n// Reads the override written by the nested HotDataProvider: a Variant node when the variant fetch\n// succeeds, or the product slice (fallbackData) on error/null. Dispatch on __typename so the whole\n// add-to-cart context — availability, the SKU (variantId), and the seller — resolves from the\n// selected variant; always source the product path from the explicit fallback prop so a mis-passed\n// Product node id can never crash the variant transform.\nfunction BuyButtonProvider({ fallbackProductSlice, ...viewProps }: BuyButtonProviderProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let contextValue: BuyButtonContextValue = null;\n  if (overrideTypename === 'Variant') {\n    contextValue = transformVariantBuyButtonData(override as VariantBuyButtonDataFragment);\n  } else if (fallbackProductSlice) {\n    contextValue = transformBuyButtonData(fallbackProductSlice);\n  }\n\n  return <BuyButtonView contextValue={contextValue} {...viewProps} />;\n}\n\ntype BuyButtonViewProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  contextValue: BuyButtonContextValue;\n};\n\nfunction BuyButtonView({ contextValue, className, children, ...props }: BuyButtonViewProps) {\n  return (\n    <BuyButtonContext value={contextValue}>\n      <div {...props} className={className} data-fs-buy-button=\"\">\n        {children}\n      </div>\n    </BuyButtonContext>\n  );\n}\n\nexport function BuyButtonButton({\n  availableLabel = 'Comprar',\n  unavailableLabel = 'Indisponivel',\n  className,\n  children,\n  onClick,\n  $content,\n  $actions: $actionsProp,\n  ...props\n}: BuyButtonButtonProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const ctx = useBuyButton();\n  // `addItem` is async with no optimistic response, so the button owns its pending state locally\n  // (the action surface no longer exposes a shared `addItemPending`).\n  const [addItemPending, setAddItemPending] = useState(false);\n  const { quantity } = useProductQuantity();\n\n  if (!ctx) return null;\n\n  const { available, variantId, seller } = ctx;\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const addItem = $actions?.cart?.addItem;\n    if (addItem) {\n      setAddItemPending(true);\n      void addItem({ variantId, seller, quantity }).finally(() => setAddItemPending(false));\n    }\n    onClick?.(e);\n  }\n\n  const isUnavailable = !available;\n  const defaultText = isUnavailable\n    ? ($content?.unavailableLabel ?? unavailableLabel)\n    : ($content?.availableLabel ?? availableLabel);\n\n  return (\n    <Button\n      {...props}\n      className={className}\n      onClick={handleClick}\n      disabled={isUnavailable || addItemPending}\n      aria-busy={addItemPending || undefined}\n      data-fs-buy-button-button=\"\"\n      {...(isUnavailable ? { 'data-fs-buy-button-unavailable': '' } : {})}\n      {...(addItemPending ? { 'data-fs-buy-button-pending': '' } : {})}\n    >\n      {children ?? defaultText}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-buy-button-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-buy-button-skeleton-line=\"\" />\n    </div>\n  );\n}\n\nBuyButtonRoot.Skeleton = BuyButtonSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const BuyButton = {\n  Root: BuyButtonRoot,\n  Button: BuyButtonButton,\n  Skeleton: BuyButtonSkeleton,\n};\n"],"mappings":"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"}

package/dist/matter/cart/cart.d.ts

@@ -167,10 +167,10 @@ export declare function CartList({ className, children, skeletonCount, ...props
 export declare function CartTotal({ label, className, children, ...props }: CartTotalProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartCount({ className, children, template, ...props }: CartCountProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartError({ className, children, ...props }: CartErrorProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function CartGoCheckout({ href, label, className, children, onClick, $content, $actions, ...props }: CartGoCheckoutProps): import("react/jsx-runtime").JSX.Element;
-export declare function CartCouponForm({ placeholder, applyLabel, className, children, onSubmit, $actions, ...props }: CartCouponFormProps): import("react/jsx-runtime").JSX.Element;
-export declare function CartAppliedCoupons({ className, children, $actions, ...props }: CartAppliedCouponsProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function CartCouponRemove({ code, className, children, onClick, $actions, ...props }: CartCouponRemoveProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartGoCheckout({ href, label, className, children, onClick, $content, $actions: $actionsProp, ...props }: CartGoCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartCouponForm({ placeholder, applyLabel, className, children, onSubmit, $actions: $actionsProp, ...props }: CartCouponFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartAppliedCoupons({ className, children, $actions: $actionsProp, ...props }: CartAppliedCouponsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CartCouponRemove({ code, className, children, onClick, $actions: $actionsProp, ...props }: CartCouponRemoveProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartCouponError({ className, children, ...props }: CartCouponErrorProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const CartCheckoutGuardDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const CartLoadingDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
@@ -180,7 +180,7 @@ export declare const CartUnavailableCountDefinition: ComponentDefinition<CartUna
 export declare const CartRemoveUnavailableDefinition: ComponentDefinition<CartRemoveUnavailableProps>;
 export declare function CartCheckoutGuard({ className, children, ...props }: CartCheckoutGuardProps): import("react/jsx-runtime").JSX.Element;
 export declare function CartUnavailableCount({ className, children, template, ...props }: CartUnavailableCountProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function CartRemoveUnavailable({ className, children, onClick, $actions, ...props }: CartRemoveUnavailableProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CartRemoveUnavailable({ className, children, onClick, $actions: $actionsProp, ...props }: CartRemoveUnavailableProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const CartOpenOnAddDefinition: ComponentDefinition<CartOpenOnAddProps>;
 export declare const CartRedirectOnAddDefinition: ComponentDefinition<CartRedirectOnAddProps>;
 /**
@@ -191,7 +191,7 @@ export declare const CartRedirectOnAddDefinition: ComponentDefinition<CartRedire
  * reads reactive vars and needs no `CartRoot` ancestor (ADR-0010). Expects a single `DrawerRoot`
  * child; the wiring is encapsulated here, never exposed as authorable drawer props.
  */
-export declare function CartOpenOnAdd({ children, $actions }: CartOpenOnAddProps): ReactNode;
+export declare function CartOpenOnAdd({ children, $actions: $actionsProp }: CartOpenOnAddProps): ReactNode;
 /**
  * Navigates a no-mini-cart store to checkout after a successful add. Keys a `useEffect` on the
  * add-success pulse, which `addItem` increments only on the clean branch after the `await`, so the

package/dist/matter/cart/cart.js

@@ -4,6 +4,7 @@ import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
 import { graphql } from "../../sdk/generated/gql.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
@@ -365,7 +366,8 @@ function navigateToCheckout(href, push) {
 	if (/^https?:\/\//i.test(href)) globalThis.location.assign(href);
 	else push(href);
 }
-function CartGoCheckout({ href = "/checkout", label, className, children, onClick, $content, $actions, ...props }) {
+function CartGoCheckout({ href = "/checkout", label, className, children, onClick, $content, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
 	const client = useApolloClient();
 	const router = useRouter();
 	const [validating, setValidating] = useState(false);
@@ -403,7 +405,8 @@ function CartGoCheckout({ href = "/checkout", label, className, children, onClic
 		children: /* @__PURE__ */ jsx(CartGoCheckoutPending, { children: resolvedLabel })
 	});
 }
-function CartCouponForm({ placeholder = "Coupon code", applyLabel = "Apply", className, children, onSubmit, $actions, ...props }) {
+function CartCouponForm({ placeholder = "Coupon code", applyLabel = "Apply", className, children, onSubmit, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
 	const [code, setCode] = useState("");
 	const [pending, setPending] = useState(false);
 	async function handleSubmit(e) {
@@ -442,7 +445,8 @@ function CartCouponForm({ placeholder = "Coupon code", applyLabel = "Apply", cla
 		})] })
 	});
 }
-function CartAppliedCoupons({ className, children, $actions, ...props }) {
+function CartAppliedCoupons({ className, children, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
 	const { cart } = useCart();
 	const coupons = cart?.appliedCoupons ?? [];
 	if (coupons.length === 0) return null;
@@ -476,7 +480,8 @@ function CartCouponChip({ children, $actions }) {
 		})]
 	});
 }
-function CartCouponRemove({ code, className, children, onClick, $actions, ...props }) {
+function CartCouponRemove({ code, className, children, onClick, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
 	const coupon = useContext(CartCouponContext);
 	const targetCode = code ?? coupon?.code;
 	function handleClick(e) {
@@ -604,7 +609,8 @@ function CartUnavailableCount({ className, children, template = "{count} items u
 		children: children ?? template.replace("{count}", String(count))
 	});
 }
-function CartRemoveUnavailable({ className, children, onClick, $actions, ...props }) {
+function CartRemoveUnavailable({ className, children, onClick, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
 	const { cart } = useCart();
 	const unavailableIds = (cart?.items ?? []).filter(isUnavailable).map((item) => item.id);
 	if (unavailableIds.length === 0) return null;
@@ -657,7 +663,8 @@ const CartRedirectOnAddDefinition = defineComponent({
 * reads reactive vars and needs no `CartRoot` ancestor (ADR-0010). Expects a single `DrawerRoot`
 * child; the wiring is encapsulated here, never exposed as authorable drawer props.
 */
-function CartOpenOnAdd({ children, $actions }) {
+function CartOpenOnAdd({ children, $actions: $actionsProp }) {
+	const $actions = useActionsOverride($actionsProp);
 	const open = useReactiveVar(miniCartOpenVar);
 	const pulse = useReactiveVar(cartLastAddVar);
 	useEffect(() => {