@faststore/core 2.2.57 → 2.2.59

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 $ yarn partytown & yarn generate && next build
-$ faststore generate-graphql -c
 $ partytown copylib ./public/~partytown
+$ faststore generate-graphql -c
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 warn  - You have enabled experimental feature (scrollRestoration) in next.config.js.
@@ -38,28 +38,28 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      6.61 kB         127 kB
+┌ ● /                                      6.23 kB         133 kB
 ├   └ css/cf062feb79245123.css             8.38 kB
 ├   /_app                                  0 B            83.7 kB
-├ ● /[...slug]                             7.35 kB         139 kB
+├ ● /[...slug]                             7.35 kB         145 kB
 ├   └ css/0dc997f9da3027b7.css             8.8 kB
-├ ● /[slug]/p                              14.5 kB         135 kB
-├   └ css/cbccabebb36f7f92.css             13.3 kB
-├ ○ /404                                   1.19 kB         122 kB
-├ ● /500                                   1.21 kB         122 kB
-├ ● /account                               677 B           121 kB
+├ ● /[slug]/p                              8.02 kB         135 kB
+├   └ css/f2ab72459fcdabcc.css             5.4 kB
+├ ○ /404                                   1.19 kB         128 kB
+├ ● /500                                   1.21 kB         128 kB
+├ ● /account                               677 B           128 kB
 ├ λ /api/graphql                           0 B            83.7 kB
 ├ λ /api/health/live                       0 B            83.7 kB
 ├ λ /api/health/ready                      0 B            83.7 kB
 ├ λ /api/preview                           0 B            83.7 kB
-├ ● /checkout                              662 B           121 kB
-├ ● /login                                 1.14 kB         122 kB
-└ ● /s                                     1.38 kB         133 kB
+├ ● /checkout                              662 B           128 kB
+├ ● /login                                 1.14 kB         128 kB
+└ ● /s                                     1.38 kB         139 kB
 + First Load JS shared by all              86.8 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-e4e873ee741162eb.js        24.2 kB
   ├ chunks/pages/_app-30b9666307e4b3b1.js  12.1 kB
