@vtex/faststore-plugin-buyer-portal 1.1.63 → 1.1.65

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Standardization the sidebar menu throughout the navigation of the Organizational Account, regardless of the context.
+
 ### Fixed
 
 - Adjusts in Credit Card's experience

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -380,6 +380,10 @@
     </g>
   </symbol>
 
+  <svg id="Menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="none">
+    <path d="M0 12V10H18V12H0ZM0 7V5H18V7H0ZM0 2V0H18V2H0Z" fill="#1F1F1F"/>
+  </svg>
+
   <symbol id="TableEdit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
     <path
       d="M4.16667 10.8333H9.16667V7.5H4.16667V10.8333ZM4.16667 5.83333H15.8333V4.16667H4.16667V5.83333ZM4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H15.8333C16.2917 2.5 16.684 2.66319 17.0104 2.98958C17.3368 3.31597 17.5 3.70833 17.5 4.16667V9.41667C17.2361 9.30556 16.9618 9.23264 16.6771 9.19792C16.3924 9.1632 16.1111 9.16667 15.8333 9.20833C15.5417 9.26389 15.2604 9.35764 14.9896 9.48958C14.7188 9.62153 14.4722 9.79861 14.25 10.0208L13.4375 10.8333L9.16667 15.0833V17.5H4.16667ZM4.16667 15.8333H9.16667V12.5H4.16667V15.8333ZM10.8333 10.8333H13.4375L14.25 10.0208C14.4722 9.79861 14.7188 9.62153 14.9896 9.48958C15.2604 9.35764 15.5417 9.26389 15.8333 9.20833V7.5H10.8333V10.8333ZM10.8333 18.3333V15.7708L15.4375 11.1875C15.5625 11.0625 15.7014 10.9722 15.8542 10.9167C16.0069 10.8611 16.1597 10.8333 16.3125 10.8333C16.4792 10.8333 16.6389 10.8646 16.7917 10.9271C16.9444 10.9896 17.0833 11.0833 17.2083 11.2083L17.9792 11.9792C18.0903 12.1042 18.1771 12.2431 18.2396 12.3958C18.3021 12.5486 18.3333 12.7014 18.3333 12.8542C18.3333 13.0069 18.3056 13.1632 18.25 13.3229C18.1944 13.4826 18.1042 13.625 17.9792 13.75L13.3958 18.3333H10.8333ZM12.0833 17.0833H12.875L15.3958 14.5417L14.625 13.7708L12.0833 16.2917V17.0833ZM15.0208 14.1458L14.625 13.7708L15.3958 14.5417L15.0208 14.1458Z"

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

@@ -21,10 +21,10 @@ import {
 } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import {
-  OrgUnitsDropdownMenu,
   AddAllToOrgUnitDropdown,
-  OrgUnitDetailsNavbar,
   OrgUnitBreadcrumb,
+  OrgUnitDetailsNavbar,
+  OrgUnitsDropdownMenu,
 } from "../../components";
 
 import type { ContractData } from "../../../contracts/types";

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

@@ -6,14 +6,18 @@ import {
   Dropdown,
   DropdownButton,
   DropdownMenu,
+  IconButton,
   Skeleton,
 } from "@faststore/ui";
 
 import { ProfileSummary } from "../../../profile/components";
 import { Icon } from "../../components/Icon";
+import { useDrawerProps } from "../../hooks";
 import { doLogout } from "../../utils";
 import { buyerPortalRoutes } from "../../utils/buyerPortalRoutes";
 
