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

package/src/components/ThirdPartyScripts/index.ts

@@ -1,2 +1,2 @@
 export { default } from './ThirdPartyScripts'
-export { useWebchatScript } from './useWebchatScript'
+export { useShoppingAssistant } from './useShoppingAssistant'

package/src/components/ThirdPartyScripts/{useWebchatScript.tsx → useShoppingAssistant.tsx}

@@ -1,21 +1,21 @@
 import type { RefObject } from 'react'
 import { useEffect } from 'react'
 
-const WEBCHAT_SCRIPT_URL = 'https://cdn.cloud.weni.ai/agentic-cx.js'
+const SHOPPING_ASSISTANT_SCRIPT_URL = 'https://cdn.cloud.weni.ai/agentic-cx.js'
 
 /**
- * Injects the webchat script when the hook runs, unless third-party scripts are disabled.
- * @param containerRef - Optional ref to an HTMLElement. When provided, the script is appended inside this container (e.g. inside the Webchat section). Otherwise the script is appended to document.head.
+ * Injects the Shopping Assistant script when the hook runs, unless third-party scripts are disabled.
+ * @param containerRef - Optional ref to an HTMLElement. When provided, the script is appended inside this container (e.g. inside the ShoppingAssistant section). Otherwise the script is appended to document.head.
  * Must be used in a component rendered in the body (not inside Next.js Head) so that useEffect runs on the client.
  */
