@faststore/core 3.5.1 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.5.1",
+  "version": "3.7.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,12 +43,12 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.5.0",
-    "@faststore/components": "^3.5.0",
+    "@faststore/api": "^3.7.0",
+    "@faststore/components": "^3.7.0",
     "@faststore/graphql-utils": "^3.5.0",
     "@faststore/lighthouse": "^3.5.0",
     "@faststore/sdk": "^3.5.0",
-    "@faststore/ui": "^3.5.0",
+    "@faststore/ui": "^3.7.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "63d97909ce64bf874209853f0c94030eeaa2ce22"
+  "gitHead": "b692b179d39c24f590083cc0a1fdaaa779aa6dd9"
 }

package/src/components/sections/ProductDetails/DefaultComponents.ts

@@ -9,13 +9,17 @@ import {
   QuantitySelector as UIQuantitySelector,
   ImageGalleryViewer as UIImageGalleryViewer,
   ImageGallery as UIImageGallery,
+  SKUMatrix as UISKUMatrix,
+  SKUMatrixSidebar as UISKUMatrixSidebar,
+  SKUMatrixTrigger as UISKUMatrixTrigger,
 } from '@faststore/ui'
 
 import LocalImageGallery from 'src/components/ui/ImageGallery'
 import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
 import { Image } from 'src/components/ui/Image'
 import LocalNotAvailableButton from 'src/components/product/NotAvailableButton'
