@faststore/core 2.1.96 → 2.1.99

package/.turbo/turbo-build.log

@@ -25,7 +25,7 @@ Route (pages)                              Size     First Load JS
 ├   /_app                                  0 B            77.9 kB
 ├ ● /[...slug]                             4.06 kB         209 kB
 ├   └ css/527e334fa69cf40a.css             1.85 kB
-├ ● /[slug]/p                              10.5 kB         205 kB
+├ ● /[slug]/p                              10.6 kB         205 kB
 ├   └ css/7ca374e5534a3f68.css             11.3 kB
 ├ ○ /404                                   1.19 kB         114 kB
 ├ ● /500                                   1.21 kB         114 kB
@@ -41,7 +41,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-40cff0982559d0b8.js  6.46 kB
-  ├ chunks/webpack-fac5a4eeea429971.js     2.29 kB
+  ├ chunks/webpack-aa0b4e883a43f80d.js     2.29 kB
   └ css/9e76fef1c9ca89af.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/cms/faststore/sections.json

@@ -1374,6 +1374,18 @@
             }
           }
         },
+        "notAvailableButton": {
+          "title": "Not Available Button",
+          "description": "Shown when a SKU is not available",
+          "type": "object",
+          "properties": {
+            "title": {
+              "title": "Title",
+              "type": "string",
+              "default": "Not Available"
+            }
+          }
+        },
         "shippingSimulator": {
           "title": "Shipping Simulation",
           "type": "object",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.96",
+  "version": "2.1.99",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,11 +29,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.1.90",
-    "@faststore/components": "^2.1.94",
-    "@faststore/graphql-utils": "^2.1.82",
-    "@faststore/sdk": "^2.1.82",
-    "@faststore/ui": "^2.1.94",
+    "@faststore/api": "^2.1.99",
+    "@faststore/components": "^2.1.99",
+    "@faststore/graphql-utils": "^2.1.99",
+    "@faststore/sdk": "^2.1.99",
+    "@faststore/ui": "^2.1.99",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
-    "@faststore/eslint-config": "^2.1.82",
+    "@faststore/eslint-config": "^2.1.99",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "7a9d3f22a02b6c882cda586da99a7b073a458ee9"
+  "gitHead": "2ecd31444b00639f05e8b99847df231d8f2f7b0e"
 }

package/src/components/product/NotAvailableButton/NotAvailableButton.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { Button } from '@faststore/ui'
+
+// TODO: Remove this component when <OutOfStock /> is ready to use
+function NotAvailableButton({ children }: PropsWithChildren) {
+  return (
+    <Button variant="primary" disabled data-fs-buy-button>
+      {children}
+    </Button>
+  )
+}
+
+export default NotAvailableButton

package/src/components/product/NotAvailableButton/index.ts

@@ -0,0 +1 @@
+export { default } from './NotAvailableButton'

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

