@vtex/faststore-plugin-buyer-portal 2.0.30 → 2.0.32

package/src/features/contracts/layouts/ContractListingLayout/utils.ts

@@ -1,3 +1,5 @@
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+
 import type { ContractData } from "../../types";
 
 export const getDefaultContractId = (contracts: ContractData[]) =>
@@ -15,3 +17,26 @@ export const resolveViewedContractId = (
   contracts.some((c) => c.id === queryContractId)
     ? (queryContractId as string)
     : getDefaultContractId(contracts);
+
+/** Args for the `{0} contract{1} …` toast messages. */
+export const pluralSuffixArgs = (count: number): [number, string] => [
+  count,
+  count === 1 ? "" : "s",
+];
+
+/** Query param carrying the removed-contracts count across the post-switch hard reload (AS-6). */
+export const REMOVED_QUERY_PARAM = "removed";
+
+export const buildRemovedRedirectUrl = (orgUnitId: string, count: number) =>
+  `${buyerPortalRoutes.contracts({
+    orgUnitId,
+  })}?${REMOVED_QUERY_PARAM}=${count}`;
+
+export const parseRemovedCount = (
+  value: string | string[] | undefined
+): number | null => {
+  const raw = Array.isArray(value) ? value[0] : value;
+  if (!raw) return null;
+  const count = Number(raw);
+  return Number.isInteger(count) && count > 0 ? count : null;
+};

package/src/features/contracts/utils/__tests__/clearPersistedSessionState.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  CHECKOUT_ORDER_FORM_COOKIE,
+  PERSISTED_STORE_KEYS,
+  getCookieVariants,
+} from "../clearPersistedSessionState";
+
+describe("clearPersistedSessionState constants", () => {
+  it("clears both the host session and the host cart", () => {
+    expect(PERSISTED_STORE_KEYS).toEqual(["fs::session", "fs::cart"]);
+    expect(CHECKOUT_ORDER_FORM_COOKIE).toBe("checkout.vtex.com");
+  });
+});
+
+describe("getCookieVariants", () => {
+  it("covers host-only, host and dot-host domains for every parent path", () => {
+    expect(
+      getCookieVariants("shop.example.com", "/pvt/organization-account")
+    ).toEqual([
+      { domain: undefined, path: "/" },
+      { domain: undefined, path: "/pvt" },
+      { domain: undefined, path: "/pvt/organization-account" },
+      { domain: "shop.example.com", path: "/" },
+      { domain: "shop.example.com", path: "/pvt" },
+      { domain: "shop.example.com", path: "/pvt/organization-account" },
+      { domain: ".shop.example.com", path: "/" },
+      { domain: ".shop.example.com", path: "/pvt" },
+      { domain: ".shop.example.com", path: "/pvt/organization-account" },
+    ]);
+  });
+});

package/src/features/contracts/utils/__tests__/resolveSwitchRedirect.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveSwitchRedirect } from "../resolveSwitchRedirect";
+
+describe("resolveSwitchRedirect", () => {
+  it("defaults to the contract's profile page", () => {
+    expect(
+      resolveSwitchRedirect({ orgUnitId: "unit-1", contractId: "contract-2" })
+    ).toBe("/pvt/organization-account/profile/unit-1/contract-2");
+  });
+
+  it("honors an explicit redirect target", () => {
+    expect(
+      resolveSwitchRedirect({
+        orgUnitId: "unit-1",
+        contractId: "contract-2",
+        redirectTo: "/pvt/organization-account/contracts/unit-1?removed=2",
+      })
+    ).toBe("/pvt/organization-account/contracts/unit-1?removed=2");
+  });
+});

package/src/features/contracts/utils/clearPersistedSessionState.ts

@@ -1,6 +1,41 @@
 const IDB_NAME = "keyval-store";
 const IDB_STORE = "keyval";
