feat: Offer SDK (#2575)

Co-authored-by: eduardoformiga <[email protected]>
Co-authored-by: Pedro Soares <[email protected]>

Author: 3 people

packages/api/src/index.ts

@@ -48,3 +48,10 @@ export const getSchema = async (options: Options) => {
 
 export * from './platforms/vtex/resolvers/root'
 export type { Resolver } from './platforms/vtex'
+
+export type {
+  CommertialOffer,
+  Item,
+  ProductSearchResult,
+  Seller,
+} from './platforms/vtex/clients/search/types/ProductSearchResult'

packages/core/.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi

packages/core/package.json

@@ -80,8 +80,9 @@
     "sass-loader": "^12.6.0",
     "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
-    "swr": "^1.3.0",
-    "tsx": "^4.6.2"
+    "swr": "^2.2.5",
+    "tsx": "^4.6.2",
+    "typescript": "4.7.3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",

packages/core/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -11,11 +11,22 @@ import Section from '../Section'
 
 import styles from './section.module.scss'
 
+import storeConfig from 'discovery.config'
 import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 import { usePDP } from '../../../sdk/overrides/PageProvider'
 import { ProductDetailsDefaultComponents } from './DefaultComponents'
 
+type StoreConfig = typeof storeConfig & {
+  experimental: {
+    revalidate?: number
+    enableClientOffer?: boolean
+  }
+}
+
+const isClientOfferEnabled = (storeConfig as StoreConfig).experimental
+  .enableClientOffer
+
 export interface ProductDetailsProps {
   productTitle: {
     refNumber: boolean
@@ -214,82 +225,77 @@ function ProductDetails({
             {...ImageGallery.props}
             images={productImages}
           />
-          <section data-fs-product-details-info>
-            <section
-              data-fs-product-details-settings
-              data-fs-product-details-section
-            >
-              <ProductDetailsSettings.Component
-                buyButtonTitle={buyButtonTitle}
-                buyButtonIcon={buyButtonIcon}
-                notAvailableButtonTitle={
-                  notAvailableButtonTitle ?? NotAvailableButton.props.title
-                }
-                useUnitMultiplier={quantitySelector?.useUnitMultiplier ?? false}
-                {...ProductDetailsSettings.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                quantity={quantity}
-                setQuantity={setQuantity}
-                product={product}
-                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>
-                  </>
-                )}
+          {isClientOfferEnabled && isValidating ? (
+            <section data-fs-product-details-info>
+              <section
+                data-fs-product-details-settings
+                data-fs-product-details-section
+              >
+                <p>Loading...</p>
+              </section>
             </section>
-
-            {!outOfStock && (
-              <ShippingSimulation.Component
+          ) : (
+            <section data-fs-product-details-info>
+              <section
+                data-fs-product-details-settings
                 data-fs-product-details-section
-                data-fs-product-details-shipping
-                formatter={useFormattedPrice}
-                {...ShippingSimulation.props}
-                idkPostalCodeLinkProps={{
-                  ...ShippingSimulation.props.idkPostalCodeLinkProps,
-                  href:
-                    shippingSimulatorLinkUrl ??
-                    ShippingSimulation.props.idkPostalCodeLinkProps?.href,
-                  children:
-                    shippingSimulatorLinkText ??
-                    ShippingSimulation.props.idkPostalCodeLinkProps?.children,
-                }}
-                productShippingInfo={{
-                  id,
-                  quantity,
-                  seller: seller.identifier,
-                }}
-                title={shippingSimulatorTitle ?? ShippingSimulation.props.title}
-                inputLabel={
-                  shippingSimulatorInputLabel ??
-                  ShippingSimulation.props.inputLabel
-                }
-                optionsLabel={
-                  shippingSimulatorOptionsTableTitle ??
-                  ShippingSimulation.props.optionsLabel
-                }
-              />
-            )}
-          </section>
+              >
+                <ProductDetailsSettings.Component
+                  buyButtonTitle={buyButtonTitle}
+                  buyButtonIcon={buyButtonIcon}
+                  notAvailableButtonTitle={
+                    notAvailableButtonTitle ?? NotAvailableButton.props.title
+                  }
+                  useUnitMultiplier={
+                    quantitySelector?.useUnitMultiplier ?? false
+                  }
+                  {...ProductDetailsSettings.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  quantity={quantity}
+                  setQuantity={setQuantity}
+                  product={product}
+                  isValidating={isValidating}
+                  taxesConfiguration={taxesConfiguration}
+                />
+              </section>
+
+              {!outOfStock && (
+                <ShippingSimulation.Component
+                  data-fs-product-details-section
+                  data-fs-product-details-shipping
+                  formatter={useFormattedPrice}
+                  {...ShippingSimulation.props}
+                  idkPostalCodeLinkProps={{
+                    ...ShippingSimulation.props.idkPostalCodeLinkProps,
+                    href:
+                      shippingSimulatorLinkUrl ??
+                      ShippingSimulation.props.idkPostalCodeLinkProps?.href,
+                    children:
+                      shippingSimulatorLinkText ??
+                      ShippingSimulation.props.idkPostalCodeLinkProps?.children,
+                  }}
+                  productShippingInfo={{
+                    id,
+                    quantity,
+                    seller: seller.identifier,
+                  }}
+                  title={
+                    shippingSimulatorTitle ?? ShippingSimulation.props.title
+                  }
+                  inputLabel={
+                    shippingSimulatorInputLabel ??
+                    ShippingSimulation.props.inputLabel
+                  }
+                  optionsLabel={
+                    shippingSimulatorOptionsTableTitle ??
+                    ShippingSimulation.props.optionsLabel
+                  }
+                />
+              )}
+            </section>
+          )}
 
           {shouldDisplayProductDescription && (
             <ProductDescription.Component

packages/core/src/pages/[slug]/p.tsx

@@ -3,6 +3,7 @@ import type { Locator } from '@vtex/client-cms'
 import deepmerge from 'deepmerge'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
+import Head from 'next/head'
 import type { ComponentType } from 'react'
 
 import { gql } from '@generated'
@@ -21,19 +22,27 @@ import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sectio
 import { OverriddenDefaultProductDetails as ProductDetails } from 'src/components/sections/ProductDetails/OverriddenDefaultProductDetails'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
-import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import PLUGINS_COMPONENTS from 'src/plugins'
 import { useSession } from 'src/sdk/session'
 import { execute } from 'src/server'
 
 import storeConfig from 'discovery.config'
 import {
-  type GlobalSectionsData,
   getGlobalSectionsData,
+  type GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
+import { getOfferUrl, useOffer } from 'src/sdk/offer'
 import PageProvider, { type PDPContext } from 'src/sdk/overrides/PageProvider'
 import { useProductQuery } from 'src/sdk/product/useProductQuery'
-import { type PDPContentType, getPDP } from 'src/server/cms/pdp'
+import { getPDP, type PDPContentType } from 'src/server/cms/pdp'
+
+type StoreConfig = typeof storeConfig & {
+  experimental: {
+    revalidate?: number
+    enableClientOffer?: boolean
+  }
+}
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
@@ -68,15 +77,31 @@ type Props = PDPContentType & {
 // https://www.npmjs.com/package/deepmerge
 const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 
+const isClientOfferEnabled = (storeConfig as StoreConfig).experimental
+  .enableClientOffer
+
 function Page({ data: server, sections, globalSections, offers, meta }: Props) {
   const { product } = server
   const { currency } = useSession()
   const titleTemplate = storeConfig?.seo?.titleTemplate ?? ''
 
-  // Stale while revalidate the product for fetching the new price etc
-  const { data: client, isValidating } = useProductQuery(product.id, {
-    product: product,
-  })
+  const { client, isValidating } = isClientOfferEnabled
+    ? (() => {
+        const offer = useOffer({ skuId: product.sku })
+        return {
+          client: { product: { offers: offer.offers } },
+          isValidating: offer.isValidating,
+        }
+      })()
+    : (() => {
+        const productQuery = useProductQuery(product.id, {
+          product: product,
+        })
+        return {
+          client: productQuery.data,
+          isValidating: productQuery.isValidating,
+        }
+      })()
 
   const context = {
     data: {
@@ -87,6 +112,15 @@ function Page({ data: server, sections, globalSections, offers, meta }: Props) {
 
   return (
     <>
+      <Head>
+        <link
+          rel="preload"
+          href={getOfferUrl(product.sku)}
+          as="fetch"
+          crossOrigin="anonymous"
+          fetchPriority="high"
+        />
+      </Head>
       {/* SEO */}
       <NextSeo
         title={meta.title}
@@ -271,6 +305,7 @@ export const getStaticProps: GetStaticProps<
       globalSections,
       key: seo.canonical,
     },
+    revalidate: (storeConfig as StoreConfig).experimental.revalidate ?? 0,
   }
 }
 

packages/core/src/sdk/offer/aggregate.ts

@@ -0,0 +1,48 @@
+import type { Item, Seller } from '@faststore/api'
+import type { EnhancedCommercialOffer } from './enhance'
+import { inStock, price } from './sort'
+
+type Root = EnhancedCommercialOffer<Seller, Item>
+
+const withTax = (price: number, tax = 0, unitMultiplier = 1) => {
+  const unitTax = tax / unitMultiplier
+  return Math.round((price + unitTax) * 100) / 100
+}
+
+const getHighPrice = (
+  offers: Root[],
+  options: { includeTaxes: boolean } = { includeTaxes: false }
+) => {
+  const availableOffers = offers.filter(inStock)
+  const highOffer = availableOffers[availableOffers.length - 1]
+  const highPrice = highOffer ? price(highOffer) : 0
+  if (!options.includeTaxes) {
+    return highPrice
+  }
+
+  return withTax(highPrice, highOffer?.Tax, highOffer?.product?.unitMultiplier)
+}
+
+const getLowPrice = (
+  offers: Root[],
+  options: { includeTaxes: boolean } = { includeTaxes: false }
+) => {
+  const [lowOffer] = offers.filter(inStock)
+
+  const lowPrice = lowOffer ? price(lowOffer) : 0
+
+  if (!options.includeTaxes) {
+    return lowPrice
+  }
+
+  return withTax(lowPrice, lowOffer?.Tax, lowOffer?.product?.unitMultiplier)
+}
+
+export function aggregateOffer(offers: Root[]) {
+  return {
+    highPrice: getHighPrice(offers),
+    lowPrice: getLowPrice(offers),
+    lowPriceWithTaxes: getLowPrice(offers, { includeTaxes: true }),
+    offerCount: offers.length,
+  }
+}

packages/core/src/sdk/offer/enhance.ts

@@ -0,0 +1,20 @@
+import type { CommertialOffer } from '@faststore/api'
+
+export type EnhancedCommercialOffer<S, P> = CommertialOffer & {
+  seller: S
+  product: P
+}
+
+export const enhanceCommercialOffer = <S, P>({
+  offer,
+  seller,
+  product,
+}: {
+  offer: CommertialOffer
+  seller: S
+  product: P
+}): EnhancedCommercialOffer<S, P> => ({
+  ...offer,
+  product,
+  seller,
+})