-  ├ chunks/webpack-ec84ae4e89cebb1f.js     2.23 kB
+  ├ chunks/webpack-3382def1b25b17f8.js     2.23 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (21.422 s)
+PASS test/server/index.test.ts (21.341 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (6 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (12 ms)
+      ✓ should return a valid GraphQL schema (10 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (7 ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1 ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations (2 ms)
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (7 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (5 ms)
     Third Party API Extension
       ✓ getTypeDefsFromFolder function should return an Array (6 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (28 ms)
+      ✓ should return a valid merged GraphQL schema (34 ms)
     Envelop
-      ✓ should exist with its plugins (24 ms)
-      ✓ should handle options and execute (211 ms)
+      ✓ should exist with its plugins (25 ms)
+      ✓ should handle options and execute (319 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.572 s
+Time:        21.473 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.57",
+  "version": "2.2.59",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -123,5 +123,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "93d8ac4811b96182c66f3d3d112eb4ceb430e691"
+  "gitHead": "18aea9c02e0ea27af407d6fd2a490a51dcf4f02d"
 }

package/public/icons.svg

@@ -54,7 +54,9 @@
   <symbol id="Stripe" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 34 24"> <path d="M0 3C0 1.34315 1.34315 0 3 0H31C32.6569 0 34 1.34315 34 3V21C34 22.6569 32.6569 24 31 24H3C1.34315 24 0 22.6569 0 21V3Z" fill="white" /> <rect x="0.5" y="0.5" width="33" height="23" rx="2.5" stroke="#fff" /> <path fillRule="evenodd" clipRule="evenodd" d="M18.2682 8.14192L16.541 8.52349V7.08202L18.2682 6.70752V8.14192ZM21.8599 8.94038C21.1856 8.94038 20.7521 9.26542 20.5113 9.49153L20.4218 9.05344H18.908V17.2924L20.6282 16.9179L20.6351 14.9183C20.8828 15.102 21.2475 15.3634 21.853 15.3634C23.0847 15.3634 24.2063 14.3459 24.2063 12.106C24.1995 10.0568 23.0641 8.94038 21.8599 8.94038ZM21.4471 13.8089C21.0411 13.8089 20.8002 13.6605 20.6351 13.4768L20.6282 10.8553C20.8071 10.6504 21.0548 10.509 21.4471 10.509C22.0732 10.509 22.5067 11.2298 22.5067 12.1554C22.5067 13.1023 22.0801 13.8089 21.4471 13.8089ZM29.6286 12.1766C29.6286 10.3677 28.7754 8.94038 27.1446 8.94038C25.5069 8.94038 24.5161 10.3677 24.5161 12.1625C24.5161 14.2894 25.6858 15.3634 27.3648 15.3634C28.1836 15.3634 28.8029 15.1726 29.2708 14.9041V13.4909C28.8029 13.7312 28.2662 13.8795 27.585 13.8795C26.9175 13.8795 26.3257 13.6393 26.2501 12.8055H29.6148C29.6148 12.7666 29.6173 12.6782 29.6202 12.5763L29.6202 12.5761C29.624 12.4377 29.6286 12.2743 29.6286 12.1766ZM26.2294 11.5054C26.2294 10.7069 26.7042 10.3748 27.1377 10.3748C27.5574 10.3748 28.0047 10.7069 28.0047 11.5054H26.2294ZM16.5409 9.06052H18.2681V15.2433H16.5409V9.06052ZM14.58 9.06051L14.6901 9.5834C15.0961 8.82026 15.9012 8.97572 16.1214 9.06051V10.6857C15.908 10.608 15.22 10.509 14.814 11.0531V15.2433H13.0937V9.06051H14.58ZM11.2495 7.52717L9.57056 7.8946L9.56368 13.5545C9.56368 14.6003 10.3275 15.3705 11.3459 15.3705C11.9101 15.3705 12.323 15.2645 12.55 15.1373V13.7029C12.3298 13.7947 11.2426 14.1198 11.2426 13.074V10.5656H12.55V9.0605H11.2426L11.2495 7.52717ZM7.18295 10.4737C6.81826 10.4737 6.59807 10.5797 6.59807 10.8553C6.59807 11.1562 6.97702 11.2885 7.44715 11.4527C8.21358 11.7204 9.22234 12.0728 9.2266 13.3779C9.2266 14.6427 8.24262 15.3705 6.81138 15.3705C6.21961 15.3705 5.5728 15.2504 4.93287 14.9677V13.286C5.51087 13.611 6.24026 13.8513 6.81138 13.8513C7.19671 13.8513 7.47195 13.7453 7.47195 13.4203C7.47195 13.087 7.06116 12.9346 6.56522 12.7507C5.80994 12.4706 4.85718 12.1173 4.85718 10.9401C4.85718 9.6894 5.78611 8.9404 7.18295 8.9404C7.75407 8.9404 8.31831 9.03225 8.88944 9.26543V10.926C8.36648 10.6362 7.70591 10.4737 7.18295 10.4737Z" fill="#6461FC" /> </symbol>
   <symbol id="Tag" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path d="M122.7 25.9 42 42l-16.1 80.7a8 8 0 0 0 2.2 7.2l104.4 104.4a7.9 7.9 0 0 0 11.3 0l90.5-90.5a7.9 7.9 0 0 0 0-11.3L129.9 28.1a8 8 0 0 0-7.2-2.2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="84" cy="84" r="12" fill="currentColor"/></symbol>
   <symbol id="Truck" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M240,120H176V80h42.58374a8,8,0,0,1,7.42781,5.02887Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="16" y1="144" x2="176" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><circle cx="188" cy="192" r="24" fill="none" stroke="currentColor" stroke-miterlimit="10"></circle><circle cx="68" cy="192" r="24" fill="none" stroke="currentColor" stroke-miterlimit="10"></circle><line x1="164" y1="192" x2="92" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><path d="M44,192H24a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8H176V171.21508" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M176,171.21508V120h64v64a8,8,0,0,1-8,8H212" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
-  <symbol id="Twitter" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 22"> <path fillRule="evenodd" clipRule="evenodd" d="M22.3622 5.78508C22.3713 6.01826 22.3743 6.25134 22.3743 6.48452C22.3743 13.5541 17.4012 21.7156 8.30706 21.7156C5.51351 21.7156 2.91591 20.8252 0.727295 19.3095C1.11417 19.3519 1.50708 19.3838 1.90602 19.3838C4.22225 19.3838 6.3556 18.5251 8.04781 17.0836C5.88432 17.0518 4.05746 15.4938 3.4274 13.3739C3.72987 13.4375 4.04136 13.4694 4.35991 13.4694C4.80909 13.4694 5.2452 13.4059 5.66323 13.2787C3.39924 12.7912 1.69399 10.629 1.69399 8.03221C1.69399 8.00041 1.69399 7.98975 1.69399 7.96855C2.36123 8.36072 3.12492 8.60438 3.93585 8.63617C2.60741 7.67165 1.73416 6.02884 1.73416 4.17399C1.73416 3.19887 1.97734 2.27671 2.40542 1.48178C4.84324 4.7251 8.48795 6.85555 12.5969 7.07814C12.5125 6.68597 12.4693 6.27271 12.4693 5.85934C12.4693 2.90219 14.683 0.506744 17.4142 0.506744C18.8361 0.506744 20.1204 1.15338 21.0217 2.19209C22.1502 1.95891 23.2073 1.51378 24.164 0.899035C23.7932 2.14973 23.0104 3.19882 21.9874 3.85597C22.9883 3.72878 23.9429 3.44282 24.8282 3.01886C24.164 4.08937 23.3279 5.03254 22.3622 5.78508Z" fill="currentColor" /> </symbol>
+  <symbol id="Twitter" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path d="M3.97204 3.72754L14.0811 17.2655L3.9082 28.2725H6.19772L15.1041 18.6358L22.3002 28.2725H30.0915L19.4136 13.973L28.8825 3.72754H26.593L18.3907 12.6028L11.7633 3.72754H3.97204ZM7.33894 5.41665H10.9183L26.7241 26.5831H23.1447L7.33894 5.41665Z" fill="currentColor"/>
+  </symbol>
   <symbol id="User" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="96" r="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><path d="M30.989,215.99064a112.03731,112.03731,0,0,1,194.02311.002" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
   <symbol id="Visa" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 34 24"> <path d="M0 3C0 1.34315 1.34315 0 3 0H31C32.6569 0 34 1.34315 34 3V21C34 22.6569 32.6569 24 31 24H3C1.34315 24 0 22.6569 0 21V3Z" fill="white" /> <rect x="0.5" y="0.5" width="33" height="23" rx="2.5" stroke="#fff" /> <path fillRule="evenodd" clipRule="evenodd" d="M10.7503 15.8582H8.69056L7.146 9.79237C7.07269 9.51334 6.91703 9.26666 6.68806 9.1504C6.11664 8.85823 5.48696 8.6257 4.80005 8.50843V8.27489H8.11813C8.57607 8.27489 8.91953 8.6257 8.97677 9.03313L9.77817 13.4086L11.8369 8.27489H13.8394L10.7503 15.8582ZM14.9843 15.8582H13.039L14.6408 8.27489H16.5861L14.9843 15.8582ZM19.1028 10.3757C19.16 9.96728 19.5035 9.73374 19.9042 9.73374C20.5338 9.6751 21.2197 9.79238 21.7922 10.0835L22.1356 8.45081C21.5632 8.21727 20.9335 8.1 20.3621 8.1C18.4741 8.1 17.1003 9.15041 17.1003 10.6082C17.1003 11.7173 18.0734 12.2996 18.7603 12.6504C19.5035 13.0002 19.7897 13.2337 19.7324 13.5835C19.7324 14.1082 19.16 14.3418 18.5886 14.3418C17.9017 14.3418 17.2147 14.1669 16.5861 13.8747L16.2426 15.5085C16.9295 15.7996 17.6727 15.9169 18.3596 15.9169C20.4766 15.9745 21.7922 14.9251 21.7922 13.35C21.7922 11.3665 19.1028 11.2502 19.1028 10.3757ZM28.6 15.8582L27.0555 8.27489H25.3965C25.053 8.27489 24.7095 8.50843 24.5951 8.85823L21.7349 15.8582H23.7374L24.1371 14.7502H26.5976L26.8265 15.8582H28.6ZM25.6827 10.3171L26.2541 13.1751H24.6523L25.6827 10.3171Z" fill="#172B85" /> </symbol>
   <symbol id="X" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>

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

@@ -0,0 +1,34 @@
+import {
+  ProductTitle as UIProductTitle,
+  DiscountBadge as UIDiscountBadge,
+  BuyButton as UIBuyButton,
+  SkuSelector as UISkuSelector,
+  ShippingSimulation as UIShippingSimulation,
+  Icon as UIIcon,
+  Price as UIPrice,
+  QuantitySelector as UIQuantitySelector,
+  ImageGalleryViewer as UIImageGalleryViewer,
+  ImageGallery as UIImageGallery,
+} 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'
+
+export const ProductDetailsDefaultComponents = {
+  ProductTitle: UIProductTitle,
+  DiscountBadge: UIDiscountBadge,
+  BuyButton: UIBuyButton,
+  Icon: UIIcon,
+  Price: UIPrice,
+  QuantitySelector: UIQuantitySelector,
+  SkuSelector: UISkuSelector,
+  ShippingSimulation: UIShippingSimulation,
+  ImageGallery: UIImageGallery,
+  ImageGalleryViewer: UIImageGalleryViewer,
+  __experimentalImageGalleryImage: Image,
+  __experimentalImageGallery: LocalImageGallery,
+  __experimentalShippingSimulation: LocalShippingSimulation,
+  __experimentalNotAvailableButton: LocalNotAvailableButton,
+}

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

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/ProductDetails'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default ProductDetails section present in the Headless CMS
+ */
+export const OverriddenDefaultProductDetails = getOverriddenSection(
+  override as SectionOverrideDefinition<'ProductDetails'>
+)

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

@@ -14,15 +14,8 @@ import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
-import {
-  DiscountBadge,
-  ProductTitle,
-  __experimentalImageGallery as ImageGallery,
-  __experimentalShippingSimulation as ShippingSimulation,
-  __experimentalNotAvailableButton as NotAvailableButton,
-} from 'src/components/sections/ProductDetails/Overrides'
-
 import { usePDP } from 'src/sdk/overrides/PageProvider'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -61,35 +54,29 @@ export interface ProductDetailsProps {
 function ProductDetails({
   productTitle: {
     refNumber: showRefNumber,
-    discountBadge: {
-      showDiscountBadge,
-      size: discountBadgeSize = DiscountBadge.props.size,
-    },
+    discountBadge: { showDiscountBadge, size: discountBadgeSize },
   },
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
-    title: shippingSimulatorTitle = ShippingSimulation.props.title,
-    inputLabel: shippingSimulatorInputLabel = ShippingSimulation.props
-      .inputLabel,
-    shippingOptionsTableTitle:
-      shippingSimulatorOptionsTableTitle = ShippingSimulation.props
-        .optionsLabel,
-    link: {
-      to: shippingSimulatorLinkUrl = ShippingSimulation.props
-        .idkPostalCodeLinkProps?.href,
-      text: shippingSimulatorLinkText = ShippingSimulation.props
-        .idkPostalCodeLinkProps?.children,
-    },
+    title: shippingSimulatorTitle,
+    inputLabel: shippingSimulatorInputLabel,
+    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle,
+    link: { to: shippingSimulatorLinkUrl, text: shippingSimulatorLinkText },
   },
   productDescription: {
     title: productDescriptionDetailsTitle,
     initiallyExpanded: productDescriptionInitiallyExpanded,
     displayDescription: shouldDisplayProductDescription,
   },
-  notAvailableButton: {
-    title: notAvailableButtonTitle = NotAvailableButton.props.title,
-  },
+  notAvailableButton: { title: notAvailableButtonTitle },
 }: ProductDetailsProps) {
+  const {
+    DiscountBadge,
+    ProductTitle,
+    __experimentalImageGallery: ImageGallery,
+    __experimentalShippingSimulation: ShippingSimulation,
+    __experimentalNotAvailableButton: NotAvailableButton,
+  } = useOverrideComponents<'ProductDetails'>()
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
   const context = usePDP()
@@ -168,7 +155,7 @@ function ProductDetails({
                 showDiscountBadge && (
                   <DiscountBadge.Component
                     {...DiscountBadge.props}
-                    size={discountBadgeSize}
+                    size={discountBadgeSize ?? DiscountBadge.props.size}
                     // Dynamic props shouldn't be overridable
                     // This decision can be reviewed later if needed
                     listPrice={listPrice}
@@ -196,7 +183,9 @@ function ProductDetails({
                 quantity={quantity}
                 setQuantity={setQuantity}
                 buyButtonIcon={buyButtonIcon}
-                notAvailableButtonTitle={notAvailableButtonTitle}
+                notAvailableButtonTitle={
+                  notAvailableButtonTitle ?? NotAvailableButton.props.title
+                }
               />
             </section>
 
@@ -208,17 +197,27 @@ function ProductDetails({
                 {...ShippingSimulation.props}
                 idkPostalCodeLinkProps={{
                   ...ShippingSimulation.props.idkPostalCodeLinkProps,
-                  href: shippingSimulatorLinkUrl,
-                  children: shippingSimulatorLinkText,
+                  href:
+                    shippingSimulatorLinkUrl ??
+                    ShippingSimulation.props.idkPostalCodeLinkProps?.href,
+                  children:
+                    shippingSimulatorLinkText ??
+                    ShippingSimulation.props.idkPostalCodeLinkProps?.children,
                 }}
                 productShippingInfo={{
                   id,
                   quantity,
                   seller: seller.identifier,
                 }}
-                title={shippingSimulatorTitle}
-                inputLabel={shippingSimulatorInputLabel}
-                optionsLabel={shippingSimulatorOptionsTableTitle}
+                title={shippingSimulatorTitle ?? ShippingSimulation.props.title}
+                inputLabel={
+                  shippingSimulatorInputLabel ??
+                  ShippingSimulation.props.inputLabel
+                }
+                optionsLabel={
+                  shippingSimulatorOptionsTableTitle ??
+                  ShippingSimulation.props.optionsLabel
+                }
               />
             )}
           </section>

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -2,15 +2,13 @@ import { useEffect, useState } from 'react'
 
 import { useRouter } from 'next/router'
 
-import {
-  ImageGallery as ImageGalleryWrapper,
-  ImageGalleryViewer,
-  __experimentalImageGalleryImage as Image,
-} from 'src/components/sections/ProductDetails/Overrides'
-
 import type { ImageGalleryProps as UIImageGalleryProps } from '@faststore/ui'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 const ImageComponent = ({ url, alternateName }) => {
+  const { __experimentalImageGalleryImage: Image } =
+    useOverrideComponents<'ProductDetails'>()
+
   return (
     <Image.Component src={url} alt={alternateName} width={68} height={68} />
   )
@@ -21,6 +19,12 @@ export interface ImageGalleryProps {
 }
 
 const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
+  const {
+    ImageGallery: ImageGalleryWrapper,
+    ImageGalleryViewer,
+    __experimentalImageGalleryImage: Image,
+  } = useOverrideComponents<'ProductDetails'>()
+
   const [selectedImageIdx, setSelectedImageIdx] = useState(0)
   const currentImage = images[selectedImageIdx] ?? images[0]
   const dynamicRoute = useRouter().asPath

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

@@ -9,13 +9,7 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
-import {
-  BuyButton,
-  Icon,
-  Price,
-  QuantitySelector,
-  __experimentalNotAvailableButton as NotAvailableButton,
-} from 'src/components/sections/ProductDetails/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
@@ -36,12 +30,17 @@ function ProductDetailsSettings({
   isValidating,
   quantity,
   setQuantity,
-  buyButtonIcon: {
-    icon: buyButtonIconName = Icon.props.name,
-    alt: buyButtonIconAlt = Icon.props['aria-label'],
-  },
+  buyButtonIcon: { icon: buyButtonIconName, alt: buyButtonIconAlt },
   notAvailableButtonTitle,
 }: ProductDetailsSettingsProps) {
+  const {
+    BuyButton,
+    Icon,
+    Price,
+    QuantitySelector,
+    __experimentalNotAvailableButton: NotAvailableButton,
+  } = useOverrideComponents<'ProductDetails'>()
+
   const {
     id,
     sku,
@@ -96,8 +95,8 @@ function ProductDetailsSettings({
         icon={
           <Icon.Component
             {...Icon.props}
-            name={buyButtonIconName}
-            aria-label={buyButtonIconAlt}
+            name={buyButtonIconName ?? Icon.props.name}
+            aria-label={buyButtonIconAlt ?? Icon.props['aria-label']}
           />
         }
         {...buyProps}

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -1,9 +1,8 @@
 import { ShippingSimulationProps as UIShippingSimulationProps } from '@faststore/ui'
 
-import { useSession } from 'src/sdk/session'
 import { useShippingSimulation } from 'src/sdk/shipping/useShippingSimulation'
 
-import { ShippingSimulation as ShippingSimulationWrapper } from 'src/components/sections/ProductDetails/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 type ShippingSimulationOptionalProps =
   | 'title'
@@ -31,6 +30,9 @@ export default function ShippingSimulation({
   idkPostalCodeLinkProps,
   ...otherProps
 }: ShippingSimulationProps) {
+  const { ShippingSimulation: ShippingSimulationWrapper } =
+    useOverrideComponents<'ProductDetails'>()
+
   const {
     input,
     shippingSimulation,

package/src/components/ui/SkuSelector/Selectors.tsx

@@ -4,7 +4,7 @@ import { SkuSelectorProps } from '@faststore/ui'
 import NextLink from 'next/link'
 import { Image } from '../Image'
 
-import { SkuSelector } from 'src/components/sections/ProductDetails/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export type SkuVariantsByName = Record<
   string,
@@ -38,6 +38,8 @@ function Selectors({
   availableVariations,
   ...otherProps
 }: Props) {
+  const { SkuSelector } = useOverrideComponents<'ProductDetails'>()
+
   return (
     <section {...otherProps}>
       {availableVariations &&

package/src/pages/[slug]/p.tsx

@@ -15,7 +15,7 @@ import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNew
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import { OverriddenDefaultCrossSellingShelf as CrossSellingShelf } from 'src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf'
-import ProductDetails from 'src/components/sections/ProductDetails'
+import { OverriddenDefaultProductDetails as ProductDetails } from 'src/components/sections/ProductDetails/OverriddenDefaultProductDetails'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { useSession } from 'src/sdk/session'
 import { mark } from 'src/sdk/tests/mark'

package/src/sdk/overrides/sections.tsx

@@ -3,6 +3,7 @@ import BannerText from '../../components/sections/BannerText'
 import Hero from '../../components/sections/Hero'
 import ProductShelf from '../../components/sections/ProductShelf'
 import CrossSellingShelf from '../../components/sections/CrossSellingShelf'
+import ProductDetails from '../../components/sections/ProductDetails'
 
 import type { DefaultSectionComponentsDefinitions } from '../../typings/overridesDefinition'
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -11,12 +12,14 @@ import { BannerTextDefaultComponents } from '../../components/sections/BannerTex
 import { CrossSellingShelfDefaultComponents } from 'src/components/sections/CrossSellingShelf/DefaultComponents'
 import { HeroDefaultComponents } from '../../components/sections/Hero/DefaultComponents'
 import { ProductShelfDefaultComponents } from '../../components/sections/ProductShelf/DefaultComponents'
+import { ProductDetailsDefaultComponents } from '../../components/sections/ProductDetails/DefaultComponents'
 
 export const Sections = {
   Alert,
   BannerText,
   CrossSellingShelf,
   Hero,
+  ProductDetails,
   ProductShelf,
 }
 
@@ -28,7 +31,8 @@ export const DefaultComponents: Partial<
 > = {
   Alert: AlertDefaultComponents,
   BannerText: BannerTextDefaultComponents,
+  CrossSellingShelf: CrossSellingShelfDefaultComponents,
   Hero: HeroDefaultComponents,
+  ProductDetails: ProductDetailsDefaultComponents,
   ProductShelf: ProductShelfDefaultComponents,
-  CrossSellingShelf: CrossSellingShelfDefaultComponents,
 }

package/src/typings/overrides.ts

@@ -49,7 +49,7 @@ export type SectionOverride = {
 /** TODO: every use of this type should be replaced by SectionsOverrides after all sections are supported */
 export type SupportedSectionsOverridesV2 = Pick<
   SectionsOverrides,
-  'Alert' | 'BannerText' | 'CrossSellingShelf' | 'Hero' | 'ProductShelf'
+  'Alert' | 'BannerText' | 'CrossSellingShelf' | 'Hero' | 'ProductShelf' | 'ProductDetails'
 >
 
 /**

package/.next/server/chunks/693.js

@@ -1,58 +0,0 @@
-"use strict";
-exports.id = 693;
-exports.ids = [693];
-exports.modules = {
-
-/***/ 6693:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7041);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2614);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2256);
-
-
-const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
-    const [quantity, setQuantity] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initial ?? min);
-    const isLeftDisabled = quantity === min;
-    const isRightDisabled = quantity === max;
-    const changeQuantity = (increaseValue) => {
-        const quantityValue = validateQuantityBounds(quantity + increaseValue);
-        onChange?.(quantityValue);
-        setQuantity(quantityValue);
-    };
-    const increase = () => changeQuantity(1);
-    const decrease = () => changeQuantity(-1);
-    function validateQuantityBounds(n) {
-        const maxValue = min ? Math.max(n, min) : n;
-        return max ? Math.min(maxValue, max) : maxValue;
-    }
-    function validateInput(e) {
-        const val = e.currentTarget.value;
-        if (!Number.isNaN(Number(val))) {
-            setQuantity(() => {
-                const quantityValue = validateQuantityBounds(Number(val));
-                onChange?.(quantityValue);
-                return quantityValue;
-            });
-        }
-    }
-    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-        initial && setQuantity(initial);
-    }, [initial]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, { "data-quantity-selector-button": "left", icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: quantity, onChange: validateInput, disabled: disabled }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (QuantitySelector);
-//# sourceMappingURL=QuantitySelector.js.map
-
-/***/ })
-
-};
-;

package/.next/server/chunks/779.js

@@ -1,58 +0,0 @@
-"use strict";
-exports.id = 779;
-exports.ids = [779];
-exports.modules = {
-
-/***/ 1953:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-
-const Label = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function Label({ testId = 'fs-label', children, ...otherProps }, ref) {
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { ref: ref, "data-fs-label": true, "data-testid": testId, ...otherProps }, children));
-});
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Label);
-//# sourceMappingURL=Label.js.map
-
-/***/ }),
-
-/***/ 3779:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2256);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1953);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7041);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2614);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3339);
-
-
-const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
-inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
-    const shouldDisplayError = !disabled && error && error !== '';
-    const shouldDisplayButton = actionable && !disabled && value !== '';
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '', "data-testid": testId },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, { htmlFor: id }, label),
-        shouldDisplayButton &&
-            (displayClearButton || error ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, { size: "small", "aria-label": "Clear Field", icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, { name: "XCircle" }), onClick: () => {
-                    onClear?.();
-                    inputRef?.current?.focus();
-                } })) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, { variant: "tertiary", size: "small", onClick: onSubmit }, buttonActionText))),
-        shouldDisplayError && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { "data-fs-input-field-error-message": true }, error))));
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InputField);
-//# sourceMappingURL=InputField.js.map
-
-/***/ })
-
-};
-;