-export function useWebchatScript(
+export function useShoppingAssistant(
   containerRef?: RefObject<HTMLElement | null>
 ): void {
   useEffect(() => {
     if (process.env.DISABLE_3P_SCRIPTS) return
 
     const script = document.createElement('script')
-    script.src = WEBCHAT_SCRIPT_URL
+    script.src = SHOPPING_ASSISTANT_SCRIPT_URL
     const container = containerRef?.current
     if (container) {
       container.appendChild(script)

package/src/components/account/MyAccountDrawer/OrganizationDrawer/OrganizationDrawer.tsx

@@ -11,6 +11,7 @@ import storeConfig from '../../../../../discovery.config'
 import { ProfileSummary } from '../ProfileSummary/ProfileSummary'
 import { OrganizationDrawerBody } from './OrganizationDrawerBody'
 import { OrganizationDrawerHeader } from './OrganizationDrawerHeader'
+import { setReloadAfterLogoutReturn } from './useReloadAfterLogoutReturn'
 import styles from './section.module.scss'
 
 type OrganizationDrawerProps = {
@@ -27,6 +28,7 @@ const clearBrowserStorageForCurrentDomain = async () => {
     const sessionStorageKeys = [
       'faststore_session_ready',
       'faststore_auth_cookie_value',
+      'faststore_person_id',
       'faststore_cache_bust_last_value',
     ]
 
@@ -53,6 +55,25 @@ const clearBrowserStorageForCurrentDomain = async () => {
     } catch {}
   } catch {}
 
+  // Clear IndexedDB: remove session key first (avoids blocked when DB has open connections),
+  // then delete the whole keyval-store
+  try {
+    if ('indexedDB' in window) {
+      const { del } = await import('idb-keyval')
+      await del('fs::session').catch(() => {})
+    }
+
+    const idb = window.indexedDB
+    if (idb) {
+      await new Promise<void>((resolve) => {
+        const req = idb.deleteDatabase('keyval-store')
+        req.onsuccess = () => resolve()
+        req.onerror = () => resolve()
+        req.onblocked = () => resolve()
+      })
+    }
+  } catch {}
+
   // Clear all cookies containing 'vtex' in the name (case-insensitive)
   try {
     const hostname = window.location.hostname
@@ -80,21 +101,6 @@ const clearBrowserStorageForCurrentDomain = async () => {
       }
     }
   } catch {}
-
-  // Clear IndexedDB (keyval-store)
-  try {
-    if (!('indexedDB' in window)) return
-
-    const idb = window.indexedDB
-    if (!idb) return
-
-    await new Promise<void>((resolve) => {
-      const req = idb.deleteDatabase('keyval-store')
-      req.onsuccess = () => resolve()
-      req.onerror = () => resolve()
-      req.onblocked = () => resolve()
-    })
-  } catch {}
 }
 
 export const doLogout = async (_event?: unknown) => {
@@ -104,16 +110,19 @@ export const doLogout = async (_event?: unknown) => {
     // Clear client-side storage (sessionStorage, localStorage, IndexedDB, non-HttpOnly cookies)
     await clearBrowserStorageForCurrentDomain()
 
-    // Clear HttpOnly cookies via API endpoint (server-side)
+    // Clear HttpOnly cookies via API endpoint (server-side).
+    // Must await and consume the response so Set-Cookie headers are fully processed before redirect.
     try {
-      await fetch('/api/fs/logout', {
+      const res = await fetch('/api/fs/logout', {
         method: 'POST',
         credentials: 'include',
       })
+      await res.json().catch((): null => null)
     } catch {
-      // Continue even if API call fails
+      // Continue even if API call fails (e.g. network error)
     }
   } finally {
+    setReloadAfterLogoutReturn()
     window.location.assign(
       `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${storeConfig.storeUrl}`
     )

package/src/components/account/MyAccountDrawer/OrganizationDrawer/useReloadAfterLogoutReturn.ts

@@ -0,0 +1,75 @@
+import { useEffect } from 'react'
+
+/**
+ * When the user logs out from the OrganizationDrawer, we redirect to VTEX ID logout
+ * and then return to the store. We need to reload so session-dependent data
+ * (e.g. ProductShelf) and caches are fresh. This module ties that reload to the drawer flow.
+ *
+ * The return can happen in two ways:
+ * 1) bfcache restore: user hits Back or browser restores from cache → pageshow with persisted=true
+ * 2) Fresh load: VTEX ID redirects back → new navigation, persisted=false
+ *
+ * We handle both: check the flag on mount (fresh load) and on pageshow (bfcache).
+ */
+
+export const RELOAD_AFTER_LOGOUT_KEY = 'faststore_reload_after_logout_return'
+
+/**
+ * Call before redirecting to logout. When the user returns to the store, the app
+ * will reload once so session state and caches are fresh.
+ */
+export const setReloadAfterLogoutReturn = (): void => {
+  if (typeof sessionStorage === 'undefined') return
+  try {
+    sessionStorage.setItem(RELOAD_AFTER_LOGOUT_KEY, '1')
+  } catch {
+    // Ignore
+  }
+}
+
+const RELOAD_DELAY_MS = 1000
+
+/**
+ * Forces a full navigation with cache-busting param instead of reload().
+ * Bypasses disk cache by changing the URL, ensuring fresh HTML and API responses.
+ */
+const forceRefreshWithoutCache = (): void => {
+  const url = new URL(window.location.href)
+  url.searchParams.set('_', Date.now().toString())
+  window.location.replace(url.toString())
+}
+
+const checkAndReloadIfReturnedFromLogout = (): void => {
+  try {
+    if (sessionStorage.getItem(RELOAD_AFTER_LOGOUT_KEY)) {
+      sessionStorage.removeItem(RELOAD_AFTER_LOGOUT_KEY)
+      setTimeout(forceRefreshWithoutCache, RELOAD_DELAY_MS)
+    }
+  } catch {
+    // Ignore.
+  }
+}
+
+/**
+ * Hook to use in _app. Ensures a full reload when the user returns from logout
+ * (either via bfcache or fresh redirect), so data matches the new session.
+ */
+export const useReloadAfterLogoutReturn = (): void => {
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    // 1) On mount: handles fresh load return (VTEX ID redirect). pageshow with persisted=false
+    //    means we never get the event for that case, so we must check here.
+    checkAndReloadIfReturnedFromLogout()
+
+    // 2) On pageshow with persisted: handles bfcache restore
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        checkAndReloadIfReturnedFromLogout()
+      }
+    }
+
+    window.addEventListener('pageshow', onPageShow)
+    return () => window.removeEventListener('pageshow', onPageShow)
+  }, [])
+}

package/src/components/cms/global/Components.ts

@@ -36,9 +36,11 @@ const RegionSlider = dynamic(
     ),
   { ssr: false }
 )
-const Webchat = dynamic(
+const ShoppingAssistant = dynamic(
   () =>
-    import(/* webpackChunkName: "Webchat" */ 'src/components/sections/Webchat'),
+    import(
+      /* webpackChunkName: "ShoppingAssistant" */ 'src/components/sections/ShoppingAssistant'
+    ),
   { ssr: false }
 )
 
@@ -51,7 +53,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   [getComponentKey(RegionModal, 'RegionModal')]: RegionModal, // out of viewport
   [getComponentKey(RegionSlider, 'RegionSlider')]: RegionSlider, // out of viewport
   [getComponentKey(Footer, 'Footer')]: Footer, // out of viewport
-  [getComponentKey(Webchat, 'Webchat')]: Webchat,
+  [getComponentKey(ShoppingAssistant, 'ShoppingAssistant')]: ShoppingAssistant,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }