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

package/src/sdk/account/changeContractToken.ts

@@ -1,7 +1,5 @@
 import fetch from 'isomorphic-unfetch'
 
-import storeConfig from '../../../discovery.config'
-
 export class ContractSwitchError extends Error {
   constructor(message: string) {
     super(message)
@@ -11,51 +9,20 @@ export class ContractSwitchError extends Error {
 
 export const isContractSwitchEnabled = true
 
-type VtexAuthCookie = {
-  Name: string
-  Value: string
-}
-
-export type SwitchPropertiesResponse = {
-  authStatus?: string
-  expiresIn?: number
-  authCookie?: VtexAuthCookie | null
-  accountAuthCookie?: VtexAuthCookie | null
-}
-
-const DEFAULT_AUTH_COOKIE_MAX_AGE = 86_400
-const SWITCH_PROPERTIES_TIMEOUT_MS = 30_000
-
-export function applyVtexAuthCookieFromSwitchResponse(
-  response: SwitchPropertiesResponse
-): void {
-  if (globalThis.window === undefined) {
-    return
-  }
-
-  const maxAge = response.expiresIn ?? DEFAULT_AUTH_COOKIE_MAX_AGE
-  const secure =
-    globalThis.window.location.protocol === 'https:' ? '; secure' : ''
-
-  const cookies = [response.authCookie, response.accountAuthCookie].filter(
-    (cookie): cookie is VtexAuthCookie =>
-      Boolean(cookie?.Name?.trim() && cookie?.Value)
-  )
-
-  for (const cookie of cookies) {
-    document.cookie = `${cookie.Name}=${cookie.Value}; path=/; max-age=${maxAge}; samesite=lax${secure}`
-  }
-}
+const SWITCH_CONTRACT_TIMEOUT_MS = 30_000
 
 /**
- * Switches the buyer's active contract via VTEX Identity storefront credential API.
+ * Switches the buyer's active contract through `/api/fs/switch-contract`.
  *
- * POST /api/authenticator/storefront/credential/switch-properties?an={account}
- * Body: { properties: { customerId: contractId } }
+ * The route relays the call to VTEX Identity and answers with a single
+ * `Set-Cookie` batch: the new auth cookie plus the expiry of the previous
+ * contract's checkout orderForm cookies, which are `HttpOnly` and therefore
+ * unreachable from here. Because both travel in the same response, there is no
+ * window where the browser holds the new credential alongside the old
+ * orderForm (B2BTEAM-3827).
  *
- * Applies the returned `authCookie` (and optional `accountAuthCookie`) so the
- * storefront JWT reflects the new commercial context. Throws `ContractSwitchError`
- * on hard failures so `switchContract` can keep the previous contract active.
+ * Throws `ContractSwitchError` on any failure so `switchContract` can keep the
+ * previous contract active.
  */
 export async function changeContractToken(
   contractId: string
@@ -64,23 +31,16 @@ export async function changeContractToken(
     throw new ContractSwitchError('Missing contractId for contract switch')
   }
 
-  const an = encodeURIComponent(storeConfig.api.storeId)
-  const url = `/api/authenticator/storefront/credential/switch-properties?an=${an}`
-
   let response: Response
   try {
-    response = await fetch(url, {
+    response = await fetch('/api/fs/switch-contract', {
       method: 'POST',
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        properties: {
-          customerId: contractId,
-        },
-      }),
-      signal: AbortSignal.timeout(SWITCH_PROPERTIES_TIMEOUT_MS),
+      body: JSON.stringify({ contractId }),
+      signal: AbortSignal.timeout(SWITCH_CONTRACT_TIMEOUT_MS),
     })
   } catch (error) {
     if (
@@ -101,19 +61,15 @@ export async function changeContractToken(
     )
   }
 
-  const payload = (await response.json()) as SwitchPropertiesResponse
+  // Reading the body to completion guarantees the `Set-Cookie` headers are
+  // committed before `switchContract` reloads the page.
+  const payload = (await response.json().catch(() => null)) as {
+    success?: boolean
+  } | null
 
-  if (payload.authStatus?.toLowerCase() !== 'success') {
+  if (!payload?.success) {
     throw new ContractSwitchError('Contract switch was not successful')
   }
 
-  if (!payload.authCookie?.Name || !payload.authCookie?.Value) {
-    throw new ContractSwitchError(
-      'Contract switch succeeded but no auth cookie was returned'
-    )
-  }
-
-  applyVtexAuthCookieFromSwitchResponse(payload)
-
   return true
 }

package/src/sdk/account/clearPersistedSessionState.ts

@@ -4,20 +4,26 @@ import {
   STORAGE_KEY_PERSON_ID,
 } from 'src/utils/cookieCacheBusting'
 
+/** Persisted `@faststore/sdk` stores that belong to the previous commercial context. */
+export const PERSISTED_STORE_KEYS = ['fs::session', 'fs::cart'] as const
+
 /**
- * Clears client-side session persistence so a hard reload rehydrates from
- * validateSession instead of stale IndexedDB / sessionStorage values.
+ * Clears client-side persistence of the previous commercial context so a hard
+ * reload rehydrates from validateSession / validateCart under the new
+ * contract.
+ *
+ * The checkout orderForm cookies are `HttpOnly` and are expired by
+ * `/api/fs/switch-contract` instead (B2BTEAM-3827).
  */
 export async function clearPersistedSessionState(): Promise<void> {
   try {
     const { del } = await import('idb-keyval')
-    await del('fs::session').catch(() => {})
+    await Promise.all(
+      PERSISTED_STORE_KEYS.map((key) => del(key).catch(() => {}))
+    )
   } catch {}
 
-  if (typeof sessionStorage === 'undefined') {
-    return
-  }
-
+  if (typeof sessionStorage === 'undefined') return
   try {
     sessionStorage.removeItem(SESSION_READY_KEY)
     sessionStorage.removeItem(STORAGE_KEY_PERSON_ID)

package/src/sdk/account/useAvailableContracts.ts

@@ -13,6 +13,7 @@ export const AvailableContractsQuery = gql(`
       id
       corporateName
       isActive
+      isDefault
     }
   }
 `)

package/src/sdk/account/useSwitchContract.ts

@@ -11,8 +11,11 @@ import {
  * Orchestrates a full change of commercial context (REQ-06).
  *
  * Steps:
- *  1. POST switch-properties with the target contract id and apply the returned auth cookie.
- *  2. Clear persisted session state and reload the page.
+ *  1. POST `/api/fs/switch-contract`, which swaps the auth cookie and expires
+ *     the previous contract's checkout orderForm in one response. A failure
+ *     here changes nothing, so the previous contract stays active.
+ *  2. Clear persisted session and cart state and reload the page so
+ *     validateSession/validateCart run under the new contract.
  */
 export const useSwitchContract = () => {
   const [loading, setLoading] = useState(false)
@@ -31,7 +34,12 @@ export const useSwitchContract = () => {
         return false
       }
 
-      await clearPersistedSessionState()
+      // The cookies were already swapped, so the reload has to happen even if
+      // clearing the local stores fails: from here on the server session is
+      // the authoritative source and validateCart rebuilds the cart.
+      try {
+        await clearPersistedSessionState()
+      } catch {}
 
       if (globalThis.window !== undefined) {
         globalThis.window.location.reload()

package/src/sdk/session/index.ts

@@ -282,8 +282,9 @@ export const useSession = ({ filter }: SessionOptions = { filter: true }) => {
       channel,
       isValidating,
       isSessionReady,
+      hasValidated,
     }),
-    [isValidating, session, channel, isSessionReady]
+    [isValidating, session, channel, isSessionReady, hasValidated]
   )
 }
 

package/src/sdk/session/isSignInAreaResolved.ts

@@ -0,0 +1,12 @@
+/**
+ * The Navbar account area must not render "Sign in" for a B2B buyer whose
+ * session has not been validated yet on this page load (Design QA 26/Aug
+ * 00:02:55–00:03:52). `isSessionReady` alone is pre-seeded from sessionStorage.
+ */
+export const isSignInAreaResolved = ({
+  isSessionReady,
+  hasValidated,
+}: {
+  isSessionReady: boolean
+  hasValidated: boolean
+}): boolean => isSessionReady && hasValidated

package/test/components/account/ContractSwitcher.browser.test.tsx

@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 
+import '@testing-library/jest-dom/vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -117,6 +118,47 @@ describe('ContractSwitcher', () => {
     expect(options.length).toBe(2)
   })
 
+  it('marks the default contract with a star and lists it first (Design QA 00:02:00)', async () => {
+    // Note: id 'a' is pinned to the current session (this file mocks
+    // useSession with b2b.customerId: 'a'), so it must stay on the active
+    // contract for it to resolve as the current one; Alpha (the default)
+    // and Aardvark get other ids and land in the alternatives list, which
+    // is what this test exercises.
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [
+        { id: 'a', corporateName: 'Beta', isActive: true, isDefault: false },
+        { id: 'b', corporateName: 'Alpha', isActive: false, isDefault: true },
+        {
+          id: 'c',
+          corporateName: 'Aardvark',
+          isActive: false,
+          isDefault: false,
+        },
+      ],
+      loading: false,
+      error: null,
+    })
+
+    const { container } = render(
+      <ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />
+    )
+
+    await screen.findByText('Alpha')
+    expect(
+      container.querySelectorAll('[data-fs-contract-switcher-default]')
+    ).toHaveLength(1)
+    expect(
+      container.querySelector('[data-fs-contract-switcher-default]')
+    ).toHaveAttribute('aria-label', 'Default contract')
+
+    const names = Array.from(
+      container.querySelectorAll(
+        '[data-fs-contract-switcher-option] [data-fs-contract-switcher-option-name]'
+      )
+    ).map((el) => el.textContent)
+    expect(names[0]).toBe('Alpha') // default first, then alphabetical ('Aardvark')
+  })
+
   it('requires selecting a contract before Confirm is enabled, then switches (REQ-03)', async () => {
     render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
 

package/test/components/account/Menu.browser.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockUseSession = vi.hoisted(() => vi.fn())
+const mockUseScreenResize = vi.hoisted(() => vi.fn())
+const mockOrganizationDrawer = vi.hoisted(() => vi.fn())
+
+vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
+
+vi.mock('src/sdk/account/accountPageContext', () => ({
+  useAccountNavigationLabels: () => ({ switchLabel: 'Switch' }),
+}))
+
+vi.mock('src/sdk/ui/useScreenResize', () => ({
+  default: mockUseScreenResize,
+}))
+
+vi.mock('next/router', () => ({
+  useRouter: () => ({ pathname: '/pvt/account' }),
+}))
+
+vi.mock(
+  '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawer',
+  () => ({
+    OrganizationDrawer: (props: Record<string, unknown>) => {
+      mockOrganizationDrawer(props)
+      return <div data-testid="organization-drawer" />
+    },
+  })
+)
+
+import Menu from '../../../src/components/account/Menu/Menu'
+
+const items = [{ title: 'Orders', route: '/pvt/account/orders' }]
+
+describe('Menu', () => {
+  beforeEach(() => {
+    mockUseScreenResize.mockReturnValue({ isDesktop: true })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('does not render the Switch button without an organization unit', () => {
+    mockUseSession.mockReturnValue({ b2b: {} })
+
+    render(<Menu accountName="Jane" items={items} />)
+
+    expect(screen.queryByRole('button', { name: 'Switch' })).toBeNull()
+  })
+
+  it('renders the Switch button when the buyer has an organization unit', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Menu accountName="Jane" items={items} />)
+
+    expect(screen.getByRole('button', { name: 'Switch' })).toBeTruthy()
+  })
+
+  it('mounts the OrganizationDrawer with initialView "switch" when Switch is clicked', () => {
+    mockUseSession.mockReturnValue({
+      b2b: { unitId: 'unit-1', isRepresentative: true },
+    })
+
+    render(<Menu accountName="Jane" items={items} />)
+
+    expect(screen.queryByTestId('organization-drawer')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Switch' }))
+
+    expect(screen.getByTestId('organization-drawer')).toBeTruthy()
+    expect(mockOrganizationDrawer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isOpen: true,
+        initialView: 'switch',
+        isRepresentative: true,
+      })
+    )
+  })
+
+  it('passes isRepresentative as a boolean even when b2b.isRepresentative is undefined', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Menu accountName="Jane" items={items} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Switch' }))
+
+    expect(mockOrganizationDrawer).toHaveBeenCalledWith(
+      expect.objectContaining({ isRepresentative: false })
+    )
+  })
+
+  it('unmounts the OrganizationDrawer when closeDrawer is invoked', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Menu accountName="Jane" items={items} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Switch' }))
+    expect(screen.getByTestId('organization-drawer')).toBeTruthy()
+
+    const closeDrawer = mockOrganizationDrawer.mock.calls[0][0]
+      .closeDrawer as () => void
+    act(() => {
+      closeDrawer()
+    })
+
+    expect(screen.queryByTestId('organization-drawer')).toBeNull()
+  })
+
+  it('renders only the nav list on mobile (no account/switch area)', () => {
+    mockUseScreenResize.mockReturnValue({ isDesktop: false })
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Menu accountName="Jane" items={items} />)
+
+    expect(screen.queryByRole('button', { name: 'Switch' })).toBeNull()
+    expect(screen.getByText('Orders')).toBeTruthy()
+  })
+})

package/test/components/account/OrganizationDrawer.browser.test.tsx

@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 
+import '@testing-library/jest-dom/vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -9,6 +10,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const mockFadeOut = vi.hoisted(() => vi.fn())
 const mockUseSession = vi.hoisted(() => vi.fn())
 const mockCloseDrawer = vi.hoisted(() => vi.fn())
+const mockUseAvailableContracts = vi.hoisted(() => vi.fn())
 
 vi.mock('@faststore/ui', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@faststore/ui')>()
@@ -38,6 +40,10 @@ vi.mock('@faststore/ui', async (importOriginal) => {
 
 vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
 
+vi.mock('src/sdk/account/useAvailableContracts', () => ({
+  useAvailableContracts: mockUseAvailableContracts,
+}))
+
 vi.mock(
   '../../../src/components/account/Drawer/OrganizationDrawer/ContractSwitcher',
   () => ({
@@ -82,6 +88,11 @@ describe('OrganizationDrawer', () => {
       },
       person: { givenName: 'Jane' },
     })
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [],
+      loading: false,
+      error: null,
+    })
   })
 
   afterEach(() => {
@@ -194,4 +205,141 @@ describe('OrganizationDrawer', () => {
       screen.getByRole('heading', { name: 'Organization', level: 1 })
     ).toBeTruthy()
   })
+
+  it('opens directly in the switcher when initialView is "switch"', () => {
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={vi.fn()}
+        isRepresentative
+        initialView="switch"
+      />
+    )
+    expect(screen.getByTestId('contract-switcher')).toBeInTheDocument()
+  })
+
+  it('shows the default-contract star in the header when the active contract is the unit default', () => {
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [
+        {
+          id: 'unit-1',
+          corporateName: 'Acme Contract',
+          isActive: true,
+          isDefault: true,
+        },
+        {
+          id: 'other',
+          corporateName: 'Other Contract',
+          isActive: false,
+          isDefault: false,
+        },
+      ],
+      loading: false,
+      error: null,
+    })
+    mockUseSession.mockReturnValue({
+      b2b: {
+        unitId: 'unit-1',
+        unitName: 'Stellar Global',
+        contractName: 'Acme Contract',
+        customerId: 'unit-1',
+        userName: 'Jane Buyer',
+        userEmail: 'jane@example.com',
+        organizationManager: true,
+      },
+      person: { givenName: 'Jane' },
+    })
+
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.getByLabelText('Default contract')).toBeTruthy()
+  })
+
+  it('does not show the default-contract star when the active contract is not the unit default', () => {
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [
+        {
+          id: 'unit-1',
+          corporateName: 'Acme Contract',
+          isActive: true,
+          isDefault: false,
+        },
+        {
+          id: 'other',
+          corporateName: 'Other Contract',
+          isActive: false,
+          isDefault: true,
+        },
+      ],
+      loading: false,
+      error: null,
+    })
+    mockUseSession.mockReturnValue({
+      b2b: {
+        unitId: 'unit-1',
+        unitName: 'Stellar Global',
+        contractName: 'Acme Contract',
+        customerId: 'unit-1',
+        userName: 'Jane Buyer',
+        userEmail: 'jane@example.com',
+        organizationManager: true,
+      },
+      person: { givenName: 'Jane' },
+    })
+
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.queryByLabelText('Default contract')).toBeNull()
+  })
+
+  it('fetches the contract list only while open for an org member', () => {
+    const { rerender } = render(
+      <OrganizationDrawer
+        isOpen={false}
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(mockUseAvailableContracts).toHaveBeenLastCalledWith(false)
+
+    rerender(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(mockUseAvailableContracts).toHaveBeenLastCalledWith(true)
+  })
+
+  it('never fetches the contract list when the buyer has no organization unit', () => {
+    mockUseSession.mockReturnValue({
+      b2b: { userName: 'Jane Buyer' },
+      person: null,
+    })
+
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(mockUseAvailableContracts).toHaveBeenLastCalledWith(false)
+  })
 })