-import LocalProductDescription from 'src/components/ui/ProductDescription'
+import LocalSKUMatrixSidebar from 'src/components/ui/SKUMatrix/SKUMatrixSidebar'
+import LocalProductDescription from 'src/components/ui/ProductDescription/ProductDescription'
 import { ProductDetailsSettings as LocalProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
 export const ProductDetailsDefaultComponents = {
@@ -29,9 +33,13 @@ export const ProductDetailsDefaultComponents = {
   ShippingSimulation: UIShippingSimulation,
   ImageGallery: UIImageGallery,
   ImageGalleryViewer: UIImageGalleryViewer,
+  SKUMatrix: UISKUMatrix,
+  SKUMatrixTrigger: UISKUMatrixTrigger,
+  SKUMatrixSidebar: UISKUMatrixSidebar,
   __experimentalImageGalleryImage: Image,
   __experimentalImageGallery: LocalImageGallery,
   __experimentalShippingSimulation: LocalShippingSimulation,
+  __experimentalSKUMatrixSidebar: LocalSKUMatrixSidebar,
   __experimentalNotAvailableButton: LocalNotAvailableButton,
   __experimentalProductDescription: LocalProductDescription,
   __experimentalProductDetailsSettings: LocalProductDetailsSettings,

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -55,6 +55,21 @@ export interface ProductDetailsProps {
     usePriceWithTaxes?: boolean
     taxesLabel?: string
   }
+  skuMatrix?: {
+    shouldDisplaySKUMatrix?: boolean
+    triggerButtonLabel: string
+    separatorButtonsText: string
+    columns: {
+      name: string
+      additionalColumns: Array<{ label: string; value: string }>
+      availability: {
+        label: string
+        stockDisplaySettings: 'showAvailability' | 'showStockQuantity'
+      }
+      price: number
+      quantitySelector: number
+    }
+  }
 }
 
 function ProductDetails({
@@ -74,6 +89,7 @@ function ProductDetails({
     initiallyExpanded: productDescriptionInitiallyExpanded,
     displayDescription: shouldDisplayProductDescription,
   },
+  skuMatrix,
   notAvailableButton: { title: notAvailableButtonTitle },
   quantitySelector,
   taxesConfiguration,
@@ -81,17 +97,19 @@ function ProductDetails({
   const {
     DiscountBadge,
     ProductTitle,
+    SKUMatrix,
+    SKUMatrixTrigger,
     __experimentalImageGallery: ImageGallery,
     __experimentalShippingSimulation: ShippingSimulation,
     __experimentalNotAvailableButton: NotAvailableButton,
     __experimentalProductDescription: ProductDescription,
     __experimentalProductDetailsSettings: ProductDetailsSettings,
+    __experimentalSKUMatrixSidebar: SKUMatrixSidebar,
   } = useOverrideComponents<'ProductDetails'>()
   const { currency } = useSession()
   const context = usePDP()
   const { product, isValidating } = context?.data
   const [quantity, setQuantity] = useState(1)
-
   if (!product) {
     throw new Error('NotFound')
   }
@@ -104,7 +122,11 @@ function ProductDetails({
     brand,
     isVariantOf,
     description,
-    isVariantOf: { name, productGroupID: productId },
+    isVariantOf: {
+      name,
+      productGroupID: productId,
+      skuVariants: { slugsMap },
+    },
     image: productImages,
     offers: {
       offers: [{ availability, price, listPrice, listPriceWithTaxes, seller }],
@@ -213,6 +235,27 @@ function ProductDetails({
                 isValidating={isValidating}
                 taxesConfiguration={taxesConfiguration}
               />
+
+              {skuMatrix?.shouldDisplaySKUMatrix &&
+                Object.keys(slugsMap).length > 1 && (
+                  <>
+                    <div data-fs-product-details-settings-separator>
+                      {skuMatrix.separatorButtonsText}
+                    </div>
+
+                    <SKUMatrix.Component>
+                      <SKUMatrixTrigger.Component disabled={isValidating}>
+                        {skuMatrix.triggerButtonLabel}
+                      </SKUMatrixTrigger.Component>
+
+                      <SKUMatrixSidebar.Component
+                        formatter={useFormattedPrice}
+                        columns={skuMatrix.columns}
+                        overlayProps={{ className: styles.section }}
+                      />
+                    </SKUMatrix.Component>
+                  </>
+                )}
             </section>
 
             {!outOfStock && (
@@ -277,7 +320,7 @@ export const fragment = gql(`
     isVariantOf {
       name
       productGroupID
-      skuVariants {
+			skuVariants {
         activeVariations
         slugsMap
         availableVariations

package/src/components/sections/ProductDetails/section.module.scss

@@ -1,9 +1,13 @@
 @layer components {
   .section {
     // Taxes label
-    --fs-product-details-taxes-label-color        : var(--fs-color-info-text);
-    --fs-product-details-taxes-text-size          : var(--fs-text-size-tiny);
-    --fs-product-details-taxes-text-weight        : var(--fs-text-weight-regular);
+    --fs-product-details-taxes-label-color      : var(--fs-color-info-text);
+    --fs-product-details-taxes-text-size        : var(--fs-text-size-tiny);
+    --fs-product-details-taxes-text-weight      : var(--fs-text-weight-regular);
+
+    // Separator colors
+    --fs-product-details-separator-color        : var(--fs-color-neutral-2);
+    --fs-product-details-separator-color-text   : var(--fs-color-text-light);
 
     margin-top: 0;
 
@@ -29,11 +33,43 @@
     @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
     @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
     @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SKUMatrix/styles.scss";
 
     [data-fs-product-details-taxes-label] {
       font-size: var(--fs-product-details-taxes-text-size);
       font-weight: var(--fs-product-details-taxes-text-weight);
       color: var(--fs-product-details-taxes-label-color);
     }
+
+    [data-fs-product-details-settings-separator] {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--fs-product-details-separator-color-text);
+
+      &::after {
+        display: inline-block;
+        width: 45%;
+        height: 1px;
+        content: "";
+        background-color: var(--fs-product-details-separator-color);
+      }
+
+      &::before {
+        display: inline-block;
+        width: 45%;
+        height: 1px;
+        content: "";
+        background-color: var(--fs-product-details-separator-color);
+      }
+    }
+
+    [data-fs-sku-matrix] {
+      > [data-fs-button] {
+        width: 100%;
+      }
+    }
   }
 }

package/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx

@@ -0,0 +1,132 @@
+import type { SKUMatrixSidebarProps as UISKUMatrixSidebarProps } from '@faststore/ui'
+import {
+  SKUMatrixSidebar as UISKUMatrixSidebar,
+  useSKUMatrix,
+} from '@faststore/ui'
+import { gql } from '@generated/gql'
+import { useBuyButton } from 'src/sdk/cart/useBuyButton'
+import { usePDP } from 'src/sdk/overrides/PageProvider'
+import { useAllVariantProducts } from 'src/sdk/product/useAllVariantProducts'
+
+interface SKUMatrixProps extends UISKUMatrixSidebarProps {}
+
+function SKUMatrixSidebar(props: SKUMatrixProps) {
+  const {
+    data: { product },
+  } = usePDP()
+
+  const { allVariantProducts, isOpen, setAllVariantProducts } = useSKUMatrix()
+  const { isValidating } = useAllVariantProducts(
+    product.id,
+    isOpen,
+    setAllVariantProducts
+  )
+
+  const {
+    gtin,
+    unitMultiplier,
+    brand,
+    additionalProperty,
+    isVariantOf,
+    offers: {
+      offers: [{ seller }],
+    },
+  } = product
+
+  const buyButtonProps = allVariantProducts
+    .filter((item) => item.selectedCount)
+    .map((item) => {
+      const {
+        offers: {
+          offers: [{ price, priceWithTaxes, listPrice, listPriceWithTaxes }],
+        },
+      } = item
+
+      return {
+        id: item.id,
+        price,
+        priceWithTaxes,
+        listPrice,
+        listPriceWithTaxes,
+        seller,
+        quantity: item.selectedCount,
+        itemOffered: {
+          sku: item.id,
+          name: item.name,
+          gtin,
+          image: [item.image],
+          brand,
+          isVariantOf: {
+            ...isVariantOf,
+            skuVariants: {
+              ...isVariantOf.skuVariants,
+              activeVariations: item.specifications,
+            },
+          },
+          additionalProperty,
+          unitMultiplier,
+        },
+      }
+    })
+
+  const buyProps = useBuyButton(buyButtonProps)
+
+  return (
+    <UISKUMatrixSidebar
+      buyProps={buyProps}
+      title={product.isVariantOf.name ?? ''}
+      loading={isValidating}
+      {...props}
+    />
+  )
+}
+
+export const fragment = gql(`
+  fragment ProductSKUMatrixSidebarFragment_product on StoreProduct {
+    id: productID
+    isVariantOf {
+      name
+      productGroupID
+      skuVariants {
+        activeVariations
+        slugsMap
+        availableVariations
+        allVariantProducts {
+					sku
+          name
+          image {
+            url
+            alternateName
+          }
+          offers {
+            highPrice
+            lowPrice
+            lowPriceWithTaxes
+            offerCount
+            priceCurrency
+            offers {
+              listPrice
+              listPriceWithTaxes
+              sellingPrice
+              priceCurrency
+              price
+              priceWithTaxes
+              priceValidUntil
+              itemCondition
+              availability
+              quantity
+            }
+          }
+          additionalProperty {
+            propertyID
+            value
+            name
+            valueReference
+          }
+        }
+      }
+    }
+  }
+`)
+
+export default SKUMatrixSidebar

package/src/sdk/cart/useBuyButton.ts

@@ -8,12 +8,14 @@ import { useUI } from '@faststore/ui'
 import { useSession } from '../session'
 import { cartStore } from './index'
 
-export const useBuyButton = (item: CartItem | null) => {
+export const useBuyButton = (item: CartItem | CartItem[] | null) => {
   const { openCart } = useUI()
   const {
     currency: { code },
   } = useSession()
 
+  const itemIsArray = Array.isArray(item)
+
   const onClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault()
@@ -22,6 +24,33 @@ export const useBuyButton = (item: CartItem | null) => {
         return
       }
 
+      const value = itemIsArray
+        ? item.reduce((sum, item) => (sum += item.price * item.quantity), 0)
+        : item.price * item.quantity
+
+      function generatedItem(item: CartItem) {
+        return {
+          item_id: item.itemOffered.isVariantOf.productGroupID,
+          item_name: item.itemOffered.isVariantOf.name,
+          item_brand: item.itemOffered.brand.name,
+          item_variant: item.itemOffered.sku,
+          quantity: item.quantity,
+          price: item.price,
+          discount: item.listPrice - item.price,
+          currency: code as CurrencyCode,
+          item_variant_name: item.itemOffered.name,
+          product_reference_id: item.itemOffered.gtin,
+        }
+      }
+
+      function getItems() {
+        if (!itemIsArray) {
+          return [generatedItem(item)]
+        }
+
+        return item.map(generatedItem)
+      }
+
       import('@faststore/sdk').then(({ sendAnalyticsEvent }) => {
         sendAnalyticsEvent<AddToCartEvent<AnalyticsItem>>({
           name: 'add_to_cart',
@@ -29,35 +58,27 @@ export const useBuyButton = (item: CartItem | null) => {
             currency: code as CurrencyCode,
             // TODO: In the future, we can explore more robust ways of
             // calculating the value (gift items, discounts, etc.).
-            value: item.price * item.quantity,
-            items: [
-              {
-                item_id: item.itemOffered.isVariantOf.productGroupID,
-                item_name: item.itemOffered.isVariantOf.name,
-                item_brand: item.itemOffered.brand.name,
-                item_variant: item.itemOffered.sku,
-                quantity: item.quantity,
-                price: item.price,
-                discount: item.listPrice - item.price,
-                currency: code as CurrencyCode,
-                item_variant_name: item.itemOffered.name,
-                product_reference_id: item.itemOffered.gtin,
-              },
-            ],
+            value,
+            items: getItems(),
           },
         })
       })
 
-      cartStore.addItem(item)
+      itemIsArray
+        ? item.forEach((value) => cartStore.addItem(value))
+        : cartStore.addItem(item)
+
       openCart()
     },
-    [code, item, openCart]
+    [code, item, openCart, itemIsArray]
   )
 
   return {
     onClick,
     'data-testid': 'buy-button',
-    'data-sku': item?.itemOffered.sku,
-    'data-seller': item?.seller.identifier,
+    'data-sku': itemIsArray ? 'sku-matrix-sidebar' : item?.itemOffered.sku,
+    'data-seller': itemIsArray
+      ? item[0]?.seller.identifier
+      : item?.seller.identifier,
   }
 }

package/src/sdk/product/useAllVariantProducts.ts

@@ -0,0 +1,114 @@
+import { useMemo } from 'react'
+
+import { gql } from '@generated'
+import type {
+  ClientAllVariantProductsQueryQuery,
+  ClientProductQueryQueryVariables,
+} from '@generated/graphql'
+
+import { useQuery } from '../graphql/useQuery'
+import { useSession } from '../session'
+
+const query = gql(`
+  query ClientAllVariantProductsQuery($locator: [IStoreSelectedFacet!]!) {
+      product(locator: $locator) {
+      ...ProductSKUMatrixSidebarFragment_product
+    }
+  }
+`)
+
+type FormattedVariantProduct = {
+  id: string
+  name: string
+  image: {
+    url: string
+    alternateName: string
+  }
+  inventory: number
+  selectedCount: number
+  availability: string
+  offers: ClientAllVariantProductsQueryQuery['product']['isVariantOf']['skuVariants']['allVariantProducts'][0]['offers']
+  price: number
+  listPrice: number
+  priceWithTaxes: number
+  listPriceWithTaxes: number
+  specifications: Record<string, string>
+}
+
+export const useAllVariantProducts = <
+  T extends ClientAllVariantProductsQueryQuery
+>(
+  productID: string,
+  enabled: boolean,
+  processResponse: (data: FormattedVariantProduct[]) => void,
+  fallbackData?: T
+) => {
+  const { channel, locale } = useSession()
+  const variables = useMemo(() => {
+    if (!channel) {
+      throw new Error(
+        `useAllVariantProducts: 'channel' from session is an empty string.`
+      )
+    }
+
+    return {
+      locator: [
+        { key: 'id', value: productID },
+        { key: 'channel', value: channel },
+        { key: 'locale', value: locale },
+      ],
+    }
+  }, [channel, locale, productID])
+
+  return useQuery<FormattedVariantProduct[], ClientProductQueryQueryVariables>(
+    query,
+    variables,
+    {
+      fallbackData,
+      revalidateOnMount: true,
+      doNotRun: !enabled,
+      onSuccess: (data: ClientAllVariantProductsQueryQuery) => {
+        const formattedData =
+          data.product.isVariantOf.skuVariants.allVariantProducts.map(
+            (item) => {
+              const specifications = item.additionalProperty.reduce<{
+                [key: string]: any
+              }>(
+                (acc, prop) => ({
+                  ...acc,
+                  [prop.name.toLowerCase()]: prop.value,
+                }),
+                {}
+              )
+
+              const outOfStock =
+                item.offers.offers[0].availability ===
+                'https://schema.org/OutOfStock'
+
+              return {
+                id: item.sku,
+                name: item.name,
+                image: {
+                  url: item.image[0].url,
+                  alternateName: item.image[0].alternateName,
+                },
+                inventory: item.offers.offers[0].quantity,
+                availability: outOfStock ? 'outOfStock' : 'available',
+                price: item.offers.offers[0].price,
+                listPrice: item.offers.offers[0].listPrice,
+                priceWithTaxes: item.offers.offers[0].priceWithTaxes,
+                listPriceWithTaxes: item.offers.offers[0].listPriceWithTaxes,
+                specifications,
+                offers: item.offers,
+                selectedCount: 0,
+              }
+            }
+          )
+
+        processResponse(
+          formattedData.sort((a, b) => a.name.localeCompare(b.name))
+        )
+      },
+    }
+  )
+}

package/src/typings/overrides.ts

@@ -39,6 +39,9 @@ import type {
   ShippingSimulationProps,
   SkeletonProps,
   SkuSelectorProps,
+  SKUMatrixProps,
+  SKUMatrixTriggerProps,
+  SKUMatrixSidebarProps,
 } from '@faststore/ui'
 
 import type {
@@ -81,10 +84,10 @@ export type SectionOverride = {
 export type OverrideComponentsForSection<
   Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
 > = {
-    // The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
-    [K in keyof SectionsOverrides as SectionsOverrides[K] extends {
-      Section: never
-    }
+// The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
+[K in keyof SectionsOverrides as SectionsOverrides[K] extends {
+  Section: never
+}
     ? never
     : // In the second 'extends' condition, we check if the section matches the one we're looking for
     SectionsOverrides[K] extends {
@@ -269,12 +272,25 @@ export type SectionsOverrides = {
         ImageGalleryViewerProps,
         ImageGalleryViewerProps
       >
+      SKUMatrix: ComponentOverrideDefinition<SKUMatrixProps, SKUMatrixProps>
+      SKUMatrixTrigger: ComponentOverrideDefinition<
+        SKUMatrixTriggerProps,
+        SKUMatrixTriggerProps
+      >
+      SKUMatrixSidebar: ComponentOverrideDefinition<
+        SKUMatrixSidebarProps,
+        SKUMatrixSidebarProps
+      >
       __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
       __experimentalImageGallery: ComponentOverrideDefinition<any, any>
       __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
       __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
       __experimentalProductDescription: ComponentOverrideDefinition<any, any>
-      __experimentalProductDetailsSettings: ComponentOverrideDefinition<any, any>
+      __experimentalSKUMatrixSidebar: ComponentOverrideDefinition<any, any>
+      __experimentalProductDetailsSettings: ComponentOverrideDefinition<
+        any,
+        any
+      >
     }
   }
   ProductGallery: {

package/.next/server/chunks/463.js

@@ -1 +0,0 @@
-"use strict";exports.id=463,exports.ids=[463],exports.modules={6476:(e,t,a)=>{a.d(t,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var l=a(6689),r=a.n(l),n=a(3339);let __WEBPACK_DEFAULT_EXPORT__=function({testId:e="fs-buy-button",icon:t,children:a,...l}){return r().createElement(n.Z,{"data-fs-buy-button":!0,icon:t,iconPosition:"left","data-testid":e,...l},a)}},7876:(e,t,a)=>{a.d(t,{Z:()=>o});var l=a(6689),r=a.n(l),n=a(3024);let i=(0,l.forwardRef)(function({title:e,label:t,refTag:a="Ref.: ",refNumber:l,testId:i="fs-product-title",ratingValue:o,...s},c){return r().createElement("header",{ref:c,"data-fs-product-title":!0,"data-testid":i,...s},r().createElement("div",{"data-fs-product-title-header":!0},e,!!t&&t),(l||o)&&r().createElement("div",{"data-fs-product-title-addendum":!0},o&&r().createElement(n.Z,{value:o}),l&&r().createElement(r().Fragment,null,a," ",l)))}),o=i},6693:(e,t,a)=>{a.d(t,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var l=a(6689),r=a.n(l),n=a(7041),i=a(2614),o=a(2256);let __WEBPACK_DEFAULT_EXPORT__=({max:e,min:t=1,unitMultiplier:a=1,useUnitMultiplier:s,initial:c,disabled:u=!1,onChange:d,onValidateBlur:m,testId:f="fs-quantity-selector",...g})=>{let[E,h]=(0,l.useState)(c??t),[p,_]=(0,l.useState)(E*a),roundUpQuantityIfNeeded=e=>s?Math.ceil(e/a)*a:e,b=E===t,y=E===e,changeQuantity=e=>{let t=validateQuantityBounds(E+e);d?.(t),h(t),_(t*a)};function validateQuantityBounds(l){let r=t?Math.max(l,t):l;return e?Math.min(r,s?e*a:e):r}return(0,l.useEffect)(()=>{c&&h(c)},[c]),r().createElement("div",{"data-fs-quantity-selector":u?"disabled":"true","data-testid":f,...g},r().createElement(n.Z,{"data-quantity-selector-button":"left",icon:r().createElement(i.Z,{name:"Minus",width:16,height:16,weight:"bold"}),"aria-label":"Decrement Quantity","aria-controls":"quantity-selector-input",disabled:b||u,onClick:()=>changeQuantity(-1),testId:`${f}-left-button`,size:"small"}),r().createElement(o.Z,{"data-quantity-selector-input":!0,id:"quantity-selector-input","aria-label":"Quantity",value:s?p:E,onChange:e=>{let t=e.target.value.replace(/\D/g,"");h(Number(t))},onBlur:function(){let l=validateQuantityBounds(E),r=roundUpQuantityIfNeeded(l),n=e??(t?Math.max(E,t):E),i=E>n||E<t;i&&m?.(t,n,r),h(()=>(_(r),d?.(r/a),r/a))},onInput:e=>{let t=e.currentTarget;t.value=t.value.replace(/\D/g,"")},disabled:u}),r().createElement(n.Z,{"data-quantity-selector-button":"right","aria-controls":"quantity-selector-input","aria-label":"Increment Quantity",disabled:y||u,icon:r().createElement(i.Z,{name:"Plus",width:16,height:16,weight:"bold"}),onClick:()=>changeQuantity(1),testId:`${f}-right-button`,size:"small"}))}},5136:(e,t,a)=>{a.d(t,{Z:()=>c});var l=a(6689),r=a.n(l),n=a(1953),i=a(727),o=a(5450);let getImageName=e=>{let t=new URL(e).pathname,a=t.split("/").slice(-1)[0];return a},useDefineVariant=(e,t)=>(0,l.useMemo)(()=>{if(t)return t;let a=e.every(e=>e.hexColor);if(a)return"color";let l=e[0]?.src&&getImageName(e[0].src);if(l&&1===e.length)return"image";let r=e.every(e=>{if(!e.src)return!0;let t=getImageName(e.src);return t===l});return r?"label":"image"},[e,t]),useSkuSlug=(e,t,a,r)=>{let n=(0,l.useCallback)(l=>{if(r)return{getItemHrefProp:r};let n=`/${function(e,t,a){let l=Object.entries(t).flat().join("-");if(l in e)return e[l];let r=Object.keys(e),n=`${a}-${t[a]}`,i=r.filter(e=>e.includes(n)),o=i.length>1?function(e,t){let[a,l]=t.split("-");return e.find(e=>{let t=function(e){let t={},a=e.split("-");for(let e=0;e<a.length;e+=2){let l=a[e].trim(),r=a[e+1]?a[e+1].trim():"";t[l]=r}return t}(e);return t[a]===l})}(i,n):i[0];return e[o??r[0]]}(t,{...e,[a]:l.value},a)}/p`;return n},[e,r,t,a]);return{getItemHref:n}},ImageComponentFallback=({src:e,alt:t,...a})=>r().createElement("img",{src:e,alt:t,...a}),s=(0,l.forwardRef)(function({availableVariations:e,skuPropertyName:t,testId:a,activeVariations:l,linkProps:s,slugsMap:c,getItemHref:u,ImageComponent:d=ImageComponentFallback,variant:m,...f},g){let E=l[t],h=e[t],p=useDefineVariant(h,m),{getItemHref:_}=useSkuSlug(l,c,t,u);return r().createElement("div",{ref:g,"data-fs-sku-selector":!0,"data-testid":a,"data-fs-sku-selector-variant":p,...f},t&&r().createElement(n.Z,{"data-fs-sku-selector-title":!0},t,": ",r().createElement("strong",null,E)),r().createElement("ul",{"data-fs-sku-selector-list":!0},h.map((e,a)=>r().createElement("li",{key:String(a),title:e.label,"data-fs-sku-selector-option":!0,"data-fs-sku-selector-disabled":e.disabled,"data-fs-sku-selector-checked":e.value===l[t]},r().createElement(i.Z,{"data-fs-sku-selector-option-link":!0,href:_(e),...s},r().createElement(o.Z,{text:e.label})),"label"===p&&r().createElement("span",null,e.value),"image"===p&&d&&r().createElement("span",null,r().createElement(d,{src:e.src??"",alt:e.alt??"","data-fs-sku-selector-option-image":!0})),"color"===p&&r().createElement("span",null,r().createElement("div",{"data-fs-sku-selector-option-color":!0,title:e.value,style:{"--data-fs-sku-selector-option-color-bkg-color":e.hexColor}}))))))}),c=s},7336:(e,t,a)=>{a.d(t,{Z:()=>i});var l=a(6689),r=a.n(l);let n=(0,l.forwardRef)(function({children:e,variant:t="colored",testId:a="fs-table",...l},n){return r().createElement("div",{"data-fs-table":!0},r().createElement("table",{ref:n,"data-fs-table-content":!0,"data-fs-table-variant":t,"data-testid":a,...l},e))}),i=n},9336:(e,t,a)=>{a.d(t,{Z:()=>i});var l=a(6689),r=a.n(l);let n=(0,l.forwardRef)(function({children:e,testId:t="fs-table-body",...a},l){return r().createElement("tbody",{ref:l,"data-testid":t,"data-fs-table-body":!0,...a},e)}),i=n},4256:(e,t,a)=>{a.d(t,{Z:()=>i});var l=a(6689),r=a.n(l);let n=(0,l.forwardRef)(function({scope:e,align:t,children:a,variant:l="data",testId:n="fs-table-cell",...i},o){return r().createElement("header"===l?"th":"td",{ref:o,"data-fs-table-cell":l,"data-fs-table-cell-align":t,"data-testid":n,scope:e,...i},a)}),i=n},4236:(e,t,a)=>{a.d(t,{Z:()=>i});var l=a(6689),r=a.n(l);let n=(0,l.forwardRef)(function({children:e,testId:t="fs-table-row",...a},l){return r().createElement("tr",{ref:l,"data-fs-table-row":!0,"data-testid":t,...a},e)}),i=n},165:(e,t,a)=>{a.d(t,{Z:()=>o});var l=a(6689),r=a.n(l),n=a(9362);let i=(0,l.forwardRef)(function({images:e,children:t,ImageComponent:a,selectedImageIdx:l,setSelectedImageIdx:i,testId:o="fs-image-gallery",...s},c){let u=e.length>1;return r().createElement("section",{ref:c,"data-fs-image-gallery":u?"with-selector":"without-selector","data-testid":o,...s},t,u&&r().createElement(n.Z,{images:e,onSelect:i,currentImageIdx:l,ImageComponent:a}))}),o=i},9362:(e,t,a)=>{a.d(t,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var l=a(6689),r=a.n(l),n=a(9785),i=a(7041),o=a(2614),s=a(3339);let moveScroll=(e,t)=>{e&&(e.scrollHeight>e.clientHeight?(e.style.overflow="auto",window.requestAnimationFrame(()=>e.scrollTo({top:t,behavior:"smooth"})),setTimeout(()=>e.style.overflow="hidden",2e3)):e.scrollLeft+=t)},hasScroll=e=>!!e&&(e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth),__WEBPACK_DEFAULT_EXPORT__=function({images:e,onSelect:t,ImageComponent:a,currentImageIdx:c,testId:u="fs-image-gallery-selector","aria-label":d="Product Images",navigationButtonLeftAriaLabel:m="Backward slide image selector",navigationButtonRightAriaLabel:f="Forward slide image selector"}){let g=(0,l.useRef)(null),E=hasScroll(g.current),[h,p]=(0,l.useState)(!0),[_,b]=(0,l.useState)(!0),y=(0,l.useCallback)((t,a)=>{0===t&&p(a),t===e.length-1&&b(a)},[e.length]);return r().createElement("section",{"data-fs-image-gallery-selector":!0,"data-testid":u,"aria-label":d},E&&!h&&r().createElement("div",{"data-fs-image-gallery-selector-control":!0},r().createElement(i.Z,{"data-fs-image-gallery-selector-control-button":!0,"aria-label":m,icon:r().createElement(o.Z,{name:"ArrowLeft"}),onClick:()=>moveScroll(g.current,-400)})),r().createElement("div",{"data-fs-image-gallery-selector-elements":!0,ref:g},e.map((l,i)=>r().createElement(n.InView,{key:i,onChange:e=>y(i,e)},r().createElement(s.Z,{key:i,"aria-label":`${l.alternateName} - Image ${i+1} of ${e.length}`,onClick:()=>t(i),"data-fs-image-gallery-selector-thumbnail":i===c?"selected":"true"},r().createElement(a,{url:l.url??"",loading:0===i?"eager":"lazy",alternateName:l.alternateName??""}))))),E&&!_&&r().createElement("div",{"data-fs-image-gallery-selector-control":!0},r().createElement(i.Z,{"data-fs-image-gallery-selector-control-button":!0,"aria-label":f,icon:r().createElement(o.Z,{name:"ArrowLeft"}),onClick:()=>moveScroll(g.current,400)})))}},1431:(e,t,a)=>{a.d(t,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var l=a(6689),r=a.n(l);let __WEBPACK_DEFAULT_EXPORT__=({children:e})=>r().createElement(r().Fragment,null,e)},8878:(e,t,a)=>{a.d(t,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var l=a(6689),r=a.n(l),n=a(3779),i=a(727),o=a(2614),s=a(7336),c=a(9336),u=a(4236),d=a(4256),m=a(9767);let __WEBPACK_DEFAULT_EXPORT__=function({testId:e="fs-shipping-simulation",formatter:t,title:a="Shipping",inputLabel:l="Postal Code",optionsLabel:f="Shipping options",idkPostalCodeLinkProps:g,onInput:E,onSubmit:h,onClear:p,location:_,options:b=[],displayClearButton:y=!1,errorMessage:v,postalCode:Z,...k}){let w=!!b&&b.length>0;return r().createElement("section",{"data-fs-shipping-simulation":!0,"data-fs-shipping-simulation-empty":w?"false":"true","data-testid":e,...k},r().createElement("h2",{"data-fs-shipping-simulation-title":!0},a),r().createElement(n.Z,{actionable:!0,error:v,id:`${e}-input-field`,label:l,value:Z,onInput:e=>E?.(e),onSubmit:()=>h?.(),onClear:()=>p?.(),displayClearButton:y}),r().createElement(i.Z,{href:"/","data-fs-shipping-simulation-link":!0,size:"small",...g},g?.children??r().createElement(r().Fragment,null,"I don't know my Postal Code",r().createElement(o.Z,{name:"ArrowSquareOut",width:20,height:20}))),w&&r().createElement(r().Fragment,null,r().createElement("header",{"data-fs-shipping-simulation-header":!0},r().createElement("h3",{"data-fs-shipping-simulation-subtitle":!0},f),r().createElement("p",{"data-fs-shipping-simulation-location":!0},_)),r().createElement(s.Z,null,r().createElement(c.Z,null,b.map(e=>r().createElement(u.Z,{key:e.carrier},r().createElement(d.Z,{align:"left"},e.carrier),r().createElement(d.Z,null,e.localizedEstimates),r().createElement(d.Z,{align:"right"},e.price&&r().createElement(m.Z,{formatter:t,value:e.price,SRText:"price"}))))))))}}};

package/.next/static/6ZNleGM8J-r36JTXegNEr/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,t,e,i){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,c,a,"static/css/b1806cbafd0c1f81.css","static/chunks/pages/index-ad532cf8840c5d3f.js"],"/404":[s,c,a,t,"static/chunks/pages/404-358f6795222bf991.js"],"/500":[s,c,a,t,"static/chunks/pages/500-7adc48c3231ccee1.js"],"/_error":["static/chunks/pages/_error-85cabf0d7a5ea2f2.js"],"/account":[s,c,a,"static/chunks/pages/account-9db0ef5c4174c7dd.js"],"/checkout":[s,c,a,"static/chunks/pages/checkout-abaa6374ae946641.js"],"/login":[s,c,a,t,"static/chunks/pages/login-8d2eb8db226d6363.js"],"/s":[s,c,a,e,i,t,"static/chunks/pages/s-ba5734fbe496d9af.js"],"/[slug]/p":[s,c,a,"static/chunks/9638-24a86482d4a4b434.js","static/css/bf1560439df2c1a1.css","static/css/e3ff5d95518a5c79.css","static/chunks/6379-fc541ff2f12fab06.js","static/css/9718991cd57978e9.css","static/chunks/pages/[slug]/p-b5e429fbf8e96d36.js"],"/[...slug]":[s,c,a,e,i,"static/chunks/pages/[...slug]-0203b74377537f7d.js"],sortedPages:["/","/404","/500","/_app","/_error","/account","/checkout","/login","/s","/[slug]/p","/[...slug]"]}}("static/chunks/6941-6223429b182b7109.js","static/css/93d239c461485bdf.css","static/chunks/1550-b2d0f274d1db008a.js","static/css/2980acad3f8e1028.css","static/css/6e34c6c07086e3df.css","static/chunks/4501-7857a5a8218d9f58.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();