@faststore/core 3.0.130 → 3.0.132

package/.turbo/turbo-build.log

@@ -45,12 +45,12 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      1.23 kB         142 kB
+┌ ● /                                      1.23 kB         143 kB
 ├   └ css/197e314c5a03eabd.css             740 B
 ├   /_app                                  0 B            90.7 kB
-├ ● /[...slug]                             2.79 kB         155 kB
+├ ● /[...slug]                             2.79 kB         156 kB
 ├   └ css/e47f1a002bdcf76f.css             2.38 kB
-├ ● /[slug]/p                              11.2 kB         152 kB
+├ ● /[slug]/p                              11.2 kB         153 kB
 ├   └ css/9b6bba2472d272ec.css             10.5 kB
 ├ ○ /404                                   1.28 kB         126 kB
 ├ ● /500                                   1.29 kB         126 kB
@@ -60,13 +60,13 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/health/ready                      0 B            90.7 kB
 ├ λ /api/preview                           0 B            90.7 kB
 ├ ● /checkout                              661 B           126 kB
-├ ● /login                                 1.4 kB          126 kB
+├ ● /login                                 1.4 kB          127 kB
 └ ● /s                                     2.22 kB         155 kB
 + First Load JS shared by all              93.8 kB
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-029f1328cfee9686.js        33.1 kB
-  ├ chunks/pages/_app-ed807a0c1aebeb38.js  9.87 kB
-  ├ chunks/webpack-904b033805de64d4.js     2.45 kB
+  ├ chunks/pages/_app-cb1c3a94f987c5c8.js  9.87 kB
+  ├ chunks/webpack-ca5fe5a8d57b1bda.js     2.45 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/server/cms/index.test.ts (33.424 s)
-PASS test/utils/multipleTemplates.test.ts (33.735 s)
-PASS test/server/index.test.ts (38.039 s)
+PASS test/utils/multipleTemplates.test.ts (35.769 s)
+PASS test/server/cms/index.test.ts (36.47 s)
+PASS test/server/index.test.ts (39.897 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.212 s
+Time:        41.135 s
 Ran all test suites.

package/discovery.config.default.js

@@ -100,5 +100,6 @@ module.exports = {
     cypressVersion: 12,
     enableCypressExtension: false,
     noRobots: false,
+    preact: false,
   },
 }

package/next.config.js

@@ -46,6 +46,16 @@ const nextConfig = {
       config.optimization.splitChunks.maxInitialRequests = 1
     }
 
+    if (storeConfig.experimental.preact && !isServer && !dev) {
+      Object.assign(config.resolve.alias, {
+        react: 'preact/compat',
+
+        'react-dom/test-utils': 'preact/test-utils',
+
+        'react-dom': 'preact/compat',
+      })
+    }
+
     return config
   },
   redirects: storeConfig.redirects,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.130",
+  "version": "3.0.132",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,12 +43,12 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.0.130",
-    "@faststore/components": "^3.0.116",
-    "@faststore/graphql-utils": "^3.0.116",
-    "@faststore/lighthouse": "^3.0.116",
-    "@faststore/sdk": "^3.0.120",
-    "@faststore/ui": "^3.0.116",
+    "@faststore/api": "^3.0.131",
+    "@faststore/components": "^3.0.131",
+    "@faststore/graphql-utils": "^3.0.131",
+    "@faststore/lighthouse": "^3.0.131",
+    "@faststore/sdk": "^3.0.131",
+    "@faststore/ui": "^3.0.131",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -87,7 +87,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/eslint-config": "^3.0.116",
+    "@faststore/eslint-config": "^3.0.131",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "397a6ee1653fd5c8b42bd46429be651a95646ccc"
+  "gitHead": "a99b6bc07181fbaa67077b5c12df219fa9975505"
 }

package/src/components/cms/ViewportObserver.tsx

