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

package/package.json

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

package/src/features/addresses/components/AddressForm/AddressForm.tsx

@@ -189,6 +189,21 @@ export const AddressForm = ({
             }
           />
 
+          <InputText
+            label="Neighborhood"
+            value={address.neighborhood}
+            className="address-postal-code"
+            hasError={isTouched && !address.neighborhood?.trim()}
+            onChange={(event) =>
+              setAddress({ ...address, neighborhood: event.target.value })
+            }
+          />
+
+          <ErrorMessage
+            show={isTouched && !address.neighborhood?.trim()}
+            message="Neighborhood is required"
+          />
+
           <InputText
             label="City"
             className="address-city"

package/src/features/addresses/components/CreateAddressDrawer/CreateAddressDrawer.tsx

@@ -104,6 +104,7 @@ export const CreateAddressDrawer = ({
         address.country &&
         address.zip &&
         address.state &&
+        address.neighborhood &&
         address.city &&
         address.types.length > 0) ||
       useExistingAddress

package/src/features/addresses/types/AddressData.ts

@@ -97,7 +97,7 @@ export type AddressInput = {
   locations?: string[];
   city: string;
   types: string[];
-  neighborhood?: string;
+  neighborhood: string;
 };
 
 export type GetAddressesByUnitIdParams = {

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

@@ -12,6 +12,7 @@ import {
   InputText,
   Icon,
 } from "../../../shared/components";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useCreateNewOrgUnit } from "../../hooks";
 
 import type { createNewOrgUnitService } from "../../services";
@@ -51,7 +52,13 @@ export const CreateOrgUnitDrawer = ({
         <button
           data-fs-bp-toast-view-button
           type="button"
-          onClick={() => router.push(`/org-unit/${data.id}`)}
+          onClick={() =>
+            router.push(
+              buyerPortalRoutes.orgUnitDetails({
+                orgUnitId: data.id,
+              })
+            )
+          }
         >
           View
         </button>

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

@@ -1,11 +1,19 @@
 import { Icon } from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
 import { OrgUnitBreadcrumbProps } from "../../types";
 
 import { OrgUnitBreadcrumbDropdown } from "./OrgUnitBreadcrumbDropdown";
 import { OrgUnitBreadcrumbPath } from "./OrgUnitBreadcrumbPath";
 
-export const OrgUnitBreadcrumb = ({ items }: OrgUnitBreadcrumbProps) => {
+export const OrgUnitBreadcrumb = ({
+  items,
+  maxItems,
+}: OrgUnitBreadcrumbProps) => {
+  const { currentContract } = useBuyerPortal();
   const sortedByPosition = [...items].sort((a, b) => a.position - b.position);
+
+  const offset = -Math.min(items.length, maxItems);
+
   const divider = (
     <Icon
       data-fs-bp-breadcrumb-divider
@@ -15,12 +23,16 @@ export const OrgUnitBreadcrumb = ({ items }: OrgUnitBreadcrumbProps) => {
     />
   );
 
+  const inBreadcrumb = sortedByPosition.slice(0, offset);
+
   return (
     <nav data-fs-bp-breadcrumb-nav>
-      <OrgUnitBreadcrumbDropdown items={sortedByPosition.slice(0, -2)} />
-      {items.length > 2 && divider}
+      <OrgUnitBreadcrumbDropdown items={inBreadcrumb} />
+      {Boolean(inBreadcrumb.length) && divider}
+
       <OrgUnitBreadcrumbPath
-        items={sortedByPosition.slice(-2)}
+        contractId={currentContract?.id ?? ""}
+        items={sortedByPosition.slice(offset)}
         divider={divider}
       />
     </nav>

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

@@ -7,7 +7,7 @@ import { OrgUnitBreadcrumbProps } from "../../types";
 
 export const OrgUnitBreadcrumbDropdown = ({
   items,
-}: OrgUnitBreadcrumbProps) => {
+}: Pick<OrgUnitBreadcrumbProps, "items">) => {
   const { push } = useRouter();
 
   const dropdownItems = items.map((item) => (

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

@@ -1,27 +1,53 @@
 import { Fragment } from "react";
 
+import { Dropdown } from "@faststore/ui";
+
+import { BasicDropdownMenu } from "../../../shared/components";
 import { OrgUnitBreadcrumbPathProps } from "../../types";
+import { AddAllToOrgUnitDropdown } from "../AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown";
+import { OrgUnitsDropdownMenu } from "../OrgUnitsDropdownMenu/OrgUnitsDropdownMenu";
 
 import { OrgUnitBreadcrumbLink } from "./OrgUnitBreadcrumbLink";
 
 export const OrgUnitBreadcrumbPath = ({
   items,
+  contractId,
   divider,
 }: OrgUnitBreadcrumbPathProps) =>
-  items.flatMap((item, index) => {
+  items.map((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>);
+    if (isLast) {
+      return (
+        <Fragment key={item.item}>
+          <OrgUnitBreadcrumbLink
+            item={item.item}
+            name={item.name}
+            isLast={isLast}
+          />
+          <Dropdown>
+            <BasicDropdownMenu.Trigger iconName="ArrowDropDown" />
+
+            <OrgUnitsDropdownMenu id={item.item} name={item.name} />
+            <AddAllToOrgUnitDropdown
+              isSingleContract
+              contractId={contractId}
+              unitId={item.unitId}
+              unitName={item.name}
+            />
+          </Dropdown>
+        </Fragment>
+      );
     }
 
-    return link;
+    return (
+      <Fragment key={item.item}>
+        <OrgUnitBreadcrumbLink
+          item={item.item}
+          name={item.name}
+          isLast={isLast}
+        />
+        {divider}
+      </Fragment>
+    );
   });

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

@@ -1,16 +1,25 @@
-@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
-@import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';
+@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;
+    --fs-tooltip-background: #1f1f1f;
+    --fs-tooltip-border-radius: 0.25rem;
+  }
+  @include media(">=tablet") {
+    flex-wrap: wrap;
+  }
+
+  [data-fs-bp-basic-dropdown-menu-trigger] {
+    color: var(--fs-color-neutral-6);
+    padding: 0;
+    width: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+    height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
   }
 }
 
@@ -18,11 +27,12 @@
   flex: 0 0 max-content;
   max-width: 28.125rem; // 450px
 
-  p, a {
+  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;
+    color: #5c5c5c;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.2s;
@@ -47,4 +57,4 @@
 [data-fs-bp-breadcrumb-divider] {
   color: #858585;
   flex: 0 0 auto;
-}
+}

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

@@ -6,6 +6,10 @@
   background-color: #ffffff;
   border-bottom: var(--fs-border-width) solid #ebebeb;
 
+  @include media("<=tablet") {
+    padding: var(--fs-spacing-0) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+  }
+
   [data-fs-bp-org-unit-details-navbar-link] {
     font-weight: var(--fs-text-weight-bold);
     font-size: var(--fs-text-size-4);
@@ -26,6 +30,10 @@
     padding: calc(var(--fs-spacing-1) + var(--fs-spacing-2))
       calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
+    @include media("<=tablet") {
+      display: none;
+    }
+
     color: #3d3d3d;
     font-weight: var(--fs-text-weight-semibold);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));

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

@@ -10,6 +10,7 @@ import {
   ErrorMessage,
   InputText,
 } from "../../../shared/components";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useUpdateOrgUnit } from "../../hooks";
 
 export type UpdateOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -41,7 +42,13 @@ export const UpdateOrgUnitDrawer = ({
         <button
           data-fs-bp-toast-view-button
           type="button"
-          onClick={() => router.push(`/org-unit/${id}`)}
+          onClick={() =>
+            router.push(
+              buyerPortalRoutes.orgUnitDetails({
+                orgUnitId: id,
+              })
+            )
+          }
         >
           View
         </button>

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

@@ -13,6 +13,7 @@ import {
   LetterHighlight,
   VerticalNav,
 } from "../../../shared/components";
+import { useMediaQuery } from "../../../shared/hooks/useMediaQuery";
 import { GlobalLayout } from "../../../shared/layouts";
 import {
   getContractSettingsLinks,
@@ -27,6 +28,12 @@ import {
   OrgUnitsDropdownMenu,
 } from "../../components";
 
+import {
+  MAX_DESKTOP_BREADCRUMB_ITEMS,
+  MAX_MOBILE_BREADCRUMB_ITEMS,
+  QUERY_TABLET,
+} from "./utils";
+
 import type { ContractData } from "../../../contracts/types";
 import type { UserData } from "../../../users/types";
 import type { OrgUnitBasicData } from "../../types";
@@ -44,11 +51,14 @@ export const OrgUnitsDetailsLayout = ({
   data: { orgUnit, contracts, user },
   loading = false,
 }: OrgUnitsDetailsLayoutProps) => {
+  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,
@@ -75,7 +85,14 @@ export const OrgUnitsDetailsLayout = ({
               }}
             />
           ) : (
-            <OrgUnitBreadcrumb items={breadcrumbList} />
+            <OrgUnitBreadcrumb
+              items={breadcrumbList}
+              maxItems={
+                isMobile
+                  ? MAX_MOBILE_BREADCRUMB_ITEMS
+                  : MAX_DESKTOP_BREADCRUMB_ITEMS
+              }
+            />
           )}
 
           <Dropdown>

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

@@ -1,5 +1,5 @@
 @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-@import '@faststore/ui/src/components/molecules/Breadcrumb/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";
@@ -10,97 +10,99 @@
   @import "../../../shared/components/VerticalNav/vertical-nav.scss";
   @import "../../../shared/components/LetterHighlight/letter-highlight.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
+  
+  
+  $fs-spacing-3-0: calc(var(--fs-spacing-3) + var(--fs-spacing-0)); // 1.25rem, 20px
+  $fs-spacing-3-2: calc(var(--fs-spacing-3) + var(--fs-spacing-2)); // 1.75rem, 28px
+  $fs-spacing-7-2: calc(var(--fs-spacing-7) + var(--fs-spacing-2)); // 3.75rem, 52px
+  $fs-spacing-9-0: calc(var(--fs-spacing-9) + var(--fs-spacing-0)); // 4.25rem, 68px
+  $fs-spacing-13-4: calc(var(--fs-spacing-13) + var(--fs-spacing-4)); // 7.5rem, 120px
 
-  padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0))
-    calc(var(--fs-spacing-13) - var(--fs-spacing-0))
-    calc(var(--fs-spacing-8) + var(--fs-spacing-0));
-  min-height: calc(100vh - calc(var(--fs-spacing-9) + var(--fs-spacing-0)));
+  padding: 0 $fs-spacing-7-2 $fs-spacing-13-4 $fs-spacing-7-2;
+
+  @include media("<notebook") {
+    padding: 0 var(--fs-spacing-7) $fs-spacing-13-4;
+  }
+
+  @include media("<tablet") {
+    padding: 0 $fs-spacing-3-0 $fs-spacing-7-2;
+  }
+
+  min-height: calc(100vh - $fs-spacing-9-0);
   display: flex;
   flex-direction: column;
 
+  [data-fs-bp-header-inside] {
+    margin: 0;
+    height: 4.5rem;
+
+    @include media("<tablet") {
+      margin: var(--fs-spacing-3) 0;
+    }
+
+    [data-fs-header-inside-button] {
+      @include media("<tablet") {
+        display: none;
+      }
+    }
+  }
+
   [data-fs-org-units-details-grid] {
     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] {
-    width: var(--fs-spacing-6);
-    height: var(--fs-spacing-6);
-    min-height: var(--fs-spacing-6);
-    margin-left: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
-    [data-fs-button-wrapper] {
-      svg {
-        color: #858585;
-      }
-    }
-  }
-
-  [data-fs-org-units-details-grid] {
-    [data-fs-org-units-details-grid-column] {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: var(--fs-spacing-3);
-      min-width: 25rem;
-
-      [data-fs-card] {
-        @include media(">=tablet") {
-          flex: 1;
-        }
-      }
+    @include media("<notebook") {
+      grid-template-columns: 1fr;
+      grid-auto-rows: auto;
     }
   }
 
-  [data-fs-org-unit-details-menu] {
-    display: flex;
-    flex-direction: column;
-
-    [data-fs-org-unit-details-menu-org-name] {
-      font-weight: 600;
-      font-size: var(--fs-text-size-3);
-      line-height: var(--fs-text-size-5);
-      color: #000000;
+  [data-fs-bp-basic-card] {
+    [data-fs-bp-letter-highlight] {
       margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-      margin-top: var(--fs-spacing-1);
-    }
-
-    [data-fs-org-unit-details-menu-list] {
-      margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-      display: flex;
-      flex-direction: column;
 
-      [data-fs-org-unit-details-menu-item] {
-        width: 100%;
+      @include media("<tablet") {
+        width: var(--fs-spacing-6);
+        height: var(--fs-spacing-6);
+        margin-left: 0;
+      }
+    }
+    [data-fs-vertical-nav-menu] {
+      [data-fs-vertical-nav-menu-org-wrapper] {
+        [data-fs-vertical-nav-menu-org-name] {
+          @include media("<tablet") {
+            margin-left: 0;
+            margin-top: var(--fs-spacing-1);
+          }
+        }
       }
 
-      [data-fs-org-unit-details-menu-link] {
-        display: flex;
-        text-decoration: none;
-        color: #000000;
-        padding: var(--fs-spacing-2)
-          calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-        width: 21.25rem;
-        height: var(--fs-spacing-6);
-        border-radius: var(--fs-border-radius-pill);
+      [data-fs-vertical-nav-menu-list] {
+        @include media("<tablet") {
+          margin-top: var(--fs-spacing-1);
+        }
+
+        @include media("<tablet") {
+          [data-fs-vertical-nav-menu-link] {
+            position: relative;
+            padding: 0;
+            height: auto;
+            line-height: var(--fs-spacing-6);
 
-        &:hover {
-          background-color: #f5f5f5;
+            &:hover {
+              border-radius: 0;
+            }
+          }
         }
       }
     }
   }
 
-  [data-fs-bp-contracts-settings-card] {
-    [data-fs-bp-letter-highlight] {
-      margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-    }
-  }
-
-  [data-fs-bp-contracts-settings-card],[data-fs-bp-contracts-list-card] {
-    flex: 1;
+  [data-fs-bp-contracts-settings-card],
+  [data-fs-bp-contracts-list-card] {
     grid-row: 1 / span 2;
   }
 

package/src/features/org-units/layouts/OrgUnitDetailsLayout/utils.ts

@@ -0,0 +1,3 @@
+export const MAX_MOBILE_BREADCRUMB_ITEMS = 1;
+export const MAX_DESKTOP_BREADCRUMB_ITEMS = 2;
+export const QUERY_TABLET = "(max-width: 768px)";

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

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 
 export type OrgUnitBreadcrumbItem = {
+  unitId: string;
   item: string;
   name: string;
   position: number;
@@ -8,13 +9,16 @@ export type OrgUnitBreadcrumbItem = {
 
 export type OrgUnitBreadcrumbProps = {
   items: OrgUnitBreadcrumbItem[];
+  maxItems: number;
 };
 
 export interface OrgUnitBreadcrumbItemProps
-  extends Omit<OrgUnitBreadcrumbItem, "position"> {
+  extends Omit<OrgUnitBreadcrumbItem, "position" | "unitId"> {
   isLast?: boolean;
 }
 
-export interface OrgUnitBreadcrumbPathProps extends OrgUnitBreadcrumbProps {
+export interface OrgUnitBreadcrumbPathProps {
   divider: ReactNode;
+  items: OrgUnitBreadcrumbItem[];
+  contractId: string;
 }

package/src/features/shared/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+export const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const mql = window.matchMedia(query);
+
+    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    setMatches(mql.matches);
+
+    mql.addEventListener("change", onChange);
+
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+};