@vtex/faststore 0.0.1

package/dist/matter/pricing/pricing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing.js","names":[],"sources":["../../../src/matter/pricing/pricing.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, Suspense, useContext } from 'react';\nimport { PopoverTrigger } from '../../particles/popover/popover.js';\nimport { TabsPanel, TabsTab } from '../../particles/tabs/tabs.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.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 { VariantPricingDataFragment } from '../../sdk/generated/graphql.js';\nimport { resolveDefaultSeller } from '../../sdk/seller.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment PricingData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      variants(first: 1) {\n        edges {\n          node {\n            sellers {\n              isDefault\n              offer {\n                price { amount currencyCode }\n                listPrice { amount currencyCode }\n                spotPrice { amount currencyCode }\n                installmentPlans {\n                  paymentMethod\n                  paymentType\n                  installments {\n                    count\n                    value { amount currencyCode }\n                    totalAmount { amount currencyCode }\n                    interestRate\n                    interestFree\n                  }\n                }\n                discountHighlights\n                promotions {\n                  name\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// The variant offer slice, authored via graphql() so HotDataProvider gets a TypedDocumentNode.\n// Declared so codegen scans the source and emits VariantPricingDataFragment; the fragment is spread\n// into variantQuery at the GraphQL layer, so the variable is unused at runtime.\nconst _variantFragment = graphql(`\n  fragment VariantPricingData on Variant {\n    __typename\n    id\n    sellers {\n      isDefault\n      offer {\n        price { amount currencyCode }\n        listPrice { amount currencyCode }\n        spotPrice { amount currencyCode }\n        installmentPlans {\n          paymentMethod\n          paymentType\n          installments {\n            count\n            value { amount currencyCode }\n            totalAmount { amount currencyCode }\n            interestRate\n            interestFree\n          }\n        }\n        discountHighlights\n        promotions {\n          name\n        }\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantPricingQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantPricingData\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 RawPromotion = {\n  name: string;\n};\n\ntype RawOffer = {\n  price: MoneyValue;\n  listPrice: MoneyValue;\n  spotPrice: MoneyValue;\n  installmentPlans: Array<{\n    paymentMethod: string;\n    paymentType: string;\n    installments: Array<{\n      count: number;\n      value: MoneyValue;\n      totalAmount: MoneyValue;\n      interestRate: number;\n      interestFree: boolean;\n    }>;\n  }>;\n  discountHighlights: string[];\n  promotions: RawPromotion[];\n};\n\ntype RawPricingData = {\n  // __typename/id are optional so existing fixtures (which omit them) still typecheck; the real\n  // page query always supplies id, which scopes the published variant selection to this product.\n  __typename?: string;\n  id?: string;\n  variants: {\n    edges: Array<{\n      node: {\n        sellers: Array<{\n          isDefault: boolean;\n          offer: RawOffer | null;\n        }>;\n      };\n    }>;\n  };\n};\n\ntype VariantSlice = VariantPricingDataFragment;\n\ntype NormalizedPricingOffer = {\n  price: number;\n  listPrice: number;\n  spotPrice: number;\n  currency: string;\n  installmentPlans: InstallmentPlanData[];\n  discountHighlights: string[];\n  promotions: PromotionData[];\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype InstallmentData = {\n  count: number;\n  value: number;\n  totalAmount: number;\n  interestRate: number;\n  interestFree: boolean;\n};\n\ntype InstallmentPlanData = {\n  paymentMethod: string;\n  paymentType: string;\n  installments: InstallmentData[];\n};\n\ntype PromotionData = {\n  name: string;\n};\n\ntype PricingContextData = {\n  price: number;\n  listPrice: number;\n  spotPrice: number;\n  currency: string;\n  /** Undefined only for a directly-rendered view: `Intl` reads it as the platform default. */\n  locale: string | undefined;\n  installmentPlans: InstallmentPlanData[];\n  discountHighlights: string[];\n  promotions: PromotionData[];\n  hasDiscount: boolean;\n  hasSpotDiscount: boolean;\n  discountPercentage: number;\n  spotDiscountPercentage: number;\n  bestInstallment: InstallmentData | null;\n};\n\ntype PricingContextValue = PricingContextData | null;\n\ntype InstallmentPlanItemContextData = {\n  paymentMethod: string;\n  paymentType: string;\n  installments: InstallmentData[];\n  bestInstallment: InstallmentData | null;\n};\n\nconst PRICING_CONTEXT_UNSET = Symbol('PricingContextUnset');\n\nexport type PricingRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: RawPricingData | null;\n  /** Page-supplied viewed SKU; pre-selects the offer on first paint. A published swatch selection\n   *  wins over it once the shopper interacts. */\n  selectedVariantId?: string;\n};\n\nexport type PricingSellingPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type PricingListPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type PricingSpotPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type PricingInstallmentsProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingInstallmentPlansProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingInstallmentPlanProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingInstallmentsForPlanProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingPaymentMethodsTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type PricingPaymentMethodsListProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingPaymentMethodsTabListProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingPaymentMethodsTabPanelsProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingPaymentMethodNameProps = ComponentPropsWithRef<'span'>;\n\nexport type PricingInstallmentProps = ComponentPropsWithRef<'span'> & {\n  template?: string;\n  interestFreeLabel?: string;\n};\n\nexport type PricingDiscountProps = ComponentPropsWithRef<'span'> & {\n  template?: string;\n  format?: 'percentage' | 'absolute';\n};\n\nexport type PricingHighlightsProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingHighlightProps = ComponentPropsWithRef<'span'>;\n\nexport type PricingPromotionsProps = ComponentPropsWithRef<'div'>;\n\nexport type PricingPromotionProps = ComponentPropsWithRef<'span'> & {\n  template?: string;\n};\n\nexport type PricingSpotDiscountProps = ComponentPropsWithRef<'span'> & {\n  template?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst PricingContext = createContext<PricingContextValue | typeof PRICING_CONTEXT_UNSET>(PRICING_CONTEXT_UNSET);\n\nconst InstallmentItemContext = createContext<InstallmentData | null>(null);\n\nconst InstallmentPlanItemContext = createContext<InstallmentPlanItemContextData | null>(null);\n\nconst HighlightItemContext = createContext<string | null>(null);\n\nconst PromotionItemContext = createContext<PromotionData | null>(null);\n\nfunction usePricing(): PricingContextValue {\n  const ctx = useContext(PricingContext);\n  if (ctx === PRICING_CONTEXT_UNSET) {\n    throw new Error('Pricing components must be used inside PricingRoot.');\n  }\n  return ctx;\n}\n\nfunction useInstallmentItem(): InstallmentData {\n  const ctx = useContext(InstallmentItemContext);\n  if (!ctx) {\n    throw new Error('PricingInstallment must be used inside PricingInstallments.');\n  }\n  return ctx;\n}\n\nexport function useInstallmentPlanItem(\n  caller = 'PricingInstallmentPlan',\n  parent = 'PricingInstallmentPlans',\n): InstallmentPlanItemContextData {\n  const ctx = useContext(InstallmentPlanItemContext);\n  if (!ctx) {\n    throw new Error(`${caller} must be used inside ${parent}.`);\n  }\n  return ctx;\n}\n\nfunction useHighlightItem(): string {\n  const ctx = useContext(HighlightItemContext);\n  if (ctx === null) {\n    throw new Error('PricingHighlight must be used inside PricingHighlights.');\n  }\n  return ctx;\n}\n\nfunction usePromotionItem(): PromotionData {\n  const ctx = useContext(PromotionItemContext);\n  if (!ctx) {\n    throw new Error('PricingPromotion must be used inside PricingPromotions.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatPrice(value: number, locale: string | undefined, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\nfunction findBestInstallment(plans: InstallmentPlanData[]): InstallmentData | null {\n  const allInstallments = plans.flatMap((plan) => plan.installments);\n  if (allInstallments.length === 0) return null;\n\n  const interestFree = allInstallments.filter((i) => i.interestFree);\n  if (interestFree.length > 0) {\n    return interestFree.reduce((best, current) => (current.count > best.count ? current : best));\n  }\n\n  return allInstallments.reduce((best, current) => (current.count > best.count ? current : best));\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\nfunction normalizeOffer(offer: RawOffer): NormalizedPricingOffer {\n  return {\n    price: offer.price.amount,\n    listPrice: offer.listPrice.amount,\n    spotPrice: offer.spotPrice.amount,\n    currency: offer.price.currencyCode,\n    installmentPlans: offer.installmentPlans.map((plan) => ({\n      paymentMethod: plan.paymentMethod,\n      paymentType: plan.paymentType,\n      installments: plan.installments.map((inst) => ({\n        count: inst.count,\n        value: inst.value.amount,\n        totalAmount: inst.totalAmount.amount,\n        interestRate: inst.interestRate,\n        interestFree: inst.interestFree,\n      })),\n    })),\n    discountHighlights: offer.discountHighlights,\n    promotions: offer.promotions.map((promotion) => ({ name: promotion.name })),\n  };\n}\n\n// Resolves a variant's default seller and normalizes its offer, or null when that seller has no\n// offer. Shared by the product-level and selected-variant transforms so the default-seller + offer\n// gate lives in one place.\nfunction pricingOfferFromVariant(variant: {\n  sellers: readonly { isDefault: boolean; offer: RawOffer | null }[];\n}): NormalizedPricingOffer | null {\n  const seller = resolveDefaultSeller(variant.sellers);\n  const offer = seller?.offer;\n  if (!offer) return null;\n\n  return normalizeOffer(offer);\n}\n\nfunction transformPricingData(data: RawPricingData): NormalizedPricingOffer | null {\n  const edge = data.variants.edges[0];\n  if (!edge) return null;\n\n  return pricingOfferFromVariant(edge.node);\n}\n\nexport function transformVariantPricingData(variant: VariantSlice): NormalizedPricingOffer | null {\n  return pricingOfferFromVariant(variant);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const PricingRootDefinition = defineComponent<PricingRootProps>({\n  name: 'PricingRoot',\n  importPath: '@vtex/faststore/components',\n  component: PricingRoot,\n  fragment,\n  fetchStrategy: 'lazy',\n  skeleton: PricingSkeleton,\n  editor: { label: 'Pricing', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'Root container for the PDP pricing block; all other Pricing sub-components must be descendants of it. Automatically recomputes the offer when a shopper picks a VariantSelector swatch (it reads the published variant selection); the selectedVariantId prop is an optional pre-selection fallback. Falls back silently to the product-level offer on variant fetch error. See pricing.md.',\n});\n\nexport const PricingSellingPriceDefinition = defineComponent<PricingSellingPriceProps>({\n  name: 'PricingSellingPrice',\n  importPath: '@vtex/faststore/components',\n  component: PricingSellingPrice,\n  editor: { label: 'Selling Price', category: 'commerce' },\n  schema: {},\n  guideline: 'Displays the current selling price; must be a descendant of PricingRoot.',\n});\n\nexport const PricingListPriceDefinition = defineComponent<PricingListPriceProps>({\n  name: 'PricingListPrice',\n  importPath: '@vtex/faststore/components',\n  component: PricingListPrice,\n  editor: { label: 'List Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the original (strikethrough) list price; only renders when a discount exists. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingSpotPriceDefinition = defineComponent<PricingSpotPriceProps>({\n  name: 'PricingSpotPrice',\n  importPath: '@vtex/faststore/components',\n  component: PricingSpotPrice,\n  editor: { label: 'Spot Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the best cash/instant-payment price (e.g. Pix); only renders when spotPrice is lower than the selling price. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingInstallmentsDefinition = defineComponent<PricingInstallmentsProps>({\n  name: 'PricingInstallments',\n  importPath: '@vtex/faststore/components',\n  component: PricingInstallments,\n  editor: { label: 'Installments', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Shortcut container that exposes the single best installment across all plans; use PricingInstallmentPlans instead when a per-payment-method breakdown is needed. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingInstallmentPlansDefinition = defineComponent<PricingInstallmentPlansProps>({\n  name: 'PricingInstallmentPlans',\n  importPath: '@vtex/faststore/components',\n  component: PricingInstallmentPlans,\n  editor: { label: 'Installment Plans', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders one row per payment method; use PricingInstallments instead when only the single best plan is needed. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingInstallmentPlanDefinition = defineComponent<PricingInstallmentPlanProps>({\n  name: 'PricingInstallmentPlan',\n  importPath: '@vtex/faststore/components',\n  component: PricingInstallmentPlan,\n  editor: { label: 'Installment Plan', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders a single plan row inside PricingInstallmentPlans; nest PricingInstallmentsForPlan inside it to list every installment tier instead of just the best one. Must be a descendant of PricingInstallmentPlans.',\n});\n\nexport const PricingInstallmentsForPlanDefinition = defineComponent<PricingInstallmentsForPlanProps>({\n  name: 'PricingInstallmentsForPlan',\n  importPath: '@vtex/faststore/components',\n  component: PricingInstallmentsForPlan,\n  editor: { label: 'Installments For Plan', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Iterates every installment tier (1x, 2x, … Nx) of the enclosing plan; must be a descendant of PricingInstallmentPlan.',\n});\n\nexport const PricingPaymentMethodsTriggerDefinition = defineComponent<PricingPaymentMethodsTriggerProps>({\n  name: 'PricingPaymentMethodsTrigger',\n  importPath: '@vtex/faststore/components',\n  component: PricingPaymentMethodsTrigger,\n  editor: { label: 'Payment Methods Trigger', category: 'action' },\n  schema: {},\n  guideline: 'Button that opens the payment-methods disclosure panel; must be a descendant of PopoverRoot.',\n});\n\nexport const PricingPaymentMethodsListDefinition = defineComponent<PricingPaymentMethodsListProps>({\n  name: 'PricingPaymentMethodsList',\n  importPath: '@vtex/faststore/components',\n  component: PricingPaymentMethodsList,\n  editor: { label: 'Payment Methods List', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Flat disclosure panel content listing every payment plan; place inside PopoverPopup, DialogPopup, or DrawerPopup. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingPaymentMethodsTabListDefinition = defineComponent<PricingPaymentMethodsTabListProps>({\n  name: 'PricingPaymentMethodsTabList',\n  importPath: '@vtex/faststore/components',\n  component: PricingPaymentMethodsTabList,\n  editor: { label: 'Payment Methods Tab List', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Emits one tab per payment plan for the tab-grouped disclosure pattern; must be a descendant of TabsList (which is inside TabsRoot). Pair with PricingPaymentMethodsTabPanels.',\n});\n\nexport const PricingPaymentMethodsTabPanelsDefinition = defineComponent<PricingPaymentMethodsTabPanelsProps>({\n  name: 'PricingPaymentMethodsTabPanels',\n  importPath: '@vtex/faststore/components',\n  component: PricingPaymentMethodsTabPanels,\n  editor: { label: 'Payment Methods Tab Panels', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Emits one panel per payment plan for the tab-grouped disclosure pattern; must be a sibling of TabsList under TabsRoot (not nested inside TabsList). Pair with PricingPaymentMethodsTabList.',\n});\n\nexport const PricingPaymentMethodNameDefinition = defineComponent<PricingPaymentMethodNameProps>({\n  name: 'PricingPaymentMethodName',\n  importPath: '@vtex/faststore/components',\n  component: PricingPaymentMethodName,\n  editor: { label: 'Payment Method Name', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders the enclosing plan\\'s payment method name (e.g. \"Visa\", \"Pix\"); must be inside a plan context — PricingInstallmentPlan, PricingPaymentMethodsTabList, or PricingPaymentMethodsTabPanels.',\n});\n\nexport const PricingInstallmentDefinition = defineComponent<PricingInstallmentProps>({\n  name: 'PricingInstallment',\n  importPath: '@vtex/faststore/components',\n  component: PricingInstallment,\n  editor: { label: 'Installment', category: 'commerce' },\n  schema: {\n    template: { type: 'string', default: '{count}x de {value}', label: 'Template' },\n    interestFreeLabel: { type: 'string', default: 'sem juros', label: 'Interest-free label' },\n  },\n  guideline:\n    'Renders a single installment line using {count} and {value} template placeholders; must be a descendant of PricingInstallments, PricingInstallmentPlan, or PricingInstallmentsForPlan.',\n});\n\nexport const PricingDiscountDefinition = defineComponent<PricingDiscountProps>({\n  name: 'PricingDiscount',\n  importPath: '@vtex/faststore/components',\n  component: PricingDiscount,\n  editor: { label: 'Discount Badge', category: 'commerce' },\n  schema: {\n    format: { type: ['percentage', 'absolute'] as const, default: 'percentage', label: 'Discount Format' },\n    template: { type: 'string', label: 'Template' },\n  },\n  guideline:\n    'Discount badge for the listPrice-vs-price markdown; use PricingSpotDiscount instead for the spotPrice-vs-price (Pix/cash) percentage. The format prop switches between a percentage (-25%, default) and an absolute amount (-R$ 10,00); the template supports {percentage} and {amount} placeholders and defaults to the format-appropriate one. Recomputes automatically on swatch change. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingSpotDiscountDefinition = defineComponent<PricingSpotDiscountProps>({\n  name: 'PricingSpotDiscount',\n  importPath: '@vtex/faststore/components',\n  component: PricingSpotDiscount,\n  editor: { label: 'Spot Discount Badge', category: 'commerce' },\n  schema: {\n    template: { type: 'string', default: '-{percentage}%', label: 'Template' },\n  },\n  guideline:\n    'Discount badge for the spotPrice-vs-price (cash/Pix) percentage; use PricingDiscount instead for the listPrice-vs-price percentage. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingHighlightsDefinition = defineComponent<PricingHighlightsProps>({\n  name: 'PricingHighlights',\n  importPath: '@vtex/faststore/components',\n  component: PricingHighlights,\n  editor: { label: 'Highlights', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Iterates the offer\\'s discount highlight labels (e.g. \"Black Friday\", \"Exclusivo\"); place PricingHighlight as a child. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingHighlightDefinition = defineComponent<PricingHighlightProps>({\n  name: 'PricingHighlight',\n  importPath: '@vtex/faststore/components',\n  component: PricingHighlight,\n  editor: { label: 'Highlight', category: 'commerce' },\n  schema: {},\n  guideline: 'Renders a single highlight label as a span; must be a descendant of PricingHighlights.',\n});\n\nexport const PricingPromotionsDefinition = defineComponent<PricingPromotionsProps>({\n  name: 'PricingPromotions',\n  importPath: '@vtex/faststore/components',\n  component: PricingPromotions,\n  editor: { label: 'Promotions', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Iterates the offer\\'s structured promotions (e.g. \"Compre 3 leve 2\"); place PricingPromotion as a child. Must be a descendant of PricingRoot.',\n});\n\nexport const PricingPromotionDefinition = defineComponent<PricingPromotionProps>({\n  name: 'PricingPromotion',\n  importPath: '@vtex/faststore/components',\n  component: PricingPromotion,\n  editor: { label: 'Promotion', category: 'commerce' },\n  schema: {\n    template: { type: 'string', default: '{name}', label: 'Template' },\n  },\n  guideline:\n    'Renders a single promotion using the {name} template placeholder; must be a descendant of PricingPromotions.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function PricingRoot({ $data: $dataProp, selectedVariantId, children, ...props }: PricingRootProps) {\n  const { locale, currency } = useStorefrontContext();\n  const productSlice = useDataOverride($dataProp) ?? null;\n\n  // The VariantSelector matter publishes the shopper's in-page selection here; reading it lets\n  // pricing recompute when a swatch changes without a page navigation. Scope the published selection\n  // to this product so a swatch picked on another PDP does not leak in after client-side navigation.\n  // The explicit selectedVariantId prop is the pre-selection fallback; the live selection wins.\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          <PricingProvider fallbackProductSlice={productSlice} currency={currency} locale={locale} {...props}>\n            {children}\n          </PricingProvider>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const transformed = productSlice ? transformPricingData(productSlice) : null;\n\n  return (\n    <PricingView transformed={transformed} currency={currency} locale={locale} {...props}>\n      {children}\n    </PricingView>\n  );\n}\n\n/**\n * What `PricingRoot` hands its inner views: the container props plus the locale and currency it read\n * from the storefront context. They are internal parameters, not a public prop — `PricingRootProps`\n * no longer carries either.\n */\ntype PricingViewBaseProps = ComponentPropsWithRef<'div'> & {\n  currency?: string;\n  locale?: string;\n};\n\ntype PricingProviderProps = PricingViewBaseProps & {\n  fallbackProductSlice: RawPricingData | 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 and always\n// source the product path from the explicit fallback prop so a mis-passed Product node id can never\n// crash the variant transform.\nfunction PricingProvider({ fallbackProductSlice, ...viewProps }: PricingProviderProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let transformed: NormalizedPricingOffer | null = null;\n  if (overrideTypename === 'Variant') {\n    transformed = transformVariantPricingData(override as VariantSlice);\n  } else if (fallbackProductSlice) {\n    transformed = transformPricingData(fallbackProductSlice);\n  }\n\n  return <PricingView transformed={transformed} {...viewProps} />;\n}\n\ntype PricingViewProps = PricingViewBaseProps & {\n  transformed: NormalizedPricingOffer | null;\n};\n\nfunction PricingView({\n  transformed,\n  currency: currencyProp,\n  locale: localeProp,\n  className,\n  children,\n  ...props\n}: PricingViewProps) {\n  let contextValue: PricingContextValue = null;\n\n  if (transformed) {\n    const { price, listPrice, spotPrice, installmentPlans, discountHighlights, promotions } = transformed;\n    // `PricingRoot` always hands these down from the context; the offer's own currency is the same\n    // channel's by construction, so it is a fallback only for a directly-rendered view.\n    const currency = currencyProp ?? transformed.currency;\n    // `PricingRoot` always supplies it from the context; a directly-rendered view falls back to the\n    // platform default rather than a Brazilian one.\n    const locale = localeProp;\n    const hasDiscount = listPrice > price;\n    const hasSpotDiscount = spotPrice < price;\n    const discountPercentage = hasDiscount ? Math.round(((listPrice - price) / listPrice) * 100) : 0;\n    const spotDiscountPercentage = hasSpotDiscount ? Math.round(((price - spotPrice) / price) * 100) : 0;\n    const bestInstallment = findBestInstallment(installmentPlans);\n\n    contextValue = {\n      price,\n      listPrice,\n      spotPrice,\n      currency,\n      locale,\n      installmentPlans,\n      discountHighlights,\n      promotions,\n      hasDiscount,\n      hasSpotDiscount,\n      discountPercentage,\n      spotDiscountPercentage,\n      bestInstallment,\n    };\n  }\n\n  return (\n    <PricingContext value={contextValue}>\n      <div {...props} className={className} data-fs-pricing=\"\">\n        {children}\n      </div>\n    </PricingContext>\n  );\n}\n\nexport function PricingSellingPrice({ className, children, ...props }: PricingSellingPriceProps) {\n  const ctx = usePricing();\n  if (!ctx) return null;\n\n  const formatted = formatPrice(ctx.price, ctx.locale, ctx.currency);\n\n  return (\n    <span {...props} className={className} data-fs-pricing-selling-price=\"\">\n      {children ?? formatted}\n    </span>\n  );\n}\n\nexport function PricingListPrice({ className, children, ...props }: PricingListPriceProps) {\n  const ctx = usePricing();\n  if (!ctx || !ctx.hasDiscount) return null;\n\n  const formatted = formatPrice(ctx.listPrice, ctx.locale, ctx.currency);\n\n  return (\n    <span {...props} className={className} data-fs-pricing-list-price=\"\">\n      {children ?? formatted}\n    </span>\n  );\n}\n\nexport function PricingSpotPrice({ className, children, ...props }: PricingSpotPriceProps) {\n  const ctx = usePricing();\n  if (!ctx || !ctx.hasSpotDiscount) return null;\n\n  const formatted = formatPrice(ctx.spotPrice, ctx.locale, ctx.currency);\n\n  return (\n    <span {...props} className={className} data-fs-pricing-spot-price=\"\">\n      {children ?? formatted}\n    </span>\n  );\n}\n\nexport function PricingInstallments({ className, children, ...props }: PricingInstallmentsProps) {\n  const ctx = usePricing();\n  if (!ctx || !ctx.bestInstallment) return null;\n\n  return (\n    <InstallmentItemContext value={ctx.bestInstallment}>\n      <div {...props} className={className} data-fs-pricing-installments=\"\">\n        {children}\n      </div>\n    </InstallmentItemContext>\n  );\n}\n\nexport function PricingInstallmentPlans({ className, children, ...props }: PricingInstallmentPlansProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.installmentPlans.length === 0) return null;\n\n  const sortedPlans = ctx.installmentPlans\n    .map((plan) => ({ plan, bestInstallment: findBestInstallment([plan]) }))\n    .sort((a, b) => {\n      const aCount = a.bestInstallment?.count ?? Number.POSITIVE_INFINITY;\n      const bCount = b.bestInstallment?.count ?? Number.POSITIVE_INFINITY;\n      return aCount - bCount;\n    });\n\n  return (\n    <div {...props} className={className} data-fs-pricing-installment-plans=\"\">\n      {sortedPlans.map(({ plan, bestInstallment }, index) => (\n        <InstallmentPlanItemContext\n          key={`${plan.paymentType}-${plan.paymentMethod}-${index}`}\n          value={{\n            paymentMethod: plan.paymentMethod,\n            paymentType: plan.paymentType,\n            installments: plan.installments,\n            bestInstallment,\n          }}\n        >\n          {children}\n        </InstallmentPlanItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingInstallmentPlan({ className, children, ...props }: PricingInstallmentPlanProps) {\n  const plan = useInstallmentPlanItem();\n  if (!plan.bestInstallment) return null;\n\n  return (\n    <InstallmentItemContext value={plan.bestInstallment}>\n      <div\n        {...props}\n        className={className}\n        data-fs-pricing-installment-plan=\"\"\n        data-fs-pricing-installment-plan-type={plan.paymentType}\n      >\n        {children}\n      </div>\n    </InstallmentItemContext>\n  );\n}\n\nexport function PricingInstallmentsForPlan({ className, children, ...props }: PricingInstallmentsForPlanProps) {\n  const plan = useInstallmentPlanItem('PricingInstallmentsForPlan', 'PricingInstallmentPlan');\n  if (plan.installments.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-installments-for-plan=\"\">\n      {plan.installments.map((installment, index) => (\n        <InstallmentItemContext key={`${installment.count}-${index}`} value={installment}>\n          {children}\n        </InstallmentItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingPaymentMethodsTrigger({ className, children, ...props }: PricingPaymentMethodsTriggerProps) {\n  return (\n    <PopoverTrigger {...props} className={className} data-fs-pricing-payment-methods-trigger=\"\">\n      {children}\n    </PopoverTrigger>\n  );\n}\n\nexport function PricingPaymentMethodsList({ className, children, ...props }: PricingPaymentMethodsListProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.installmentPlans.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-payment-methods-list=\"\">\n      <PricingInstallmentPlans>{children}</PricingInstallmentPlans>\n    </div>\n  );\n}\n\nfunction sortPlansForTabs(plans: InstallmentPlanData[]) {\n  return plans\n    .map((plan) => ({\n      plan,\n      bestInstallment: findBestInstallment([plan]),\n      tabValue: `${plan.paymentType}-${plan.paymentMethod}`,\n    }))\n    .sort((a, b) => {\n      const aCount = a.bestInstallment?.count ?? Number.POSITIVE_INFINITY;\n      const bCount = b.bestInstallment?.count ?? Number.POSITIVE_INFINITY;\n      return aCount - bCount;\n    });\n}\n\nexport function PricingPaymentMethodsTabList({ className, children, ...props }: PricingPaymentMethodsTabListProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.installmentPlans.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-payment-methods-tab-list=\"\">\n      {sortPlansForTabs(ctx.installmentPlans).map(({ plan, bestInstallment, tabValue }) => (\n        <InstallmentPlanItemContext\n          key={tabValue}\n          value={{\n            paymentMethod: plan.paymentMethod,\n            paymentType: plan.paymentType,\n            installments: plan.installments,\n            bestInstallment,\n          }}\n        >\n          <TabsTab value={tabValue}>{children}</TabsTab>\n        </InstallmentPlanItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingPaymentMethodsTabPanels({ className, children, ...props }: PricingPaymentMethodsTabPanelsProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.installmentPlans.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-payment-methods-tab-panels=\"\">\n      {sortPlansForTabs(ctx.installmentPlans).map(({ plan, bestInstallment, tabValue }) => (\n        <InstallmentPlanItemContext\n          key={tabValue}\n          value={{\n            paymentMethod: plan.paymentMethod,\n            paymentType: plan.paymentType,\n            installments: plan.installments,\n            bestInstallment,\n          }}\n        >\n          <TabsPanel value={tabValue}>{children}</TabsPanel>\n        </InstallmentPlanItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingPaymentMethodName({ className, children, ...props }: PricingPaymentMethodNameProps) {\n  const plan = useInstallmentPlanItem();\n\n  return (\n    <span {...props} className={className} data-fs-pricing-payment-method-name=\"\">\n      {children ?? plan.paymentMethod}\n    </span>\n  );\n}\n\nexport function PricingInstallment({\n  template = '{count}x de {value}',\n  interestFreeLabel = 'sem juros',\n  className,\n  children,\n  ...props\n}: PricingInstallmentProps) {\n  const installment = useInstallmentItem();\n  const ctx = usePricing();\n  if (!ctx) return null;\n\n  const formattedValue = formatPrice(installment.value, ctx.locale, ctx.currency);\n  const base = template.replace('{count}', String(installment.count)).replace('{value}', formattedValue);\n  const text = installment.interestFree && interestFreeLabel ? `${base} ${interestFreeLabel}` : base;\n\n  return (\n    <span {...props} className={className} data-fs-pricing-installment=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\nexport function PricingDiscount({\n  template,\n  format = 'percentage',\n  className,\n  children,\n  ...props\n}: PricingDiscountProps) {\n  const ctx = usePricing();\n  if (!ctx || !ctx.hasDiscount) return null;\n\n  const amount = ctx.listPrice - ctx.price;\n  const formattedAmount = formatPrice(amount, ctx.locale, ctx.currency);\n  const resolvedTemplate = template ?? (format === 'absolute' ? '-{amount}' : '-{percentage}%');\n  const text = resolvedTemplate\n    .replaceAll('{percentage}', String(ctx.discountPercentage))\n    .replaceAll('{amount}', formattedAmount);\n\n  return (\n    <span {...props} className={className} data-fs-pricing-discount=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\nexport function PricingSpotDiscount({\n  template = '-{percentage}%',\n  className,\n  children,\n  ...props\n}: PricingSpotDiscountProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.spotDiscountPercentage <= 0) return null;\n\n  const text = template.replace('{percentage}', String(ctx.spotDiscountPercentage));\n\n  return (\n    <span {...props} className={className} data-fs-pricing-spot-discount=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\nexport function PricingHighlights({ className, children, ...props }: PricingHighlightsProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.discountHighlights.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-highlights=\"\">\n      {ctx.discountHighlights.map((highlight, index) => (\n        <HighlightItemContext key={`${highlight}-${index}`} value={highlight}>\n          {children}\n        </HighlightItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingHighlight({ className, children, ...props }: PricingHighlightProps) {\n  const highlight = useHighlightItem();\n\n  return (\n    <span {...props} className={className} data-fs-pricing-highlight=\"\">\n      {children ?? highlight}\n    </span>\n  );\n}\n\nexport function PricingPromotions({ className, children, ...props }: PricingPromotionsProps) {\n  const ctx = usePricing();\n  if (!ctx || ctx.promotions.length === 0) return null;\n\n  return (\n    <div {...props} className={className} data-fs-pricing-promotions=\"\">\n      {ctx.promotions.map((promotion, index) => (\n        <PromotionItemContext key={`${promotion.name}-${index}`} value={promotion}>\n          {children}\n        </PromotionItemContext>\n      ))}\n    </div>\n  );\n}\n\nexport function PricingPromotion({ template = '{name}', className, children, ...props }: PricingPromotionProps) {\n  const promotion = usePromotionItem();\n  const text = template.replace('{name}', promotion.name);\n\n  return (\n    <span {...props} className={className} data-fs-pricing-promotion=\"\">\n      {children ?? text}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function PricingSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-pricing-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-pricing-skeleton-line=\"\" />\n      <span data-fs-pricing-skeleton-line=\"\" />\n    </div>\n  );\n}\n\nPricingRoot.Skeleton = PricingSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const Pricing = {\n  Root: PricingRoot,\n  SellingPrice: PricingSellingPrice,\n  ListPrice: PricingListPrice,\n  SpotPrice: PricingSpotPrice,\n  Installments: PricingInstallments,\n  InstallmentPlans: PricingInstallmentPlans,\n  InstallmentPlan: PricingInstallmentPlan,\n  InstallmentsForPlan: PricingInstallmentsForPlan,\n  Installment: PricingInstallment,\n  PaymentMethodsTrigger: PricingPaymentMethodsTrigger,\n  PaymentMethodsList: PricingPaymentMethodsList,\n  PaymentMethodsTabList: PricingPaymentMethodsTabList,\n  PaymentMethodsTabPanels: PricingPaymentMethodsTabPanels,\n  PaymentMethodName: PricingPaymentMethodName,\n  Discount: PricingDiscount,\n  SpotDiscount: PricingSpotDiscount,\n  Highlights: PricingHighlights,\n  Highlight: PricingHighlight,\n  Promotions: PricingPromotions,\n  Promotion: PricingPromotion,\n  Skeleton: PricingSkeleton,\n};\n"],"mappings":"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"}

package/dist/matter/product-gallery/product-gallery.d.ts

@@ -0,0 +1,23 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ProductGalleryDataFragment } from "../../sdk/generated/graphql.js";
+import { GalleryMediaItem } from "../../particles/gallery/gallery.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/matter/product-gallery/product-gallery.d.ts
+type ProductSlice = NonNullable<ProductGalleryDataFragment['productBySlug']>;
+export type ProductGalleryRootProps = ComponentPropsWithRef<'div'> & {
+  media?: GalleryMediaItem[];
+  $data?: ProductSlice | null;
+  defaultIndex?: number;
+  selectOnHover?: boolean;
+  thumbnailOpensFullscreen?: boolean;
+  selectedVariantId?: string;
+  children?: ReactNode;
+};
+export declare const ProductGalleryRootDefinition: ComponentDefinition<ProductGalleryRootProps>;
+export declare function ProductGalleryRoot({ media, $data, defaultIndex, selectOnHover, thumbnailOpensFullscreen, selectedVariantId, children, ...props }: ProductGalleryRootProps): import("react/jsx-runtime").JSX.Element;
+export declare const ProductGallery: {
+  Root: typeof ProductGalleryRoot;
+};
+//#endregion
+//# sourceMappingURL=product-gallery.d.ts.map

package/dist/matter/product-gallery/product-gallery.js

@@ -0,0 +1,188 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { HotDataProvider } from "../../sdk/data/hot-data-provider.js";
+import { publishedVariantIdFor, selectedVariantVar } from "../../sdk/state/variant-selector.js";
+import { GalleryRoot } from "../../particles/gallery/gallery.js";
+import { useReactiveVar } from "@apollo/client/react";
+import { Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/matter/product-gallery/product-gallery.tsx
+const fragment = graphql(`
+  fragment ProductGalleryData on Query {
+    productBySlug(slug: $slug) {
+      __typename
+      id
+      media(first: 20) {
+        edges {
+          node {
+            ... on Image {
+              __typename
+              url
+              altText
+            }
+            ... on Video {
+              __typename
+              url
+              altText
+              previewImage {
+                url
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`);
+graphql(`
+  fragment VariantGalleryData on Variant {
+    __typename
+    id
+    images(first: 20) {
+      edges {
+        node {
+          __typename
+          url
+          altText
+        }
+      }
+    }
+    videos {
+      __typename
+      url
+      altText
+      previewImage {
+        url
+      }
+    }
+  }
+`);
+const variantQuery = graphql(`
+  query VariantGalleryQuery($id: ID!) {
+    node(id: $id) {
+      __typename
+      ... on Variant {
+        ...VariantGalleryData
+      }
+    }
+  }
+`);
+function transformMedia(product) {
+	return product.media.edges.map(({ node }) => {
+		if (node.__typename === "Video") return {
+			type: "video",
+			url: node.url,
+			altText: node.altText ?? "",
+			...node.previewImage?.url ? { previewImageUrl: node.previewImage.url } : {}
+		};
+		return {
+			type: "image",
+			url: node.url,
+			altText: node.altText ?? ""
+		};
+	});
+}
+function transformVariantMedia(variant) {
+	const images = variant.images.edges.map(({ node }) => ({
+		type: "image",
+		url: node.url,
+		altText: node.altText ?? ""
+	}));
+	const videos = variant.videos.map((video) => ({
+		type: "video",
+		url: video.url,
+		altText: video.altText ?? "",
+		...video.previewImage?.url ? { previewImageUrl: video.previewImage.url } : {}
+	}));
+	return [...images, ...videos];
+}
+const ProductGalleryRootDefinition = defineComponent({
+	name: "ProductGalleryRoot",
+	importPath: "@vtex/faststore/components",
+	component: ProductGalleryRoot,
+	fragment,
+	editor: {
+		label: "Product Gallery Root",
+		category: "commerce"
+	},
+	schema: {
+		defaultIndex: {
+			type: "number",
+			default: 0,
+			label: "Default Index"
+		},
+		selectOnHover: {
+			type: "boolean",
+			default: false,
+			label: "Select on Hover"
+		},
+		thumbnailOpensFullscreen: {
+			type: "boolean",
+			default: false,
+			label: "Thumbnail Opens Fullscreen"
+		},
+		selectedVariantId: {
+			type: "string",
+			label: "Selected Variant ID"
+		}
+	},
+	guideline: "PDP-only entry point for the product media gallery; use GalleryRoot instead when media comes from a custom source rather than a product query. Automatically refreshes media when a shopper picks a VariantSelector swatch (it reads the published variant selection); the selectedVariantId prop is an optional pre-selection fallback. Falls back to product media on error. See product-gallery.md."
+});
+function ProductGalleryRoot({ media, $data, defaultIndex = 0, selectOnHover = false, thumbnailOpensFullscreen = false, selectedVariantId, children, ...props }) {
+	const productSlice = $data ?? null;
+	const publishedSelection = useReactiveVar(selectedVariantVar);
+	const activeVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null) ?? selectedVariantId;
+	if (activeVariantId) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(HotDataProvider, {
+			query: variantQuery,
+			variables: { id: activeVariantId },
+			field: "node",
+			fallbackData: productSlice,
+			children: /* @__PURE__ */ jsx(VariantOrProductGallery, {
+				media,
+				fallbackProductSlice: productSlice,
+				defaultIndex,
+				selectOnHover,
+				thumbnailOpensFullscreen,
+				...props,
+				children
+			})
+		})
+	});
+	const resolvedMedia = media ?? (productSlice ? transformMedia(productSlice) : []);
+	return /* @__PURE__ */ jsx(GalleryRoot, {
+		...props,
+		media: resolvedMedia,
+		defaultIndex,
+		selectOnHover,
+		thumbnailOpensFullscreen,
+		"data-fs-product-gallery": "",
+		children
+	});
+}
+function VariantOrProductGallery({ media, fallbackProductSlice, defaultIndex = 0, selectOnHover = false, thumbnailOpensFullscreen = false, children, ...props }) {
+	const override = useDataOverride(null);
+	const overrideTypename = override?.__typename;
+	let resolvedMedia = [];
+	if (media) resolvedMedia = media;
+	else if (overrideTypename === "Variant") resolvedMedia = transformVariantMedia(override);
+	else if (fallbackProductSlice) resolvedMedia = transformMedia(fallbackProductSlice);
+	return /* @__PURE__ */ jsx(GalleryRoot, {
+		...props,
+		media: resolvedMedia,
+		defaultIndex,
+		selectOnHover,
+		thumbnailOpensFullscreen,
+		"data-fs-product-gallery": "",
+		children
+	});
+}
+const ProductGallery = { Root: ProductGalleryRoot };
+//#endregion
+export { ProductGallery, ProductGalleryRoot, ProductGalleryRootDefinition, transformMedia, transformVariantMedia };
+
+//# sourceMappingURL=product-gallery.js.map

package/dist/matter/product-gallery/product-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-gallery.js","names":[],"sources":["../../../src/matter/product-gallery/product-gallery.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Suspense } from 'react';\nimport type { GalleryMediaItem } from '../../particles/gallery/gallery.js';\nimport { GalleryRoot } from '../../particles/gallery/gallery.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 { ProductGalleryDataFragment, VariantGalleryDataFragment } from '../../sdk/generated/graphql.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragments — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment ProductGalleryData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      media(first: 20) {\n        edges {\n          node {\n            ... on Image {\n              __typename\n              url\n              altText\n            }\n            ... on Video {\n              __typename\n              url\n              altText\n              previewImage {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`);\n\n// Declared so codegen scans the source string and emits VariantGalleryDataFragment.\n// The fragment is spread into variantQuery at the GraphQL layer (...VariantGalleryData);\n// the variable itself is not referenced at runtime.\n// biome-ignore lint/correctness/noUnusedVariables: scanned by codegen\nconst _variantFragment = graphql(`\n  fragment VariantGalleryData on Variant {\n    __typename\n    id\n    images(first: 20) {\n      edges {\n        node {\n          __typename\n          url\n          altText\n        }\n      }\n    }\n    videos {\n      __typename\n      url\n      altText\n      previewImage {\n        url\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantGalleryQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantGalleryData\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<ProductGalleryDataFragment['productBySlug']>;\ntype VariantSlice = VariantGalleryDataFragment;\n\nexport type ProductGalleryRootProps = ComponentPropsWithRef<'div'> & {\n  media?: GalleryMediaItem[];\n  $data?: ProductSlice | null;\n  defaultIndex?: number;\n  selectOnHover?: boolean;\n  thumbnailOpensFullscreen?: boolean;\n  selectedVariantId?: string;\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Transforms\n// ---------------------------------------------------------------------------\n\nexport function transformMedia(product: ProductSlice): GalleryMediaItem[] {\n  return product.media.edges.map(({ node }): GalleryMediaItem => {\n    if (node.__typename === 'Video') {\n      return {\n        type: 'video',\n        url: node.url,\n        altText: node.altText ?? '',\n        ...(node.previewImage?.url ? { previewImageUrl: node.previewImage.url } : {}),\n      };\n    }\n    return {\n      type: 'image',\n      url: node.url,\n      altText: node.altText ?? '',\n    };\n  });\n}\n\nexport function transformVariantMedia(variant: VariantSlice): GalleryMediaItem[] {\n  const images = variant.images.edges.map(\n    ({ node }): GalleryMediaItem => ({\n      type: 'image',\n      url: node.url,\n      altText: node.altText ?? '',\n    }),\n  );\n  const videos = variant.videos.map(\n    (video): GalleryMediaItem => ({\n      type: 'video',\n      url: video.url,\n      altText: video.altText ?? '',\n      ...(video.previewImage?.url ? { previewImageUrl: video.previewImage.url } : {}),\n    }),\n  );\n  return [...images, ...videos];\n}\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const ProductGalleryRootDefinition = defineComponent<ProductGalleryRootProps>({\n  name: 'ProductGalleryRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductGalleryRoot,\n  fragment,\n  editor: { label: 'Product Gallery Root', category: 'commerce' },\n  schema: {\n    defaultIndex: { type: 'number', default: 0, label: 'Default Index' },\n    selectOnHover: { type: 'boolean', default: false, label: 'Select on Hover' },\n    thumbnailOpensFullscreen: { type: 'boolean', default: false, label: 'Thumbnail Opens Fullscreen' },\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'PDP-only entry point for the product media gallery; use GalleryRoot instead when media comes from a custom source rather than a product query. Automatically refreshes media when a shopper picks a VariantSelector swatch (it reads the published variant selection); the selectedVariantId prop is an optional pre-selection fallback. Falls back to product media on error. See product-gallery.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function ProductGalleryRoot({\n  media,\n  $data,\n  defaultIndex = 0,\n  selectOnHover = false,\n  thumbnailOpensFullscreen = false,\n  selectedVariantId,\n  children,\n  ...props\n}: ProductGalleryRootProps) {\n  const productSlice = $data ?? null;\n\n  // The VariantSelector matter publishes the shopper's in-page selection here. Reading it lets the\n  // gallery refresh its media when a swatch changes without page navigation (NFR-1). The explicit\n  // `selectedVariantId` prop is the pre-selection fallback; the live selection wins once set.\n  // Scope the published selection to this product so a swatch picked on another PDP does not make\n  // this gallery fetch a foreign variant's media after client-side navigation.\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          <VariantOrProductGallery\n            media={media}\n            fallbackProductSlice={productSlice}\n            defaultIndex={defaultIndex}\n            selectOnHover={selectOnHover}\n            thumbnailOpensFullscreen={thumbnailOpensFullscreen}\n            {...props}\n          >\n            {children}\n          </VariantOrProductGallery>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const resolvedMedia = media ?? (productSlice ? transformMedia(productSlice) : []);\n\n  return (\n    <GalleryRoot\n      {...props}\n      media={resolvedMedia}\n      defaultIndex={defaultIndex}\n      selectOnHover={selectOnHover}\n      thumbnailOpensFullscreen={thumbnailOpensFullscreen}\n      data-fs-product-gallery=\"\"\n    >\n      {children}\n    </GalleryRoot>\n  );\n}\n\ntype VariantOrProductGalleryProps = Omit<ProductGalleryRootProps, '$data' | 'selectedVariantId'> & {\n  fallbackProductSlice: ProductSlice | null;\n};\n\nfunction VariantOrProductGallery({\n  media,\n  fallbackProductSlice,\n  defaultIndex = 0,\n  selectOnHover = false,\n  thumbnailOpensFullscreen = false,\n  children,\n  ...props\n}: VariantOrProductGalleryProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let resolvedMedia: GalleryMediaItem[] = [];\n  if (media) {\n    resolvedMedia = media;\n  } else if (overrideTypename === 'Variant') {\n    resolvedMedia = transformVariantMedia(override as VariantSlice);\n  } else if (fallbackProductSlice) {\n    resolvedMedia = transformMedia(fallbackProductSlice);\n  }\n\n  return (\n    <GalleryRoot\n      {...props}\n      media={resolvedMedia}\n      defaultIndex={defaultIndex}\n      selectOnHover={selectOnHover}\n      thumbnailOpensFullscreen={thumbnailOpensFullscreen}\n      data-fs-product-gallery=\"\"\n    >\n      {children}\n    </GalleryRoot>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductGallery = {\n  Root: ProductGalleryRoot,\n};\n"],"mappings":"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"}

package/dist/matter/product-information/product-information.d.ts

@@ -0,0 +1,61 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ProductInformationDataFragment } from "../../sdk/generated/graphql.js";
+import { ComponentPropsWithRef, ComponentPropsWithoutRef } from "react";
+//#region src/matter/product-information/product-information.d.ts
+type ProductSlice = NonNullable<ProductInformationDataFragment['productBySlug']>;
+type TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type DescriptionFormat = 'auto' | 'plain' | 'html';
+type Collapse = 'none' | 'showMore' | 'section';
+export type ProductInformationRootProps = ComponentPropsWithRef<'div'> & {
+  $data?: ProductSlice | null;
+};
+export type ProductInformationTitleProps = Omit<ComponentPropsWithRef<'h1'>, 'children'> & {
+  as?: TitleAs;
+  separator?: string;
+};
+export type ProductInformationDescriptionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {
+  /**
+   * Controls how the description renders.
+   * - `'auto'` (default) — prefers `descriptionHtml`; falls back to plain `description`; renders nothing when both are absent.
+   * - `'plain'` — strict plain text from `description`; never reads `descriptionHtml`.
+   * - `'html'` — strict rich HTML from `descriptionHtml` via `dangerouslySetInnerHTML`; renders nothing when absent (no fallback).
+   *
+   * Rich HTML is safe because Storefront API Core sanitizes `descriptionHtml` upstream.
+   *
+   * The rendered element follows from the resolved branch: plain text renders as `<p>`;
+   * rich HTML renders as `<div>` (so block-level markup inside `descriptionHtml` remains valid DOM).
+   * Both wrappers carry `data-fs-text=""` so project-level `Text` typography cascades automatically.
+   */
+  format?: DescriptionFormat;
+  collapse?: Collapse;
+  defaultExpanded?: boolean;
+  collapsedLines?: number;
+  moreLabel?: string;
+  lessLabel?: string;
+};
+export type ProductInformationBrandProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
+export type ProductInformationSkuProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
+export type ProductInformationReferenceIdProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
+export declare const ProductInformationRootDefinition: ComponentDefinition<ProductInformationRootProps>;
+export declare const ProductInformationTitleDefinition: ComponentDefinition<ProductInformationTitleProps>;
+export declare const ProductInformationDescriptionDefinition: ComponentDefinition<ProductInformationDescriptionProps>;
+export declare const ProductInformationBrandDefinition: ComponentDefinition<ProductInformationBrandProps>;
+export declare const ProductInformationSkuDefinition: ComponentDefinition<ProductInformationSkuProps>;
+export declare const ProductInformationReferenceIdDefinition: ComponentDefinition<ProductInformationReferenceIdProps>;
+export declare function ProductInformationRoot({ $data: $dataProp, className, children, ...props }: ProductInformationRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductInformationTitle({ as, separator, className, ...props }: ProductInformationTitleProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductInformationDescription({ format, collapse, defaultExpanded, collapsedLines, moreLabel, lessLabel, className, ...props }: ProductInformationDescriptionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductInformationBrand({ className, ...props }: ProductInformationBrandProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductInformationSku({ className, ...props }: ProductInformationSkuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductInformationReferenceId({ className, ...props }: ProductInformationReferenceIdProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ProductInformation: {
+  Root: typeof ProductInformationRoot;
+  Title: typeof ProductInformationTitle;
+  Description: typeof ProductInformationDescription;
+  Brand: typeof ProductInformationBrand;
+  Sku: typeof ProductInformationSku;
+  ReferenceId: typeof ProductInformationReferenceId;
+};
+//#endregion
+//# sourceMappingURL=product-information.d.ts.map