package/test/components/account/OrganizationDrawerHeader.browser.test.tsx

@@ -36,6 +36,8 @@ describe('OrganizationDrawerHeader', () => {
       />
     )
 
+    expect(screen.getByLabelText('Default contract')).toBeTruthy()
+
     fireEvent.click(screen.getByRole('button', { name: /change/i }))
     expect(onChangeContract).toHaveBeenCalledTimes(1)
   })

package/test/components/account/OrganizationSignInButton.browser.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * @vitest-environment jsdom
+ */
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseSession = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
+vi.mock('src/sdk/account/accountPageContext', () => ({
+  useAccountNavigationLabels: () => ({
+    companyLabel: 'Company',
+    contractLabel: 'Contract',
+  }),
+}))
+vi.mock(
+  'src/components/account/Drawer/OrganizationDrawer/OrganizationDrawer',
+  () => ({
+    OrganizationDrawer: () => null,
+  })
+)
+
+import { OrganizationSignInButton } from '../../../src/components/account/Drawer/OrganizationSignInButton/OrganizationSignInButton'
+
+const icon = { alt: 'account', icon: 'User' }
+
+describe('OrganizationSignInButton', () => {
+  it('shows the active contract name when the session has one (Design QA 00:02:55)', () => {
+    mockUseSession.mockReturnValue({
+      person: { id: 'p1' },
+      b2b: { contractName: ' Caetano Corp ' },
+    })
+    render(<OrganizationSignInButton icon={icon} isRepresentative />)
+    expect(screen.getByRole('button', { name: 'account' })).toHaveTextContent(
+      'Caetano Corp'
+    )
+  })
+
+  it('falls back to the company label without a contract name', () => {
+    mockUseSession.mockReturnValue({
+      person: { id: 'p1' },
+      b2b: { contractName: '' },
+    })
+    render(<OrganizationSignInButton icon={icon} isRepresentative />)
+    expect(screen.getByRole('button', { name: 'account' })).toHaveTextContent(
+      'Company'
+    )
+  })
+})