@vtex/faststore-plugin-buyer-portal 1.1.97 → 1.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.97",
+	"version": "1.1.98",
 	"description": "A plugin for faststore with buyer portal",
 	"main": "index.js",
 	"scripts": {

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

@@ -11,7 +11,11 @@ export const OrgUnitBreadcrumbDropdown = ({
   const { push } = useRouter();
 
   const dropdownItems = items.map((item) => (
-    <DropdownItem onClick={() => push(item.item)} key={item.item}>
+    <DropdownItem
+      onClick={() => push(item.item)}
+      key={item.item}
+      disabled={!item.enabled}
+    >
       <Icon name="Folder" width={20} height={20} />
       {item.name}
     </DropdownItem>

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

@@ -10,6 +10,7 @@ export const OrgUnitBreadcrumbLink = ({
   name,
   item,
   isLast,
+  enabled,
 }: OrgUnitBreadcrumbItemProps) => {
   const [truncate, setTruncate] = useState(false);
   const linkRef = useRef<HTMLParagraphElement | HTMLAnchorElement>(null);
@@ -23,7 +24,7 @@ export const OrgUnitBreadcrumbLink = ({
   }, []);
 
   const linkContent = (
-    <div data-fs-bp-breadcrumb-link>
+    <div data-fs-bp-breadcrumb-link data-fs-breadcrumb-disabled={!enabled}>
       {isLast ? (
         <p
           ref={linkRef as React.RefObject<HTMLParagraphElement>}

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

@@ -45,6 +45,7 @@ export const OrgUnitBreadcrumbPath = ({
         <OrgUnitBreadcrumbLink
           item={item.item}
           name={item.name}
+          enabled={item.enabled}
           isLast={isLast}
         />
         {!isLast && divider}

package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss

@@ -47,6 +47,10 @@
     }
   }
 
+  [data-fs-breadcrumb-disabled] {
+    pointer-events: none;
+  }
+
   [data-fs-bp-breadcrumb-divider] {
     color: #858585;
     flex: 0 0 auto;
@@ -65,7 +69,7 @@
     border-radius: var(--fs-border-radius-pill);
 
     &:hover {
-      background-color: #F5F5F5;
+      background-color: #f5f5f5;
     }
   }
 }

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -27,6 +27,7 @@ import {
   OrgUnitDetailsNavbar,
   OrgUnitsDropdownMenu,
 } from "../../components";
+import { useOrgUnitByUser } from "../../hooks";
 
 import {
   MAX_DESKTOP_BREADCRUMB_ITEMS,
@@ -54,15 +55,22 @@ export const OrgUnitsDetailsLayout = ({
   const isMobile = useMediaQuery(QUERY_TABLET);
 
   const isSingleContract = contracts.length <= 1;
-  const breadcrumbList = orgUnit.path.ids
-    .split("/")
-    .slice(1)
-    .map((orgUnitId, index) => ({
-      unitId: orgUnitId,
-      item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
-      name: orgUnit.path.names.split("/")[index],
-      position: index + 1,
-    }));
+
+  const { orgUnit: userUnit } = useOrgUnitByUser(user?.id ?? "");
+
+  const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
+
+  const userUnitIndex = orgUnitList.findIndex(
+    (unitId) => unitId === userUnit?.id
+  );
+
+  const breadcrumbList = orgUnitList.map((orgUnitId, index) => ({
+    unitId: orgUnitId,
+    item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
+    name: orgUnit.path.names.split("/")[index],
+    position: index + 1,
+    enabled: index >= userUnitIndex,
+  }));
 
   return (
     <GlobalLayout>

package/src/features/org-units/types/OrgUnitBreadcrumbTypes.ts

@@ -5,6 +5,7 @@ export type OrgUnitBreadcrumbItem = {
   item: string;
   name: string;
   position: number;
+  enabled: boolean;
 };
 
 export type OrgUnitBreadcrumbProps = {

package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx

@@ -11,6 +11,7 @@ import {
 } from "@faststore/ui";
 
 import { OrgUnitBreadcrumb } from "../../../org-units/components";
+import { useOrgUnitByUser } from "../../../org-units/hooks";
 import { ProfileSummary } from "../../../profile/components";
 import { Icon } from "../../components/Icon";
 import { useDrawerProps } from "../../hooks";
@@ -28,6 +29,7 @@ export type NavbarProps = {
     image?: ReactNode;
     name: string;
     role?: string;
+    id: string;
   };
   loading?: boolean;
 };
@@ -45,17 +47,23 @@ export const Navbar = ({
     ...deleteOpenSidebarMenuDrawerProps
   } = useDrawerProps();
 
+  const { orgUnit: userUnit } = useOrgUnitByUser(person.id);
+
+  const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
+
+  const userUnitIndex = orgUnitList.findIndex(
+    (unitId) => unitId === userUnit?.id
+  );
+
   const breadcrumbList = loading
     ? []
-    : orgUnit?.path.ids
-        .split("/")
-        .slice(1)
-        .map((orgUnitId, index) => ({
-          unitId: orgUnitId,
-          item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
-          name: orgUnit.path.names.split("/")[index],
-          position: index + 1,
-        })) ?? [];
+    : orgUnitList.map((orgUnitId, index) => ({
+        unitId: orgUnitId,
+        item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
+        name: orgUnit?.path.names.split("/")[index] ?? "",
+        position: index + 1,
+        enabled: index >= userUnitIndex,
+      }));
 
   return (
     <>

package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx

@@ -45,6 +45,7 @@ export const ContractTabsLayout = ({
         person={{
           name: currentUser?.name ?? "",
           role: currentUser?.role ?? "",
+          id: currentUser?.id ?? "",
         }}
         loading={loading}
       />

package/src/features/shared/layouts/FinanceTabsLayout/FinanceTabsLayout.tsx

@@ -30,6 +30,7 @@ export const FinanceTabsLayout = ({
         person={{
           name: currentUser?.name ?? "",
           role: currentUser?.role ?? "",
+          id: currentUser?.id ?? "",
         }}
         loading={loading}
       />

package/src/features/shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout.tsx

@@ -27,6 +27,7 @@ export const OrgUnitTabsLayout = ({
         person={{
           name: currentUser?.name ?? "",
           role: currentUser?.role ?? "",
+          id: currentUser?.id ?? "",
         }}
         loading={loading}
       />

package/src/themes/index.scss

@@ -12,7 +12,7 @@
     // Colors (Branding Core)
     // --------------------------------------------------------
     // --fs-color-main-0: blue;
-    --fs-color-neutral-7: #5C5C5C;
+    --fs-color-neutral-7: #5c5c5c;
     --fs-text-color-secondary: #1f1f1f;
     --fs-text-color-button: #0068d7;
     --fs-bkg-color-secondary: #f5f5f5;
@@ -54,6 +54,10 @@
       width: 12.5rem;
       [data-fs-dropdown-item] {
         --fs-dropdown-item-color: black !important;
+
+        &:disabled {
+          pointer-events: none;
+        }
       }
 
       [data-fs-dropdown-active-item] {