@faststore/core 2.2.61 → 2.2.65

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 $ yarn partytown & yarn generate && next build
-$ partytown copylib ./public/~partytown
 $ faststore generate-graphql -c
+$ partytown copylib ./public/~partytown
 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.23 kB         135 kB
-├   └ css/cf062feb79245123.css             8.38 kB
+┌ ● /                                      6.23 kB         142 kB
+├   └ css/d2e8564f2bf133d9.css             8.38 kB
 ├   /_app                                  0 B            83.7 kB
-├ ● /[...slug]                             7.35 kB         145 kB
-├   └ css/0dc997f9da3027b7.css             8.8 kB
-├ ● /[slug]/p                              5.6 kB          135 kB
+├ ● /[...slug]                             8.26 kB         144 kB
+├   └ css/eababca67e15ef4b.css             8.8 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-41b4f40c5b7ff474.js     2.24 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 (22.314 s)
+PASS test/server/index.test.ts (21.756 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (8 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (7 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 (8 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (5 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (6 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (32 ms)
+      ✓ should return a valid merged GraphQL schema (25 ms)
     Envelop
-      ✓ should exist with its plugins (26 ms)
-      ✓ should handle options and execute (529 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:        22.387 s
+Time:        21.884 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.61",
+  "version": "2.2.65",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -38,10 +38,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.2.56",
-    "@faststore/components": "^2.2.56",
+    "@faststore/components": "^2.2.63",
     "@faststore/graphql-utils": "^2.2.56",
     "@faststore/sdk": "^2.2.61",
-    "@faststore/ui": "^2.2.56",
+    "@faststore/ui": "^2.2.63",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
@@ -123,5 +123,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "b26e37e4a54d982f2550e804f2643a03b5159e85"
+  "gitHead": "16c28fe0a7fccde7ada90e239f6145e1260452d8"
 }

package/src/components/cart/CartSidebar/section.module.scss

@@ -13,6 +13,7 @@
     @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
     @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
     @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
     @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
     @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
     @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";

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/Navbar/section.module.scss

@@ -14,6 +14,7 @@
     @import "@faststore/ui/src/components/atoms/Price/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
     @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";

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

@@ -5,7 +5,7 @@ import {
   SkuSelector as UISkuSelector,
   ShippingSimulation as UIShippingSimulation,
   Icon as UIIcon,
-  Price as UIPrice,
+  ProductPrice as UIProductPrice,
   QuantitySelector as UIQuantitySelector,
   ImageGalleryViewer as UIImageGalleryViewer,
   ImageGallery as UIImageGallery,
@@ -21,7 +21,7 @@ export const ProductDetailsDefaultComponents = {
   DiscountBadge: UIDiscountBadge,
   BuyButton: UIBuyButton,
   Icon: UIIcon,
-  Price: UIPrice,
+  ProductPrice: UIProductPrice,
   QuantitySelector: UIQuantitySelector,
   SkuSelector: UISkuSelector,
   ShippingSimulation: UIShippingSimulation,

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/ProductShelf/section.module.scss

@@ -28,6 +28,7 @@
     @import "@faststore/ui/src/components/molecules/Rating/styles";
     @import "@faststore/ui/src/components/molecules/ProductCard/styles";
     @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+    @import "@faststore/ui/src/components/molecules/ProductPrice/styles";
     @import "@faststore/ui/src/components/organisms/ProductShelf/styles";
   }
 }

package/src/components/sections/ProductTiles/section.module.scss

@@ -9,8 +9,9 @@
     @import "@faststore/ui/src/components/atoms/SROnly/styles";
     @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
     @import "@faststore/ui/src/components/molecules/Rating/styles";
-    @import "@faststore/ui/src/components/molecules/ProductTile/styles";
     @import "@faststore/ui/src/components/molecules/ProductCard/styles";
+    @import "@faststore/ui/src/components/molecules/ProductPrice/styles";
+    @import "@faststore/ui/src/components/molecules/ProductTile/styles";
     @import "@faststore/ui/src/components/organisms/Tiles/styles";
   }
 }

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/ProductDetails/ProductDetailsSettings.tsx

@@ -36,7 +36,7 @@ function ProductDetailsSettings({
   const {
     BuyButton,
     Icon,
-    Price,
+    ProductPrice,
     QuantitySelector,
     __experimentalNotAvailableButton: NotAvailableButton,
   } = useOverrideComponents<'ProductDetails'>()
@@ -52,7 +52,6 @@ function ProductDetailsSettings({
     image: productImages,
     additionalProperty,
     offers: {
-      lowPrice,
       offers: [{ availability, price, listPrice, seller }],
     },
   } = product
@@ -78,10 +77,6 @@ function ProductDetailsSettings({
     () => availability === 'https://schema.org/OutOfStock',
     [availability]
   )
-  const shouldShowDiscountedPrice = useMemo(
-    () => lowPrice !== listPrice,
-    [lowPrice, listPrice]
-  )
 
   const AddToCartButton = () => {
     return outOfStock ? (
@@ -110,48 +105,13 @@ function ProductDetailsSettings({
     <>
       {!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="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>
+          <ProductPrice.Component
+            data-fs-product-details-prices
+            value={price}
+            listPrice={listPrice}
+            formatter={useFormattedPrice}
+            {...ProductPrice.props}
+          />
           <QuantitySelector.Component
             min={1}
             max={10}

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

@@ -26,7 +26,7 @@ import type {
   NavbarSliderFooterProps,
   NavbarSliderHeaderProps,
   NavbarSliderProps,
-  PriceProps,
+  ProductPriceProps,
   ProductShelfProps,
   ProductTitleProps,
   QuantitySelectorProps,
@@ -56,6 +56,7 @@ export type SupportedSectionsOverridesV2 = Pick<
   | 'Hero'
   | 'ProductShelf'
   | 'ProductDetails'
+  | 'ProductGallery'
 >
 
 /**
@@ -160,9 +161,9 @@ export type SectionsOverrides = {
     >
     BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
     Icon: ComponentOverrideDefinition<IconProps, IconProps>
-    Price: ComponentOverrideDefinition<
-      PriceProps,
-      Omit<PriceProps, 'value' | 'data-value'>
+    ProductPrice: ComponentOverrideDefinition<
+      ProductPriceProps,
+      Omit<ProductPriceProps, 'value'>
     >
     QuantitySelector: ComponentOverrideDefinition<
       QuantitySelectorProps,