@faststore/core 3.98.0-dev.5 → 3.98.0-dev.8

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/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/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
 }

package/src/utils/utilities.ts

@@ -108,3 +108,65 @@ export const buildFormData = (
 
 export const toArray = <T>(x: T[] | T | undefined) =>
   Array.isArray(x) ? x : x ? [x] : []
+
+/**
+ * Formats the file name to a more user-friendly version.
+ * @param fileName - The original file name.
+ * @returns The formatted file name.
+ * @example
+ * formatFileName('smartphoneX5-23-256gb-black-edition-2023.csv')
+ * // Returns: 'smartphoneX5-23...ck-edition-2023.csv'
+ */
+export function formatFileName(fileName: string): string {
+  const maxLength = 30
+  const extensionIndex = fileName.lastIndexOf('.')
+  const extension = extensionIndex !== -1 ? fileName.slice(extensionIndex) : ''
+
+  if (fileName.length <= maxLength) {
+    return fileName
+  }
+
+  const nameWithoutExtension =
+    extensionIndex !== -1 ? fileName.slice(0, extensionIndex) : fileName
+
+  const availableBase = maxLength - extension.length
+
+  if (availableBase <= 0) {
+    // Extension alone exceeds maxLength; truncate from the end of the full name
+    return fileName.slice(0, maxLength)
+  }
+
+  const ellipsis = '...'
+  if (availableBase <= ellipsis.length) {
+    return `${nameWithoutExtension.slice(0, availableBase)}${extension}`
+  }
+
+  const half = Math.floor((availableBase - ellipsis.length) / 2)
+  const start = nameWithoutExtension.slice(0, half)
+  const end = nameWithoutExtension.slice(
+    -(availableBase - ellipsis.length - half)
+  )
+  const truncatedNameWithoutExtension = `${start}${ellipsis}${end}`
+
+  return `${truncatedNameWithoutExtension}${extension}`
+}
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ * @param bytes - The file size in bytes.
+ * @returns The formatted file size string.
+ * @example
+ * formatFileSize(2048) // Returns: '2 KB'
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes <= 0) return '0 Bytes'
+
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(k)),
+    sizes.length - 1
+  )
+
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}

package/test/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}