@vtex/faststore-plugin-buyer-portal 1.0.26 → 1.0.27

package/package.json

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

package/plugin.config.js

@@ -9,32 +9,34 @@ module.exports = {
       path: "/org-unit/[orgUnitId]",
       appLayout: false,
     },
-    "org-units": {
-      path: "/org-units/[[...orgUnitId]]",
+    "address-details": {
+      path: "/address/[addressId]",
       appLayout: false,
     },
-    contracts: {
-      path: "/contracts/[[...orgUnitId]]",
+    "user-details": {
+      path: "/user/[userId]",
       appLayout: false,
     },
-    addresses: {
-      path: "/addresses",
+
+    // Shared pages
+    "org-units": {
+      path: "/org-units/[[...orgUnitId]]",
       appLayout: false,
     },
-    "address-details": {
-      path: "/address/[addressId]",
+    profile: {
+      path: "/profile/[[...orgUnitId]]",
       appLayout: false,
     },
-    users: {
-      path: "/users",
+    contracts: {
+      path: "/contracts/[[...orgUnitId]]",
       appLayout: false,
     },
-    "user-details": {
-      path: "/user/[userId]",
+    addresses: {
+      path: "/addresses/[[...orgUnitId]]",
       appLayout: false,
     },
-    profile: {
-      path: "/profile",
+    users: {
+      path: "/users/[[...orgUnitId]]",
       appLayout: false,
     },
   },

package/src/clients/BuyerPortalClient.ts

@@ -1,7 +1,10 @@
 import type { AddressData } from "../types/AddressData";
 import type { ContractData } from "../types/ContractData";
 import type { OrgUnitData } from "../types/OrgUnitsData";
-import type { OrgUnitSummaryData } from "../types/OrgUnitSummaryData";
+import type {
+  OrgUnitBasicData,
+  OrgUnitSummaryData,
+} from "../types/OrgUnitSummaryData";
 import { getApiUrl } from "../utils/api";
 import Client from "./Client";
 
@@ -58,6 +61,14 @@ class BuyerPortalClient extends Client {
   // }
 
   //Org Units
+  getOrgUnitBasicData(id: string, cookie: string) {
+    return this.get<OrgUnitBasicData>(`units/${id}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
   getOrgUnitSummary(id: string, cookie: string) {
     return this.get<OrgUnitSummaryData>(`units/summary/${id}`, {
       headers: {

package/src/clients/Client.ts

@@ -46,10 +46,9 @@ class Client {
       }
 
       if (!response.ok) {
+        console.error("Request failed:", responseData);
         throw new Error(
-          responseData
-            ? (responseData as unknown as { message: string }).message
-            : "Request failed"
+          responseData ? JSON.stringify(responseData) : "Request failed"
         );
       }
 

package/src/components/AddressesCard/AddressesCard.tsx

@@ -6,24 +6,31 @@ import {
   DropdownButton,
 } from "@faststore/ui";
 import { Tag } from "../Tag/Tag";
-import { AddressData } from "../../types/AddressData";
+import type { AddressData } from "../../types/AddressData";
 import { Icon } from "../Icon";
 import { BasicCard } from "../BasicCard/BasicCard";
 
 type AddressesCardProps = {
-  addresses: AddressData[];
+  addresses?: AddressData[];
+  orgUnitData?: {
+    id: string | null;
+    name: string;
+  };
 };
 
-export default function AddressesCard({ addresses }: AddressesCardProps) {
+export default function AddressesCard({
+  addresses = [],
+  orgUnitData,
+}: AddressesCardProps) {
   return (
     <BasicCard
-      footerLink="/addresses"
+      footerLink={`/addresses${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
       footerMessage="Manage addresses"
       title="Addresses"
       subTitle={addresses.length ?? 0}
-      onPlusIconClick={() => { }}
+      onPlusIconClick={() => {}}
     >
-      {addresses.length &&
+      {Boolean(addresses.length) &&
         addresses.slice(0, 3).map((address) => {
           return (
             <div key={address.id}>
@@ -45,7 +52,10 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
                   </div>
                 </div>
                 <div data-fs-card-action-row>
-                  <Toggle id="addressActive" defaultChecked={address.isActive} />
+                  <Toggle
+                    id="addressActive"
+                    defaultChecked={address.isActive}
+                  />
 
                   <Dropdown>
                     <DropdownButton data-fs-card-row-dropdown-button>

package/src/components/BasicCard/BasicCard.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Icon as UIIcon, IconButton } from "@faststore/ui";
 import Link from "next/link";
 
@@ -37,7 +37,7 @@ export const BasicCard = ({
         {onPlusIconClick && (
           <IconButton
             icon={<UIIcon name="PlusCircle" width={20} height={20} />}
-            aria-label={`$addresses action`}
+            aria-label={"addresses action"}
             onClick={onPlusIconClick}
           />
         )}

package/src/components/BasicDrawer/basic-drawer.scss

@@ -69,13 +69,13 @@
 
     cursor: pointer;
 
-    padding: var(--fs-spacing-8) calc(var(--fs-spacing-5) + var(--fs-spacing-0));
+    padding: var(--fs-spacing-3) calc(var(--fs-spacing-5) + var(--fs-spacing-0));
     min-width: 10.625rem;
     border-radius: var(--fs-border-radius-pill);
 
     font-size: var(--fs-text-size-1);
     font-weight: 600;
-    line-height: var(--fs-spacing-8);
+    line-height: var(--fs-spacing-3);
     text-align: center;
 
     &[data-fs-bp-basic-drawer-button-variant="confirm"] {

package/src/components/ContractsCard/ContractsCard.tsx

@@ -8,7 +8,7 @@ import {
 } from "@faststore/ui";
 import { Icon } from "../Icon";
 import { BasicCard } from "../BasicCard/BasicCard";
-import { ContractData } from "../../types/ContractData";
+import type { ContractData } from "../../types/ContractData";
 
 type ContractsCardProps = {
   orgUnitData?: {

package/src/components/DeleteOrgUnitDrawer/delete-org-unit-drawer.scss

@@ -1,5 +1,6 @@
+@import "../BasicDrawer/basic-drawer.scss";
+
 [data-fs-bp-basic-drawer][data-fs-bp-delete-org-unit-drawer] {
-  @import "../BasicDrawer/basic-drawer.scss";
   @import "../Tab/tab.scss";
   @import "../OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss";
 
@@ -24,7 +25,7 @@
 
   [data-fs-bp-tab-bar] {
     margin-top: var(--fs-spacing-4);
-    margin-bottom: var(--fs-spacing-8);
+    margin-bottom: var(--fs-spacing-3);
   }
 
   [data-fs-bp-delete-org-unit-drawer-user-line] {
@@ -59,7 +60,7 @@
     [data-fs-bp-delete-org-unit-drawer-user-org] {
       font-weight: 400;
       font-size: var(--fs-text-size-1);
-      line-height: var(--fs-spacing-8);
+      line-height: var(--fs-spacing-3);
       color: #707070;
       margin: 0 calc(var(--fs-spacing-3) + var(--fs-spacing-0));
       width: 9.375rem;
@@ -67,7 +68,7 @@
     [data-fs-bp-delete-org-unit-drawer-user-type] {
       font-weight: 400;
       font-size: var(--fs-text-size-1);
-      line-height: var(--fs-spacing-8);
+      line-height: var(--fs-spacing-3);
       color: #707070;
       margin: 0 calc(var(--fs-spacing-3) + var(--fs-spacing-0));
       width: 9.375rem;

package/src/components/ErrorMessage/error-message.scss

@@ -2,6 +2,6 @@
   color: #d31a15;
   font-weight: 400;
   font-size: var(--fs-text-size-0);
-  line-height: var(--fs-spacing-8);
+  line-height: var(--fs-spacing-3);
   margin-top: var(--fs-spacing-1);
 }

package/src/components/InputText/input-text.scss

@@ -6,7 +6,7 @@
   cursor: text;
 
   border: var(--fs-border-width) solid #d6d6d6;
-  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0)) var(--fs-spacing-8);
+  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0)) var(--fs-spacing-3);
   border-radius: calc(var(--fs-border-radius) * 2);
   background-color: #ffffff;
   color: #5c5c5c;
@@ -14,7 +14,7 @@
   [data-fs-bp-input-text-label] {
     font-size: var(--fs-text-size-2);
     font-weight: 400;
-    line-height: var(--fs-spacing-8);
+    line-height: var(--fs-spacing-3);
 
     position: absolute;
     transform-origin: 0 0;
@@ -26,7 +26,7 @@
 
     font-size: var(--fs-text-size-1);
     font-weight: 400;
-    line-height: var(--fs-spacing-8);
+    line-height: var(--fs-spacing-3);
     border-width: 0;
 
     position: absolute;
@@ -40,7 +40,7 @@
     position: absolute;
     width: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
     height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-    right: var(--fs-spacing-8);
+    right: var(--fs-spacing-3);
     top: 1.125rem;
     cursor: pointer;
 

package/src/components/InternalTopbar/InternalTopbar.tsx

@@ -4,10 +4,10 @@ import type { HTMLAttributes } from "react";
 
 import Link from "next/link";
 import { Icon } from "../Icon";
+import { useBuyerPortal } from "../../hooks/useBuyerPortal";
 
 interface InternapTopBarProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "title"> {
-  rootName: string;
   titleIcon?: ReactNode;
   title: string | ReactNode;
   subTitle?: string | ReactNode;
@@ -17,7 +17,6 @@ interface InternapTopBarProps
 }
 
 export const InternalTopBar = ({
-  rootName,
   titleIcon,
   title,
   subTitle,
@@ -26,6 +25,8 @@ export const InternalTopBar = ({
   children,
   href = "/buyer-portal",
 }: InternapTopBarProps) => {
+  const { orgUnit } = useBuyerPortal();
+
   return (
     <header data-fs-buyer-portal-topbar>
       <div data-fs-buyer-portal-topbar-navigation>
@@ -40,13 +41,13 @@ export const InternalTopBar = ({
                 data-fs-buyer-portal-topbar-navigation-back
               />
             }
-            aria-label={`topbar goback`}
+            aria-label={"topbar goback"}
           />
         </Link>
         <div data-fs-internal-topbar-icon-wrapper>
           <Icon name="StarFolder" height={24} width={24} />
         </div>
-        {rootName}
+        {orgUnit?.name ?? "Buyer Portal"}
       </div>
 
       <div data-fs-buyer-portal-topbar-wrapper>
@@ -75,12 +76,10 @@ export const InternalTopBar = ({
       <div data-fs-buyer-portal-topbar-actions>
         {children}
         {showActions && (
-          <>
-            <IconButton
-              icon={<Icon name="MoreVert" height={24} width={24} />}
-              aria-label="topbar options"
-            />
-          </>
+          <IconButton
+            icon={<Icon name="MoreVert" height={24} width={24} />}
+            aria-label="topbar options"
+          />
         )}
       </div>
     </header>

package/src/components/InternalTopbar/internal-top-bar.scss

@@ -19,6 +19,7 @@
     color: #1f1f1f;
     font-size: var(--fs-text-size-1);
     font-weight: 600;
+    text-transform: capitalize;
 
     span {
       display: flex;

package/src/components/MainLinksDropdownMenu/MainLinksDropdownMenu.tsx

@@ -1,19 +1,52 @@
 import { DropdownItem, DropdownMenu } from "@faststore/ui";
+import { useRouter } from "next/router";
+import { Icon } from "../Icon";
+import { useBuyerPortal } from "../../hooks/useBuyerPortal";
+import type { OrgUnitBasicData } from "../../types/OrgUnitSummaryData";
+
+const getMenuItems = (orgUnit?: OrgUnitBasicData | null) => {
+  const contractsOrProfileOption =
+    orgUnit?.contractMode === "Single"
+      ? { name: "Profile", link: "/profile" }
+      : { name: "Contracts", link: "/contracts" };
+
+  const menuItems = [
+    { name: "Users", link: "/users" },
+    { name: "Organizational Units", link: "/org-units" },
+    contractsOrProfileOption,
+    { name: "Addresses", link: "/addresses" },
+  ].map((item) => ({
+    ...item,
+    link: orgUnit ? `${item.link}/${orgUnit.id}` : item.link,
+  }));
+
+  const firstOption = orgUnit
+    ? { name: orgUnit.name, link: `/org-unit/${orgUnit.id}` }
+    : { name: "Buyer Portal", link: "/buyer-portal" };
+
+  return [firstOption, ...menuItems];
+};
 
 export const MainLinksDropdownMenu = () => {
+  const { push, asPath } = useRouter();
+  const { orgUnit } = useBuyerPortal();
+
   return (
-    <DropdownMenu>
-      {[
-        "Stellar Corp",
-        "   Users",
-        "   Org Units",
-        "   Profile",
-        "   Addresses",
-        "   Payment Methods",
-        "   Assortment",
-      ].map((item, index) => (
-        <DropdownItem key={index}>{item}</DropdownItem>
-      ))}
+    <DropdownMenu align="center" data-fs-bp-main-links-dropdown-menu>
+      {getMenuItems(orgUnit).map(({ name, link }) => {
+        const isActive = asPath === link;
+
+        return (
+          <DropdownItem
+            data-fs-bp-main-link-is-active={isActive}
+            key={link}
+            onClick={() => push(link)}
+          >
+            <span>{name}</span>
+            <Icon name="Check" width={12} height={12} />
+          </DropdownItem>
+        );
+      })}
     </DropdownMenu>
   );
 };

package/src/components/MainLinksDropdownMenu/main-links-dropdown-menu.scss

@@ -0,0 +1,37 @@
+[data-fs-bp-main-links-dropdown-menu] {
+  padding: var(--fs-spacing-1) 0;
+  min-width: 16.25rem;
+
+  [data-fs-dropdown-item] {
+    padding: var(--fs-spacing-1) calc(var(--fs-spacing-4) - var(--fs-spacing-0))
+      var(--fs-spacing-1) var(--fs-spacing-6);
+    gap: var(--fs-spacing-1);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    font-weight: var(--fs-text-weight-medium);
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    text-transform: capitalize;
+
+    &:first-of-type {
+      padding-left: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    }
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    [data-fs-icon] {
+      display: none;
+    }
+
+    &[data-fs-bp-main-link-is-active="true"] {
+      color: #0366dd;
+
+      [data-fs-icon] {
+        display: inline;
+      }
+    }
+  }
+}

package/src/components/ProfileCard/ProfileCard.tsx

@@ -6,6 +6,11 @@ type ProfileCardProps = {
   id: string;
 
   imageUrl?: string;
+
+  orgUnitData?: {
+    id: string | null;
+    name: string;
+  };
 };
 
 export default function ProfileCard({
@@ -13,10 +18,11 @@ export default function ProfileCard({
   email,
   id,
   imageUrl,
+  orgUnitData,
 }: ProfileCardProps) {
   return (
     <BasicCard
-      footerLink="/profile"
+      footerLink={`/profile${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
       footerMessage="View profile"
       title="Profile"
     >

package/src/components/SelfManagementDrawer/self-management-drawer.scss

@@ -82,7 +82,7 @@
     color: var(--fs-color-text);
     text-transform: capitalize;
     text-decoration: none;
-    padding: var(--fs-spacing-8) 0 0 0;
+    padding: var(--fs-spacing-3) 0 0 0;
   }
 
   [data-fs-self-management-drawer-header-org-name]:hover {

package/src/components/UsersCard/UsersCard.tsx

@@ -9,7 +9,7 @@ import {
 
 import { Icon } from "../Icon";
 import { BasicCard } from "../BasicCard/BasicCard";
-import { UserData } from "../../types/UserData";
+import type { UserData } from "../../types/UserData";
 
 type UsersCardProps = {
   orgUnitData?: {
@@ -19,7 +19,7 @@ type UsersCardProps = {
   users: UserData[];
 };
 
-export default function UsersCard({ users, orgUnitData }: UsersCardProps) {
+export default function UsersCard({ users = [], orgUnitData }: UsersCardProps) {
   return (
     <BasicCard
       footerLink={`/users${orgUnitData?.id ? `/${orgUnitData.id}` : ""}`}
@@ -28,7 +28,7 @@ export default function UsersCard({ users, orgUnitData }: UsersCardProps) {
       onPlusIconClick={() => {}}
       title="Users"
     >
-      {users.length &&
+      {Boolean(users.length) &&
         users.slice(0, 3).map((user: UserData) => {
           return (
             <div key={user.userId}>

package/src/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -1,7 +1,7 @@
 import { DropdownItem, DropdownMenu, Toggle } from "@faststore/ui";
 import { useState } from "react";
 import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
-import { AddressData } from "../../types/AddressData";
+import type { AddressData } from "../../types/AddressData";
 import { addressLabelToPropMapping } from "../../utils/addresLabelToPropMapping";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
 import { Icon } from "../../components/Icon";
@@ -21,7 +21,6 @@ export const AddressDetailsLayout = ({
     <GlobalLayout>
       <section data-fs-address-details-section>
         <InternalTopBar
-          rootName="Stellar Inc."
           href="/buyer-portal"
           showActions
           titleIcon={
@@ -36,7 +35,7 @@ export const AddressDetailsLayout = ({
           titleDropDownItems={
             <DropdownMenu>
               {["Location 1", "Location 2", "Location 3"].map((item) => (
-                <DropdownItem>{item}</DropdownItem>
+                <DropdownItem key={item}>{item}</DropdownItem>
               ))}
             </DropdownMenu>
           }
@@ -56,13 +55,13 @@ export const AddressDetailsLayout = ({
         <div data-fs-address-details-info-wrapper>
           <div data-fs-address-details-section-header>
             <h1 data-fs-address-details-title>Address Details</h1>
-            <button data-fs-address-details-button>
+            <button type="button" data-fs-address-details-button>
               <Icon
                 name="Edit"
                 width={20}
                 height={20}
                 data-fs-address-details-icon
-              ></Icon>
+              />
               Edit
             </button>
           </div>
@@ -72,6 +71,7 @@ export const AddressDetailsLayout = ({
             .map((prop, index) => {
               return (
                 <div
+                  key={prop}
                   data-fs-address-details-info-line
                   data-fs-address-details-info-line-first={index === 0}
                 >
@@ -92,26 +92,26 @@ export const AddressDetailsLayout = ({
                 {addressData.locations.length}
               </span>
             </h1>
-            <button data-fs-address-details-button>
+            <button type="button" data-fs-address-details-button>
               <Icon
                 name="Add"
                 width={20}
                 height={20}
                 data-fs-address-details-icon
-              ></Icon>
+              />
               Add New
             </button>
           </div>
 
           <div data-fs-address-details-locations>
             {addressData.locations.map((location) => (
-              <div data-fs-address-details-location>
+              <div key={location} data-fs-address-details-location>
                 <span data-fs-address-details-location-name>{location}</span>
                 <span data-fs-address-details-location-actions>
-                  <button data-fs-address-details-location-delete>
+                  <button type="button" data-fs-address-details-location-delete>
                     <Icon name="Delete" width={24} height={24} />
                   </button>
-                  <button data-fs-address-details-location-more>
+                  <button type="button" data-fs-address-details-location-more>
                     <Icon name="MoreVert" width={24} height={24} />
                   </button>
                 </span>

package/src/layouts/AddressesLayout/AddressesLayout.tsx

@@ -5,7 +5,7 @@ import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
 import SortFilter from "../../components/SortFilter/SortFilter";
 import { statusFilters } from "../../utils/search";
 
-import { AddressSummaryData } from "../../types/AddressData";
+import type { AddressSummaryData } from "../../types/AddressData";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
 import { Icon } from "../../components/Icon";
 import { useQueryParams } from "../../hooks/useQueryParams";
@@ -27,14 +27,13 @@ export const AddressLayout = ({ data }: AddressLayoutProps) => {
     <GlobalLayout>
       <section data-fs-addresses-section>
         <InternalTopBar
-          rootName="Stellar Inc."
           showActions={false}
           title="Addresses"
           subTitle={data.length ?? 0}
           titleDropDownItems={<MainLinksDropdownMenu />}
         >
           <div data-fs-topbar-actions-wrapper>
-            <button data-fs-topbar-dropdown-add-trigger>
+            <button type="button" data-fs-topbar-dropdown-add-trigger>
               <Icon
                 name="Add"
                 width={20}

package/src/layouts/AddressesLayout/addresses-layout.scss

@@ -1,3 +1,5 @@
+@import "../../components/MainLinksDropdownMenu/main-links-dropdown-menu.scss";
+
 [data-fs-addresses-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 

package/src/layouts/ContractsLayout/ContractsLayout.tsx

@@ -5,10 +5,11 @@ import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
 import SortFilter from "../../components/SortFilter/SortFilter";
 import { statusFilters } from "../../utils/search";
 
-import { ContractData } from "../../types/ContractData";
+import type { ContractData } from "../../types/ContractData";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
 import { Icon } from "../../components/Icon";
 import { useQueryParams } from "../../hooks/useQueryParams";
+import { MainLinksDropdownMenu } from "../../components/MainLinksDropdownMenu/MainLinksDropdownMenu";
 
 export type ContractsLayoutProps = {
   data: ContractData[];
@@ -21,14 +22,8 @@ export const ContractsLayout = ({ data }: ContractsLayoutProps) => {
     <GlobalLayout>
       <section data-fs-contracts-section>
         <InternalTopBar
-          rootName="Stellar Inc."
           title="Contracts"
-          titleDropDownItems={
-            <DropdownMenu>
-              <DropdownItem>Empresa 02</DropdownItem>
-              <DropdownItem>Empresa 03</DropdownItem>
-            </DropdownMenu>
-          }
+          titleDropDownItems={<MainLinksDropdownMenu />}
         />
 
         <div data-fs-contracts-page>

package/src/layouts/HomeLayout/HomeLayout.tsx

@@ -3,7 +3,7 @@ import ContractsCard from "../../components/ContractsCard/ContractsCard";
 import OrganizationalUnitsCard from "../../components/OrganizationalUnitsCard/OrganizationalUnitsCard";
 import ProfileCard from "../../components/ProfileCard/ProfileCard";
 import UsersCard from "../../components/UsersCard/UsersCard";
-import { OrganizationData } from "../../types/OrganizationData";
+import type { OrganizationData } from "../../types/OrganizationData";
 import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
 
 export type HomeLayoutProps = {