@faststore/core 4.5.0-dev.0 → 4.5.0-dev.1

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

@@ -0,0 +1,376 @@
+import { Button, Icon, IconButton, Loader } from '@faststore/ui'
+import { useState, type ReactNode } from 'react'
+
+import { useAvailableContracts } from 'src/sdk/account/useAvailableContracts'
+import { useSwitchContract } from 'src/sdk/account/useSwitchContract'
+import { useSession } from 'src/sdk/session'
+
+export type ContractSwitcherProps = {
+  /** Returns to the drawer menu view (also used by Cancel). */
+  onBack: () => void
+  /** Closes the whole drawer. */
+  onClose: () => void
+}
+
+/**
+ * Contract that can be displayed by the switcher. `isDefault` is optional so the
+ * component compiles against both the local mock and the real
+ * `useAvailableContracts` hook (which does not expose a default yet).
+ */
+type SwitcherContract = {
+  id: string
+  corporateName: string
+  isActive: boolean
+  isDefault?: boolean
+}
+
+const initialOf = (name: string) => name.trim().charAt(0).toUpperCase()
+
+type ContractSwitcherContentProps = {
+  loading: boolean
+  error: Error | null
+  currentContract: SwitcherContract | null
+  alternatives: SwitcherContract[]
+  ordered: SwitcherContract[]
+  search: string
+  selectedId: string | null
+  switchError: Error | null
+  onSearchChange: (value: string) => void
+  onSearchClear: () => void
+  onSelectContract: (contractId: string) => void
+}
+
+const ContractSwitcherLoading = () => (
+  <div data-fs-contract-switcher-loading aria-busy="true">
+    <Loader />
+  </div>
+)
+
+const ContractSwitcherLoadError = () => (
+  <div data-fs-contract-switcher-message role="alert">
+    <p>We couldn't load your contracts. Please try again.</p>
+  </div>
+)
+
+const ContractSwitcherCurrentSession = ({
+  currentContract,
+}: {
+  currentContract: SwitcherContract | null
+}) => (
+  <div data-fs-contract-switcher-current>
+    <span data-fs-contract-switcher-label>Current session</span>
+    {currentContract && (
+      <div data-fs-contract-switcher-current-card>
+        <span data-fs-contract-switcher-avatar aria-hidden="true">
+          {initialOf(currentContract.corporateName)}
+        </span>
+        <span data-fs-contract-switcher-option-name>
+          {currentContract.corporateName}
+        </span>
+        {currentContract.isDefault && (
+          <Icon
+            data-fs-contract-switcher-default
+            name="Star"
+            width={20}
+            height={20}
+          />
+        )}
+      </div>
+    )}
+  </div>
+)
+
+const ContractSwitcherEmptyAlternatives = () => (
+  <div data-fs-contract-switcher-message data-fs-contract-switcher-empty>
+    <p>No other contracts are available for your organization.</p>
+  </div>
+)
+
+type ContractSwitcherAlternativesProps = {
+  alternatives: SwitcherContract[]
+  ordered: SwitcherContract[]
+  search: string
+  selectedId: string | null
+  onSearchChange: (value: string) => void
+  onSearchClear: () => void
+  onSelectContract: (contractId: string) => void
+}
+
+const ContractSwitcherSearch = ({
+  search,
+  onSearchChange,
+  onSearchClear,
+}: Pick<
+  ContractSwitcherAlternativesProps,
+  'search' | 'onSearchChange' | 'onSearchClear'
+>) => (
+  <div data-fs-contract-switcher-search>
+    <Icon name="MagnifyingGlass" width={20} height={20} />
+    <input
+      type="text"
+      value={search}
+      placeholder="Search"
+      aria-label="Search contracts"
+      onChange={(event) => onSearchChange(event.target.value)}
+    />
+    {search && (
+      <button
+        type="button"
+        data-fs-contract-switcher-search-clear
+        aria-label="Clear search"
+        onClick={onSearchClear}
+      >
+        <Icon name="X" width={18} height={18} />
+      </button>
+    )}
+  </div>
+)
+
+const ContractSwitcherOptionList = ({
+  ordered,
+  selectedId,
+  onSelectContract,
+}: Pick<
+  ContractSwitcherAlternativesProps,
+  'ordered' | 'selectedId' | 'onSelectContract'
+>) => (
+  <ul data-fs-contract-switcher-list>
+    {ordered.map((contract) => {
+      const isSelected = selectedId === contract.id
+
+      return (
+        <li key={contract.id} data-fs-contract-switcher-item>
+          <button
+            type="button"
+            data-fs-contract-switcher-option
+            data-fs-contract-switcher-option-selected={isSelected}
+            aria-pressed={isSelected}
+            onClick={() => onSelectContract(contract.id)}
+          >
+            <span data-fs-contract-switcher-avatar aria-hidden="true">
+              {initialOf(contract.corporateName)}
+            </span>
+            <span data-fs-contract-switcher-option-name>
+              {contract.corporateName}
+            </span>
+            {contract.isDefault && (
+              <Icon
+                data-fs-contract-switcher-default
+                name="Star"
+                width={20}
+                height={20}
+              />
+            )}
+          </button>
+        </li>
+      )
+    })}
+  </ul>
+)
+
+const ContractSwitcherAlternatives = ({
+  alternatives,
+  ordered,
+  search,
+  selectedId,
+  onSearchChange,
+  onSearchClear,
+  onSelectContract,
+}: ContractSwitcherAlternativesProps) => {
+  if (alternatives.length === 0) {
+    return <ContractSwitcherEmptyAlternatives />
+  }
+
+  let listContent: ReactNode
+  if (ordered.length === 0) {
+    listContent = (
+      <div data-fs-contract-switcher-message>
+        <p>No contracts match your search.</p>
+      </div>
+    )
+  } else {
+    listContent = (
+      <ContractSwitcherOptionList
+        ordered={ordered}
+        selectedId={selectedId}
+        onSelectContract={onSelectContract}
+      />
+    )
+  }
+
+  return (
+    <>
+      <p data-fs-contract-switcher-count>
+        Select one of <strong>{alternatives.length}</strong> available
+        contracts:
+      </p>
+      <ContractSwitcherSearch
+        search={search}
+        onSearchChange={onSearchChange}
+        onSearchClear={onSearchClear}
+      />
+      {listContent}
+    </>
+  )
+}
+
+const ContractSwitcherSwitchError = () => (
+  <div data-fs-contract-switcher-message role="alert">
+    <p>
+      We couldn't switch your contract. The previous contract is still active.
+    </p>
+  </div>
+)
+
+const ContractSwitcherContent = ({
+  loading,
+  error,
+  currentContract,
+  alternatives,
+  ordered,
+  search,
+  selectedId,
+  switchError,
+  onSearchChange,
+  onSearchClear,
+  onSelectContract,
+}: ContractSwitcherContentProps) => {
+  if (loading) {
+    return <ContractSwitcherLoading />
+  }
+
+  if (error) {
+    return <ContractSwitcherLoadError />
+  }
+
+  return (
+    <>
+      <ContractSwitcherCurrentSession currentContract={currentContract} />
+      <ContractSwitcherAlternatives
+        alternatives={alternatives}
+        ordered={ordered}
+        search={search}
+        selectedId={selectedId}
+        onSearchChange={onSearchChange}
+        onSearchClear={onSearchClear}
+        onSelectContract={onSelectContract}
+      />
+      {switchError && <ContractSwitcherSwitchError />}
+    </>
+  )
+}
+
+/**
+ * Sub-view of the OrganizationDrawer that lets a B2B buyer change the active
+ * contract within their Organization Unit (REQ-03..06). Replaces the whole
+ * drawer body while open: own header (back / title / close), the current
+ * session, a searchable list of alternatives, and a Cancel / Confirm footer.
+ */
+export const ContractSwitcher = ({
+  onBack,
+  onClose,
+}: ContractSwitcherProps) => {
+  const { contracts, loading, error } = useAvailableContracts(true)
+  const { b2b } = useSession()
+  const {
+    switchContract,
+    loading: switching,
+    error: switchError,
+    enabled: switchEnabled,
+  } = useSwitchContract()
+
+  const [search, setSearch] = useState('')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const allContracts: SwitcherContract[] = contracts
+  const activeContractId = b2b?.customerId?.trim() ?? ''
+  const currentContract =
+    (activeContractId
+      ? allContracts.find((contract) => contract.id === activeContractId)
+      : null) ??
+    allContracts.find((contract) => contract.isActive) ??
+    allContracts[0] ??
+    null
+
+  const alternatives = allContracts.filter(
+    (contract) => contract.id !== currentContract?.id
+  )
+
+  const query = search.toLowerCase().trim()
+  const filtered = query
+    ? alternatives.filter((contract) =>
+        contract.corporateName.toLowerCase().includes(query)
+      )
+    : alternatives
+
+  const ordered = [...filtered].sort((a, b) => {
+    if (a.isDefault && !b.isDefault) return -1
+    if (b.isDefault && !a.isDefault) return 1
+    return a.corporateName.localeCompare(b.corporateName)
+  })
+
+  const canConfirm =
+    switchEnabled &&
+    selectedId !== null &&
+    selectedId !== currentContract?.id &&
+    ordered.some((contract) => contract.id === selectedId) &&
+    !switching
+
+  const handleConfirm = async () => {
+    if (!selectedId) {
+      return
+    }
+
+    await switchContract(selectedId)
+  }
+
+  return (
+    <section data-fs-contract-switcher>
+      <header data-fs-contract-switcher-header>
+        <IconButton
+          data-fs-contract-switcher-back
+          aria-label="Back to account menu"
+          icon={<Icon name="ArrowLeft" width={20} height={20} />}
+          onClick={onBack}
+        />
+        <h2 data-fs-contract-switcher-title>Change contract</h2>
+        <IconButton
+          data-fs-contract-switcher-close
+          aria-label="Close"
+          icon={<Icon name="X" width={20} height={20} />}
+          onClick={onClose}
+        />
+      </header>
+
+      <div data-fs-contract-switcher-content>
+        <ContractSwitcherContent
+          loading={loading}
+          error={error}
+          currentContract={currentContract}
+          alternatives={alternatives}
+          ordered={ordered}
+          search={search}
+          selectedId={selectedId}
+          switchError={switchError}
+          onSearchChange={setSearch}
+          onSearchClear={() => setSearch('')}
+          onSelectContract={setSelectedId}
+        />
+      </div>
+
+      <footer data-fs-contract-switcher-footer>
+        <Button variant="tertiary" onClick={onBack}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          disabled={!canConfirm}
+          loading={switching}
+          onClick={handleConfirm}
+        >
+          Confirm
+        </Button>
+      </footer>
+    </section>
+  )
+}

package/src/components/account/Drawer/OrganizationDrawer/ContractSwitcher/index.ts

@@ -0,0 +1,2 @@
+export { ContractSwitcher } from './ContractSwitcher'
+export type { ContractSwitcherProps } from './ContractSwitcher'

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

@@ -1,4 +1,5 @@
 import { SlideOver, useFadeEffect } from '@faststore/ui'
+import { useEffect, useState } from 'react'
 
 import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 import { useSession } from 'src/sdk/session'
@@ -9,12 +10,15 @@ import {
   getVtexCookieNames,
 } from 'src/utils/clearCookies'
 import storeConfig from '../../../../../discovery.config'
-import { ProfileSummary } from '../ProfileSummary/ProfileSummary'
+import { ContractSwitcher } from './ContractSwitcher'
 import { OrganizationDrawerBody } from './OrganizationDrawerBody'
+import { OrganizationDrawerFooter } from './OrganizationDrawerFooter'
 import { OrganizationDrawerHeader } from './OrganizationDrawerHeader'
 import { setReloadAfterLogoutReturn } from './useReloadAfterLogoutReturn'
 import styles from './section.module.scss'
 
+type OrganizationDrawerView = 'menu' | 'switch'
+
 type OrganizationDrawerProps = {
   isOpen: boolean
   closeDrawer: () => void
@@ -125,7 +129,9 @@ export const doLogout = async (_event?: unknown) => {
   } finally {
     setReloadAfterLogoutReturn()
     window.location.assign(
-      `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${getStoreURL()}`
+      `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${
+        storeConfig.api.storeId
+      }&returnUrl=${getStoreURL()}`
     )
   }
 }
