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

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,30 @@ 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 (
     <SlideOver
@@ -162,24 +181,34 @@ export const OrganizationDrawer = ({
         className: `section ${styles.section} section-organization-drawer`,
       }}
     >
-      <OrganizationDrawerHeader
-        onCloseDrawer={closeDrawer}
-        contractName={contractName}
-        contractUrl={contractUrl}
-      />
-      <OrganizationDrawerBody isRepresentative={isRepresentative} />
-      <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/OrganizationDrawerBody.tsx

@@ -3,6 +3,7 @@ import Link from 'src/components/ui/Link'
 import menuRoutes from 'src/customizations/src/myAccount/navigation'
 import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
 import {
+  ROUTES_ONLY_FOR_B2B_MEMBERS,
   USER_DETAILS_ROUTE,
   getExtraMyAccountRoutes,
   getMyAccountRoutes,
@@ -12,7 +13,11 @@ const ROUTES_ONLY_FOR_REPRESENTATIVE = [USER_DETAILS_ROUTE]
 
 export const OrganizationDrawerBody = ({
   isRepresentative,
-}: { isRepresentative: boolean }) => {
+  isOrgMember,
+}: {
+  isRepresentative: boolean
+  isOrgMember: boolean
+}) => {
   const navigationLabels = useAccountNavigationLabels()
 
   const menuItems = getMyAccountRoutes({
@@ -20,11 +25,16 @@ export const OrganizationDrawerBody = ({
     labels: navigationLabels,
   })
 
-  const routes = isRepresentative
-    ? menuItems
-    : menuItems.filter(
-        ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
-      )
+  const routes = (
+    isRepresentative
+      ? menuItems
+      : menuItems.filter(
+          ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
+        )
+  ).filter(
+    ({ route }) => isOrgMember || !ROUTES_ONLY_FOR_B2B_MEMBERS.includes(route)
+  )
+
   return (
     <div data-fs-organization-drawer-body>
       <div data-fs-organization-drawer-body-contents>

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'