@faststore/core 3.1.0 → 3.1.2

package/.turbo/turbo-build.log

@@ -38,8 +38,8 @@ https://nextjs.org/telemetry
    Collecting page data ...
    Generating static pages (0/7) ...
 
   Generating static pages (1/7) 
-Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (3/7) 
+Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (5/7) 
 
 ✓ Generating static pages (7/7) 
    Finalizing page optimization ...
@@ -50,7 +50,7 @@ Route (pages)                              Size     First Load JS
 ├   └ css/b1806cbafd0c1f81.css             3.06 kB
 ├   /_app                                  0 B            91.7 kB
 ├ ● /[...slug]                             2 kB            137 kB
-├ ● /[slug]/p                              30.3 kB         149 kB
+├ ● /[slug]/p                              30.3 kB         148 kB
 ├   ├ css/bf1560439df2c1a1.css             5.66 kB
 ├   ├ css/e3ff5d95518a5c79.css             6.01 kB
 ├   └ css/9718991cd57978e9.css             14.8 kB
@@ -64,15 +64,15 @@ Route (pages)                              Size     First Load JS
 ├ ● /checkout                              694 B           119 kB
 ├ ● /login                                 1.57 kB         120 kB
 └ ● /s                                     2.44 kB         137 kB
-+ First Load JS shared by all              94.8 kB
++ First Load JS shared by all              94.7 kB
   ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
   ├ chunks/main-209ac4974b020af1.js        33.1 kB
-  ├ chunks/pages/_app-e419b2062065ccf0.js  9.87 kB
-  ├ chunks/webpack-c139db73ca37b6f3.js     3.39 kB
+  ├ chunks/pages/_app-15d247b2153b1dc4.js  9.84 kB
+  ├ chunks/webpack-5c2cbf0d104592ed.js     3.39 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 70.90s.
+Done in 69.45s.

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 yarn run v1.22.22
 $ next lint
 ✔ No ESLint warnings or errors
