@faststore/core 4.8.1-dev.1 → 4.8.1-dev.2

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

@@ -2,6 +2,7 @@ import { SlideOver, useFadeEffect } from '@faststore/ui'
 import { useEffect, useState } from 'react'
 
 import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
+import { useAvailableContracts } from 'src/sdk/account/useAvailableContracts'
 import { useSession } from 'src/sdk/session'
 import {
   expireCookieClient,
@@ -23,6 +24,8 @@ type OrganizationDrawerProps = {
   isOpen: boolean
   closeDrawer: () => void
   isRepresentative: boolean
+  /** Open straight into the contract switcher (My Account "Switch" button). */
+  initialView?: OrganizationDrawerView
 }
 
 const clearBrowserStorageForCurrentDomain = async () => {
@@ -140,16 +143,17 @@ export const OrganizationDrawer = ({
   isOpen,
   closeDrawer,
   isRepresentative,
+  initialView = 'menu',
 }: OrganizationDrawerProps) => {
   const { fade, fadeOut } = useFadeEffect()
   const { b2b, person } = useSession()
-  const [view, setView] = useState<OrganizationDrawerView>('menu')
+  const [view, setView] = useState<OrganizationDrawerView>(initialView)
 
   useEffect(() => {
     if (!isOpen) {
-      setView('menu')
+      setView(initialView)
     }
-  }, [isOpen])
+  }, [isOpen, initialView])
 
   const contractName =
     b2b?.contractName?.trim() ||
@@ -168,6 +172,16 @@ export const OrganizationDrawer = ({
   const canSwitchContract = Boolean(b2b?.unitId)
   const isOrgMember = Boolean(b2b?.unitId)
 
+  // Only fetch the contract list while the drawer is open for an org member,
+  // so nothing is requested on initial page render (TTFB budget).
+  const { contracts } = useAvailableContracts(isOpen && canSwitchContract)
+  const activeContractId = b2b?.customerId?.trim() ?? ''
+  const activeContract =
+    (activeContractId
+      ? contracts.find((contract) => contract.id === activeContractId)
+      : undefined) ?? contracts.find((contract) => contract.isActive)
+  const isActiveContractDefault = Boolean(activeContract?.isDefault)
+
   return (
     <SlideOver
       data-fs-organization-drawer
@@ -190,6 +204,7 @@ export const OrganizationDrawer = ({
               onCloseDrawer={closeDrawer}
               contractName={contractName}
               contractUrl={contractUrl}
+              isDefault={isActiveContractDefault}
               onChangeContract={
                 canSwitchContract ? () => setView('switch') : undefined
               }

package/src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerHeader.tsx

@@ -59,6 +59,7 @@ export const OrganizationDrawerHeader = ({
                   name="Star"
                   width={20}
                   height={20}
+                  aria-label="Default contract"
                 />
               )}
               {onChangeContract && (

package/src/components/account/Drawer/OrganizationDrawer/section.module.scss

@@ -128,6 +128,10 @@
       [data-fs-organization-drawer-header-default] {
         flex-shrink: 0;
         color: var(--fs-color-link);
+
+        // The Star symbol only declares stroke="currentColor", so without this
+        // the fill falls back to the SVG default (black).
+        fill: currentColor;
       }
 
       [data-fs-organization-drawer-header-change] {
@@ -331,6 +335,9 @@
         [data-fs-contract-switcher-default] {
           flex-shrink: 0;
           color: var(--fs-color-link);
+
+          // See the drawer header star: the symbol carries no fill of its own.
+          fill: currentColor;
         }
 
         // Footer: Cancel / Confirm

package/src/components/account/Drawer/OrganizationSignInButton/OrganizationSignInButton.tsx

@@ -13,21 +13,19 @@ export const OrganizationSignInButton = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const { person } = useSession()
+  const { person, b2b } = useSession()
   const navigationLabels = useAccountNavigationLabels()
   const companyLabel = navigationLabels?.companyLabel ?? 'Company'
   const contractLabel = navigationLabels?.contractLabel ?? 'Contract'
+  const activeContractName = b2b?.contractName?.trim()
+  const label =
+    activeContractName || (person?.id ? companyLabel : contractLabel)
 
   const openDrawer = (
     event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLButtonElement>
   ) => {
-    // if (session.person) {
-    // biome-ignore lint/correctness/noConstantCondition: <explanation>
-    if (true) {
-      event.preventDefault()
-
-      setIsOpen(true)
-    }
+    event.preventDefault()
+    setIsOpen(true)
   }
 
   const closeDrawer = () => {
@@ -45,7 +43,7 @@ export const OrganizationSignInButton = ({
         icon={<Icon name={icon} width={18} height={18} weight="bold" />}
         iconPosition="left"
       >
-        {person?.id ? companyLabel : contractLabel}
+        {label}
       </Button>
 
       {isOpen && (

package/src/components/account/Menu/Menu.tsx

@@ -1,10 +1,13 @@
 import { Button } from '@faststore/ui'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
 import styles from '../section.module.scss'
 
+import { OrganizationDrawer } from '../Drawer/OrganizationDrawer/OrganizationDrawer'
 import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
+import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface NavItem {
@@ -43,6 +46,9 @@ const Menu = ({ avatarImageUrl, accountName, items }: MenuProps) => {
   const { isDesktop } = useScreenResize()
   const navigationLabels = useAccountNavigationLabels()
   const switchLabel = navigationLabels?.switchLabel ?? 'Switch'
+  const { b2b } = useSession()
+  const [isSwitcherOpen, setIsSwitcherOpen] = useState(false)
+  const canSwitchContract = Boolean(b2b?.unitId)
 
   return (
     <div className={styles.menu}>
@@ -56,16 +62,27 @@ const Menu = ({ avatarImageUrl, accountName, items }: MenuProps) => {
             )}
             <h2>{accountName}</h2>
           </div>
-          <Button
-            className={styles.switchButton}
-            variant="secondary"
-            size="small"
-          >
-            {switchLabel}
-          </Button>
+          {canSwitchContract && (
+            <Button
+              className={styles.switchButton}
+              variant="secondary"
+              size="small"
+              onClick={() => setIsSwitcherOpen(true)}
+            >
+              {switchLabel}
+            </Button>
+          )}
         </div>
       ) : null}
       <Nav items={items} />
+      {isSwitcherOpen && (
+        <OrganizationDrawer
+          isOpen
+          closeDrawer={() => setIsSwitcherOpen(false)}
+          isRepresentative={Boolean(b2b?.isRepresentative)}
+          initialView="switch"
+        />
+      )}
     </div>
   )
 }

package/src/components/navigation/Navbar/Navbar.tsx

@@ -3,8 +3,6 @@ import { useCallback, useRef, useState } from 'react'
 
 import { Icon as UIIcon, useScrollDirection, useUI } from '@faststore/ui'
 
-import { Skeleton as UISkeleton } from '@faststore/ui'
-import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
 import CartToggle from 'src/components/cart/CartToggle'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
@@ -13,10 +11,12 @@ import LocalizationButton from 'src/components/ui/LocalizationButton'
 import Logo from 'src/components/ui/Logo'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useSession } from 'src/sdk/session'
+import { isSignInAreaResolved } from 'src/sdk/session/isSignInAreaResolved'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 import storeConfig from 'discovery.config'
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+import { NavbarAccountArea } from './NavbarAccountArea'
 
 const NavbarLinks = dynamic(
   () =>
@@ -121,7 +121,11 @@ function Navbar({
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
   const { isDesktop } = useScreenResize()
-  const { b2b, isSessionReady } = useSession()
+  const { b2b, isSessionReady, hasValidated } = useSession()
+  const isSignInResolved = isSignInAreaResolved({
+    isSessionReady,
+    hasValidated,
+  })
 
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
@@ -232,22 +236,16 @@ function Navbar({
               />
             )}
 
-            {isDesktop &&
-              (isSessionReady ? (
-                isOrganizationEnabled ? (
-                  <OrganizationSignInButton
-                    icon={signInButton.icon}
-                    isRepresentative={isRepresentative}
-                  />
-                ) : (
-                  <ButtonSignIn.Component {...signInButton} />
-                )
-              ) : (
-                <UISkeleton
-                  data-fs-navbar-signin-skeleton
-                  size={{ width: '140px', height: '2.5rem' }}
-                />
-              ))}
+            {isDesktop && (
+              <NavbarAccountArea
+                isSignInResolved={isSignInResolved}
+                isOrganizationEnabled={isOrganizationEnabled}
+                isRepresentative={isRepresentative}
+                signInButton={signInButton}
+                ButtonSignIn={ButtonSignIn}
+                skeletonAttr="data-fs-navbar-signin-skeleton"
+              />
+            )}
 
             <CartToggle {...cart} />
           </NavbarButtons.Component>

package/src/components/navigation/Navbar/NavbarAccountArea.tsx

@@ -0,0 +1,57 @@
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
+import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
+import type { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+
+import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+
+type NavbarOverrides = ReturnType<typeof useOverrideComponents<'Navbar'>>
+
+export type NavbarAccountAreaProps = {
+  /** Whether the B2B session has resolved enough to know what to render. */
+  isSignInResolved: boolean
+  /** Whether the representative-only Organization sign-in area is enabled. */
+  isOrganizationEnabled: boolean | undefined
+  isRepresentative?: boolean
+  signInButton: SectionNavbarProps['signInButton']
+  ButtonSignIn: NavbarOverrides['_experimentalButtonSignIn']
+  /** Data attribute toggled on the loading skeleton (Navbar vs NavbarSlider). */
+  skeletonAttr:
+    | 'data-fs-navbar-signin-skeleton'
+    | 'data-fs-navbar-slider-signin-skeleton'
+}
+
+/**
+ * Renders the account/sign-in area shared by the desktop Navbar and the
+ * mobile NavbarSlider: a loading skeleton until the B2B session resolves,
+ * then either the Organization sign-in button (representatives) or the
+ * storefront's own sign-in button.
+ */
+export const NavbarAccountArea = ({
+  isSignInResolved,
+  isOrganizationEnabled,
+  isRepresentative,
+  signInButton,
+  ButtonSignIn,
+  skeletonAttr,
+}: NavbarAccountAreaProps) => {
+  if (!isSignInResolved) {
+    return (
+      <UISkeleton
+        {...{ [skeletonAttr]: true }}
+        size={{ width: '140px', height: '2.5rem' }}
+      />
+    )
+  }
+
+  if (isOrganizationEnabled) {
+    return (
+      <OrganizationSignInButton
+        icon={signInButton.icon}
+        isRepresentative={isRepresentative}
+      />
+    )
+  }
+
+  return <ButtonSignIn.Component {...signInButton} />
+}

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -1,4 +1,4 @@
-import { Skeleton as UISkeleton, useFadeEffect, useUI } from '@faststore/ui'
+import { useFadeEffect, useUI } from '@faststore/ui'
 import { Suspense } from 'react'
 
 import storeConfig from 'discovery.config'
@@ -9,10 +9,11 @@ import LocalizationButton from 'src/components/ui/LocalizationButton'
 import Logo from 'src/components/ui/Logo'
 
 import type { NavbarProps } from '../Navbar'
+import { NavbarAccountArea } from '../Navbar/NavbarAccountArea'
 
-import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useSession } from 'src/sdk/session'
+import { isSignInAreaResolved } from 'src/sdk/session/isSignInAreaResolved'
 import styles from './section.module.scss'
 
 interface NavbarSliderProps {
@@ -44,7 +45,11 @@ function NavbarSlider({
 
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
-  const { b2b, isSessionReady } = useSession()
+  const { b2b, isSessionReady, hasValidated } = useSession()
+  const isSignInResolved = isSignInAreaResolved({
+    isSessionReady,
+    hasValidated,
+  })
 
   const isFaststoreMyAccountEnabled =
     storeConfig.experimental?.enableFaststoreMyAccount
@@ -84,21 +89,14 @@ function NavbarSlider({
       </NavbarSliderContent.Component>
       <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
-          {isSessionReady ? (
-            isOrganizationEnabled ? (
-              <OrganizationSignInButton
-                icon={signInButton.icon}
-                isRepresentative={isRepresentative}
-              />
-            ) : (
-              <ButtonSignIn.Component {...signInButton} />
-            )
-          ) : (
-            <UISkeleton
-              data-fs-navbar-slider-signin-skeleton
-              size={{ width: '140px', height: '2.5rem' }}
-            />
-          )}
+          <NavbarAccountArea
+            isSignInResolved={isSignInResolved}
+            isOrganizationEnabled={isOrganizationEnabled}
+            isRepresentative={isRepresentative}
+            signInButton={signInButton}
+            ButtonSignIn={ButtonSignIn}
+            skeletonAttr="data-fs-navbar-slider-signin-skeleton"
+          />
         </Suspense>
         {isLocalizationEnabled && (
           <LocalizationButton

package/src/pages/api/fs/switch-contract.ts

@@ -0,0 +1,194 @@
+import { parse } from 'cookie'
+import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+
+import storeConfig from 'discovery.config'
+import { expireCookieServer, getCookieDomains } from 'src/utils/clearCookies'
+import { getRequestHostname } from 'src/utils/getRequestHostname'
+
+/**
+ * Cookies holding the checkout orderForm of the previous commercial context.
+ * Both are `HttpOnly`, so they are unreachable from `document.cookie` and can
+ * only be expired from the server (B2BTEAM-3827).
+ */
+const ORDER_FORM_COOKIES = [
+  'checkout.vtex.com',
+  'CheckoutOrderFormOwnership',
+] as const
+
+const SWITCH_PROPERTIES_TIMEOUT_MS = 30_000
+const DEFAULT_AUTH_COOKIE_MAX_AGE = 86_400
+
+type VtexAuthCookie = {
+  Name: string
+  Value: string
+}
+
+/** Untrusted upstream payload: every field is validated before use. */
+type SwitchPropertiesResponse = {
+  authStatus?: string
+  expiresIn?: unknown
+  authCookie?: VtexAuthCookie | null
+  accountAuthCookie?: VtexAuthCookie | null
+}
+
+export type SwitchContractResponse = {
+  success: boolean
+  error?: string
+}
+
+const isAuthCookie = (cookie: unknown): cookie is VtexAuthCookie => {
+  const candidate = cookie as VtexAuthCookie | null
+
+  return Boolean(candidate?.Name?.trim() && candidate?.Value)
+}
+
+const isSecureRequest = (request: NextApiRequest): boolean => {
+  const forwarded = request.headers['x-forwarded-proto']
+  const proto = Array.isArray(forwarded) ? forwarded[0] : forwarded
+
+  if (proto) {
+    return proto.split(',')[0].trim() === 'https'
+  }
+
+  const hostname = getRequestHostname(request.headers.host)
+
+  return hostname !== 'localhost' && hostname !== '127.0.0.1'
+}
+
+/**
+ * A non-positive `expiresIn` would turn into `Max-Age=0`, which expires the
+ * credential the response is supposed to install — logging the buyer out while
+ * the route reports success. Anything that is not a positive integer falls back
+ * to the default.
+ */
+const resolveMaxAge = (expiresIn: unknown): number =>
+  typeof expiresIn === 'number' && Number.isInteger(expiresIn) && expiresIn > 0
+    ? expiresIn
+    : DEFAULT_AUTH_COOKIE_MAX_AGE
+
+/**
+ * Mirrors the attributes the storefront used to write via `document.cookie`.
+ * `HttpOnly` is deliberately left out: the cookie lives on a domain shared
+ * with VTEX's own checkout, so hardening it is a separate, explicitly tested
+ * change.
+ */
+const buildAuthCookies = (
+  payload: SwitchPropertiesResponse,
+  secure: boolean
+): string[] => {
+  const maxAge = resolveMaxAge(payload.expiresIn)
+  const secureAttr = secure ? '; Secure' : ''
+
+  return [payload.authCookie, payload.accountAuthCookie]
+    .filter(isAuthCookie)
+    .map(
+      (cookie) =>
+        `${cookie.Name}=${cookie.Value}; Path=/; Max-Age=${maxAge}; SameSite=Lax${secureAttr}`
+    )
+}
+
+const buildOrderFormExpiryCookies = (request: NextApiRequest): string[] => {
+  const hostname = getRequestHostname(request.headers.host)
+  const domains = hostname ? getCookieDomains(hostname) : [undefined]
+  const cookies = parse(request.headers.cookie ?? '')
+
+  return ORDER_FORM_COOKIES.filter((name) => cookies[name]).flatMap((name) =>
+    domains.map((domain) => expireCookieServer({ name, path: '/', domain }))
+  )
+}
+
+/**
+ * Switches the buyer's active contract and drops the previous contract's
+ * checkout orderForm in a single response.
+ *
+ * Relays to VTEX Identity server-side, forwarding the buyer cookie as the only
+ * credential — no app keys involved, same as `commerce.storeFront`. On success
+ * the new auth cookie and the orderForm expiry travel in the same `Set-Cookie`
+ * batch, so the browser can never end up authenticated as the new contract
+ * while still carrying the old contract's orderForm. On any failure nothing is
+ * emitted at all and the previous contract stays active.
+ */
+const handler: NextApiHandler<SwitchContractResponse> = async (
+  request: NextApiRequest,
+  response: NextApiResponse<SwitchContractResponse>
+) => {
+  if (request.method !== 'POST') {
+    response.status(405).end()
+    return
+  }
+
+  const { contractId } = request.body ?? {}
+
+  if (!contractId || typeof contractId !== 'string') {
+    response
+      .status(400)
+      .json({ success: false, error: 'contractId is required' })
+    return
+  }
+
+  const account = storeConfig.api.storeId
+  const an = encodeURIComponent(account)
+  const url = `https://${account}.myvtex.com/api/authenticator/storefront/credential/switch-properties?an=${an}`
+
+  try {
+    const switchResponse = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        cookie: request.headers.cookie ?? '',
+      },
+      body: JSON.stringify({ properties: { customerId: contractId } }),
+      signal: AbortSignal.timeout(SWITCH_PROPERTIES_TIMEOUT_MS),
+      // A redirect is never a successful switch, and following one would carry
+      // the buyer's cookie to whatever target the upstream names (CVE-2023-45143
+      // on Node < 20.8.1). Fail closed instead.
+      redirect: 'error',
+    })
+
+    if (!switchResponse.ok) {
+      const unauthorized =
+        switchResponse.status === 401 || switchResponse.status === 403
+
+      response
+        .status(unauthorized ? 401 : 502)
+        .json({ success: false, error: 'Failed to switch contract' })
+      return
+    }
+
+    const payload = (await switchResponse.json()) as SwitchPropertiesResponse
+
+    if (
+      payload.authStatus?.toLowerCase() !== 'success' ||
+      !isAuthCookie(payload.authCookie)
+    ) {
+      response
+        .status(502)
+        .json({ success: false, error: 'Contract switch was not successful' })
+      return
+    }
+
+    response.setHeader('Set-Cookie', [
+      ...buildAuthCookies(payload, isSecureRequest(request)),
+      ...buildOrderFormExpiryCookies(request),
+    ])
+
+    response.status(200).json({ success: true })
+  } catch (error) {
+    const timedOut =
+      error instanceof Error &&
+      (error.name === 'TimeoutError' || error.name === 'AbortError')
+
+    // Only the error name is logged: the request and response carry the buyer's
+    // credentials.
+    console.error(
+      'switch-contract: upstream failure',
+      error instanceof Error ? error.name : 'unknown'
+    )
+
+    response
+      .status(timedOut ? 504 : 502)
+      .json({ success: false, error: 'Failed to switch contract' })
+  }
+}
+
+export default handler