From cdca4940d484e6ba18b5e03087a67204af295856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susana=20Mart=C3=ADnez?= <susanmarthinez@gmail.com>
Date: Fri, 17 Nov 2023 16:06:52 -0500
Subject: [PATCH 1/2] feat: add gallery elementToScrollTo behavior

---
 CHANGELOG.md                           |  4 ++
 react/Gallery.tsx                      | 57 ++++++++++++++++++++------
 react/GalleryLayout.tsx                | 23 -----------
 react/components/GalleryLayoutItem.tsx |  1 +
 react/components/GalleryLayoutRow.tsx  |  4 +-
 5 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e03758641..2549295e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [3.127.1] - 2023-10-24
 
+### changed
+- Behavior `scrollToElement` added to Gallery component for PLP.
+- `lazyItemsRemaining` removed in Gallery component and GalleryLayout. `lazyRender` removed in GalleryLayoutRow component.
+
 ### Changed
 - Bump `vtex.store-resources` version.
 
diff --git a/react/Gallery.tsx b/react/Gallery.tsx
index e8ff8c3de..efb8c6eab 100644
--- a/react/Gallery.tsx
+++ b/react/Gallery.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { ProductList as ProductListStructuredData } from 'vtex.structured-data'
 
 import GalleryLayout from './GalleryLayout'
@@ -16,23 +16,56 @@ type GalleryLayoutPropsWithSlots = Omit<GalleryLayoutProps, 'slots'> & Slots
 const Gallery: React.FC<
   GalleryLegacyProps | GalleryLayoutPropsWithSlots
 > = props => {
-  if ('layouts' in props && props.layouts.length > 0) {
-    const {
-      layouts,
-      lazyItemsRemaining,
-      products,
-      showingFacets,
-      summary,
-      preferredSKU,
-      ...slots
-    } = props as GalleryLayoutPropsWithSlots
+  const { layouts, products, showingFacets, summary, preferredSKU, ...slots } =
+    props as GalleryLayoutPropsWithSlots
+
+  useEffect(() => {
+    const lastClickedProductId = localStorage.getItem('lastClickedProductId')
+    const isMobile = window.innerWidth <= 768
+
+    const delayedExecution = setTimeout(() => {
+      const scrollToElement = (elementId: string, offset: number) => {
+        const elementToScrollTo = document.getElementById(elementId)
+
+        if (elementToScrollTo) {
+          const rect = elementToScrollTo.getBoundingClientRect()
+          const isElementVisible =
+            rect.top >= 0 &&
+            rect.bottom <=
+              (window.innerHeight || document.documentElement.clientHeight)
+
+          if (!isElementVisible) {
+            elementToScrollTo.scrollIntoView({
+              behavior: 'auto',
+              block: 'center',
+              inline: 'nearest',
+            })
 
+            setTimeout(() => {
+              scrollToElement(elementId, offset)
+            }, 500)
+          }
+        }
+      }
+
+      const recursiveScroll = () => {
+        if (lastClickedProductId) {
+          scrollToElement(lastClickedProductId, isMobile ? -200 : -200)
+        }
+      }
+
+      recursiveScroll()
+    }, 1000)
+
+    return () => clearTimeout(delayedExecution)
+  }, [])
+
+  if ('layouts' in props && props.layouts.length > 0) {
     return (
       <Fragment>
         <ProductListStructuredData products={products} />
         <GalleryLayout
           layouts={layouts}
-          lazyItemsRemaining={lazyItemsRemaining}
           products={products}
           showingFacets={showingFacets}
           summary={summary}
diff --git a/react/GalleryLayout.tsx b/react/GalleryLayout.tsx
index 2f57655b0..c105852c9 100644
--- a/react/GalleryLayout.tsx
+++ b/react/GalleryLayout.tsx
@@ -2,11 +2,9 @@ import React, { useContext, useEffect, useMemo } from 'react'
 import type { ComponentType } from 'react'
 import classNames from 'classnames'
 import { ProductListContext } from 'vtex.product-list-context'
-import { Spinner } from 'vtex.styleguide'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 import { useResponsiveValue } from 'vtex.responsive-values'
 import type { MaybeResponsiveInput } from 'vtex.responsive-values'
-import { useRuntime } from 'vtex.render-runtime'
 import { SearchPageContext } from 'vtex.search-page-context'
 
 import GalleryLayoutRow from './components/GalleryLayoutRow'
@@ -20,8 +18,6 @@ import {
 import { useBreadcrumb } from './hooks/useBreadcrumb'
 import { useSearchTitle } from './hooks/useSearchTitle'
 
-const LAZY_RENDER_THRESHOLD = 2
-
 const CSS_HANDLES = ['gallery'] as const
 
 const { ProductListProvider } = ProductListContext
@@ -37,7 +33,6 @@ export type Slots = Record<string, ComponentType>
 
 export interface GalleryLayoutProps {
   layouts: LayoutOption[]
-  lazyItemsRemaining: number
   products: Product[]
   showingFacets: boolean
   summary: unknown
@@ -54,7 +49,6 @@ export type PreferredSKU =
 
 const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   layouts,
-  lazyItemsRemaining,
   products,
   showingFacets,
   summary,
@@ -63,7 +57,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
 }) => {
   const { trackingId } = useContext(SettingsContext) || {}
   const handles = useCssHandles(CSS_HANDLES)
-  const { getSettings } = useRuntime()
   const { selectedGalleryLayout } = useSearchPageState()
   const searchPageStateDispatch = useSearchPageStateDispatch()
 
@@ -148,9 +141,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
     }
   )
 
-  const isLazyRenderEnabled =
-    getSettings('vtex.store')?.enableSearchRenderingOptimization
-
   return (
     <ProductListProvider listName={listName as string}>
       <div id="gallery-layout-container" className={galleryClasses}>
@@ -158,7 +148,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
           <GalleryLayoutRow
             key={`${currentLayoutOption.name}-${index}`}
             products={rowProducts}
-            lazyRender={!!isLazyRenderEnabled && index >= LAZY_RENDER_THRESHOLD}
             summary={summary}
             displayMode="normal"
             itemsPerRow={itemsPerRow}
@@ -169,18 +158,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
             GalleryItemComponent={slots[currentLayoutOption.component]}
           />
         ))}
-        {typeof lazyItemsRemaining === 'number' && lazyItemsRemaining > 0 && (
-          <div
-            style={{
-              width: '100%',
-              // Approximate number, just to add scroll leeway
-              height: 300 * Math.ceil(lazyItemsRemaining / itemsPerRow),
-            }}
-            className="flex justify-center pt10"
-          >
-            <Spinner />
-          </div>
-        )}
       </div>
       <ProductListEventCaller />
     </ProductListProvider>
diff --git a/react/components/GalleryLayoutItem.tsx b/react/components/GalleryLayoutItem.tsx
index 24c2fb47d..5ee7dc45b 100644
--- a/react/components/GalleryLayoutItem.tsx
+++ b/react/components/GalleryLayoutItem.tsx
@@ -44,6 +44,7 @@ const GalleryLayoutItem: React.FC<GalleryLayoutItemProps> = ({
       position,
       list: listName,
     })
+    localStorage.setItem('lastClickedProductId', product.productId)
   }, [
     product,
     push,
diff --git a/react/components/GalleryLayoutRow.tsx b/react/components/GalleryLayoutRow.tsx
index 9560e3500..062efdc5b 100644
--- a/react/components/GalleryLayoutRow.tsx
+++ b/react/components/GalleryLayoutRow.tsx
@@ -15,7 +15,6 @@ interface GalleryLayoutRowProps {
   displayMode: string
   GalleryItemComponent: ComponentType
   itemsPerRow: number
-  lazyRender: boolean
   products: Product[]
   summary: unknown
   rowIndex: number
@@ -28,7 +27,6 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   GalleryItemComponent,
   displayMode,
   itemsPerRow,
-  lazyRender,
   products,
   summary,
   currentLayoutName,
@@ -44,7 +42,6 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   }
 
   const { hasBeenViewed, dummyElement } = useRenderOnView({
-    lazyRender,
     offset: 900,
   })
 
@@ -68,6 +65,7 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
               ]),
               'pa4'
             )}
