@faststore/core 3.14.3 → 3.15.0

package/.turbo/turbo-build.log

@@ -47,11 +47,11 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.36 kB         122 kB
+┌ ● /                                      3.36 kB         123 kB
 ├   └ css/b1806cbafd0c1f81.css             3.06 kB
 ├   /_app                                  0 B              92 kB
 ├ ● /[...slug]                             2.09 kB         131 kB
-├ ● /[slug]/p                              34.1 kB         153 kB
+├ ● /[slug]/p                              34.9 kB         154 kB
 ├   ├ css/bf1560439df2c1a1.css             5.66 kB
 ├   ├ css/e3ff5d95518a5c79.css             6.01 kB
 ├   └ css/d23b961580181439.css             15.6 kB
@@ -62,18 +62,18 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/health/live                       0 B              92 kB
 ├ λ /api/health/ready                      0 B              92 kB
 ├ λ /api/preview                           0 B              92 kB
-├ ● /checkout                              690 B           120 kB
+├ ● /checkout                              693 B           120 kB
 ├ ● /login                                 1.59 kB         121 kB
 └ ● /s                                     3.16 kB         132 kB
 + First Load JS shared by all              95.1 kB
   ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
   ├ chunks/main-bcf4c5804681e40a.js        33.1 kB
   ├ chunks/pages/_app-fa96080af43b51d4.js  10 kB
-  ├ chunks/webpack-1cdeb6168a2816ff.js     3.57 kB
+  ├ chunks/webpack-95968624e480b497.js     3.57 kB
   └ css/2eafb8997a3946dc.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 53.90s.
+Done in 55.72s.

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/server/cms/index.test.ts (33.238 s)
-PASS test/utils/multipleTemplates.test.ts (33.634 s)
-PASS test/server/index.test.ts (38.311 s)
+PASS test/server/cms/index.test.ts (36.98 s)
+PASS test/utils/multipleTemplates.test.ts (37.179 s)
+PASS test/server/index.test.ts (40.48 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.476 s
+Time:        41.692 s
 Ran all test suites.
-Done in 41.22s.
+Done in 43.67s.

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.15.0 (2025-02-04)
+
+### Features
+
+- Offer SDK ([#2575](https://github.com/vtex/faststore/issues/2575)) ([f4e11ac](https://github.com/vtex/faststore/commit/f4e11ac68ae4afd79a1a89c122155e18bc452ad5))
+
 ## [3.14.3](https://github.com/vtex/faststore/compare/v3.14.2...v3.14.3) (2025-02-04)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.14.3",
+  "version": "3.15.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.14.2",
-    "@faststore/components": "^3.14.2",
-    "@faststore/graphql-utils": "^3.14.2",
-    "@faststore/lighthouse": "^3.14.2",
-    "@faststore/sdk": "^3.14.2",
-    "@faststore/ui": "^3.14.2",
+    "@faststore/api": "^3.15.0",
+    "@faststore/components": "^3.15.0",
+    "@faststore/graphql-utils": "^3.15.0",
+    "@faststore/lighthouse": "^3.15.0",
+    "@faststore/sdk": "^3.15.0",
+    "@faststore/ui": "^3.15.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -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",
@@ -101,5 +102,5 @@
     "jest": "^29.7.0",
     "ts-jest": "29.1.1"
   },
-  "gitHead": "caf7f74467d49bcb3b9d648983506088afc07711"
+  "gitHead": "2cf5890d1b5edd9fbf7c9e7e94fbba57771c2a0a"
 }

package/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

package/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,
   }
 }
 

package/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,
+  }
+}

package/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,
+})

package/src/sdk/offer/fetcher.ts

@@ -0,0 +1,19 @@
+import type { ProductSearchResult } from '@faststore/api'
+import { api, storeUrl } from '../../../discovery.config'
+
+const IS_PROD = process.env.NODE_ENV === 'production'
+
+export function getUrl(skuId: string) {
+  const base = IS_PROD
+    ? storeUrl
+    : `https://${api.storeId}.${api.environment}.com.br`
+  const url = new URL(`${base}/api/intelligent-search/product_search`)
+  url.searchParams.append('query', `sku.id:${skuId}`)
+  return url.toString()
+}
+
+export async function fetcher(skuId: string) {
+  return fetch(getUrl(skuId)).then((res) =>
+    res.json()
+  ) as Promise<ProductSearchResult>
+}

package/src/sdk/offer/index.ts

@@ -0,0 +1,45 @@
+import useSWR from 'swr'
+import { aggregateOffer } from './aggregate'
+import { enhanceCommercialOffer } from './enhance'
+import { fetcher } from './fetcher'
+import { bestOfferFirst } from './sort'
+export { getUrl as getOfferUrl } from './fetcher'
+
+const ERROR_DATA = { offers: {}, isValidating: false }
+
+export function useOffer(args: { skuId: string }) {
+  const { data, error, isValidating } = useSWR(args.skuId, fetcher)
+
+  if (error || !data || data.products.length === 0) {
+    console.warn('Error or no data fetching offer to SKU', args.skuId, error)
+    return ERROR_DATA
+  }
+
+  const product = data.products[0]
+
+  if (!product || product.items.length === 0) {
+    console.warn('Product not found or has no items for SKU', args.skuId)
+    return ERROR_DATA
+  }
+
+  const item = product.items.find((item) => item.itemId === args.skuId)
+
+  if (!item) {
+    console.warn('Item not found for SKU', args.skuId)
+    return ERROR_DATA
+  }
+
+  const sellers = item.sellers
+    .map((seller) =>
+      enhanceCommercialOffer({
+        offer: seller.commertialOffer,
+        seller,
+        product: item,
+      })
+    )
+    .sort(bestOfferFirst)
+
+  const offers = aggregateOffer(sellers)
+
+  return { offers, isValidating }
+}

package/src/sdk/offer/sort.ts

@@ -0,0 +1,28 @@
+import type { CommertialOffer } from '@faststore/api'
+
+export const inStock = (offer: Pick<CommertialOffer, 'AvailableQuantity'>) =>
+  offer.AvailableQuantity > 0
+
+export const price = (offer: Pick<CommertialOffer, 'spotPrice'>) =>
+  offer.spotPrice ?? 0
+
+export const availability = (available: boolean) =>
+  available ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock'
+
+export const bestOfferFirst = (
+  a: Pick<CommertialOffer, 'AvailableQuantity' | 'spotPrice'>,
+  b: Pick<CommertialOffer, 'AvailableQuantity' | 'spotPrice'>
+) => {
+  if (inStock(a) && !inStock(b)) {
+    return -1
+  }
+
+  if (!inStock(a) && inStock(b)) {
+    return 1
+  }
+
+  return price(a) - price(b)
+}
+
+export const inStockOrderFormItem = (itemAvailability: string) =>
+  itemAvailability === 'available'

package/src/sdk/product/useProductLink.ts

@@ -1,8 +1,6 @@
 import type { CurrencyCode, SelectItemEvent } from '@faststore/sdk'
-import { useCallback } from 'react'
-
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-
+import { useCallback } from 'react'
 import type { AnalyticsItem, SearchSelectItemEvent } from '../analytics/types'
 import { useSession } from '../session'