@faststore/core 3.6.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.6.0",
+  "version": "3.8.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.6.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": "be4c6d948145860a32be1846d3554de47b4ef970"
+  "gitHead": "16615e73214a680a16cf1f92839c8b6ca2c8467e"
 }

package/src/components/cms/RenderSections.tsx

@@ -6,8 +6,10 @@ import {
   useMemo,
 } from 'react'
 
+import { useUI } from '@faststore/ui'
 import { Section } from '@vtex/client-cms'
 import dynamic from 'next/dynamic'
+import useTTI from 'src/sdk/performance/useTTI'
 import SectionBoundary from './SectionBoundary'
 import ViewportObserver from './ViewportObserver'
 import COMPONENTS from './global/Components'
@@ -16,6 +18,7 @@ interface Props {
   components?: Record<string, ComponentType<any>>
   globalSections?: Array<{ name: string; data: any }>
   sections?: Array<{ name: string; data: any }>
+  isInteractive?: boolean
 }
 
 const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal']
@@ -49,20 +52,47 @@ const useDividedSections = (sections: Section[]) => {
 export const LazyLoadingSection = ({
   sectionName,
   children,
+  debug = false,
+  isInteractive = false,
 }: {
   sectionName: string
   children: ReactNode
+  debug?: boolean
+  isInteractive?: boolean
 }) => {
+  const { cart: displayCart, modal: displayModal } = useUI()
   if (SECTIONS_OUT_OF_VIEWPORT.includes(sectionName)) {
-    return <>{children}</>
+    const shouldLoad =
+      isInteractive ||
+      (sectionName === 'CartSidebar' && displayCart) ||
+      (sectionName === 'RegionModal' && displayModal)
+
+    if (debug) {
+      console.log(
+        `section SECTIONS_OUT_OF_VIEWPORT '${sectionName}' shouldLoad:`,
+        shouldLoad
+      )
+    }
+
+    return shouldLoad ? <>{children}</> : null
   }
 
   return (
-    <ViewportObserver sectionName={sectionName}>{children}</ViewportObserver>
+    <ViewportObserver
+      sectionName={sectionName}
+      debug={debug}
+      isInteractive={isInteractive}
+    >
+      {children}
+    </ViewportObserver>
   )
 }
 
-const RenderSectionsBase = ({ sections = [], components }: Props) => {
+const RenderSectionsBase = ({
+  sections = [],
+  components,
+  isInteractive,
+}: Props) => {
   return (
     <>
       {sections.map(({ name, data = {} }, index) => {
@@ -79,7 +109,10 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
 
         return (
           <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
-            <LazyLoadingSection sectionName={name}>
+            <LazyLoadingSection
+              sectionName={name}
+              isInteractive={isInteractive}
+            >
               <Component {...data} />
             </LazyLoadingSection>
           </SectionBoundary>
@@ -99,21 +132,35 @@ function RenderSections({
     globalSections ?? sections
   )
 
+  const { isInteractive } = useTTI()
+
   return (
     <>
       {firstSections && (
-        <RenderSectionsBase sections={firstSections} components={components} />
+        <RenderSectionsBase
+          sections={firstSections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
       {sections && sections.length > 0 && (
-        <RenderSectionsBase sections={sections} components={components} />
+        <RenderSectionsBase
+          sections={sections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
       {children}
-      <LazyLoadingSection sectionName="Toast">
+      <LazyLoadingSection sectionName="Toast" isInteractive={isInteractive}>
         <Toast />
       </LazyLoadingSection>
 
       {lastSections && (
-        <RenderSectionsBase sections={lastSections} components={components} />
+        <RenderSectionsBase
+          sections={lastSections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
     </>
   )

package/src/components/cms/ViewportObserver.tsx

@@ -14,6 +14,7 @@ type ViewportObserverProps = {
    * Debug/test purposes: enables visual debugging to identify the visibility of the section.
    */
   debug?: boolean
+  isInteractive?: boolean
 } & IntersectionObserverInit
 
 function ViewportObserver({
@@ -23,6 +24,7 @@ function ViewportObserver({
   rootMargin,
   children,
   debug = false,
+  isInteractive = false,
 }: PropsWithChildren<ViewportObserverProps>) {
   const [isVisible, setVisible] = useState(false)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -80,7 +82,7 @@ function ViewportObserver({
         ></div>
       )}
 
-      {isVisible && children}
+      {(isVisible || isInteractive) && children}
     </>
   )
 }

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/performance/useTTI.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+const TTI_TIMEOUT = 5000 // 5 seconds without long tasks as a criterion for Time To Interactive - https://web.dev/articles/tti
+export default function useTTI() {
+  const [isInteractive, setIsInteractive] = useState(false)
+
+  useEffect(() => {
+    if ('PerformanceObserver' in window) {
+      let lastTaskEnd = 0
+
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          lastTaskEnd = entry.startTime + entry.duration
+        }
+      })
+
+      observer.observe({ type: 'longtask', buffered: true })
+
+      // Monitoring when TTI might have been reached
+      const checkTTI = () => {
+        const now = performance.now()
+        if (now - lastTaskEnd >= TTI_TIMEOUT) {
+          observer.disconnect()
+          setIsInteractive(true) // Sets the state to true when TTI is estimated
+        } else {
+          requestIdleCallback(checkTTI) // Keeps checking while the browser is idle
+        }
+      }
+
+      requestIdleCallback(checkTTI)
+    }
+  }, [])
+
+  return { isInteractive }
+}