-Done in 6.11s.
+Done in 5.91s.

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/server/cms/index.test.ts (35.248 s)
-PASS test/utils/multipleTemplates.test.ts (35.354 s)
-PASS test/server/index.test.ts (38.448 s)
+PASS test/utils/multipleTemplates.test.ts (34.643 s)
+PASS test/server/cms/index.test.ts (35.284 s)
+PASS test/server/index.test.ts (38.49 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.56 s
+Time:        39.72 s
 Ran all test suites.
-Done in 41.68s.
+Done in 40.95s.

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.2](https://github.com/vtex/faststore/compare/v3.1.1...v3.1.2) (2024-12-11)
+
+### Bug Fixes
+
+- **sdk:** page view event trigger ([#2586](https://github.com/vtex/faststore/issues/2586)) ([3988760](https://github.com/vtex/faststore/commit/398876013a293302f9a802b93f0f0880cfe32acb))
+
+## [3.1.1](https://github.com/vtex/faststore/compare/v3.1.0...v3.1.1) (2024-12-09)
+
+### Bug Fixes
+
+- `Sentinel` rendering and wrong PLP's pagination behavior ([#2585](https://github.com/vtex/faststore/issues/2585)) ([ea59e77](https://github.com/vtex/faststore/commit/ea59e77fccee7866bd4e44b73e855dd5cee4ba6e)), closes [vtex-sites/starter.store#630](https://github.com/vtex-sites/starter.store/issues/630)
+
 # [3.1.0](https://github.com/vtex/faststore/compare/v3.0.160...v3.1.0) (2024-12-09)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "f3cbb155a5cd6ecf7b48bc2eb7b24e83f6125c7b"
+  "gitHead": "d2987773691eb3c5a958d59b769fc6ba2847909a"
 }

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

@@ -9,6 +9,7 @@ import { ProductCardProps } from '../ProductCard'
 import { memo } from 'react'
 import ViewportObserver from 'src/components/cms/ViewportObserver'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface Props {
   /**
@@ -45,12 +46,12 @@ function ProductGrid({
   } = {},
   firstPage,
 }: Props) {
+  const { isMobile } = useScreenResize()
   const { __experimentalProductCard: ProductCard } =
     useOverrideComponents<'ProductGallery'>()
-  const aspectRatio = 1
 
-  // TODO: Check if is also isMobile
-  const isFirstPage = firstPage === page
+  const aspectRatio = 1
+  const isGridWithViewportObserver = isMobile && firstPage === page
 
   return (
     <ProductGridSkeleton
@@ -58,7 +59,7 @@ function ProductGrid({
       loading={products.length === 0}
     >
       <UIProductGrid>
-        {isFirstPage ? (
+        {isGridWithViewportObserver ? (
           <>
             {products.slice(0, 2).map(({ node: product }, idx) => (
               <UIProductGridItem key={`${product.id}`}>

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

@@ -28,13 +28,12 @@ function ProductGalleryPage({
   const products = data?.search?.products?.edges ?? []
 
   return (
-    <>
-      <Sentinel
-        products={products}
-        page={page}
-        pageSize={itemsPerPage}
-        title={title}
-      />
+    <Sentinel
+      products={products}
+      page={page}
+      pageSize={itemsPerPage}
+      title={title}
+    >
       <ProductGrid
         products={products}
         page={page}
@@ -42,7 +41,7 @@ function ProductGalleryPage({
         productCard={productCard}
         firstPage={firstPage}
       />
-    </>
+    </Sentinel>
   )
 }
 

package/src/sdk/analytics/hooks/usePageViewEvent.ts

@@ -19,11 +19,7 @@ export const usePageViewEvent = () => {
   const router = useRouter()
 
   useEffect(() => {
-    router.events.on('routeChangeComplete', sendPageViewEvent)
-
-    return () => {
-      router.events.off('routeChangeComplete', sendPageViewEvent)
-    }
+    sendPageViewEvent()
   }, [router, sendPageViewEvent])
 
   return { sendPageViewEvent }

package/src/sdk/search/Sentinel.tsx

@@ -1,14 +1,15 @@
 import { useSearch } from '@faststore/sdk'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, type PropsWithChildren } from 'react'
 import { useInView } from 'react-intersection-observer'
 import type { NextRouter } from 'next/router'
 import { useRouter } from 'next/router'
 
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { useViewItemListEvent } from '../analytics/hooks/useViewItemListEvent'
 
-interface Props {
+interface SentinelProps {
   page: number
   pageSize: number
   title: string
@@ -38,19 +39,24 @@ const replacePagination = (page: string, router: NextRouter) => {
  * Also, this component's name is kind of curious. Wikipedia calls is Page Break(https://en.wikipedia.org/wiki/Page_break)
  * however all codes I've seen online use Sentinel
  */
-function Sentinel({ page, pageSize, products, title }: Props) {
-  const viewedRef = useRef(false)
-  const { ref, inView } = useInView()
-  const { pages } = useSearch()
-
+function Sentinel({
+  page,
+  pageSize,
+  products,
+  title,
+  children,
+}: PropsWithChildren<SentinelProps>) {
   const router = useRouter()
-
+  const { pages } = useSearch()
+  const { isMobile } = useScreenResize()
+  const { ref, inView } = useInView({ threshold: isMobile ? 0.3 : 0.7 })
   const { sendViewItemListEvent } = useViewItemListEvent({
     products,
     title,
     page,
     pageSize,
   })
+  const viewedRef = useRef(false)
 
   useEffect(() => {
     // Only replace pagination state when infinite scroll
@@ -72,7 +78,7 @@ function Sentinel({ page, pageSize, products, title }: Props) {
     products.length,
   ])
 
-  return <div ref={ref} />
+  return <div ref={ref}>{children}</div>
 }
 
 export default Sentinel