@faststore/core 4.6.0-dev.0 → 4.6.0-dev.2

package/src/components/templates/SearchPage/SearchWrapper.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { useSearch } from '@faststore/sdk'
 import { useRouter } from 'next/router'
 
@@ -40,6 +41,19 @@ export default function SearchWrapper({
     selectedFacets,
   })
 
+  const redirectUrl = pageProductGalleryData?.redirect?.url
+  const lastRedirectedUrl = useRef<string | null>(null)
+
+  // Intelligent Search redirects must run in an effect — calling router.replace
+  // during render re-fires on every state update (e.g. scrollRestoration's
+  // resetInfiniteScroll) and loops until the tab hangs.
+  useEffect(() => {
+    if (!redirectUrl || lastRedirectedUrl.current === redirectUrl) return
+
+    lastRedirectedUrl.current = redirectUrl
+    void router.replace(redirectUrl)
+  }, [redirectUrl, router])
+
   const emptySearchProps = storeConfig.experimental.enableSearchSSR
     ? {
         title: storeConfig.seo.search.bodyH1 ?? 'Showing results for:',
@@ -58,11 +72,7 @@ export default function SearchWrapper({
   }
 
   // Redirect when there are registered Intelligent Search redirects on VTEX Admin
-  if (pageProductGalleryData?.redirect?.url) {
-    router.replace(pageProductGalleryData?.redirect?.url, null, {
-      shallow: true,
-    })
-
+  if (redirectUrl) {
     return (
       <PageProvider context={{ globalSettings }}>
         <RenderSections globalSections={globalSections}>

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

@@ -0,0 +1,238 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PropsWithChildren,
+} from 'react'
+import { useSearch } from '@faststore/sdk'
+
+/** Coarse layout buckets — page height differs a lot across these. */
+export function getGalleryViewportBucket() {
+  if (globalThis.window === undefined) return 'ssr'
+  const width = globalThis.innerWidth
+  if (width <= 420) return 'mobile'
+  if (width <= 768) return 'tablet'
+  if (width < 1280) return 'notebook'
+  return 'desktop'
+}
+
+/** 32-bit string hash — avoids truncating long facet/path keys into collisions. */
+export function hashGalleryPageHeightKey(value: string) {
+  let hash = 0
+  for (const char of value) {
+    hash = Math.trunc(Math.imul(31, hash) + (char.codePointAt(0) ?? 0))
+  }
+  return (hash >>> 0).toString(36)
+}
+
+export function buildGalleryPageHeightKey(
+  page: number,
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  const viewport = search.viewport ?? getGalleryViewportBucket()
+  const raw = JSON.stringify({
+    path: search.path,
+    term: search.term,
+    sort: search.sort,
+    selectedFacets: search.selectedFacets ?? [],
+    page,
+    viewport,
+  })
+  // Hash the full payload so long paths/facets never truncate page/viewport away.
+  return `__fs_gallery_page_h_p${page}_${viewport}_${hashGalleryPageHeightKey(raw)}`
+}
+
+export function readGalleryPageHeight(key: string): number | null {
+  try {
+    const raw = sessionStorage.getItem(key)
+    if (!raw) return null
+    const height = Number(raw)
+    return Number.isFinite(height) && height > 0 ? height : null
+  } catch {
+    return null
+  }
+}
+
+function writeGalleryPageHeight(key: string, height: number) {
+  try {
+    sessionStorage.setItem(key, String(Math.round(height)))
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+/**
+ * Sum of last-measured heights for the active infinite-scroll pages.
+ * Used to reserve space for the whole gallery before individual pages mount.
+ */
+export function getReservedGalleryHeight(
+  pages: number[],
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  return pages.reduce((sum, page) => {
+    const height = readGalleryPageHeight(
+      buildGalleryPageHeightKey(page, search)
+    )
+    return sum + (height ?? 0)
+  }, 0)
+}
+
+/** Client-only reserved height for the results column while products load. */
+export function resolveReservedGalleryHeight(
+  hasProductsLoaded: boolean,
+  pages: number[],
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  if (hasProductsLoaded) return 0
+  return getReservedGalleryHeight(pages, search)
+}
+
+type Props = PropsWithChildren<{
+  page: number
+}>
+
+/**
+ * Locks the gallery page slot to the last measured height **only while the
+ * skeleton is showing**. Once real product cards are mounted, the lock is
+ * released so a viewport resize cannot leave huge empty gaps between pages.
+ */
+function GalleryPageHeightLock({ page, children }: Props) {
+  const {
+    state: { term, sort, selectedFacets },
+  } = useSearch()
+
+  const [viewport, setViewport] = useState(getGalleryViewportBucket)
+
+  useEffect(() => {
+    const onResize = () => setViewport(getGalleryViewportBucket())
+    globalThis.addEventListener('resize', onResize)
+    return () => globalThis.removeEventListener('resize', onResize)
+  }, [])
+
+  const storageKey = useMemo(() => {
+    const path =
+      globalThis.window === undefined ? '' : globalThis.location.pathname
+    return buildGalleryPageHeightKey(page, {
+      path,
+      term: term ?? null,
+      sort: sort ?? null,
+      selectedFacets,
+      viewport,
+    })
+  }, [term, sort, selectedFacets, page, viewport])
+
+  const ref = useRef<HTMLDivElement>(null)
+  /** Height applied only while this page has no product cards yet. */
+  // Start null on SSR and first client paint; storageKey effect applies the
+  // sessionStorage value after mount to avoid hydration mismatches.
+  const [pendingMinHeight, setPendingMinHeight] = useState<number | null>(null)
+  const [isLocked, setIsLocked] = useState(true)
+
+  useEffect(() => {
+    setPendingMinHeight(readGalleryPageHeight(storageKey))
+    // Re-lock briefly when the viewport bucket / search key changes so back-nav
+    // skeletons on a new breakpoint still get the right reserved height.
+    setIsLocked(true)
+  }, [storageKey])
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const syncFromDom = () => {
+      const hasProducts = Boolean(
+        el.querySelector(
+          '[data-fs-product-card], a[data-testid="product-link"]'
+        )
+      )
+
+      if (!hasProducts) {
+        // Skeleton / empty — keep (or restore) the reserved minHeight.
+        setIsLocked(true)
+        return
+      }
+
+      // Products are visible: drop the lock so natural height can shrink on
+      // resize, then persist the unconstrained content height for next back-nav.
+      setIsLocked(false)
+
+      // Measure after minHeight is cleared (next frame).
+      requestAnimationFrame(() => {
+        const height = el.getBoundingClientRect().height
+        if (height < 80) return
+        const rounded = Math.round(height)
+        writeGalleryPageHeight(storageKey, rounded)
+        setPendingMinHeight(rounded)
+      })
+    }
+
+    syncFromDom()
+
+    const mutationObserver = new MutationObserver(syncFromDom)
+    mutationObserver.observe(el, { childList: true, subtree: true })
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        // Only persist when unlocked (real layout). Observing while locked
+        // would re-read the artificial minHeight and never shrink.
+        if (
+          !el.querySelector(
+            '[data-fs-product-card], a[data-testid="product-link"]'
+          )
+        ) {
+          return
+        }
+        const height = el.getBoundingClientRect().height
+        if (height < 80) return
+        const rounded = Math.round(height)
+        writeGalleryPageHeight(storageKey, rounded)
+        setPendingMinHeight(rounded)
+      })
+      resizeObserver.observe(el)
+    }
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver?.disconnect()
+    }
+    // Re-sync when children swap (e.g. skeleton → product grid). MutationObserver
+    // alone is not reliable across React rerenders in jsdom/CI.
+  }, [storageKey, children])
+
+  const style: CSSProperties | undefined =
+    isLocked && pendingMinHeight ? { minHeight: pendingMinHeight } : undefined
+
+  return (
+    <div
+      ref={ref}
+      data-fs-gallery-page-height-lock
+      data-fs-gallery-page={page}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default GalleryPageHeightLock

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

@@ -1,6 +1,6 @@
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
-import { Suspense, useState, type MouseEvent } from 'react'
+import { Suspense, useEffect, useState, type MouseEvent } from 'react'
 
 import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
@@ -24,6 +24,10 @@ import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import styles from '../../sections/ProductGallery/section.module.scss'
+import GalleryPageHeightLock, {
+  getGalleryViewportBucket,
+  resolveReservedGalleryHeight,
+} from './GalleryPageHeightLock'
 import ProductGalleryPage from './ProductGalleryPage'
 const FilterSkeleton = dynamic(
   () =>
@@ -33,8 +37,6 @@ const FilterSkeleton = dynamic(
     )
 )
 
-const GalleryPageSkeleton = <ProductGridSkeleton loading />
-
 export interface ProductGalleryProps {
   title?: string
   searchTerm?: string
@@ -131,7 +133,13 @@ function ProductGallery({
   } = useOverrideComponents<'ProductGallery'>()
 
   const { openFilter, filter: displayFilter } = useUI()
-  const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
+  const {
+    pages,
+    addNextPage,
+    addPrevPage,
+    itemsPerPage,
+    state: { term, sort, selectedFacets },
+  } = useSearch()
   const context = usePage<SearchPageContext | PLPContext>()
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
@@ -151,6 +159,25 @@ function ProductGallery({
     (data as PLPContext['data'])?.collection?.meta?.selectedFacets ?? []
   const filter = useFilter(facets, initialSelectedFacets)
 
+  // Keep the results column tall on PDP→PLP back nav before pages remount.
+  // Only while products are loading — once grids paint, natural height wins
+  // (avoids huge gaps after a viewport resize with a stale reserved minHeight).
+  // Populate after mount so SSR/hydration always start at 0 (sessionStorage is
+  // client-only and would otherwise mismatch).
+  const [reservedGalleryHeight, setReservedGalleryHeight] = useState(0)
+
+  useEffect(() => {
+    setReservedGalleryHeight(
+      resolveReservedGalleryHeight(hasProductsLoaded, pages, {
+        path: globalThis.location.pathname,
+        term: term ?? null,
+        sort: sort ?? null,
+        selectedFacets,
+        viewport: getGalleryViewportBucket(),
+      })
+    )
+  }, [pages, term, sort, selectedFacets, hasProductsLoaded])
+
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
@@ -272,7 +299,14 @@ function ProductGallery({
               )}
             </FilterButtonSkeleton.Component>
           </div>
-          <div data-fs-product-listing-results>
+          <div
+            data-fs-product-listing-results
+            style={
+              reservedGalleryHeight > 0
+                ? { minHeight: reservedGalleryHeight }
+                : undefined
+            }
+          >
             {/* Add link to previous page. This helps on SEO */}
             {!!prev && (
               <div data-fs-product-listing-pagination="top">
@@ -313,25 +347,36 @@ function ProductGallery({
                 </LinkButtonPrev.Component>
               </div>
             )}
-            {/* Render ALL products */}
-            {hasProductsLoaded ? (
-              <Suspense fallback={GalleryPageSkeleton}>
-                {pages.map((page) => (
-                  <ProductGalleryPage
-                    key={`gallery-page-${page}`}
-                    page={page}
-                    title={title}
-                    productCard={productCard}
-                    itemsPerPage={itemsPerPage}
-                    firstPage={pages[0]}
-                    shouldShowComparison={showComparisonProducts}
-                    compareLabel={productComparison?.labels?.compareButton}
-                  />
-                ))}
-              </Suspense>
-            ) : (
-              GalleryPageSkeleton
-            )}
+            {/* Render ALL products.
+                Each page has its own Suspense boundary so a refetch on page N
+                does not unmount pages that already have data (avoids CLS when
+                returning from a PDP with infinite-scroll pages restored).
+                GalleryPageHeightLock keeps the last measured page height while
+                skeletons are shown so the list does not collapse — including
+                the initial !hasProductsLoaded frame. */}
+            {pages.map((page) => (
+              <GalleryPageHeightLock key={`gallery-page-${page}`} page={page}>
+                {hasProductsLoaded ? (
+                  <Suspense
+                    fallback={
+                      <ProductGridSkeleton loading count={itemsPerPage} />
+                    }
+                  >
+                    <ProductGalleryPage
+                      page={page}
+                      title={title}
+                      productCard={productCard}
+                      itemsPerPage={itemsPerPage}
+                      firstPage={pages[0]}
+                      shouldShowComparison={showComparisonProducts}
+                      compareLabel={productComparison?.labels?.compareButton}
+                    />
+                  </Suspense>
+                ) : (
+                  <ProductGridSkeleton loading count={itemsPerPage} />
+                )}
+              </GalleryPageHeightLock>
+            ))}
             {/* Add link to next page. This helps on SEO */}
             {next !== false && (
               <div data-fs-product-listing-pagination="bottom">

package/src/sdk/cart/index.ts

@@ -13,8 +13,10 @@ import type {
 
 import storeConfig from '../../../discovery.config'
 import { request } from '../graphql/request'
-import { sessionStore } from '../session'
+import { hasValidatedSessionStore, sessionStore } from '../session'
+import { syncSalesChannelFromOrderForm } from '../session/syncSalesChannelFromOrderForm'
 import { createValidationStore, useStore } from '../useStore'
+import { waitForSessionValidated } from './waitForSessionValidated'
 
 export interface CartItem
   extends SDKCartItem,
@@ -33,6 +35,7 @@ export const ValidateCartMutation = gql(`
     validateCart(cart: $cart, session: $session) {
       order {
         orderNumber
+        salesChannel
         acceptedOffer {
           ...CartItem
         }
@@ -114,6 +117,8 @@ const getItemId = (item: Pick<CartItem, 'itemOffered' | 'seller' | 'price'>) =>
     .join('::')
 
 const validateCart = async (cart: Cart): Promise<Cart | null> => {
+  await waitForSessionValidated(hasValidatedSessionStore)
+
   const { validateCart: validated = null } = await request<
     ValidateCartMutationMutation,
     ValidateCartMutationMutationVariables
@@ -151,6 +156,15 @@ const validateCart = async (cart: Cart): Promise<Cart | null> => {
     },
   })
 
+  const adoptedSalesChannel = validated?.order?.salesChannel
+  if (adoptedSalesChannel) {
+    syncSalesChannelFromOrderForm(
+      adoptedSalesChannel,
+      () => sessionStore.read(),
+      (session) => sessionStore.setSilent(session)
+    )
+  }
+
   return (
     validated && {
       id: validated.order.orderNumber,

package/src/sdk/cart/waitForSessionValidated.ts

@@ -0,0 +1,43 @@
+import type { Store } from '@faststore/sdk'
+
+/** Max time to wait for the first validateSession before validating the cart. */
+export const SESSION_VALIDATION_WAIT_MS = 3_000
+
+/**
+ * Defers cart validation until session has been validated at least once.
+ * This reduces first-paint races between Session and Cart; sales-channel
+ * correctness after external flows (e.g. Quick Order) is enforced in the API
+ * by preserving/adopting the orderForm SC.
+ */
+export const waitForSessionValidated = async (
+  hasValidatedSessionStore: Store<boolean>,
+  waitMs = SESSION_VALIDATION_WAIT_MS
+): Promise<void> => {
+  if (hasValidatedSessionStore.read()) {
+    return
+  }
+
+  await new Promise<void>((resolve) => {
+    const timeoutId = setTimeout(() => {
+      unsubscribe()
+      resolve()
+    }, waitMs)
+
+    const unsubscribe = hasValidatedSessionStore.subscribe((validated) => {
+      if (!validated) {
+        return
+      }
+
+      clearTimeout(timeoutId)
+      unsubscribe()
+      resolve()
+    })
+
+    // Race: validation may have finished between read() and subscribe()
+    if (hasValidatedSessionStore.read()) {
+      clearTimeout(timeoutId)
+      unsubscribe()
+      resolve()
+    }
+  })
+}

package/src/sdk/session/index.ts

@@ -194,6 +194,9 @@ export const validateSession = async (session: Session) => {
 const [validationStore, onValidate, hasValidatedStore] =
   createValidationStore(validateSession)
 
+/** True after at least one validateSession cycle finished (success or failure). */
+export const hasValidatedSessionStore = hasValidatedStore
+
 const urlAwareInitialSession = getInitialSession()
 const defaultStore = createSessionStore(
   urlAwareInitialSession,
@@ -214,6 +217,17 @@ export const sessionStore = {
     // Trigger cart revalidation when session changes
     cartStore.set(cartStore.read())
   },
+  /**
+   * Updates session without revalidating the cart. Used when aligning
+   * `channel.salesChannel` to an orderForm SC adopted by `validateCart`.
+   * Still runs `validateSession` via the store's optimistic validator; that
+   * path keeps an explicit (non-default) client SC.
+   */
+  setSilent: (val: Session) => {
+    if (deepEqual(val, defaultStore.read()) === true) return
+
+    defaultStore.set(val)
+  },
 }
 
 export async function logoutAndClearSession(session: Session) {

package/src/sdk/session/syncSalesChannelFromOrderForm.ts

@@ -0,0 +1,68 @@
+import type { Session } from '@faststore/sdk'
+
+function parseChannelRecord(
+  raw: string | null | undefined
+): Record<string, unknown> {
+  try {
+    const parsed: unknown = JSON.parse(raw || '{}')
+
+    if (
+      parsed !== null &&
+      typeof parsed === 'object' &&
+      !Array.isArray(parsed)
+    ) {
+      return parsed as Record<string, unknown>
+    }
+  } catch {
+    // Malformed channel — reset below.
+  }
+
+  return {}
+}
+
+function readSalesChannel(channel: Record<string, unknown>): string {
+  const value = channel.salesChannel
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value)
+  }
+
+  return ''
+}
+
+/**
+ * Aligns `fs::session.channel` with a sales channel adopted from the orderForm
+ * (e.g. after Quick Order) without revalidating the cart.
+ *
+ * Uses `sessionStore.setSilent` so we do not trigger `cartStore.set` mid-flight
+ * (that race previously wiped SC-exclusive items). Marks the channel as
+ * explicit (`hasOnlyDefaultSalesChannel: false`) so `validateSession` keeps it.
+ */
+export function syncSalesChannelFromOrderForm(
+  salesChannel: string | null | undefined,
+  readSession: () => Session,
+  setSilent: (session: Session) => void
+): boolean {
+  if (salesChannel == null || salesChannel === '') {
+    return false
+  }
+
+  const session = readSession()
+  const channel = parseChannelRecord(session.channel)
+  const nextSalesChannel = String(salesChannel)
+
+  if (readSalesChannel(channel) === nextSalesChannel) {
+    return false
+  }
+
+  setSilent({
+    ...session,
+    channel: JSON.stringify({
+      ...channel,
+      salesChannel: nextSalesChannel,
+      hasOnlyDefaultSalesChannel: false,
+    }),
+  })
+
+  return true
+}