@@ -0,0 +1,88 @@
+import type { PropsWithChildren } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// Mobile height to prevent sections outside the viewport from being rendered initially.
+// We are using the Moto G Power device measurement as a reference, as used by PageSpeed Insights.
+const VIEWPORT_SIZE = 823
+
+type ViewportObserverProps = {
+  /**
+   * Identify the store section
+   */
+  sectionName?: string
+  /**
+   * Debug/test purposes: enables visual debugging to identify the visibility of the section.
+   */
+  debug?: boolean
+} & IntersectionObserverInit
+
+function ViewportObserver({
+  sectionName = '',
+  threshold = 0,
+  root = null,
+  rootMargin,
+  children,
+  debug = false,
+}: PropsWithChildren<ViewportObserverProps>) {
+  const [isVisible, setVisible] = useState(false)
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const observerCallback = useCallback(
+    ([entry]: IntersectionObserverEntry[], obs: IntersectionObserver) => {
+      if (entry.isIntersecting) {
+        if (debug) {
+          console.log(`section '${sectionName}' VISIBLE`)
+          document.body.style.border = '2px solid green'
+        }
+        setVisible(true)
+        if (ref.current) {
+          obs.unobserve(ref.current)
+        }
+      } else {
+        setVisible(false)
+        if (debug) {
+          console.log(`section '${sectionName}' NOT VISIBLE`)
+          document.body.style.border = '2px solid red'
+          document.body.style.height = `${VIEWPORT_SIZE}px`
+          document.body.style.boxSizing = 'border-box'
+        }
+      }
+    },
+    [debug, sectionName]
+  )
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(observerCallback, {
+      root,
+      rootMargin,
+      threshold,
+    })
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => observer.disconnect()
+  }, [observerCallback, root, rootMargin, threshold])
+
+  return (
+    <>
+      {!isVisible && (
+        <div
+          data-store-section-name={sectionName}
+          ref={ref}
+          style={{
+            border: debug ? '2px solid red' : undefined,
+            backgroundColor: debug ? 'red' : undefined,
+            height: VIEWPORT_SIZE, // required to make sections out of the viewport to be rendered on demand
+            width: '100%',
+          }}
+        ></div>
+      )}
+
+      {isVisible && children}
+    </>
+  )
+}
+
+export default ViewportObserver

package/src/components/common/Footer/FooterLinks.tsx

