@faststore/core 3.98.0-dev.1 → 3.98.0-dev.10

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -378,6 +378,7 @@ export const fragment = gql(`
         priceWithTaxes
         listPrice
         listPriceWithTaxes
+        quantity
         seller {
           identifier
         }

package/src/components/sections/ShoppingAssistant/ShoppingAssistant.tsx

@@ -0,0 +1,24 @@
+import { useRef } from 'react'
+
+import { useShoppingAssistant } from 'src/components/ThirdPartyScripts'
+
+import Section from '../Section'
+
+import styles from './section.module.scss'
+
+const ShoppingAssistant = () => {
+  const scriptContainerRef = useRef<HTMLDivElement>(null)
+  useShoppingAssistant(scriptContainerRef)
+
+  return (
+    <Section
+      className={`${styles.section} section-shopping-assistant layout__section`}
+    >
+      <div ref={scriptContainerRef} aria-hidden="true" hidden />
+    </Section>
+  )
+}
+
+ShoppingAssistant.$componentKey = 'ShoppingAssistant'
+
+export default ShoppingAssistant

package/src/components/sections/ShoppingAssistant/index.ts

@@ -0,0 +1 @@
+export { default } from './ShoppingAssistant'

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

@@ -0,0 +1,5 @@
+@layer components {
+  .section {
+    position: relative;
+  }
+}

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -73,7 +73,7 @@ export default function ProductListing({
     itemsPerPage,
   })
 
-  const initialPages = { search: server?.search }
+  const initialPages = { search: { ...server?.search, searchId: '' } }
   const { pages, useGalleryPage } = useCreateUseGalleryPage({
     initialPages,
     serverManyProductsVariables,

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

@@ -18,6 +18,20 @@ interface Props {
   compareLabel?: string
 }
 
+function buildExtraProductProps(
+  product: Record<string, string>,
+  index: number,
+  searchId: string
+) {
+  return {
+    'data-af-element': 'search-result',
+    'data-af-onclick': product && !!product.productId,
+    'data-af-search-id': searchId,
+    'data-af-product-position': Number(index ?? 0) + 1, // Product position in Search Analytics starts with 1
+    'data-af-product-id': product && product.productId,
+  }
+}
+
 function ProductGalleryPage({
   page,
   title,
@@ -30,6 +44,7 @@ function ProductGalleryPage({
   const { data } = useGalleryPage(page)
 
   const products = data?.search?.products?.edges ?? []
+  const searchId = data?.search?.searchId
 
   return (
     <Sentinel
@@ -47,6 +62,8 @@ function ProductGalleryPage({
         productCard={productCard}
         firstPage={firstPage}
         title={title}
+        searchId={searchId}
+        buildExtraProductProps={searchId && buildExtraProductProps}
       />
     </Sentinel>
   )

package/src/pages/[slug]/p.tsx

@@ -208,6 +208,7 @@ function Page({
         brand={product.brand.name}
         sku={product.sku}
         gtin={product.gtin}
+        mpn={product.mpn}
         releaseDate={product.releaseDate}
         images={product.image.map((img) => img.url)} // Somehow, Google does not understand this valid Schema.org schema, so we need to do conversions
         offers={offers}
@@ -256,6 +257,7 @@ const query = gql(`
 
       sku
       gtin
+      mpn
       name
       description
       releaseDate

package/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 import { useSearch } from '@faststore/sdk'
 import { UIProvider } from '@faststore/ui'
 
+import { useReloadAfterLogoutReturn } from 'src/components/account/MyAccountDrawer/OrganizationDrawer/useReloadAfterLogoutReturn'
 import ThirdPartyScripts from 'src/components/ThirdPartyScripts'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
@@ -24,6 +25,7 @@ import { ITEMS_PER_PAGE } from 'src/constants'
 
 function App({ Component, pageProps }: AppProps) {
   useGeolocation()
+  useReloadAfterLogoutReturn()
   storeConfig.experimental?.scrollRestoration && useScrollRestoration()
   const router = useRouter()
   const { start: startGlobalSearchState } = useSearch()

package/src/sdk/graphql/request.ts

@@ -29,7 +29,7 @@ export const request = async <Query = unknown, Variables = unknown>(
   variables: Variables,
   options?: RequestOptions
 ) => {
-  // Get cache busting value based on cookie changes
+  // Get cache busting value based person?.id from session
   const value = getClientCacheBustingValue()
 
   const { data, errors } = await baseRequest<Variables, Query>('/api/graphql', {

package/src/sdk/graphql/useQuery.ts

@@ -1,8 +1,10 @@
-import useSWR from 'swr'
 import type { SWRConfiguration } from 'swr'
+import useSWR from 'swr'
+
+import { getClientCacheBustingValue } from 'src/utils/cookieCacheBusting'
 
-import { request } from './request'
 import type { Operation, RequestOptions } from './request'
+import { request } from './request'
 
 export type QueryOptions = SWRConfiguration &
   RequestOptions & { doNotRun?: boolean }
@@ -12,6 +14,19 @@ export const getKey = <Variables>(
   variables: Variables
 ) => `${operationName}::${JSON.stringify(variables)}`
 
+/**
+ * Returns a suffix for the cache key based on auth state (logged-in vs anonymous).
+ * This ensures SWR keeps separate cache entries for logged-in and logged-out users,
+ * avoiding stale product data (e.g. prices, availability) when switching session state.
+ */
+const getSessionCacheKeySuffix = (): string => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  const value = getClientCacheBustingValue()
+  return value ?? ''
+}
+
 export const DEFAULT_OPTIONS = {
   errorRetryCount: 3,
   refreshWhenHidden: false,
@@ -27,10 +42,12 @@ export const useQuery = <Data, Variables = Record<string, unknown>>(
   options?: QueryOptions
 ) =>
   useSWR<Data>(
-    () =>
-      options?.doNotRun
-        ? null
-        : getKey(operation['__meta__']['operationName'], variables),
+    () => {
+      if (options?.doNotRun) return null
+      const baseKey = getKey(operation['__meta__']['operationName'], variables)
+      const sessionSuffix = getSessionCacheKeySuffix()
+      return `${baseKey}::${sessionSuffix}`
+    },
     {
       fetcher: () => {
         return new Promise((resolve) => {

package/src/sdk/product/convertProductToQuickOrder.ts

@@ -0,0 +1,85 @@
+import type { Product } from '@faststore/ui'
+import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
+
+/**
+ * Converts a product from the API to the format expected by QuickOrderDrawer
+ */
+export const convertProductToQuickOrder = (
+  product: ProductDetailsFragment_ProductFragment,
+  requestedQuantity: number
+): Product | null => {
+  if (!product || !product.offers || !product.offers.offers.length) {
+    return null
+  }
+
+  const offer = product.offers.offers[0]
+
+  // Determine availability based on the offer's availability field
+  // Availability can be 'https://schema.org/InStock' or 'https://schema.org/OutOfStock'
+  const isOutOfStock = offer.availability === 'https://schema.org/OutOfStock'
+  const isInStock = offer.availability === 'https://schema.org/InStock'
+
+  // Get inventory quantity from the offer
+  // If quantity is not provided, we'll use a default high value when InStock
+  // This handles cases where the API doesn't return quantity but marks it as InStock
+  const offerQuantity = (offer as { quantity?: number | null }).quantity
+  const inventory =
+    offerQuantity != null
+      ? offerQuantity
+      : isInStock
+        ? 999999 // Default to high inventory when InStock but quantity not provided
+        : 0
+
+  // Product is available if it's in stock
+  // If quantity is provided, we also check it, but availability field takes precedence
+  const availability = isInStock ? 'available' : 'outOfStock'
+
+  // Determine selectedCount and quantityUpdated based on availability and inventory
+  let selectedCount: number
+  let quantityUpdated: boolean
+  const normalizedRequestedQuantity =
+    Number.isFinite(requestedQuantity) && requestedQuantity > 0
+      ? Math.floor(requestedQuantity)
+      : 1
+
+  if (isOutOfStock) {
+    // Out of stock: set quantity to 0
+    selectedCount = 0
+    quantityUpdated = true
+  } else if (inventory === 0) {
+    // Inventory is 0 but marked as InStock (edge case): set quantity to 0
+    selectedCount = 0
+    quantityUpdated = true
+  } else if (offerQuantity != null && normalizedRequestedQuantity > inventory) {
+    // Quantity is provided and requested quantity exceeds inventory: cap at inventory
+    selectedCount = inventory
+    quantityUpdated = true
+  } else {
+    // Requested quantity is within inventory (or quantity not provided): use requested quantity
+    selectedCount = normalizedRequestedQuantity
+    quantityUpdated = normalizedRequestedQuantity !== requestedQuantity
+  }
+
+  // Get the variant name from allVariantProducts that matches this product's SKU
+  // This ensures we use the correct variant name instead of the product name
+  const variantProduct =
+    product.isVariantOf?.skuVariants?.allVariantProducts?.find(
+      (variant) =>
+        variant.productID === product.id || variant.productID === product.sku
+    )
+  const productName = variantProduct?.name ?? product.name
+
+  return {
+    id: product.sku,
+    name: productName,
+    price: offer.price,
+    quantityUpdated,
+    image: {
+      url: product.image[0]?.url ?? '',
+      alternateName: product.image[0]?.alternateName || product.name,
+    },
+    inventory,
+    availability: availability as 'available' | 'outOfStock',
+    selectedCount,
+  }
+}

package/src/sdk/product/useBulkProductsQuery.ts

@@ -0,0 +1,128 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { gql } from '@generated'
+import type {
+  ClientProductQueryQuery,
+  ClientProductQueryQueryVariables,
+} from '@generated/graphql'
+
+import { request } from '../graphql/request'
+import { useSession } from '../session'
+
+// Use the same query as useProductQuery for individual products
+const query = gql(`
+  query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {
+    ...ClientProduct
+    product(locator: $locator) {
+      ...ProductDetailsFragment_product
+    }
+  }
+`)
+
+export interface BulkProductData {
+  sku: string
+  product?: ClientProductQueryQuery['product']
+  error?: Error
+}
+
+// Batch size to avoid overwhelming the server
+const BATCH_SIZE = 10
+const BATCH_DELAY_MS = 100
+
+export const useBulkProductsQuery = (skus: string[]) => {
+  const { channel, locale } = useSession()
+  const [products, setProducts] = useState<BulkProductData[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  // Create a stable key for the SKUs array to use as a dependency
+  const skusKey = useMemo(() => {
+    return skus.join(',')
+  }, [skus])
+
+  useEffect(() => {
+    if (skus.length === 0) {
+      setProducts([])
+      setIsLoading(false)
+      return
+    }
+
+    const fetchProducts = async () => {
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        if (!channel) {
+          throw new Error(
+            `useBulkProductsQuery: 'channel' from session is an empty string.`
+          )
+        }
+
+        const results: BulkProductData[] = []
+
+        for (let i = 0; i < skus.length; i += BATCH_SIZE) {
+          const batch = skus.slice(i, i + BATCH_SIZE)
+
+          const batchPromises = batch.map(
+            async (sku): Promise<BulkProductData> => {
+              try {
+                const variables: ClientProductQueryQueryVariables = {
+                  locator: [
+                    { key: 'id', value: sku },
+                    { key: 'channel', value: channel },
+                    { key: 'locale', value: locale },
+                  ],
+                }
+
+                // Use POST method to avoid URL length issues with GET
+                const data = await request<
+                  ClientProductQueryQuery,
+                  ClientProductQueryQueryVariables
+                >(query, variables, {
+                  fetchOptions: {
+                    method: 'POST',
+                  },
+                })
+
+                return {
+                  sku,
+                  product: data.product,
+                }
+              } catch (err) {
+                console.error(`Failed to fetch product ${sku}:`, err)
+                return {
+                  sku,
+                  error:
+                    err instanceof Error
+                      ? err
+                      : new Error(`Failed to fetch product: ${sku}`),
+                }
+              }
+            }
+          )
+
+          const batchResults = await Promise.all(batchPromises)
+          results.push(...batchResults)
+
+          // Add a small delay between batches to avoid rate limiting
+          if (i + BATCH_SIZE < skus.length) {
+            await new Promise((resolve) => setTimeout(resolve, BATCH_DELAY_MS))
+          }
+        }
+
+        setProducts(results)
+      } catch (err) {
+        setError(
+          err instanceof Error ? err : new Error('Failed to fetch products')
+        )
+        setProducts([])
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchProducts()
+  }, [skusKey, channel, locale, skus.length])
+
+  return { products, isLoading, error }
+}

package/src/sdk/product/usePageProductsQuery.ts

@@ -1,8 +1,8 @@
 import { useSearch } from '@faststore/sdk'
 import { gql } from '@generated'
 import type {
-  ClientManyProductsQueryQuery,
-  ClientManyProductsQueryQueryVariables,
+  ClientManyProductsQueryWithSearchIdQuery,
+  ClientManyProductsQueryWithSearchIdQueryVariables,
 } from '@generated/graphql'
 import deepEquals from 'fast-deep-equal'
 import {
@@ -34,7 +34,7 @@ export const useGalleryPage = (page: number) => {
 }
 
 export const query = gql(`
-  query ClientManyProductsQuery(
+  query ClientManyProductsQueryWithSearchId(
     $first: Int!
     $after: String
     $sort: StoreSort!
@@ -61,6 +61,7 @@ export const query = gql(`
           }
         }
       }
+      searchId
     }
   }
 `)
@@ -68,8 +69,8 @@ export const query = gql(`
 const getKey = (object: any) => JSON.stringify(object)
 
 interface UseCreateUseGalleryPageProps {
-  initialPages: ClientManyProductsQueryQuery
-  serverManyProductsVariables: ClientManyProductsQueryQueryVariables
+  initialPages: ClientManyProductsQueryWithSearchIdQuery
+  serverManyProductsVariables: ClientManyProductsQueryWithSearchIdQueryVariables
 }
 
 /**
@@ -84,9 +85,10 @@ export const useCreateUseGalleryPage = (
     : []
 
   const [pages, setPages] =
-    useState<ClientManyProductsQueryQuery[]>(initialPages)
+    useState<ClientManyProductsQueryWithSearchIdQuery[]>(initialPages)
   // We create pagesRef as a mirror of the pages state so we don't have to add pages as a dependency of the useGalleryPage hook
-  const pagesRef = useRef<ClientManyProductsQueryQuery[]>(initialPages)
+  const pagesRef =
+    useRef<ClientManyProductsQueryWithSearchIdQuery[]>(initialPages)
   const pagesCache = useRef<string[]>(initialVariables)
 
   const useGalleryPage = useCallback(function useGalleryPage(page: number) {
@@ -116,8 +118,8 @@ export const useCreateUseGalleryPage = (
     const shouldFetch = !hasSameVariables || shouldFetchFirstPage
 
     const { data } = useQuery<
-      ClientManyProductsQueryQuery,
-      ClientManyProductsQueryQueryVariables
+      ClientManyProductsQueryWithSearchIdQuery,
+      ClientManyProductsQueryWithSearchIdQueryVariables
     >(query, localizedVariables, {
       fallbackData: null,
       suspense: true,

package/src/sdk/search/useSuggestions.ts

@@ -34,6 +34,7 @@ const query = gql(`
       metadata {
         ...SearchEvent_metadata
       }
+      searchId
     }
   }
 `)

package/src/styles/global/index.scss

@@ -11,4 +11,5 @@
 @import "src/components/sections/Section/section.scss";
 
 // Importing this component because is being used outside the context of the Section
-@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+@import "@faststore/ui/src/components/organisms/QuickOrderDrawer/styles.scss";
+@import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";

package/src/utils/cookieCacheBusting.ts

@@ -1,59 +1,49 @@
-import discoveryConfig from 'discovery.config'
+import { sessionStore } from 'src/sdk/session'
 
-export const STORAGE_KEY_AUTH_COOKIE_VALUE = 'faststore_auth_cookie_value'
+export const STORAGE_KEY_PERSON_ID = 'faststore_person_id'
 export const STORAGE_KEY_CACHE_BUST_LAST_VALUE =
   'faststore_cache_bust_last_value'
 
 /**
- * Gets the VtexIdclientAutCookie value from browser
- * Note: vtex_segment is httpOnly and cannot be accessed via JavaScript,
- * so we only monitor VtexIdclientAutCookie_<account>
+ * Gets person?.id from session (via ValidateSession).
+ * Reads session store directly since auth cookies are httpOnly and inaccessible via JavaScript.
  */
-const getAuthCookieValue = (): string | null => {
-  if (typeof document === 'undefined') {
+const getPersonId = (): string | null => {
+  if (typeof window === 'undefined') {
     return null
   }
-
-  const account = discoveryConfig.api.storeId
-  const authCookieName = `VtexIdclientAutCookie_${account}`
-  const cookies = document.cookie.split(';').map((cookie) => cookie.trim())
-  const authCookie = cookies.find((c) => c.startsWith(`${authCookieName}=`))
-
-  if (!authCookie) {
-    return null
-  }
-
-  return authCookie.split('=').slice(1).join('=')
+  const session = sessionStore.read() ?? sessionStore.readInitial()
+  return session?.person?.id ?? null
 }
 
 /**
- * Gets the stored auth cookie value from sessionStorage (client-side only)
+ * Gets the stored person id from sessionStorage (client-side only)
  */
-const getStoredAuthCookieValue = (): string | null => {
+const getStoredPersonId = (): string | null => {
   if (typeof sessionStorage === 'undefined') {
     return null
   }
 
   try {
-    return sessionStorage.getItem(STORAGE_KEY_AUTH_COOKIE_VALUE)
+    return sessionStorage.getItem(STORAGE_KEY_PERSON_ID)
   } catch {
     return null
   }
 }
 
 /**
- * Stores the auth cookie value in sessionStorage (client-side only)
+ * Stores the person id in sessionStorage (client-side only)
  */
-const storeAuthCookieValue = (value: string | null): void => {
+const storePersonId = (value: string | null): void => {
   if (typeof sessionStorage === 'undefined') {
     return
   }
 
   try {
     if (value === null) {
-      sessionStorage.removeItem(STORAGE_KEY_AUTH_COOKIE_VALUE)
+      sessionStorage.removeItem(STORAGE_KEY_PERSON_ID)
     } else {
-      sessionStorage.setItem(STORAGE_KEY_AUTH_COOKIE_VALUE, value)
+      sessionStorage.setItem(STORAGE_KEY_PERSON_ID, value)
     }
   } catch {
     // Ignore storage errors
@@ -93,13 +83,13 @@ const storeLastValue = (value: string): void => {
 /**
  * Clears all cache busting related data from sessionStorage (client-side only)
  */
-const clearStorage = (): void => {
+const clearCacheBustingStorage = (): void => {
   if (typeof sessionStorage === 'undefined') {
     return
   }
 
   try {
-    sessionStorage.removeItem(STORAGE_KEY_AUTH_COOKIE_VALUE)
+    sessionStorage.removeItem(STORAGE_KEY_PERSON_ID)
     sessionStorage.removeItem(STORAGE_KEY_CACHE_BUST_LAST_VALUE)
   } catch {
     // Ignore storage errors
@@ -107,28 +97,31 @@ const clearStorage = (): void => {
 }
 
 /**
- * Gets cache busting value for client-side based on auth cookie changes
+ * Gets cache busting value for client-side based on auth state changes.
+ * Uses person?.id from session (via useSession/ValidateSession) since auth cookies
+ * are now httpOnly and cannot be accessed via JavaScript.
  */
 export const getClientCacheBustingValue = (): string | null => {
-  const currentAuthCookieValue = getAuthCookieValue()
+  const currentPersonId = getPersonId()
 
-  // Guard clause: if auth cookie doesn't exist, clear storage and don't proceed with cache busting logic
-  if (currentAuthCookieValue === null) {
-    clearStorage()
+  // Guard clause: if user is not logged in (no person?.id), clear storage and don't proceed with cache busting logic
+  if (currentPersonId === null) {
+    clearCacheBustingStorage()
     return null
   }
 
-  const storedAuthCookieValue = getStoredAuthCookieValue()
+  const storedPersonId = getStoredPersonId()
 
-  // If auth cookie changed, update stored value and return new timestamp
-  if (currentAuthCookieValue !== storedAuthCookieValue) {
-    storeAuthCookieValue(currentAuthCookieValue)
+  // If person changed (login/logout or different user), update stored value and return new value
+  if (currentPersonId !== storedPersonId) {
+    storePersonId(currentPersonId)
     const timestamp = Date.now().toString()
-    storeLastValue(timestamp)
-    return timestamp
+    const value = `${timestamp}::${currentPersonId}`
+    storeLastValue(value)
+    return value
   }
 
-  // Auth cookie hasn't changed, return last value or create one if it doesn't exist
+  // Person hasn't changed, return last value or create one if it doesn't exist
   const lastValue = getLastValue()
   if (lastValue) {
     return lastValue
@@ -136,6 +129,7 @@ export const getClientCacheBustingValue = (): string | null => {
 
   // Fallback: if no last value, create one
   const timestamp = Date.now().toString()
-  storeLastValue(timestamp)
-  return timestamp
+  const value = `${timestamp}::${currentPersonId}`
+  storeLastValue(value)
+  return value
 }