@@ -137,17 +143,29 @@ export const OrganizationDrawer = ({
 }: OrganizationDrawerProps) => {
   const { fade, fadeOut } = useFadeEffect()
   const { b2b, person } = useSession()
+  const [view, setView] = useState<OrganizationDrawerView>('menu')
+
+  useEffect(() => {
+    if (!isOpen) {
+      setView('menu')
+    }
+  }, [isOpen])
 
   const contractName =
-    b2b?.contractName ??
-    `${(person?.givenName ?? '').trim()} ${(person?.familyName ?? '').trim()}`.trim() ??
-    ''
+    b2b?.contractName?.trim() ||
+    b2b?.unitName?.trim() ||
+    `${(person?.givenName ?? '').trim()}` ||
+    'Organization'
 
   const contractUrl = b2b?.unitId
     ? `/pvt/organization-account/org-unit/${b2b?.unitId}`
     : null
 
   const isOrganizationManager = b2b?.organizationManager || false
+  // The switcher is only meaningful for B2B buyers tied to an Organization Unit.
+  // Buyers with a single (or no alternative) contract see the empty state inside
+  // the switcher; we don't fetch the contract count eagerly to protect TTFB.
+  const canSwitchContract = Boolean(b2b?.unitId)
   const isOrgMember = Boolean(b2b?.unitId)
 
   return (
@@ -163,27 +181,34 @@ export const OrganizationDrawer = ({
         className: `section ${styles.section} section-organization-drawer`,
       }}
     >
-      <OrganizationDrawerHeader
-        onCloseDrawer={closeDrawer}
-        contractName={contractName}
-        contractUrl={contractUrl}
-      />
-      <OrganizationDrawerBody
-        isRepresentative={isRepresentative}
-        isOrgMember={isOrgMember}
-      />
-      <footer data-fs-organization-drawer-footer-wrapper>
-        <ProfileSummary
-          showManageLink={isOrganizationManager}
-          bordered={true}
-          onLogoutClick={doLogout}
-          person={{
-            name: b2b?.userName ?? '',
-            email: b2b?.userEmail ?? '',
-          }}
-          orgName={b2b?.unitName ?? ''}
-        />
-      </footer>
+      {view === 'switch' ? (
+        <ContractSwitcher onBack={() => setView('menu')} onClose={fadeOut} />
+      ) : (
+        <div data-fs-organization-drawer-menu>
+          <div data-fs-organization-drawer-menu-scroll>
+            <OrganizationDrawerHeader
+              onCloseDrawer={closeDrawer}
+              contractName={contractName}
+              contractUrl={contractUrl}
+              onChangeContract={
+                canSwitchContract ? () => setView('switch') : undefined
+              }
+            />
+            <OrganizationDrawerBody
+              isRepresentative={isRepresentative}
+              isOrgMember={isOrgMember}
+            />
+          </div>
+          <OrganizationDrawerFooter
+            orgName={b2b?.unitName ?? ''}
+            userName={b2b?.userName ?? ''}
+            userEmail={b2b?.userEmail ?? ''}
+            showManageLink={isOrganizationManager}
+            manageUrl={contractUrl ?? undefined}
+            onLogoutClick={doLogout}
+          />
+        </div>
+      )}
     </SlideOver>
   )
 }

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

