@faststore/core 2.2.63 → 2.2.66

package/.turbo/turbo-build.log

@@ -38,28 +38,28 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      6.23 kB         135 kB
+┌ ● /                                      6.23 kB         142 kB
 ├   └ css/d2e8564f2bf133d9.css             8.38 kB
 ├   /_app                                  0 B            83.7 kB
-├ ● /[...slug]                             7.35 kB         145 kB
+├ ● /[...slug]                             8.26 kB         144 kB
 ├   └ css/eababca67e15ef4b.css             8.8 kB
-├ ● /[slug]/p                              5.6 kB          135 kB
+├ ● /[slug]/p                              5.6 kB          141 kB
 ├   └ css/e67c73ff7fbc8c54.css             4.42 kB
-├ ○ /404                                   1.19 kB         130 kB
-├ ● /500                                   1.21 kB         130 kB
-├ ● /account                               676 B           130 kB
+├ ○ /404                                   1.03 kB         136 kB
+├ ● /500                                   1.05 kB         136 kB
+├ ● /account                               676 B           136 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                              660 B           130 kB
-├ ● /login                                 1.14 kB         130 kB
-└ ● /s                                     1.38 kB         139 kB
+├ ● /checkout                              661 B           136 kB
+├ ● /login                                 983 B           136 kB
+└ ● /s                                     2.36 kB         138 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-b302478d1b1f81e9.js     2.23 kB
+  ├ chunks/webpack-340b017ee637c5d4.js     2.22 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.263 s)
+PASS test/server/index.test.ts (22.015 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (7 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (5 ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (2 ms)
+      ✓ should return a valid GraphQL schema (9 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (10 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)
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (5 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (9 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (4 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (13 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (29 ms)
+      ✓ should return a valid merged GraphQL schema (26 ms)
     Envelop
-      ✓ should exist with its plugins (25 ms)
-      ✓ should handle options and execute (342 ms)
+      ✓ should exist with its plugins (41 ms)
+      ✓ should handle options and execute (602 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.4 s
+Time:        22.137 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.63",
+  "version": "2.2.66",
   "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": "1723768de147478e2cfddc4671845b1802707e8c"
+  "gitHead": "81034df9aab52c9772e5c4684fc5c2138890b24b"
 }

package/src/components/cms/GlobalSections.tsx

@@ -8,9 +8,9 @@ import Toast from 'src/components/common/Toast'
 import RenderSections from './RenderSections'
 
 import { OverriddenDefaultAlert as Alert } from 'src/components/sections/Alert/OverriddenDefaultAlert'
+import { OverriddenDefaultRegionBar as RegionBar } from 'src/components/sections/RegionBar/OverriddenDefaultRegionBar'
 import Footer from 'src/components/sections/Footer'
 import Navbar from 'src/components/sections/Navbar'
-import RegionBar from 'src/components/sections/RegionBar'
 
 const RegionModal = lazy(() => import('src/components/region/RegionModal'))
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -4,11 +4,10 @@ import {
 } from '@faststore/ui'
 import type { ClientManyProductsQueryQuery } from '@generated/graphql'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-
 import { ProductCardProps } from '../ProductCard'
 
-import { __experimentalProductCard as ProductCard } from 'src/components/sections/ProductGallery/Overrides'
 import { memo } from 'react'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 interface Props {
   /**
@@ -30,11 +29,10 @@ function ProductGrid({
   products,
   page,
   pageSize,
-  productCard: {
-    showDiscountBadge = ProductCard.props.showDiscountBadge,
-    bordered = ProductCard.props.bordered,
-  } = {},
+  productCard: { showDiscountBadge, bordered } = {},
 }: Props) {
+  const { __experimentalProductCard: ProductCard } =
+    useOverrideComponents<'ProductGallery'>()
   const aspectRatio = 1
 
   return (
@@ -53,8 +51,10 @@ function ProductGrid({
                 sizes: '30vw',
               }}
               {...ProductCard.props}
-              bordered={bordered}
-              showDiscountBadge={showDiscountBadge}
+              bordered={bordered ?? ProductCard.props.bordered}
+              showDiscountBadge={
+                showDiscountBadge ?? ProductCard.props.showDiscountBadge
+              }
               product={product}
               index={pageSize * page + idx + 1}
             />

package/src/components/region/RegionBar/RegionBar.tsx

@@ -3,11 +3,7 @@ import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
 import { useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 
-import {
-  RegionBar as RegionBarWrapper,
-  LocationIcon,
-  ButtonIcon,
-} from 'src/components/sections/RegionBar/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export interface RegionBarProps {
   /**
@@ -35,18 +31,18 @@ export interface RegionBarProps {
 }
 
 function RegionBar({
-  icon: {
-    icon: locationIcon = LocationIcon.props.name,
-    alt: locationIconAlt = LocationIcon.props['aria-label'],
-  },
-  buttonIcon: {
-    icon: buttonIcon = ButtonIcon.props.name,
-    alt: buttonIconAlt = ButtonIcon.props['aria-label'],
-  },
-  label = RegionBarWrapper.props.label,
-  editLabel = RegionBarWrapper.props.editLabel,
+  icon: { icon: locationIcon, alt: locationIconAlt },
+  buttonIcon: { icon: buttonIcon, alt: buttonIconAlt },
+  label,
+  editLabel,
   ...otherProps
 }: RegionBarProps) {
+  const {
+    RegionBar: RegionBarWrapper,
+    LocationIcon,
+    ButtonIcon,
+  } = useOverrideComponents<'RegionBar'>()
+
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
@@ -55,20 +51,20 @@ function RegionBar({
       icon={
         <LocationIcon.Component
           {...LocationIcon.props}
-          name={locationIcon}
-          aria-label={locationIconAlt}
+          name={locationIcon ?? LocationIcon.props.name}
+          aria-label={locationIconAlt ?? LocationIcon.props['aria-label']}
         />
       }
       buttonIcon={
         <ButtonIcon.Component
           {...ButtonIcon.props}
-          name={buttonIcon}
-          aria-label={buttonIconAlt}
+          name={buttonIcon ?? ButtonIcon.props.name}
+          aria-label={buttonIconAlt ?? ButtonIcon.props['aria-label']}
         />
       }
       {...RegionBarWrapper.props}
-      label={label}
-      editLabel={editLabel}
+      label={label ?? RegionBarWrapper.props.label}
+      editLabel={editLabel ?? RegionBarWrapper.props.editLabel}
       // Dynamic props shouldn't be overridable
       // This decision can be reviewed later if needed
       onButtonClick={openModal}

package/src/components/search/Filter/Filter.tsx

@@ -3,13 +3,9 @@ import { useUI } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import { Suspense } from 'react'
 import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useFilter } from 'src/sdk/search/useFilter'
 
-import {
-  __experimentalFilterDesktop as FilterDesktop,
-  __experimentalFilterSlider as FilterSlider,
-} from 'src/components/sections/ProductGallery/Overrides'
-
 interface Props {
   /**
    * CMS defined data to be used in filter component.
@@ -31,6 +27,11 @@ function Filter({
   testId = 'fs-filter',
   filter: filterCmsData,
 }: Props) {
+  const {
+    __experimentalFilterDesktop: FilterDesktop,
+    __experimentalFilterSlider: FilterSlider,
+  } = useOverrideComponents<'ProductGallery'>()
+
   const filter = useFilter(allFacets)
   const { filter: displayFilter } = useUI()
 

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

@@ -0,0 +1,29 @@
+import { lazy } from 'react'
+import {
+  Button as UIButton,
+  LinkButton as UILinkButton,
+  Skeleton as UISkeleton,
+  Icon as UIIcon,
+} from '@faststore/ui'
+
+import ProductCard from 'src/components/product/ProductCard'
+import FilterDesktop from 'src/components/search/Filter/FilterDesktop'
+import EmptyGallery from './EmptyGallery'
+
+const FilterSlider = lazy(
+  () => import('src/components/search/Filter/FilterSlider')
+)
+export const ProductGalleryDefaultComponents = {
+  MobileFilterButton: UIButton,
+  FilterIcon: UIIcon,
+  PrevIcon: UIIcon,
+  ResultsCountSkeleton: UISkeleton,
+  SortSkeleton: UISkeleton,
+  FilterButtonSkeleton: UISkeleton,
+  LinkButtonPrev: UILinkButton,
+  LinkButtonNext: UILinkButton,
+  __experimentalFilterDesktop: FilterDesktop,
+  __experimentalFilterSlider: FilterSlider,
+  __experimentalProductCard: ProductCard,
+  __experimentalEmptyGallery: EmptyGallery,
+} as const

package/src/components/sections/ProductGallery/OverriddenDefaultProductGallery.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/ProductGallery'
+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 ProductGallery section present in the Headless CMS
+ */
+export const OverriddenDefaultProductGallery = getOverriddenSection(
+  override as SectionOverrideDefinition<'ProductGallery'>
+)

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -6,8 +6,6 @@ import ProductGallery, {
 import Section from '../Section'
 import type { EmptyGalleryProps } from './EmptyGallery'
 
-import { __experimentalEmptyGallery as EmptyGallery } from 'src/components/sections/ProductGallery/Overrides'
-
 import styles from './section.module.scss'
 import {
   PLPContext,
@@ -16,6 +14,7 @@ import {
   isSearchPage,
   usePage,
 } from 'src/sdk/overrides/PageProvider'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export interface ProductGallerySectionProps {
   searchTermLabel?: ProductGalleryProps['searchTermLabel']
@@ -33,6 +32,9 @@ function ProductGallerySection({
   emptyGallery,
   ...otherProps
 }: ProductGallerySectionProps) {
+  const { __experimentalEmptyGallery: EmptyGallery } =
+    useOverrideComponents<'ProductGallery'>()
+
   const context = usePage<SearchPageContext | PLPContext>()
   const [title, searchTerm] = isSearchPage(context)
     ? [context?.data?.title, context?.data?.searchTerm]

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

@@ -0,0 +1,7 @@
+import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
+
+export const RegionBarDefaultComponents = {
+  RegionBar: UIRegionBar,
+  LocationIcon: UIIcon,
+  ButtonIcon: UIIcon,
+} as const

package/src/components/sections/RegionBar/OverriddenDefaultRegionBar.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/RegionBar'
+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 RegionBar section present in the Headless CMS
+ */
+export const OverriddenDefaultRegionBar = getOverriddenSection(
+  override as SectionOverrideDefinition<'RegionBar'>
+)

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -1,7 +1,7 @@
 import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
-import ProductGallery from 'src/components/sections/ProductGallery'
+import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'

package/src/components/templates/SearchPage/SearchPage.tsx

@@ -2,7 +2,7 @@ import { useSearch } from '@faststore/sdk'
 import type { ComponentType } from 'react'
 
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
-import ProductGallery from 'src/components/sections/ProductGallery'
+import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import RenderSections from 'src/components/cms/RenderSections'

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -12,16 +12,6 @@ import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import { ProductCardProps } from 'src/components/product/ProductCard'
 import { FilterSliderProps } from 'src/components/search/Filter/FilterSlider'
 import { SortProps } from 'src/components/search/Sort/Sort'
-import {
-  FilterButtonSkeleton,
-  FilterIcon,
-  LinkButtonNext,
-  LinkButtonPrev,
-  MobileFilterButton,
-  PrevIcon,
-  ResultsCountSkeleton,
-  SortSkeleton,
-} from 'src/components/sections/ProductGallery/Overrides'
 import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
 import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 import {
@@ -30,6 +20,7 @@ import {
   usePage,
 } from 'src/sdk/overrides/PageProvider'
 import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const GalleryPageSkeleton = <ProductGridSkeleton loading />
@@ -81,6 +72,17 @@ function ProductGallery({
   sortBySelector,
   productCard,
 }: ProductGalleryProps) {
+  const {
+    FilterButtonSkeleton,
+    FilterIcon,
+    LinkButtonNext,
+    LinkButtonPrev,
+    MobileFilterButton,
+    PrevIcon,
+    ResultsCountSkeleton,
+    SortSkeleton,
+  } = useOverrideComponents<'ProductGallery'>()
+
   const { openFilter } = useUI()
   const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
   const context = usePage<SearchPageContext | PLPContext>()

package/src/sdk/overrides/sections.tsx

@@ -5,6 +5,8 @@ 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 ProductGallery from '../../components/sections/ProductGallery'
+import RegionBar from '../../components/sections/RegionBar'
 
 import type { DefaultSectionComponentsDefinitions } from '../../typings/overridesDefinition'
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -13,8 +15,10 @@ import { BannerTextDefaultComponents } from '../../components/sections/BannerTex
 import { BreadcrumbDefaultComponents } from 'src/components/sections/Breadcrumb/DefaultComponents'
 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'
+import { ProductGalleryDefaultComponents } from '../../components/sections/ProductGallery/DefaultComponents'
+import { ProductShelfDefaultComponents } from '../../components/sections/ProductShelf/DefaultComponents'
+import { RegionBarDefaultComponents } from '../../components/sections/RegionBar/DefaultComponents'
 
 export const Sections = {
   Alert,
@@ -23,7 +27,9 @@ export const Sections = {
   CrossSellingShelf,
   Hero,
   ProductDetails,
+  ProductGallery,
   ProductShelf,
+  RegionBar,
 }
 
 export const DefaultComponents: Partial<
@@ -38,5 +44,7 @@ export const DefaultComponents: Partial<
   CrossSellingShelf: CrossSellingShelfDefaultComponents,
   Hero: HeroDefaultComponents,
   ProductDetails: ProductDetailsDefaultComponents,
+  ProductGallery: ProductGalleryDefaultComponents,
   ProductShelf: ProductShelfDefaultComponents,
+  RegionBar: RegionBarDefaultComponents,
 }

package/src/typings/overrides.ts

@@ -56,6 +56,8 @@ export type SupportedSectionsOverridesV2 = Pick<
   | 'Hero'
   | 'ProductShelf'
   | 'ProductDetails'
+  | 'ProductGallery'
+  | 'RegionBar'
 >
 
 /**