+            id={product.productId}
           >
             <GalleryItem
               GalleryItemComponent={GalleryItemComponent}

From 6101425a473940f2fdc892e852b55279cf13714e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susana=20Mart=C3=ADnez?= <susanmarthinez@gmail.com>
Date: Wed, 20 Dec 2023 11:54:24 -0500
Subject: [PATCH 2/2] feat: lazyRendering on scroll behavior files updated

---
 CHANGELOG.md                          |  1 -
 react/Gallery.tsx                     | 12 ++++++++++--
 react/GalleryLayout.tsx               | 23 +++++++++++++++++++++++
 react/components/GalleryLayoutRow.tsx |  3 +++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2549295e0..0f27062f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### changed
 - Behavior `scrollToElement` added to Gallery component for PLP.
-- `lazyItemsRemaining` removed in Gallery component and GalleryLayout. `lazyRender` removed in GalleryLayoutRow component.
 
 ### Changed
 - Bump `vtex.store-resources` version.
diff --git a/react/Gallery.tsx b/react/Gallery.tsx
index efb8c6eab..b0b7d1757 100644
--- a/react/Gallery.tsx
+++ b/react/Gallery.tsx
@@ -16,8 +16,15 @@ type GalleryLayoutPropsWithSlots = Omit<GalleryLayoutProps, 'slots'> & Slots
 const Gallery: React.FC<
   GalleryLegacyProps | GalleryLayoutPropsWithSlots
 > = props => {
-  const { layouts, products, showingFacets, summary, preferredSKU, ...slots } =
-    props as GalleryLayoutPropsWithSlots
+  const {
+    layouts,
+    lazyItemsRemaining,
+    products,
+    showingFacets,
+    summary,
+    preferredSKU,
+    ...slots
+  } = props as GalleryLayoutPropsWithSlots
 
   useEffect(() => {
     const lastClickedProductId = localStorage.getItem('lastClickedProductId')
@@ -66,6 +73,7 @@ const Gallery: React.FC<
         <ProductListStructuredData products={products} />
         <GalleryLayout
           layouts={layouts}
+          lazyItemsRemaining={lazyItemsRemaining}
           products={products}
           showingFacets={showingFacets}
           summary={summary}
diff --git a/react/GalleryLayout.tsx b/react/GalleryLayout.tsx
index c105852c9..2f57655b0 100644
--- a/react/GalleryLayout.tsx
+++ b/react/GalleryLayout.tsx
@@ -2,9 +2,11 @@ import React, { useContext, useEffect, useMemo } from 'react'
 import type { ComponentType } from 'react'
 import classNames from 'classnames'
 import { ProductListContext } from 'vtex.product-list-context'
+import { Spinner } from 'vtex.styleguide'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 import { useResponsiveValue } from 'vtex.responsive-values'
 import type { MaybeResponsiveInput } from 'vtex.responsive-values'
+import { useRuntime } from 'vtex.render-runtime'
 import { SearchPageContext } from 'vtex.search-page-context'
 
 import GalleryLayoutRow from './components/GalleryLayoutRow'
@@ -18,6 +20,8 @@ import {
 import { useBreadcrumb } from './hooks/useBreadcrumb'
 import { useSearchTitle } from './hooks/useSearchTitle'
 
+const LAZY_RENDER_THRESHOLD = 2
+
 const CSS_HANDLES = ['gallery'] as const
 
 const { ProductListProvider } = ProductListContext
@@ -33,6 +37,7 @@ export type Slots = Record<string, ComponentType>
 
 export interface GalleryLayoutProps {
   layouts: LayoutOption[]
+  lazyItemsRemaining: number
   products: Product[]
   showingFacets: boolean
   summary: unknown
@@ -49,6 +54,7 @@ export type PreferredSKU =
 
 const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   layouts,
+  lazyItemsRemaining,
   products,
   showingFacets,
   summary,
@@ -57,6 +63,7 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
 }) => {
   const { trackingId } = useContext(SettingsContext) || {}
   const handles = useCssHandles(CSS_HANDLES)
+  const { getSettings } = useRuntime()
   const { selectedGalleryLayout } = useSearchPageState()
   const searchPageStateDispatch = useSearchPageStateDispatch()
 
@@ -141,6 +148,9 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
     }
   )
 
+  const isLazyRenderEnabled =
+    getSettings('vtex.store')?.enableSearchRenderingOptimization
+
   return (
     <ProductListProvider listName={listName as string}>
       <div id="gallery-layout-container" className={galleryClasses}>
@@ -148,6 +158,7 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
           <GalleryLayoutRow
             key={`${currentLayoutOption.name}-${index}`}
             products={rowProducts}
+            lazyRender={!!isLazyRenderEnabled && index >= LAZY_RENDER_THRESHOLD}
             summary={summary}
             displayMode="normal"
             itemsPerRow={itemsPerRow}
@@ -158,6 +169,18 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
             GalleryItemComponent={slots[currentLayoutOption.component]}
           />
         ))}
