@faststore/core 2.2.63 → 2.2.65

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                              660 B           136 kB
+├ ● /login                                 984 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-adf61d0bc3a8dbb3.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 (21.756 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 (5 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (4 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)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (4 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (29 ms)
+      ✓ should return a valid merged GraphQL schema (25 ms)
     Envelop
-      ✓ should exist with its plugins (25 ms)
-      ✓ should handle options and execute (342 ms)
+      ✓ should exist with its plugins (24 ms)
+      ✓ should handle options and execute (209 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.4 s
+Time:        21.884 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.63",
+  "version": "2.2.65",
   "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": "16c28fe0a7fccde7ada90e239f6145e1260452d8"
 }

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/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/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,7 @@ 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 type { DefaultSectionComponentsDefinitions } from '../../typings/overridesDefinition'
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -13,8 +14,9 @@ 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'
 
 export const Sections = {
   Alert,
@@ -23,6 +25,7 @@ export const Sections = {
   CrossSellingShelf,
   Hero,
   ProductDetails,
+  ProductGallery,
   ProductShelf,
 }
 
@@ -38,5 +41,6 @@ export const DefaultComponents: Partial<
   CrossSellingShelf: CrossSellingShelfDefaultComponents,
   Hero: HeroDefaultComponents,
   ProductDetails: ProductDetailsDefaultComponents,
+  ProductGallery: ProductGalleryDefaultComponents,
   ProductShelf: ProductShelfDefaultComponents,
 }

package/src/typings/overrides.ts

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