@@ -0,0 +1,55 @@
+import { Icon, IconButton, Link } from '@faststore/ui'
+
+export interface OrganizationDrawerFooterProps {
+  orgName: string
+  userName: string
+  userEmail?: string
+  showManageLink?: boolean
+  manageUrl?: string
+  onLogoutClick?: () => void
+}
+
+export const OrganizationDrawerFooter = ({
+  orgName,
+  userName,
+  userEmail,
+  showManageLink,
+  manageUrl,
+  onLogoutClick,
+}: OrganizationDrawerFooterProps) => {
+  return (
+    <div data-fs-organization-drawer-footer>
+      <div data-fs-organization-drawer-footer-org>
+        <div data-fs-organization-drawer-footer-org-info>
+          <Icon
+            data-fs-organization-drawer-footer-org-icon
+            name="FolderOpen"
+            width={18}
+            height={18}
+          />
+          <span data-fs-organization-drawer-footer-org-name>{orgName}</span>
+        </div>
+        {showManageLink && manageUrl && (
+          <Link href={manageUrl} data-fs-organization-drawer-footer-manage>
+            Manage
+          </Link>
+        )}
+      </div>
+
+      <div data-fs-organization-drawer-footer-user>
+        <div data-fs-organization-drawer-footer-user-info>
+          <p data-fs-organization-drawer-footer-user-name>{userName}</p>
+          {userEmail && (
+            <p data-fs-organization-drawer-footer-user-email>{userEmail}</p>
+          )}
+        </div>
+        <IconButton
+          data-fs-organization-drawer-footer-logout
+          aria-label="Log out"
+          icon={<Icon name="SignOut" width={20} height={20} />}
+          onClick={onLogoutClick}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,18 +1,29 @@
-import { Link, SlideOverHeader } from '@faststore/ui'
+import { Button, Icon, Link, SlideOverHeader } from '@faststore/ui'
 import type { ReactNode } from 'react'
 
 export type OrganizationDrawerHeaderProps = {
   onCloseDrawer?: () => void
   contractImage?: ReactNode
   contractName: string
-  contractUrl: string
+  contractUrl: string | null
+  /**
+   * Marks the active contract as the Organization Unit's default (star).
+   */
+  isDefault?: boolean
+  /**
+   * When provided, renders the "Change" CTA next to the active contract,
+   * opening the contract switcher (Figma node 103-5434).
+   */
+  onChangeContract?: () => void
 }
 
 export const OrganizationDrawerHeader = ({
   contractUrl,
   contractName,
   contractImage,
+  isDefault,
   onCloseDrawer,
+  onChangeContract,
 }: OrganizationDrawerHeaderProps) => {
   return (
     <>
@@ -20,6 +31,7 @@ export const OrganizationDrawerHeader = ({
       <div data-fs-organization-drawer-header>
         <Link
           data-fs-organization-drawer-header-contract-link
+          aria-label={contractName}
           {...(contractUrl && { href: contractUrl })}
         >
           <div data-fs-organization-drawer-header-contract-image>
@@ -29,10 +41,38 @@ export const OrganizationDrawerHeader = ({
               </span>
             )}
           </div>
-          <h1 data-fs-organization-drawer-header-contract-name>
-            {contractName}
-          </h1>
         </Link>
+        <div data-fs-organization-drawer-header-row>
+          <Link
+            data-fs-organization-drawer-header-contract-name-link
+            {...(contractUrl && { href: contractUrl })}
+          >
+            <h1 data-fs-organization-drawer-header-contract-name>
+              {contractName}
+            </h1>
+          </Link>
+          {(isDefault || onChangeContract) && (
+            <div data-fs-organization-drawer-header-actions>
+              {isDefault && (
+                <Icon
+                  data-fs-organization-drawer-header-default
+                  name="Star"
+                  width={20}
+                  height={20}
+                />
+              )}
+              {onChangeContract && (
+                <Button
+                  data-fs-organization-drawer-header-change
+                  variant="secondary"
+                  onClick={onChangeContract}
+                >
+                  Change
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </>
   )

package/src/components/account/Drawer/OrganizationDrawer/index.ts

@@ -1,3 +1,8 @@
 export { OrganizationDrawer } from './OrganizationDrawer'
 export { OrganizationDrawerBody } from './OrganizationDrawerBody'
+export { OrganizationDrawerFooter } from './OrganizationDrawerFooter'
+export type { OrganizationDrawerFooterProps } from './OrganizationDrawerFooter'
 export { OrganizationDrawerHeader } from './OrganizationDrawerHeader'
+export type { OrganizationDrawerHeaderProps } from './OrganizationDrawerHeader'
+export { ContractSwitcher } from './ContractSwitcher'
+export type { ContractSwitcherProps } from './ContractSwitcher'