-const SESSION_KEY = "fs::session";
+
+/** Host FastStore persisted stores (`packages/sdk`): session and cart. */
+export const PERSISTED_STORE_KEYS = ["fs::session", "fs::cart"] as const;
+/** Cookie holding the checkout orderForm id read by `validateCart`. */
+export const CHECKOUT_ORDER_FORM_COOKIE = "checkout.vtex.com";
+
+export const getCookieVariants = (hostname: string, pathname: string) => {
+  const domains: Array<string | undefined> = [
+    undefined,
+    hostname,
+    hostname.startsWith(".") ? hostname : `.${hostname}`,
+  ];
+  const paths = ["/"];
+  let current = "";
+  for (const part of pathname.split("/").filter(Boolean)) {
+    current += `/${part}`;
+    if (!paths.includes(current)) paths.push(current);
+  }
+  return domains.flatMap((domain) => paths.map((path) => ({ domain, path })));
+};
+
+const expireCheckoutOrderFormCookie = () => {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  try {
+    const secure = window.location.protocol === "https:" ? "; secure" : "";
+    for (const { domain, path } of getCookieVariants(
+      window.location.hostname,
+      window.location.pathname
+    )) {
+      const domainAttr = domain ? `; domain=${domain}` : "";
+      document.cookie = `${CHECKOUT_ORDER_FORM_COOKIE}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0; path=${path}${domainAttr}; samesite=lax${secure}`;
+    }
+  } catch {
+    // no-op: cookie expiry is best-effort and must never throw
+  }
+};
 
 const SESSION_STORAGE_KEYS = [
   "faststore_session_ready",
@@ -26,7 +61,8 @@ function deletePersistedSession(): Promise<void> {
             return;
           }
           const tx = db.transaction(IDB_STORE, "readwrite");
-          tx.objectStore(IDB_STORE).delete(SESSION_KEY);
+          const store = tx.objectStore(IDB_STORE);
+          for (const key of PERSISTED_STORE_KEYS) store.delete(key);
           tx.oncomplete = () => {
             db.close();
             resolve();
@@ -53,12 +89,14 @@ function deletePersistedSession(): Promise<void> {
 }
 
 /**
- * Clears client-side session persistence (host FastStore session cache) so a hard
- * reload rehydrates from validateSession instead of stale IndexedDB / sessionStorage
- * values after switching the active contract.
+ * Clears client-side session persistence (host FastStore session cache), the
+ * persisted cart, and the checkout orderForm cookie, so the next hard navigation
+ * creates a fresh orderForm under the new contract (B2BTEAM-3827, Product review
+ * items 1 and 3).
  */
 export async function clearPersistedSessionState(): Promise<void> {
   await deletePersistedSession();
+  expireCheckoutOrderFormCookie();
 
   if (typeof window === "undefined" || typeof sessionStorage === "undefined") {
     return;

package/src/features/contracts/utils/resolveSwitchRedirect.ts

@@ -0,0 +1,15 @@
+import { buyerPortalRoutes } from "../../shared/utils/buyerPortalRoutes";
+
+export type ResolveSwitchRedirectParams = {
+  orgUnitId: string;
+  contractId: string;
+  /** Overrides the default Profile destination (e.g. stay on the listing). */
+  redirectTo?: string;
+};
+
+export const resolveSwitchRedirect = ({
+  orgUnitId,
+  contractId,
+  redirectTo,
+}: ResolveSwitchRedirectParams): string =>
+  redirectTo ?? buyerPortalRoutes.profileDetails({ orgUnitId, contractId });

package/src/features/credit-cards/services/tokenize-credit-card.service.ts

@@ -27,7 +27,9 @@ export const tokenizeCreditCardService = async ({
         complement: creditCard.address.streetAddress2,
         coutry: creditCard.address.countryCode,
         neighborhood: creditCard.address.neighborhood ?? "",
-        geoCoordinates: creditCard.address.geoCoordinates.split(",") ?? [],
+        geoCoordinates: creditCard.address.geoCoordinates
+          ? creditCard.address.geoCoordinates.split(",")
+          : [],
         postalCode: creditCard.address.zip,
         number: creditCard.address.streetNumber ?? "",
         receiverName: "NOT EMPTY",

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumb.tsx

@@ -4,16 +4,13 @@ import { Icon } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { resolveContractId } from "../../../shared/utils/resolveContractId";
-import { USER_ROLES } from "../../../users/types";
 import { useOrgUnitByUser } from "../../hooks";
 
+import { buildOrgUnitBreadcrumbItems } from "./buildBreadcrumbItems";
 import { OrgUnitBreadcrumbDropdown } from "./OrgUnitBreadcrumbDropdown";
 import { OrgUnitBreadcrumbPath } from "./OrgUnitBreadcrumbPath";
 
-import type {
-  OrgUnitBreadcrumbItem,
-  OrgUnitBreadcrumbProps,
-} from "../../types";
+import type { OrgUnitBreadcrumbProps } from "../../types";
 
 export const OrgUnitBreadcrumb = ({
   maxItems,
@@ -21,9 +18,17 @@ export const OrgUnitBreadcrumb = ({
   orgUnit,
   userId,
   userRoles,
+  userUnitId,
 }: OrgUnitBreadcrumbProps) => {
-  const { currentContract, currentOrgUnit } = useBuyerPortal();
-  const { orgUnit: userUnit } = useOrgUnitByUser(userId);
+  const { currentContract, currentOrgUnit, featureFlags } = useBuyerPortal();
+  // Skip the fetch entirely when the caller already knows the user's unit
+  // (e.g. `currentUser.orgUnit.id`, already loaded by the page) — otherwise
+  // this fires an uncached request on every render and the breadcrumb shows
+  // no unit name for non-super-users until it resolves.
+  const { orgUnit: fetchedUserUnit } = useOrgUnitByUser(userId, {
+    lazy: Boolean(userUnitId),
+  });
+  const resolvedUserUnitId = userUnitId ?? fetchedUserUnit?.id;
   const router = useRouter();
 
   const contractId = resolveContractId({
@@ -32,30 +37,15 @@ export const OrgUnitBreadcrumb = ({
     currentOrgUnit,
   });
 
-  const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
-
-  const userUnitIndex = orgUnitList.findIndex(
-    (unitId) => unitId === userUnit?.id
-  );
-
-  const items = orgUnitList.reduce<OrgUnitBreadcrumbItem[]>(
-    (acc, orgUnitId, index) => {
-      if (
-        userRoles.includes(USER_ROLES.SUPER_USER) ||
-        (userUnitIndex > -1 && index >= userUnitIndex)
-      ) {
-        acc.push({
-          unitId: orgUnitId,
-          item: buyerPortalRoutes.orgUnitDetails({ orgUnitId, contractId }),
-          name: orgUnit?.path.names.split("/")[index] ?? "",
-          position: index + 1,
-          enabled: true,
-        });
-      }
-      return acc;
-    },
-    []
-  );
+  const items = buildOrgUnitBreadcrumbItems({
+    orgUnit,
+    userUnitId: resolvedUserUnitId,
+    userRoles,
+    buildLink: (orgUnitId) =>
+      featureFlags?.suma
+        ? buyerPortalRoutes.contracts({ orgUnitId })
+        : buyerPortalRoutes.orgUnitDetails({ orgUnitId, contractId }),
+  });
 
   const sortedByPosition = [...items].sort((a, b) => a.position - b.position);
 

package/src/features/org-units/components/OrgUnitBreadcrumb/__tests__/buildBreadcrumbItems.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+
+import { USER_ROLES } from "../../../../users/types";
+import { buildOrgUnitBreadcrumbItems } from "../buildBreadcrumbItems";
+
+import type { OrgUnitBasicData } from "../../../types";
+
+const orgUnit = {
+  id: "child",
+  name: "Child",
+  path: { ids: "/root/mid/child", names: "Root/Mid/Child" },
+} as OrgUnitBasicData;
+
+const buildLink = (id: string) => `/contracts/${id}`;
+
+describe("buildOrgUnitBreadcrumbItems", () => {
+  it("lists the whole hierarchy for a super user", () => {
+    const items = buildOrgUnitBreadcrumbItems({
+      orgUnit,
+      userUnitId: "child",
+      userRoles: [USER_ROLES.SUPER_USER],
+      buildLink,
+    });
+
+    expect(items.map((i) => [i.name, i.item, i.position])).toEqual([
+      ["Root", "/contracts/root", 1],
+      ["Mid", "/contracts/mid", 2],
+      ["Child", "/contracts/child", 3],
+    ]);
+  });
+
+  it("starts at the user's own unit for a regular admin", () => {
+    const items = buildOrgUnitBreadcrumbItems({
+      orgUnit,
+      userUnitId: "mid",
+      userRoles: [],
+      buildLink,
+    });
+
+    expect(items.map((i) => i.unitId)).toEqual(["mid", "child"]);
+  });
+
+  it("returns nothing when the user's unit is not in the path", () => {
+    expect(
+      buildOrgUnitBreadcrumbItems({
+        orgUnit,
+        userUnitId: "other",
+        userRoles: [],
+        buildLink,
+      })
+    ).toEqual([]);
+  });
+
+  it("returns nothing without an org unit", () => {
+    expect(
+      buildOrgUnitBreadcrumbItems({
+        orgUnit: null,
+        userUnitId: "x",
+        userRoles: [],
+        buildLink,
+      })
+    ).toEqual([]);
+  });
+});

package/src/features/org-units/components/OrgUnitBreadcrumb/buildBreadcrumbItems.ts

@@ -0,0 +1,36 @@
+import { USER_ROLES } from "../../../users/types";
+
+import type { OrgUnitBasicData, OrgUnitBreadcrumbItem } from "../../types";
+
+export type BuildOrgUnitBreadcrumbItemsParams = {
+  orgUnit?: OrgUnitBasicData | null;
+  userUnitId?: string;
+  userRoles: string[];
+  buildLink: (orgUnitId: string) => string;
+};
+
+export const buildOrgUnitBreadcrumbItems = ({
+  orgUnit,
+  userUnitId,
+  userRoles,
+  buildLink,
+}: BuildOrgUnitBreadcrumbItemsParams): OrgUnitBreadcrumbItem[] => {
+  const ids = orgUnit?.path.ids.split("/").slice(1) ?? [];
+  const names = orgUnit?.path.names.split("/") ?? [];
+  const userUnitIndex = ids.findIndex((id) => id === userUnitId);
+  const isSuperUser = userRoles.includes(USER_ROLES.SUPER_USER);
+
+  return ids.flatMap((unitId, index) =>
+    isSuperUser || (userUnitIndex > -1 && index >= userUnitIndex)
+      ? [
+          {
+            unitId,
+            item: buildLink(unitId),
+            name: names[index] ?? "",
+            position: index + 1,
+            enabled: true,
+          },
+        ]
+      : []
+  );
+};

package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx

@@ -1,6 +1,9 @@
+import { useEffect } from "react";
+
 import storeConfig from "discovery.config";
 
 import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
 
 import { useLink_unstable as useLink } from "@faststore/core/experimental";
 import { Dropdown, DropdownMenu, IconButton, Link } from "@faststore/ui";
@@ -15,11 +18,19 @@ const LocalizationButton = dynamic(
 
 import { ProfileSummary } from "../../../profile/components";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
-import { useDrawerProps } from "../../../shared/hooks";
+import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { AboutDrawer } from "../../../shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer";
+import {
+  ABOUT_QUERY_PARAM,
+  shouldOpenAboutDrawer,
+} from "../../../shared/layouts/BaseTabsLayout/about-drawer/aboutQueryParam";
 import { SumaSidebarDrawer } from "../../../shared/layouts/SumaPageLayout/SumaSidebarDrawer";
 import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { doLogout } from "../../../shared/utils";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { OrgUnitHeaderNav } from "../OrgUnitHeaderNav/OrgUnitHeaderNav";
+
+import type { SumaSidebarVariant } from "../../../shared/layouts/SumaPageLayout/sumaSidebarConfig";
 
 export type OrgUnitDetailsNavbarProps = {
   orgId: string;
@@ -32,7 +43,7 @@ export type OrgUnitDetailsNavbarProps = {
     email?: string;
   };
   loading?: boolean;
-  sidebarVariant?: "listing" | "full";
+  sidebarVariant?: SumaSidebarVariant;
   showBackLink?: boolean;
 };
 
@@ -46,6 +57,9 @@ export const OrgUnitDetailsNavbar = ({
 }: OrgUnitDetailsNavbarProps) => {
   const { t } = useLocalization();
   const { resolveLink } = useLink();
+  const router = useRouter();
+  const { currentOrgUnit, currentUser, featureFlags } = useBuyerPortal();
+  const isSuma = Boolean(featureFlags?.suma);
   const {
     open: openAboutMenu,
     isOpen: isOpenAboutMenu,
@@ -58,6 +72,22 @@ export const OrgUnitDetailsNavbar = ({
     ...sidebarMenuDrawerProps
   } = useDrawerProps();
 
+  // `?about=1` opens the About/version drawer and is stripped from the URL.
+  // Under SUMA there is no visible trigger (QA-11), so this is the way to
+  // read the installed versions on any Organization Account page.
+  const aboutParam = router.query[ABOUT_QUERY_PARAM];
+  useEffect(() => {
+    if (!shouldOpenAboutDrawer(aboutParam)) return;
+    openAboutMenu();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { [ABOUT_QUERY_PARAM]: _about, ...rest } = router.query;
+    void router
+      .replace({ pathname: router.pathname, query: rest }, undefined, {
+        shallow: true,
+      })
+      .catch(() => {});
+  }, [aboutParam]);
+
   return (
     <header data-fs-bp-org-unit-details-navbar>
       <div data-fs-bp-org-unit-details-navbar-heading>
@@ -73,17 +103,24 @@ export const OrgUnitDetailsNavbar = ({
           {storeConfig.seo.title}
         </Link>
       </div>
+      {isSuma && currentOrgUnit && (
+        <div data-fs-bp-org-unit-details-navbar-unit>
+          <OrgUnitHeaderNav
+            orgUnit={currentOrgUnit}
+            userId={currentUser?.id ?? ""}
+            userUnitId={currentUser?.orgUnit?.id}
+            userRoles={currentUser?.roles ?? []}
+          />
+        </div>
+      )}
       <div data-fs-bp-org-unit-details-navbar-actions>
-        {/* TO-DO: Reenable button when agent is made ready for users */}
-        {/*
         <Link
           href={buyerPortalRoutes.b2bAgent}
           data-fs-bp-org-unit-details-navbar-agent-link
         >
           <Icon name="Sparkle" width={20} height={20} weight="regular" />
-          Organization Manager
+          {t("shared.navigation.organizationManager")}
         </Link>
-        */}
 
         <LocalizationButton
           saveLabel={t("shared.buttons.save")}
@@ -91,27 +128,30 @@ export const OrgUnitDetailsNavbar = ({
           languageLabel={t("layouts.labels.language")}
           icon="Globe"
         />
-        <Link
-          target="_blank"
-          href={resolveLink("/")}
-          data-fs-bp-org-unit-details-navbar-start-shopping-link
-        >
-          {t("layouts.navigation.startShopping")}
-        </Link>
-
-        <IconButton
-          data-fs-bp-nav-about-trigger
-          icon={
-            <Icon
-              name="CircleQuestionMark"
-              width={24}
-              height={24}
-              weight="regular"
-            />
-          }
-          aria-label={"open about menu"}
-          onClick={openAboutMenu}
-        />
+        {!isSuma && (
+          <Link
+            target="_blank"
+            href={resolveLink("/")}
+            data-fs-bp-org-unit-details-navbar-start-shopping-link
+          >
+            {t("layouts.navigation.startShopping")}
+          </Link>
+        )}
+        {!isSuma && (
+          <IconButton
+            data-fs-bp-nav-about-trigger
+            icon={
+              <Icon
+                name="CircleQuestionMark"
+                width={24}
+                height={24}
+                weight="regular"
+              />
+            }
+            aria-label={"open about menu"}
+            onClick={openAboutMenu}
+          />
+        )}
         <Dropdown>
           <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
           <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>

package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss

@@ -1,7 +1,7 @@
 @use "~@faststore/ui/src/styles/base/utilities" as u;
 
 [data-fs-bp-org-unit-details-navbar] {
-
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,6 +21,27 @@
     gap: var(--fs-bp-gap-2);
   }
 
+  // Current unit control: sits between the store name and the actions on
+  // small screens and is centered on the header (prototype) from notebook up.
+  [data-fs-bp-org-unit-details-navbar-unit] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    padding: 0 var(--fs-bp-padding-3);
+
+    @include u.media(">=notebook") {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      flex: none;
+      max-width: 40%;
+      padding: 0;
+      transform: translate(-50%, -50%);
+    }
+  }
+
   [data-fs-localization-button] {
     [data-fs-button-wrapper] {
       span {

package/src/features/org-units/components/OrgUnitHeaderNav/OrgUnitHeaderNav.tsx

@@ -0,0 +1,112 @@
+import { useRouter } from "next/router";
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+} from "@faststore/ui";
+
+import { Icon } from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { useOrgUnitByUser } from "../../hooks";
+
+import { getOrgUnitHeaderNavItems } from "./getOrgUnitHeaderNavItems";
+
+import type { OrgUnitBasicData } from "../../types";
+
+export type OrgUnitHeaderNavProps = {
+  orgUnit: OrgUnitBasicData;
+  userId: string;
+  userRoles: string[];
+  /** The user's own unit id when already known; skips the lookup. */
+  userUnitId?: string;
+};
+
+/**
+ * Header control of the SUMA shell: a pill with the current Organization Unit
+ * and, when the user may go up the hierarchy, a dropdown listing the parent
+ * units (root first) with the current unit highlighted at the bottom.
+ * Selecting a unit lands on its Contracts listing (unit view).
+ * Mirrors `Header.tsx` in the `multiple-contracts` prototype.
+ */
+export const OrgUnitHeaderNav = ({
+  orgUnit,
+  userId,
+  userRoles,
+  userUnitId,
+}: OrgUnitHeaderNavProps) => {
+  const { t } = useLocalization();
+  const { push } = useRouter();
+  const { featureFlags } = useBuyerPortal();
+  const { orgUnit: fetchedUserUnit } = useOrgUnitByUser(userId, {
+    lazy: Boolean(userUnitId),
+  });
+
+  const { ancestors, canNavigate } = getOrgUnitHeaderNavItems({
+    orgUnit,
+    userUnitId: userUnitId ?? fetchedUserUnit?.id,
+    userRoles,
+    buildLink: (orgUnitId) =>
+      featureFlags?.suma
+        ? buyerPortalRoutes.contracts({ orgUnitId })
+        : buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
+  });
+
+  return (
+    <div data-fs-bp-org-unit-header-nav>
+      <Dropdown>
+        <DropdownButton asChild>
+          <button
+            type="button"
+            data-fs-bp-org-unit-header-nav-trigger
+            disabled={!canNavigate}
+            aria-label={t("layouts.navigation.organizationalUnits")}
+          >
+            <Icon
+              name="FilledFolder"
+              width={20}
+              height={20}
+              data-fs-bp-org-unit-header-nav-icon
+            />
+            <span data-fs-bp-org-unit-header-nav-name>{orgUnit.name}</span>
+            {canNavigate && (
+              <Icon
+                name="ArrowDropDown"
+                width={20}
+                height={20}
+                data-fs-bp-org-unit-header-nav-caret
+              />
+            )}
+          </button>
+        </DropdownButton>
+
+        <DropdownMenu align="center" data-fs-bp-org-unit-header-nav-menu>
+          {ancestors.map((ancestor) => (
+            <DropdownItem
+              key={ancestor.unitId}
+              data-fs-bp-org-unit-header-nav-item
+              onClick={() => push(ancestor.item)}
+            >
+              <Icon name="Folder" width={20} height={20} />
+              <span data-fs-bp-org-unit-header-nav-item-name>
+                {ancestor.name}
+              </span>
+            </DropdownItem>
+          ))}
+          <DropdownItem
+            data-fs-bp-org-unit-header-nav-item
+            data-fs-bp-org-unit-header-nav-item-current
+            aria-current="page"
+            dismissOnClick
+          >
+            <Icon name="FilledFolder" width={20} height={20} />
+            <span data-fs-bp-org-unit-header-nav-item-name>{orgUnit.name}</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+  );
+};