@vtex/faststore-plugin-buyer-portal 1.1.13 → 1.1.15

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,50 @@
+[![JIRA Issue](https://img.shields.io/badge/issue-JIRA-blue.svg)]()
+
+## 📌 What does this PR do?
+
+<!-- Provide a clear and concise description of the changes -->
+
+-
+
+## 🛠️ What problem does this solve?
+
+<!-- Explain the issue or need addressed by this PR -->
+
+-
+
+## 📝 Summary of changes
+
+<!-- List key changes in this PR -->
+
+-
+-
+-
+
+## ✅ How to test this PR?
+
+<!-- Provide instructions so reviewers can test or validate the changes (e.g., include a preview link if available) -->
+
+-
+-
+
+## 🔍 Screenshots / GIFs (if applicable)
+
+<!-- Add images or GIFs to help visualize the change -->
+
+| Before | After |
+| ------ | ----- |
+|        |       |
+
+## 🚩 Checklist
+
+- [ ] I have updated the CHANGELOG (if applicable)
+- [ ] I have checked if my PR requires new documentation, and included it if necessary
+- [ ] I have tested my changes locally
+- [ ] I have added tests that prove my fix is effective or my feature works
+- [ ] I have added or updated documentation (if needed)
+- [ ] I have linted and formatted my code
+- [ ] I have added the 'run-tests' label when the PR is ready for review
+
+## 📎 Related issues
+
+<!-- Link related issues, e.g., Fixes #123, Closes #456 -->

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -206,6 +206,17 @@
       d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
   </symbol>
 
+
+  <symbol
+    id="MoreHorz"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12ZM10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12ZM16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12Z" />
+  </symbol>
+
+
   <symbol
     id="Close"
     xmlns="http://www.w3.org/2000/svg"
@@ -377,4 +388,7 @@
       fill="currentColor" />
   </symbol>
 
+  <symbol id="ChevronRight" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z" fill="currentColor"/>
+  </symbol>
 </svg>

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

@@ -0,0 +1,28 @@
+import { Icon } from "../../../shared/components";
+import { OrgUnitBreadcrumbProps } from "../../types";
+
+import { OrgUnitBreadcrumbDropdown } from "./OrgUnitBreadcrumbDropdown";
+import { OrgUnitBreadcrumbPath } from "./OrgUnitBreadcrumbPath";
+
+export const OrgUnitBreadcrumb = ({ items }: OrgUnitBreadcrumbProps) => {
+  const sortedByPosition = [...items].sort((a, b) => a.position - b.position);
+  const divider = (
+    <Icon
+      data-fs-bp-breadcrumb-divider
+      name="ChevronRight"
+      width={24}
+      height={24}
+    />
+  );
+
+  return (
+    <nav data-fs-bp-breadcrumb-nav>
+      <OrgUnitBreadcrumbDropdown items={sortedByPosition.slice(0, -2)} />
+      {items.length > 2 && divider}
+      <OrgUnitBreadcrumbPath
+        items={sortedByPosition.slice(-2)}
+        divider={divider}
+      />
+    </nav>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import { Dropdown, DropdownItem } from "@faststore/ui";
+
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import { OrgUnitBreadcrumbProps } from "../../types";
+
+export const OrgUnitBreadcrumbDropdown = ({
+  items,
+}: OrgUnitBreadcrumbProps) => {
+  const { push } = useRouter();
+
+  const dropdownItems = items.map((item) => (
+    <DropdownItem onClick={() => push(item.item)} key={item.item}>
+      <Icon name="Folder" width={20} height={20} />
+      {item.name}
+    </DropdownItem>
+  ));
+
+  return (
+    items.length > 0 && (
+      <>
+        <Dropdown>
+          <BasicDropdownMenu.Trigger iconName="MoreHorz" />
+          <BasicDropdownMenu align="left">{dropdownItems}</BasicDropdownMenu>
+        </Dropdown>
+      </>
+    )
+  );
+};

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

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+
+import Link from "next/link";
+
+import { Tooltip } from "@faststore/ui";
+
+import { OrgUnitBreadcrumbItemProps } from "../../types";
+
+export const OrgUnitBreadcrumbLink = ({
+  name,
+  item,
+  isLast,
+}: OrgUnitBreadcrumbItemProps) => {
+  const [truncate, setTruncate] = useState(false);
+  const linkRef = useRef<HTMLParagraphElement | HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    setTruncate(
+      linkRef.current
+        ? linkRef.current.scrollWidth > linkRef.current?.clientWidth
+        : false
+    );
+  }, []);
+
+  const linkContent = (
+    <div data-fs-bp-breadcrumb-link>
+      {isLast ? (
+        <p
+          ref={linkRef as React.RefObject<HTMLParagraphElement>}
+          data-fs-bp-breadcrumb-text
+          data-fs-bp-breadcrumb-current
+        >
+          {name}
+        </p>
+      ) : (
+        <Link
+          ref={linkRef as React.RefObject<HTMLAnchorElement>}
+          data-fs-bp-breadcrumb-text
+          href={item}
+        >
+          {name}
+        </Link>
+      )}
+    </div>
+  );
+
+  return truncate ? (
+    <Tooltip content={name}>{linkContent}</Tooltip>
+  ) : (
+    linkContent
+  );
+};

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

@@ -0,0 +1,27 @@
+import { Fragment } from "react";
+
+import { OrgUnitBreadcrumbPathProps } from "../../types";
+
+import { OrgUnitBreadcrumbLink } from "./OrgUnitBreadcrumbLink";
+
+export const OrgUnitBreadcrumbPath = ({
+  items,
+  divider,
+}: OrgUnitBreadcrumbPathProps) =>
+  items.flatMap((item, index) => {
+    const isLast = index === items.length - 1;
+    const link = [
+      <OrgUnitBreadcrumbLink
+        key={item.item}
+        item={item.item}
+        name={item.name}
+        isLast={isLast}
+      />,
+    ];
+
+    if (!isLast && divider) {
+      link.push(<Fragment key={index}>{divider}</Fragment>);
+    }
+
+    return link;
+  });

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

@@ -0,0 +1,50 @@
+@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
+@import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';
+
+[data-fs-bp-breadcrumb-nav] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--fs-spacing-1);
+
+  [data-fs-tooltip] {
+    --fs-tooltip-background: #1F1F1F;
+    --fs-tooltip-border-radius: .25rem;
+  }
+}
+
+[data-fs-bp-breadcrumb-link] {
+  flex: 0 0 max-content;
+  max-width: 28.125rem; // 450px
+
+  p, a {
+    font-size: var(--fs-text-size-4);
+    line-height: var(--fs-text-size-6);
+    font-weight: var(--fs-text-weight-semibold);
+    color: #5C5C5C;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    letter-spacing: -0.04em;
+    display: block;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [data-fs-bp-breadcrumb-current] {
+    color: #000;
+    cursor: inherit;
+  }
+
+  a:hover {
+    color: #565656;
+  }
+}
+
+[data-fs-bp-breadcrumb-divider] {
+  color: #858585;
+  flex: 0 0 auto;
+}

package/src/features/org-units/components/index.ts

@@ -27,3 +27,4 @@ export {
   OrgUnitDetailsNavbar,
   type OrgUnitDetailsNavbarProps,
 } from "./OrgUnitDetailsNavbar/OrgUnitDetailsNavbar";
+export { OrgUnitBreadcrumb } from "./OrgUnitBreadcrumb/OrgUnitBreadcrumb";

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

@@ -19,6 +19,7 @@ import {
   OrgUnitsDropdownMenu,
   AddAllToOrgUnitDropdown,
   OrgUnitDetailsNavbar,
+  OrgUnitBreadcrumb,
 } from "../../components";
 
 import type { ContractData } from "../../../contracts/types";
@@ -37,6 +38,15 @@ export const OrgUnitsDetailsLayout = ({
   data: { orgUnit, contracts, user },
 }: OrgUnitsDetailsLayoutProps) => {
   const isSingleContract = contracts.length === 1;
+  const breadcrumbList = orgUnit.path.ids
+    .split("/")
+    .slice(1)
+    .map((orgUnitId, index) => ({
+      item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
+      name: orgUnit.path.names.split("/")[index],
+      position: index + 1,
+    }));
+
   return (
     <GlobalLayout>
       {/* TODO: Add person here */}
@@ -45,7 +55,8 @@ export const OrgUnitsDetailsLayout = ({
         person={{ name: user?.name ?? "", role: user?.roles?.[0] }}
       />
       <section data-fs-org-units-details-section>
-        <HeaderInside title={orgUnit.name}>
+        <HeaderInside>
+          <OrgUnitBreadcrumb items={breadcrumbList} />
           <Dropdown>
             <BasicDropdownMenu.Trigger />
             <OrgUnitsDropdownMenu
@@ -54,113 +65,111 @@ export const OrgUnitsDetailsLayout = ({
               name={orgUnit.name}
             />
           </Dropdown>
-          <Dropdown>
-            <DropdownButton asChild>
-              <HeaderInside.Button />
-            </DropdownButton>
-            <AddAllToOrgUnitDropdown
-              isSingleContract={isSingleContract}
-              contractId={contracts[0].id}
-              unitId={orgUnit.id}
-            />
-          </Dropdown>
+          {contracts.length > 0 && (
+            <Dropdown>
+              <DropdownButton asChild>
+                <HeaderInside.Button />
+              </DropdownButton>
+              <AddAllToOrgUnitDropdown
+                isSingleContract={isSingleContract}
+                contractId={contracts[0].id}
+                unitId={orgUnit.id}
+              />
+            </Dropdown>
+          )}
         </HeaderInside>
         <div data-fs-org-units-details-grid>
-          <div data-fs-org-units-details-grid-column>
-            {isSingleContract ? (
-              <BasicCard
-                data-fs-bp-contracts-settings-card
-                footerMessage="Manage contract settings"
-                footerLink={buyerPortalRoutes.profileDetails({
-                  orgUnitId: orgUnit.id,
-                  contractId: contracts[0]?.id ?? "",
-                })}
-                enableFooter
-              >
-                <LetterHighlight letter={orgUnit.name[0]} />
-                <VerticalNav.Menu title={orgUnit.name}>
-                  {getContractSettingsLinks({
-                    orgUnitId: orgUnit.id,
-                    contractId: contracts[0]?.id ?? "",
-                  }).map(({ name, link }) => (
-                    <VerticalNav.Link key={name} link={link}>
-                      {name}
-                    </VerticalNav.Link>
-                  ))}
-                </VerticalNav.Menu>
-              </BasicCard>
-            ) : (
-              <BasicCard
-                enableHeader
-                title="Contracts"
-                subTitle={contracts.length}
-                data-fs-bp-contracts-list-card
-              >
-                {contracts.map((contract) => (
-                  <BasicCard.Line
-                    key={contract.id}
-                    title={contract.name ?? ""}
-                    icon={
-                      <LetterHighlight
-                        size="small"
-                        letter={contract.name ?? ""}
-                      />
-                    }
-                    href={buyerPortalRoutes.profileDetails({
-                      orgUnitId: orgUnit.id,
-                      contractId: contract.id,
-                    })}
-                    menu={
-                      <BasicDropdownMenu>
-                        <DropdownItem>
-                          <Icon name="Edit" width={20} height={20} />
-                          Edit
-                        </DropdownItem>
-                      </BasicDropdownMenu>
-                    }
-                  />
-                ))}
-              </BasicCard>
-            )}
-          </div>
-          <div data-fs-org-units-details-grid-column>
+          {isSingleContract ? (
             <BasicCard
-              data-fs-bp-organizations-settings-card
-              footerMessage="Manage organization settings"
-              footerLink={buyerPortalRoutes.users({
+              data-fs-bp-contracts-settings-card
+              footerMessage="Manage contract settings"
+              footerLink={buyerPortalRoutes.profileDetails({
                 orgUnitId: orgUnit.id,
+                contractId: contracts[0]?.id ?? "",
               })}
               enableFooter
             >
-              <VerticalNav.Menu title="Organization">
-                {getOrganizationSettingsLinks(orgUnit.id).map((option) => (
-                  <VerticalNav.Link key={option.name} link={option.link}>
-                    {option.name}
+              <LetterHighlight letter={orgUnit.name[0]} />
+              <VerticalNav.Menu title={orgUnit.name}>
+                {getContractSettingsLinks({
+                  orgUnitId: orgUnit.id,
+                  contractId: contracts[0]?.id ?? "",
+                }).map(({ name, link }) => (
+                  <VerticalNav.Link key={name} link={link}>
+                    {name}
                   </VerticalNav.Link>
                 ))}
               </VerticalNav.Menu>
             </BasicCard>
+          ) : (
             <BasicCard
-              data-fs-bp-compliance-settings-card
-              footerMessage="Manage finance and compliance settings"
-              footerLink={buyerPortalRoutes.buyingPolicies({
-                orgUnitId: orgUnit.id,
-                contractId: contracts[0]?.id,
-              })}
-              enableFooter
+              enableHeader
+              title="Contracts"
+              subTitle={contracts.length}
+              data-fs-bp-contracts-list-card
             >
-              <VerticalNav.Menu title="Finance and Compliance">
-                {getFinanceSettingsLinks({
-                  orgUnitId: orgUnit.id,
-                  contractId: contracts[0]?.id ?? "",
-                }).map((option) => (
-                  <VerticalNav.Link key={option.name} link={option.link}>
-                    {option.name}
-                  </VerticalNav.Link>
-                ))}
-              </VerticalNav.Menu>
+              {contracts.map((contract) => (
+                <BasicCard.Line
+                  key={contract.id}
+                  title={contract.name ?? ""}
+                  icon={
+                    <LetterHighlight
+                      size="small"
+                      letter={contract.name ?? ""}
+                    />
+                  }
+                  href={buyerPortalRoutes.profileDetails({
+                    orgUnitId: orgUnit.id,
+                    contractId: contract.id,
+                  })}
+                  menu={
+                    <BasicDropdownMenu>
+                      <DropdownItem>
+                        <Icon name="Edit" width={20} height={20} />
+                        Edit
+                      </DropdownItem>
+                    </BasicDropdownMenu>
+                  }
+                />
+              ))}
             </BasicCard>
-          </div>
+          )}
+          <BasicCard
+            data-fs-bp-organizations-settings-card
+            footerMessage="Manage organization settings"
+            footerLink={buyerPortalRoutes.users({
+              orgUnitId: orgUnit.id,
+            })}
+            enableFooter
+          >
+            <VerticalNav.Menu title="Organization">
+              {getOrganizationSettingsLinks(orgUnit.id).map((option) => (
+                <VerticalNav.Link key={option.name} link={option.link}>
+                  {option.name}
+                </VerticalNav.Link>
+              ))}
+            </VerticalNav.Menu>
+          </BasicCard>
+          <BasicCard
+            data-fs-bp-compliance-settings-card
+            footerMessage="Manage finance and compliance settings"
+            footerLink={buyerPortalRoutes.buyingPolicies({
+              orgUnitId: orgUnit.id,
+              contractId: contracts[0]?.id,
+            })}
+            enableFooter
+          >
+            <VerticalNav.Menu title="Finance and Compliance">
+              {getFinanceSettingsLinks({
+                orgUnitId: orgUnit.id,
+                contractId: contracts[0]?.id ?? "",
+              }).map((option) => (
+                <VerticalNav.Link key={option.name} link={option.link}>
+                  {option.name}
+                </VerticalNav.Link>
+              ))}
+            </VerticalNav.Menu>
+          </BasicCard>
         </div>
       </section>
     </GlobalLayout>

package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss

@@ -1,7 +1,9 @@
 @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+@import '@faststore/ui/src/components/molecules/Breadcrumb/styles.scss';
 @import "../../../shared/components/BasicDropdownMenu/basic-dropdown-menu.scss";
 @import "../../components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss";
 @import "../../../credit-cards/components/CreateCreditCardDrawer/create-credit-card-drawer.scss";
+@import "../../components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss";
 
 [data-fs-org-units-details-section] {
   @import "../../../shared/components/BasicCard/basic-card.scss";
@@ -17,9 +19,11 @@
   flex-direction: column;
 
   [data-fs-org-units-details-grid] {
-    display: flex;
+    display: grid;
     flex: 1;
     gap: var(--fs-spacing-3);
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 1fr;
   }
 
   [data-fs-card-row-dropdown-button] {
@@ -35,10 +39,6 @@
   }
 
   [data-fs-org-units-details-grid] {
-    display: flex;
-    min-height: 100%;
-    flex-wrap: wrap;
-
     [data-fs-org-units-details-grid-column] {
       flex: 1;
       display: flex;
@@ -99,6 +99,11 @@
     }
   }
 
+  [data-fs-bp-contracts-settings-card],[data-fs-bp-contracts-list-card] {
+    flex: 1;
+    grid-row: 1 / span 2;
+  }
+
   [data-fs-bp-contracts-list-card] {
     [data-fs-card-body] {
       max-height: 60vh;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+
+export type OrgUnitBreadcrumbItem = {
+  item: string;
+  name: string;
+  position: number;
+};
+
+export type OrgUnitBreadcrumbProps = {
+  items: OrgUnitBreadcrumbItem[];
+};
+
+export interface OrgUnitBreadcrumbItemProps
+  extends Omit<OrgUnitBreadcrumbItem, "position"> {
+  isLast?: boolean;
+}
+
+export interface OrgUnitBreadcrumbPathProps extends OrgUnitBreadcrumbProps {
+  divider: ReactNode;
+}

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

@@ -4,3 +4,9 @@ export type {
 } from "./OrgUnitSummaryData";
 export type { OrgUnitData, OrgUnitHierarchyData } from "./OrgUnitsData";
 export type { OrganizationData } from "./OrganizationData";
+export type {
+  OrgUnitBreadcrumbItem,
+  OrgUnitBreadcrumbProps,
+  OrgUnitBreadcrumbItemProps,
+  OrgUnitBreadcrumbPathProps,
+} from "./OrgUnitBreadcrumbTypes";

package/src/features/shared/components/HeaderInside/HeaderInside.tsx

@@ -7,7 +7,7 @@ import { Icon } from "../Icon";
 import { HeaderInsideButton } from "./HeaderInsideButton";
 
 export type HeaderInsideProps = {
-  title: string;
+  title?: string;
   backLink?: string;
   children?: ReactNode;
 };
@@ -25,7 +25,7 @@ export const HeaderInside = ({
           <Icon name="Back" />
         </Link>
       )}
-      <h1 data-fs-bp-header-inside-title>{title}</h1>
+      {title && <h1 data-fs-bp-header-inside-title>{title}</h1>}
       {children}
     </header>
   );