@@ -8,6 +8,7 @@ import {
 import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 type Item = {
   url: string
@@ -38,6 +39,7 @@ export interface FooterLinksProps {
 }
 
 function FooterLinks({ links }: FooterLinksProps) {
+  const { isDesktop } = useScreenResize()
   const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
     new Set([])
   )
@@ -53,7 +55,7 @@ function FooterLinks({ links }: FooterLinksProps) {
 
   return (
     <section data-fs-footer data-fs-footer-links>
-      <div className="display-mobile">
+      {!isDesktop && (
         <UIAccordion indices={indicesExpanded} onChange={onChange}>
           {links.map(({ sectionTitle, items }) => (
             <UIAccordionItem key={sectionTitle}>
@@ -64,9 +66,9 @@ function FooterLinks({ links }: FooterLinksProps) {
             </UIAccordionItem>
           ))}
         </UIAccordion>
-      </div>
+      )}
 
-      <div className="hidden-mobile">
+      {isDesktop && (
         <nav data-fs-footer-links-columns aria-label="Footer Links Navigation">
           {links.map(({ sectionTitle, items }) => (
             <div key={sectionTitle}>
@@ -75,7 +77,7 @@ function FooterLinks({ links }: FooterLinksProps) {
             </div>
           ))}
         </nav>
-      </div>
+      )}
     </section>
   )
 }

package/src/components/navigation/Navbar/Navbar.tsx

@@ -12,6 +12,7 @@ import Link from 'src/components/ui/Link'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 export interface NavbarProps {
   /**
@@ -78,6 +79,8 @@ function Navbar({
   } = useOverrideComponents<'Navbar'>()
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
+  const { isDesktop } = useScreenResize()
+
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
 
@@ -157,7 +160,7 @@ function Navbar({
         </NavbarRow.Component>
       </NavbarHeader.Component>
 
-      <NavbarLinks links={links} region={region} className="hidden-mobile" />
+      {isDesktop && <NavbarLinks links={links} region={region} />}
 
       {displayNavbar && (
         <NavbarSlider

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

@@ -7,6 +7,7 @@ import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import { ProductCardProps } from '../ProductCard'
 
 import { memo } from 'react'
+import ViewportObserver from 'src/components/cms/ViewportObserver'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 interface Props {
@@ -26,6 +27,10 @@ interface Props {
     ProductCardProps,
     'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
   >
+  /**
+   * Identify the number of firstPage
+   */
+  firstPage?: number
 }
 
 function ProductGrid({
@@ -33,38 +38,94 @@ function ProductGrid({
   page,
   pageSize,
   productCard: { showDiscountBadge, bordered, taxesConfiguration } = {},
+  firstPage,
 }: Props) {
   const { __experimentalProductCard: ProductCard } =
     useOverrideComponents<'ProductGallery'>()
   const aspectRatio = 1
 
+  // TODO: Check if is also isMobile
+  const isFirstPage = firstPage === page
+
   return (
     <ProductGridSkeleton
       aspectRatio={aspectRatio}
       loading={products.length === 0}
     >
       <UIProductGrid>
-        {products.map(({ node: product }, idx) => (
-          <UIProductGridItem key={`${product.id}`}>
-            <ProductCard.Component
-              aspectRatio={aspectRatio}
-              imgProps={{
-                width: 150,
-                height: 150,
-                sizes: '30vw',
-                loading: idx === 0 ? 'eager' : 'lazy',
-              }}
-              {...ProductCard.props}
-              bordered={bordered ?? ProductCard.props.bordered}
-              showDiscountBadge={
-                showDiscountBadge ?? ProductCard.props.showDiscountBadge
-              }
-              product={product}
-              index={pageSize * page + idx + 1}
-              taxesConfiguration={taxesConfiguration}
-            />
-          </UIProductGridItem>
-        ))}
+        {isFirstPage ? (
+          <>
+            {products.slice(0, 2).map(({ node: product }, idx) => (
+              <UIProductGridItem key={`${product.id}`}>
+                <ProductCard.Component
+                  aspectRatio={aspectRatio}
+                  imgProps={{
+                    width: 150,
+                    height: 150,
+                    sizes: '30vw',
+                    loading: 'eager',
+                  }}
+                  {...ProductCard.props}
+                  bordered={bordered ?? ProductCard.props.bordered}
+                  showDiscountBadge={
+                    showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                  }
+                  product={product}
+                  index={pageSize * page + idx + 1}
+                  taxesConfiguration={taxesConfiguration}
+                />
+              </UIProductGridItem>
+            ))}
+            <></>
+            <ViewportObserver sectionName="UIProductGrid-out-viewport">
+              {products.slice(2).map(({ node: product }, idx) => (
+                <UIProductGridItem key={`${product.id}`}>
+                  <ProductCard.Component
+                    aspectRatio={aspectRatio}
+                    imgProps={{
+                      width: 150,
+                      height: 150,
+                      sizes: '30vw',
+                      loading: 'lazy',
+                    }}
+                    {...ProductCard.props}
+                    bordered={bordered ?? ProductCard.props.bordered}
+                    showDiscountBadge={
+                      showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                    }
+                    product={product}
+                    index={pageSize * page + idx + 1}
+                    taxesConfiguration={taxesConfiguration}
+                  />
+                </UIProductGridItem>
+              ))}
+            </ViewportObserver>
+          </>
+        ) : (
+          <>
+            {products.map(({ node: product }, idx) => (
+              <UIProductGridItem key={`${product.id}`}>
+                <ProductCard.Component
+                  aspectRatio={aspectRatio}
+                  imgProps={{
+                    width: 150,
+                    height: 150,
+                    sizes: '30vw',
+                    loading: idx === 0 ? 'eager' : 'lazy',
+                  }}
+                  {...ProductCard.props}
+                  bordered={bordered ?? ProductCard.props.bordered}
+                  showDiscountBadge={
+                    showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                  }
+                  product={product}
+                  index={pageSize * page + idx + 1}
+                  taxesConfiguration={taxesConfiguration}
+                />
+              </UIProductGridItem>
+            ))}
+          </>
+        )}
       </UIProductGrid>
     </ProductGridSkeleton>
   )

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

@@ -6,6 +6,7 @@ import { gql } from '@generated'
 import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useFilter } from 'src/sdk/search/useFilter'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface Props {
   /**
@@ -35,17 +36,18 @@ function Filter({
 
   const filter = useFilter(allFacets)
   const { filter: displayFilter } = useUI()
+  const { isDesktop } = useScreenResize()
 
   return (
     <>
-      <div className="hidden-mobile">
+      {isDesktop && (
         <FilterDesktop.Component
           {...FilterDesktop.props}
           {...filter}
           testId={testId}
           title={filterCmsData?.title}
         />
-      </div>
+      )}
 
       {displayFilter && (
         <Suspense fallback={null}>

package/src/components/sections/RegionBar/RegionBar.tsx

@@ -3,6 +3,7 @@ import Section from '../Section/Section'
 import styles from './section.module.scss'
 import { RegionBarDefaultComponents } from './DefaultComponents'
 import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 type RegionBarSectionProps = {
   /**
@@ -27,14 +28,15 @@ type RegionBarSectionProps = {
   buttonIcon?: RegionBarProps['buttonIcon']
 }
 
-function RegionBarSection({
-  className = 'display-mobile',
-  ...otherProps
-}: RegionBarSectionProps) {
+function RegionBarSection({ ...otherProps }: RegionBarSectionProps) {
+  const { isMobile } = useScreenResize()
+
   return (
-    <Section className={`${styles.section} section-region-bar ${className}`}>
-      <RegionBar {...otherProps} />
-    </Section>
+    isMobile && (
+      <Section className={`${styles.section} section-region-bar`}>
+        <RegionBar {...otherProps} />
+      </Section>
+    )
   )
 }
 

package/src/components/ui/Carousel/Carousel.tsx

@@ -2,6 +2,8 @@ import type { PropsWithChildren } from 'react'
 import { Carousel as UICarousel } from '@faststore/ui'
 import type { CarouselProps as UICarouselProps } from '@faststore/ui'
 
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+
 export type CarouselProps = {
   id?: string
   testId?: string
@@ -21,7 +23,9 @@ function Carousel({
   variant = 'scroll',
   infiniteMode = false,
 }: PropsWithChildren<CarouselProps>) {
-  const isMobile = window.innerWidth <= 768
+  const { loading, isTablet, isMobile } = useScreenResize()
+
+  if (loading) return null
 
   return (
     <UICarousel
@@ -29,7 +33,7 @@ function Carousel({
       testId={testId}
       variant={variant}
       infiniteMode={infiniteMode}
-      itemsPerPage={isMobile ? 1.6 : itemsPerPage}
+      itemsPerPage={isTablet || isMobile ? 1.6 : itemsPerPage}
     >
       {children}
     </UICarousel>

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

@@ -12,15 +12,15 @@ 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 { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
-import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import {
   PLPContext,
   SearchPageContext,
   usePage,
 } from 'src/sdk/overrides/PageProvider'
 import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
+import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const GalleryPageSkeleton = <ProductGridSkeleton loading />
@@ -237,6 +237,7 @@ function ProductGallery({
                   title={title}
                   productCard={productCard}
                   itemsPerPage={itemsPerPage}
+                  firstPage={pages[0]}
                 />
               ))}
             </Suspense>

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

@@ -1,8 +1,8 @@
 import ProductGrid from 'src/components/product/ProductGrid'
 import Sentinel from 'src/sdk/search/Sentinel'
 
-import { ProductCardProps } from 'src/components/product/ProductCard'
 import { memo } from 'react'
+import { ProductCardProps } from 'src/components/product/ProductCard'
 import { useGalleryPage } from 'src/sdk/product/usePageProductsQuery'
 
 interface Props {
@@ -13,9 +13,16 @@ interface Props {
     'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
   >
   itemsPerPage: number
+  firstPage: number
 }
 
-function ProductGalleryPage({ page, title, productCard, itemsPerPage }: Props) {
+function ProductGalleryPage({
+  page,
+  title,
+  productCard,
+  itemsPerPage,
+  firstPage,
+}: Props) {
   const { data } = useGalleryPage(page)
 
   const products = data?.search?.products?.edges ?? []
@@ -33,6 +40,7 @@ function ProductGalleryPage({ page, title, productCard, itemsPerPage }: Props) {
         page={page}
         pageSize={itemsPerPage}
         productCard={productCard}
+        firstPage={firstPage}
       />
     </>
   )

package/src/sdk/ui/useScreenResize.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+// We are using the Moto G Power device measurement as a reference (mobile), as used by PageSpeed Insights.
+const MAX_MOBILE_WIDTH = 420
+const MAX_TABLET_WIDTH = 768
+const MIN_NOTEBOOK_WIDTH = 1280
+
+function useScreenResize() {
+  const [isMobile, setIsMobile] = useState(undefined)
+  const [isTablet, setIsTablet] = useState(undefined)
+  const [isDesktop, setIsDesktop] = useState(undefined)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= MAX_MOBILE_WIDTH)
+      setIsTablet(
+        window.innerWidth > MAX_MOBILE_WIDTH &&
+          window.innerWidth <= MAX_TABLET_WIDTH
+      )
+      setIsDesktop(window.innerWidth >= MIN_NOTEBOOK_WIDTH)
+    }
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    loading:
+      isMobile === undefined ||
+      isTablet === undefined ||
+      isDesktop === undefined,
+  }
+}
+
+export default useScreenResize

package/.next/static/chunks/758.829db9862d9c4add.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[758],{5758:function(e,r,t){t.r(r),t.d(r,{default:function(){return j}});var n=t(9499),o=t(2784);let a=(0,o.forwardRef)(function({testId:e="fs-product-grid",children:r,...t},n){return o.createElement("ul",{ref:n,"data-fs-product-grid":!0,...t},r)}),c=(0,o.forwardRef)(function({testId:e="fs-product-grid-item",children:r,...t},n){return o.createElement("li",{ref:n,"data-fs-product-grid-item":!0,...t},r)});var i=t(4548),s=t(4329),u=t(2322);function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){(0,n.Z)(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var d=(0,o.memo)(function(e){var{products:r,page:t,pageSize:n,productCard:{showDiscountBadge:o,bordered:d,taxesConfiguration:l}={}}=e,{__experimentalProductCard:p}=(0,s.r3)();return(0,u.jsx)(i.Z,{aspectRatio:1,loading:0===r.length,children:(0,u.jsx)(a,{children:r.map((e,r)=>{var{node:a}=e;return(0,u.jsx)(c,{children:(0,u.jsx)(p.Component,_objectSpread(_objectSpread({aspectRatio:1,imgProps:{width:150,height:150,sizes:"30vw",loading:0===r?"eager":"lazy"}},p.props),{},{bordered:null!=d?d:p.props.bordered,showDiscountBadge:null!=o?o:p.props.showDiscountBadge,product:a,index:n*t+r+1,taxesConfiguration:l}))},"".concat(a.id))})})})}),l=t(9029),p=t(7704),f=t(1163),g=t(6414),replacePagination=(e,r)=>{var t=new URL(window.location.href);t.searchParams.get("page")!==e&&(t.searchParams.set("page",e),r.replace(t,void 0,{shallow:!0,scroll:!1}))},search_Sentinel=function(e){var{page:r,pageSize:t,products:n,title:a}=e,c=(0,o.useRef)(!1),{ref:i,inView:s}=(0,p.YD)(),{pages:d}=(0,l.R)(),h=(0,f.useRouter)(),{sendViewItemListEvent:j}=(0,g.m)({products:n,title:a,page:r,pageSize:t});return(0,o.useEffect)(()=>{s&&d.length>1&&replacePagination(r.toString(),h),s&&!c.current&&n.length&&(j(),c.current=!0)},[d.length,s,r,h,j,n.length]),(0,u.jsx)("div",{ref:i})},h=t(7171),j=(0,o.memo)(function(e){var r,t,n,{page:o,title:a,productCard:c,itemsPerPage:i}=e,{data:s}=(0,h.__)(o),l=null!==(r=null==s?void 0:null===(t=s.search)||void 0===t?void 0:null===(n=t.products)||void 0===n?void 0:n.edges)&&void 0!==r?r:[];return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(search_Sentinel,{products:l,page:o,pageSize:i,title:a}),(0,u.jsx)(d,{products:l,page:o,pageSize:i,productCard:c})]})})}}]);