@@ -14,6 +14,7 @@ import {
 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 { getSectionOverrides } from 'src/utils/overrides'
 import { override } from 'src/customizations/components/overrides/ProductDetails'
@@ -33,6 +34,7 @@ const {
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,
+  __experimentalNotAvailableButton,
 } = getSectionOverrides(
   {
     ProductTitle: UIProductTitle,
@@ -48,6 +50,7 @@ const {
     __experimentalImageGalleryImage: Image,
     __experimentalImageGallery: LocalImageGallery,
     __experimentalShippingSimulation: LocalShippingSimulation,
+    __experimentalNotAvailableButton: LocalNotAvailableButton,
   },
   override as ProductDetailsOverrideDefinition
 )
@@ -66,4 +69,5 @@ export {
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,
+  __experimentalNotAvailableButton,
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 
 import { gql } from '@faststore/graphql-utils'
 import { sendAnalyticsEvent } from '@faststore/sdk'
@@ -21,6 +21,7 @@ import {
   DiscountBadge,
   __experimentalImageGallery as ImageGallery,
   __experimentalShippingSimulation as ShippingSimulation,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsContextProps {
@@ -59,6 +60,9 @@ export interface ProductDetailsProps {
   imageGallery: {
     imagePosition: 'top' | 'center' | 'bottom'
   }
+  notAvailableButton: {
+    title: string
+  }
 }
 
 function ProductDetails({
@@ -91,6 +95,9 @@ function ProductDetails({
     displayDescription: shouldDisplayProductDescription,
   },
   imageGallery: { imagePosition = ImageGallery.props.imagePosition },
+  notAvailableButton: {
+    title: notAvailableButtonTitle = NotAvailableButton.props.title,
+  },
 }: ProductDetailsProps & ProductDetailsContextProps) {
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
@@ -155,7 +162,10 @@ function ProductDetails({
     gtin,
   ])
 
-  const outOfStock = availability == 'https://schema.org/OutOfStock'
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
 
   return (
     <Section className={`${styles.section} section-product-details`}>
@@ -194,19 +204,15 @@ function ProductDetails({
               data-fs-product-details-settings
               data-fs-product-details-section
             >
-              {!outOfStock ? (
-                <ProductDetailsSettings
-                  product={data.product}
-                  isValidating={isValidating}
-                  buyButtonTitle={buyButtonTitle}
-                  quantity={quantity}
-                  setQuantity={setQuantity}
-                  buyButtonIcon={buyButtonIcon}
-                />
-              ) : (
-                // TODO: Adds <OutOfStock /> when component is ready to use
-                <p>Not Available</p>
-              )}
+              <ProductDetailsSettings
+                product={data.product}
+                isValidating={isValidating}
+                buyButtonTitle={buyButtonTitle}
+                quantity={quantity}
+                setQuantity={setQuantity}
+                buyButtonIcon={buyButtonIcon}
+                notAvailableButtonTitle={notAvailableButtonTitle}
+              />
             </section>
 
             {!outOfStock && (

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -1,4 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
+import { useMemo } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
@@ -13,6 +14,7 @@ import {
   Icon,
   Price,
   QuantitySelector,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsSettingsProps {
@@ -25,6 +27,7 @@ interface ProductDetailsSettingsProps {
   isValidating: boolean
   quantity: number
   setQuantity: Dispatch<SetStateAction<number>>
+  notAvailableButtonTitle: string
 }
 
 function ProductDetailsSettings({
@@ -37,6 +40,7 @@ function ProductDetailsSettings({
     icon: buyButtonIconName = Icon.props.name,
     alt: buyButtonIconAlt = Icon.props['aria-label'],
   },
+  notAvailableButtonTitle,
 }: ProductDetailsSettingsProps) {
   const {
     id,
@@ -54,8 +58,6 @@ function ProductDetailsSettings({
     },
   } = product
 
-  const buyDisabled = availability !== 'https://schema.org/InStock'
-
   const buyProps = useBuyButton({
     id,
     price,
@@ -73,62 +75,94 @@ function ProductDetailsSettings({
     },
   })
 
-  const shouldShowDiscountedPrice = lowPrice !== listPrice
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
+  const shouldShowDiscountedPrice = useMemo(
+    () => lowPrice !== listPrice,
+    [lowPrice, listPrice]
+  )
+
+  const AddToCartButton = () => {
+    return outOfStock ? (
+      // TODO: Adds <OutOfStock /> when component is ready to use
+      <NotAvailableButton.Component>
+        {notAvailableButtonTitle}
+      </NotAvailableButton.Component>
+    ) : (
+      <BuyButton.Component
+        {...BuyButton.props}
+        icon={
+          <Icon.Component
+            {...Icon.props}
+            name={buyButtonIconName}
+            aria-label={buyButtonIconAlt}
+          />
+        }
+        {...buyProps}
+      >
+        {buyButtonTitle || 'Add to Cart'}
+      </BuyButton.Component>
+    )
+  }
 
   return (
     <>
-      <section data-fs-product-details-values>
-        <div data-fs-product-details-prices>
-          {shouldShowDiscountedPrice ? (
-            <>
+      {!outOfStock && (
+        <section data-fs-product-details-values>
+          <div data-fs-product-details-prices>
+            {shouldShowDiscountedPrice ? (
+              <>
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="list-price"
+                  variant="listing"
+                  SRText="Original price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={listPrice}
+                  data-value={listPrice}
+                />
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="price"
+                  variant="spot"
+                  className="text__lead"
+                  SRText="Sale Price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={lowPrice}
+                  data-value={lowPrice}
+                />
+              </>
+            ) : (
               <Price.Component
                 formatter={useFormattedPrice}
                 testId="list-price"
-                variant="listing"
-                SRText="Original price:"
-                {...Price.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                value={listPrice}
-                data-value={listPrice}
-              />
-              <Price.Component
-                formatter={useFormattedPrice}
-                testId="price"
                 variant="spot"
                 className="text__lead"
-                SRText="Sale Price:"
+                SRText="Original price:"
                 {...Price.props}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 value={lowPrice}
                 data-value={lowPrice}
               />
-            </>
-          ) : (
-            <Price.Component
-              formatter={useFormattedPrice}
-              testId="list-price"
-              variant="spot"
-              className="text__lead"
-              SRText="Original price:"
-              {...Price.props}
-              // Dynamic props shouldn't be overridable
-              // This decision can be reviewed later if needed
-              value={lowPrice}
-              data-value={lowPrice}
-            />
-          )}
-        </div>
-        <QuantitySelector.Component
-          min={1}
-          max={10}
-          {...QuantitySelector.props}
-          // Dynamic props shouldn't be overridable
-          // This decision can be reviewed later if needed
-          onChange={setQuantity}
-        />
-      </section>
+            )}
+          </div>
+          <QuantitySelector.Component
+            min={1}
+            max={10}
+            {...QuantitySelector.props}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            onChange={setQuantity}
+          />
+        </section>
+      )}
       {skuVariants && (
         <Selectors
           slugsMap={skuVariants.slugsMap}
@@ -137,30 +171,16 @@ function ProductDetailsSettings({
           data-fs-product-details-selectors
         />
       )}
-      {
-        /* NOTE: A loading skeleton had to be used to avoid a Lighthouse's
-                  non-composited animation violation due to the button transitioning its
-                  background color when changing from its initial disabled to active state.
-                  See full explanation on commit https://git.io/JyXV5. */
-        isValidating ? (
-          <AddToCartLoadingSkeleton />
-        ) : (
-          <BuyButton.Component
-            {...BuyButton.props}
-            icon={
-              <Icon.Component
-                {...Icon.props}
-                aria-label={buyButtonIconAlt}
-                name={buyButtonIconName}
-              />
-            }
-            disabled={buyDisabled}
-            {...buyProps}
-          >
-            {buyButtonTitle || 'Add to Cart'}
-          </BuyButton.Component>
-        )
-      }
+      {isValidating ? (
+        /* NOTE:
+          A loading skeleton had to be used to avoid a Lighthouse's
+          non-composited animation violation due to the button transitioning its
+          background color when changing from its initial disabled to active state.
+          See full explanation on commit https://git.io/JyXV5. */
+        <AddToCartLoadingSkeleton />
+      ) : (
+        <AddToCartButton />
+      )}
     </>
   )
 }

package/src/typings/overrides.ts

@@ -204,6 +204,7 @@ export type ProductDetailsOverrideDefinition = SectionOverrideDefinition<
     __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
     __experimentalImageGallery: ComponentOverrideDefinition<any, any>
     __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+    __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
   }
 >
 

package/.next/BUILD_ID

@@ -1 +0,0 @@
-8EkJazrZDz4rsTIa4IP5R

package/.next/build-manifest.json

@@ -1,129 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/8EkJazrZDz4rsTIa4IP5R/_buildManifest.js",
-    "static/8EkJazrZDz4rsTIa4IP5R/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/chunks/548-ab84e9e8b49413ab.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/373ae96b742c3694.css",
-      "static/chunks/238-2ad31f382e7c6f14.js",
-      "static/css/a2eefb25a4608343.css",
-      "static/chunks/pages/index-d521ce4f4e2b89a6.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/404-af78f7cd1d3c1f60.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/500-f6346ca5f9dc4fef.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/chunks/548-ab84e9e8b49413ab.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/373ae96b742c3694.css",
-      "static/chunks/238-2ad31f382e7c6f14.js",
-      "static/css/f0e2d1b8832e935d.css",
-      "static/chunks/603-be78b9dfb8fa6c49.js",
-      "static/css/a2eefb25a4608343.css",
-      "static/css/527e334fa69cf40a.css",
-      "static/chunks/pages/[...slug]-ca533c74c22cb787.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/chunks/548-ab84e9e8b49413ab.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/373ae96b742c3694.css",
-      "static/chunks/238-2ad31f382e7c6f14.js",
-      "static/css/7ca374e5534a3f68.css",
-      "static/chunks/pages/[slug]/p-3383e9b97bffafdd.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/9e76fef1c9ca89af.css",
-      "static/chunks/pages/_app-40cff0982559d0b8.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/chunks/pages/account-05bd79fb78365e88.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/chunks/pages/checkout-c973786e68f25a39.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/df588bb98c0b0ca6.css",
-      "static/chunks/pages/login-8deb9243376b6aa1.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-fac5a4eeea429971.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-67a288ca3569cdbb.js",
-      "static/css/e3b039e8f5daf95f.css",
-      "static/chunks/243-8c394e91ccf75fdb.js",
-      "static/css/f0e2d1b8832e935d.css",
-      "static/chunks/603-be78b9dfb8fa6c49.js",
-      "static/chunks/pages/s-1f885639c2605ace.js"
-    ]
-  },
-  "ampFirstPages": []
-}