+        {typeof lazyItemsRemaining === 'number' && lazyItemsRemaining > 0 && (
+          <div
+            style={{
+              width: '100%',
+              // Approximate number, just to add scroll leeway
+              height: 300 * Math.ceil(lazyItemsRemaining / itemsPerRow),
+            }}
+            className="flex justify-center pt10"
+          >
+            <Spinner />
+          </div>
+        )}
       </div>
       <ProductListEventCaller />
     </ProductListProvider>
diff --git a/react/components/GalleryLayoutRow.tsx b/react/components/GalleryLayoutRow.tsx
index 062efdc5b..d82c1d2b7 100644
--- a/react/components/GalleryLayoutRow.tsx
+++ b/react/components/GalleryLayoutRow.tsx
@@ -15,6 +15,7 @@ interface GalleryLayoutRowProps {
   displayMode: string
   GalleryItemComponent: ComponentType
   itemsPerRow: number
+  lazyRender: boolean
   products: Product[]
   summary: unknown
   rowIndex: number
@@ -27,6 +28,7 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   GalleryItemComponent,
   displayMode,
   itemsPerRow,
+  lazyRender,
   products,
   summary,
   currentLayoutName,
@@ -42,6 +44,7 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   }
 
   const { hasBeenViewed, dummyElement } = useRenderOnView({
+    lazyRender,
     offset: 900,
   })