+import { SidebarDrawer } from "./sidebar-drawer/SidebarDrawer";
+
 export type NavbarProps = {
   orgUnitName: string;
   orgUnitId: string;
@@ -35,40 +39,68 @@ export const Navbar = ({
   loading = false,
   ...otherProps
 }: NavbarProps) => {
+  const {
+    open: openSidebarMenu,
+    isOpen: isOpenSidebarMenuDrawerOpen,
+    ...deleteOpenSidebarMenuDrawerProps
+  } = useDrawerProps();
+
   return (
-    <nav data-fs-bp-nav {...otherProps}>
-      <Link
-        data-fs-bp-nav-org-unit-name
-        href={buyerPortalRoutes.orgUnitDetails({ orgUnitId })}
-      >
-        <Icon name="Folder" width={24} height={24} />
+    <>
+      <nav data-fs-bp-nav {...otherProps}>
+        <div data-fs-bp-nav-org-unit-name>
+          <IconButton
+            data-fs-bp-sidebar-drawer-btn
+            icon={<Icon name="Menu" width={18} height={24} />}
+            aria-label={"open sidebar menu"}
+            onClick={() => {
+              openSidebarMenu();
+            }}
+          />
+          <Link
+            data-fs-bp-nav-org-unit-name
+            href={buyerPortalRoutes.orgUnitDetails({ orgUnitId })}
+          >
+            <Icon name="Folder" width={24} height={24} />
+            {loading ? (
+              <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
+            ) : (
+              orgUnitName
+            )}
+          </Link>
+        </div>
+        <span data-fs-bp-nav-page-name>{pageName}</span>
         {loading ? (
-          <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
+          <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
         ) : (
-          orgUnitName
-        )}
-      </Link>
-      <span data-fs-bp-nav-page-name>{pageName}</span>
-      {loading ? (
-        <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
-      ) : (
-        <Dropdown>
-          <DropdownButton asChild>
-            <button type="button" data-fs-bp-nav-account-menu-trigger>
-              <Icon name="AccountCircle" width={20} height={20} />
-            </button>
-          </DropdownButton>
+          <Dropdown>
+            <DropdownButton asChild>
+              <IconButton
+                data-fs-bp-nav-account-menu-trigger
+                icon={<Icon name="AccountCircle" width={20} height={20} />}
+                aria-label={"open sidebar menu"}
+              />
+            </DropdownButton>
 
-          <DropdownMenu align="right" data-fs-bp-nav-menu>
-            <ProfileSummary
-              data-fs-bp-nav-menu-profile-summary
-              onLogoutClick={doLogout}
-              orgName={orgUnitName}
-              person={person}
-            />
-          </DropdownMenu>
-        </Dropdown>
+            <DropdownMenu align="right" data-fs-bp-nav-menu>
+              <ProfileSummary
+                data-fs-bp-nav-menu-profile-summary
+                onLogoutClick={doLogout}
+                orgName={orgUnitName}
+                person={person}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        )}
+      </nav>
+      {isOpenSidebarMenuDrawerOpen && (
+        <SidebarDrawer
+          orgUnitName={orgUnitName}
+          pageName={pageName}
+          {...deleteOpenSidebarMenuDrawerProps}
+          isOpen={isOpenSidebarMenuDrawerOpen}
+        />
       )}
-    </nav>
+    </>
   );
 };

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

@@ -1,12 +1,17 @@
 import type { ReactNode } from "react";
 
-import { Skeleton } from "@faststore/ui";
+import { VerticalNav } from "../../components";
+import { useBuyerPortal } from "../../hooks";
+import {
+  getContractSettingsLinks,
+  getFinanceSettingsLinks,
+  getOrganizationSettingsLinks,
+} from "../../utils";
 
-import { LetterHighlight, VerticalNav } from "../../components";
 export type SidebarMenuProps = {
   name?: string;
   dropdownOptions?: ReactNode;
-  verticalLinks: {
+  verticalLinks?: {
     name: string;
     link: string;
   }[];
@@ -14,34 +19,54 @@ export type SidebarMenuProps = {
   loading?: boolean;
 };
 
-export const SidebarMenu = ({
-  name,
-  verticalLinks,
-  dropdownOptions,
-  showLetterHighlight = true,
-  loading = true,
-  ...otherProps
-}: SidebarMenuProps) => {
+export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
+  const { currentOrgUnit, currentContract } = useBuyerPortal();
+
+  const idContract =
+    (currentContract?.id
+      ? currentContract?.id
+      : currentOrgUnit?.customerGroup.customerIds[0]) ?? "";
+
   return (
     <aside data-fs-bp-sidebar-menu {...otherProps}>
-      {showLetterHighlight &&
-        name &&
-        (loading ? (
-          <Skeleton size={{ width: "3.75rem", height: "3.75rem" }} />
-        ) : (
-          <LetterHighlight letter={name} />
-        ))}
-      <VerticalNav.Menu
-        title={name}
-        dropdownOptions={dropdownOptions}
-        loading={loading}
-      >
-        {verticalLinks.map((option) => (
+      <VerticalNav.Menu title="Contract">
+        {getContractSettingsLinks({
+          orgUnitId: currentOrgUnit?.id ?? "",
+          contractId: idContract,
+        }).map((option) => (
           <VerticalNav.Link key={option.name} link={option.link}>
             {option.name}
           </VerticalNav.Link>
         ))}
       </VerticalNav.Menu>
+      <VerticalNav.Menu title="Organization">
+        {getOrganizationSettingsLinks(currentOrgUnit?.id ?? "").map(
+          (option) => (
+            <VerticalNav.Link key={option.name} link={option.link}>
+              {option.name}
+            </VerticalNav.Link>
+          )
+        )}
+      </VerticalNav.Menu>
+      <VerticalNav.Menu title="Finance and Compliance">
+        {getFinanceSettingsLinks({
+          orgUnitId: currentOrgUnit?.id ?? "",
+          contractId: idContract,
+        }).map((option) => {
+          const parts = option.link.split("/").filter(Boolean);
+
+          let finalLink = option.link;
+
+          if (parts.length === 3) {
+            finalLink = `${option.link}${idContract}/`;
+          }
+          return (
+            <VerticalNav.Link key={option.name} link={finalLink}>
+              {option.name}
+            </VerticalNav.Link>
+          );
+        })}
+      </VerticalNav.Menu>
     </aside>
   );
 };

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -1,3 +1,5 @@
+@import "./sidebar-drawer/sidebar-drawer.scss";
+
 [data-fs-bp-nav-menu] {
   --fs-profile-dropdown-menu-width: 22.5rem;
   width: auto;
@@ -46,6 +48,12 @@
         margin-right: var(--fs-spacing-1);
         color: #0366dd;
       }
+
+      & > [data-fs-bp-sidebar-drawer-btn] {
+        width: 1.125rem;
+        height: var(--fs-spacing-4);
+        margin-right: var(--fs-spacing-3);
+      }
     }
 
     [data-fs-bp-nav-page-name] {
@@ -69,6 +77,29 @@
     [data-fs-bp-letter-highlight] {
       margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
     }
+
+    [data-fs-vertical-nav-menu] {
+      padding-bottom: var(--fs-spacing-2);
+      [data-fs-vertical-nav-menu-list] {
+        [data-fs-vertical-nav-menu-link] {
+          padding: var(--fs-spacing-2)
+            calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+        }
+      }
+      [data-fs-vertical-nav-menu-org-wrapper] {
+        [data-fs-vertical-nav-menu-org-name] {
+          font-weight: var(--fs-text-weight-medium);
+          font-size: var(--fs-text-size-1);
+          color: #858585;
+          margin-left: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+        }
+      }
+      [data-fs-vertical-nav-menu-list] {
+        margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+        font-size: var(--fs-text-size-1);
+        font-weight: var(--fs-text-weight-medium);
+      }
+    }
   }
 
   [data-fs-bp-base-tabs-layout-content] {
@@ -78,4 +109,15 @@
     overflow-y: auto;
     padding: 0 var(--fs-text-size-7);
   }
+
+  @include media("<=notebook") {
+    grid-template-areas:
+      "navbar"
+      "content";
+    grid-template-columns: 1fr;
+
+    [data-fs-bp-sidebar-menu] {
+      display: none;
+    }
+  }
 }

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+import { BasicDrawer, type BasicDrawerProps } from "../../../components";
+import { SidebarMenu } from "../SidebarMenu";
+
+export type SidebarDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  orgUnitName: string;
+  pageName: string;
+  close: () => void;
+};
+
+export const SidebarDrawer = ({
+  orgUnitName,
+  pageName,
+  close,
+  ...props
+}: SidebarDrawerProps) => {
+  return (
+    <BasicDrawer
+      data-bp-sidebar-menu
+      close={close}
+      {...props}
+      data-fs-slide-over-direction="leftSide"
+    >
+      <BasicDrawer.Heading
+        title={
+          <Link href="/" data-fs-bp-org-unit-details-navbar-link>
+            Demostore
+          </Link>
+        }
+        onClose={close}
+      />
+      <BasicDrawer.Body data-bp-sidebar-menu-drawer-body>
+        <div data-bp-sidebar-menu-wrapper-info>
+          <p data-bp-sidebar-menu-drawer-org-name>{orgUnitName}</p>
+          <p data-bp-sidebar-menu-drawer-page-name>{pageName}</p>
+        </div>
+
+        <SidebarMenu />
+      </BasicDrawer.Body>
+    </BasicDrawer>
+  );
+};

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss

@@ -0,0 +1,81 @@
+[data-bp-sidebar-menu] {
+  @import "../../../../shared/components/BasicDrawer/basic-drawer.scss";
+  @import "../../../components/LetterHighlight/letter-highlight.scss";
+  @import "../../../components/VerticalNav/vertical-nav.scss";
+
+  [data-fs-bp-org-unit-details-navbar-link] {
+    font-weight: var(--fs-text-weight-bold);
+    font-size: var(--fs-text-size-4);
+    line-height: var(--fs-text-size-6);
+    color: #0366dd;
+    text-decoration: none;
+  }
+
+  & > [data-bp-sidebar-menu-drawer-body] {
+    [data-bp-sidebar-menu-wrapper-info] {
+      padding: var(--fs-spacing-4)
+        calc(var(--fs-spacing-4) + var(--fs-spacing-0)) var(--fs-spacing-4)
+        calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
+
+      [data-bp-sidebar-menu-drawer-org-name] {
+        font-weight: var(--fs-text-weight-medium);
+        font-size: var(--fs-text-size-0);
+        color: #858585;
+      }
+      [data-bp-sidebar-menu-drawer-page-name] {
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-3);
+      }
+    }
+
+    & div {
+      padding: var(--fs-spacing-1)
+        calc(var(--fs-spacing-6) + var(--fs-spacing-0)) 0
+        calc(var(--fs-spacing-6) + var(--fs-spacing-0)) !important;
+      width: 100%;
+    }
+  }
+
+  [data-fs-vertical-nav-menu] {
+    padding-bottom: var(--fs-spacing-2);
+    [data-fs-vertical-nav-menu-org-wrapper] {
+      padding: 0rem !important;
+      [data-fs-vertical-nav-menu-org-name] {
+        font-weight: var(--fs-text-weight-medium);
+        font-size: var(--fs-text-size-1);
+        color: #858585;
+      }
+    }
+    [data-fs-vertical-nav-menu-list] {
+      margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-medium);
+    }
+  }
+
+  @include media(">=tablet") {
+    width: 30rem !important;
+    min-width: 30rem !important;
+    max-width: 30rem !important;
+  }
+
+  @include media("<=tablet") {
+    width: 20.9375rem !important;
+    min-width: 20.9375rem !important;
+    max-width: 20.9375rem !important;
+    & > [data-fs-bp-basic-drawer-heading] {
+      padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
+        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
+        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
+        calc(var(--fs-spacing-5) + var(--fs-spacing-0)) !important;
+    }
+    & > [data-bp-sidebar-menu-drawer-body] {
+      & div {
+        padding: var(--fs-spacing-1)
+          calc(var(--fs-spacing-3) + var(--fs-spacing-0)) 0
+          calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
+        width: 100%;
+      }
+    }
+  }
+}

package/src/pages/buying-policies.tsx

@@ -70,7 +70,13 @@ export async function loader(
   const { data: buyingPolicies = [], total = 0 } = buyingPoliciesResponse;
 
   return {
-    buyingPolicies,
+    buyingPolicies: search
+      ? buyingPolicies.filter((buyingPolicy) =>
+          buyingPolicy.name
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+        )
+      : buyingPolicies,
     total,
     search,
     page,