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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "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/apis/new-route.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next/types";
+import type { NextApiRequest, NextApiResponse } from "next/types";
 
 // TODO: Remove when Plugin API feature be merged
 export default function handle(req: NextApiRequest, res: NextApiResponse) {

package/src/clients/BuyerPortalClient.ts

@@ -1,8 +1,11 @@
-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 { getApiUrl } from "../utils/api";
+import type { AddressData } from "../features/addresses/types";
+import type { ContractData } from "../features/contracts/types";
+import type {
+  OrgUnitBasicData,
+  OrgUnitSummaryData,
+  OrgUnitData,
+} from "../features/org-units/types";
+import { getApiUrl } from "../features/shared/utils";
 import Client from "./Client";
 
 class BuyerPortalClient extends 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

@@ -1,4 +1,4 @@
-import { toQueryParams } from "../utils/toQueryParams";
+import { toQueryParams } from "../features/shared/utils";
 
 interface RequestConfig<T> {
   url: string;
@@ -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/overrides/Navbar.tsx

@@ -1,6 +1,6 @@
-import { SectionOverride } from "@faststore/core";
+import type { SectionOverride } from "@faststore/core";
 import { useSession_unstable as useSession } from "@faststore/core/experimental";
-import { SelfManagementSignInButton } from "../SelfManagementSignInButton";
+import { SelfManagementSignInButton } from "../../features/shared/components";
 
 const SECTION: SectionOverride["section"] = "Navbar";
 

package/src/{components → features/addresses/components}/AddressLine/AddressLine.tsx

@@ -1,7 +1,6 @@
 import { Toggle } from "@faststore/ui";
 import Link from "next/link";
-import { Tag } from "../Tag/Tag";
-import { Icon } from "../Icon";
+import { Icon, Tag } from "../../../shared/components";
 
 export type AddressLineProps = {
   id: string;
@@ -31,12 +30,12 @@ export const AddressLine = ({
       </span>
 
       {types.map((type, index) => (
-        <Tag key={index}>{type}</Tag>
+        <Tag key={type}>{type}</Tag>
       ))}
     </Link>
 
     <Toggle id={id} defaultChecked={isActive} />
-    <button data-fs-addresses-dropdown-trigger>
+    <button type="button" data-fs-addresses-dropdown-trigger>
       <Icon
         name="MoreVert"
         width={20}

package/src/{components → features/addresses/components}/AddressesCard/AddressesCard.tsx

@@ -5,25 +5,30 @@ import {
   DropdownMenu,
   DropdownButton,
 } from "@faststore/ui";
-import { Tag } from "../Tag/Tag";
-import { AddressData } from "../../types/AddressData";
-import { Icon } from "../Icon";
-import { BasicCard } from "../BasicCard/BasicCard";
+import type { AddressData } from "../../types";
+import { BasicCard, Icon, Tag } from "../../../shared/components";
 
 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 +50,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/features/addresses/components/index.ts

@@ -0,0 +1,2 @@
+export { AddressLine, type AddressLineProps } from "./AddressLine/AddressLine";
+export { default as AddressesCard } from "./AddressesCard/AddressesCard";

package/src/{layouts → features/addresses/layouts}/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -1,16 +1,19 @@
 import { DropdownItem, DropdownMenu, Toggle } from "@faststore/ui";
-import { useState } from "react";
-import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
-import { AddressData } from "../../types/AddressData";
-import { addressLabelToPropMapping } from "../../utils/addresLabelToPropMapping";
-import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
-import { Icon } from "../../components/Icon";
+import { useId, useState } from "react";
+import { Icon, InternalTopBar } from "../../../shared/components";
+import { GlobalLayout } from "../../../shared/layouts";
+import { addressLabelToPropMapping } from "../../../shared/utils";
+import type { AddressData } from "../../types";
 
-export type AddressDetailsLayoutProps = { data: AddressData };
+export type AddressDetailsLayoutProps = { data: AddressData | null };
 
-export const AddressDetailsLayout = ({
-  data: { id, isActive, ...addressData },
-}: AddressDetailsLayoutProps) => {
+export const AddressDetailsLayout = ({ data }: AddressDetailsLayoutProps) => {
+  // TODO: Implement the AddressDetailsLayout Fallback component
+  if (!data) {
+    return null;
+  }
+
+  const { id, isActive, ...addressData } = data;
   const [checked, setChecked] = useState(isActive);
 
   const props = Object.keys(addressLabelToPropMapping) as Array<
@@ -21,7 +24,6 @@ export const AddressDetailsLayout = ({
     <GlobalLayout>
       <section data-fs-address-details-section>
         <InternalTopBar
-          rootName="Stellar Inc."
           href="/buyer-portal"
           showActions
           titleIcon={
@@ -36,7 +38,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 +58,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 +74,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,31 +95,37 @@ 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>
-                <span data-fs-address-details-location-name>{location}</span>
-                <span data-fs-address-details-location-actions>
-                  <button data-fs-address-details-location-delete>
-                    <Icon name="Delete" width={24} height={24} />
-                  </button>
-                  <button data-fs-address-details-location-more>
-                    <Icon name="MoreVert" width={24} height={24} />
-                  </button>
-                </span>
-              </div>
-            ))}
+            {addressData.locations.map((location) => {
+              const id = useId();
+              return (
+                <div key={`${location}-${id}`} data-fs-address-details-location>
+                  <span data-fs-address-details-location-name>{location}</span>
+                  <span data-fs-address-details-location-actions>
+                    <button
+                      type="button"
+                      data-fs-address-details-location-delete
+                    >
+                      <Icon name="Delete" width={24} height={24} />
+                    </button>
+                    <button type="button" data-fs-address-details-location-more>
+                      <Icon name="MoreVert" width={24} height={24} />
+                    </button>
+                  </span>
+                </div>
+              );
+            })}
           </div>
         </div>
       </section>

package/src/{layouts → features/addresses/layouts}/AddressDetailsLayout/address-details-layout.scss

@@ -1,6 +1,6 @@
 [data-fs-address-details-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-  @import "../../components/InternalTopbar/internal-top-bar.scss";
+  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
   width: 100%;
 

package/src/{layouts → features/addresses/layouts}/AddressesLayout/AddressesLayout.tsx

@@ -1,16 +1,16 @@
-import { AddressLine } from "../../components/AddressLine/AddressLine";
-import DropdownFilter from "../../components/DropdownFilter/DropdownFilter";
-import InternalSearch from "../../components/InternalSearch/InternalSearch";
-import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
-import SortFilter from "../../components/SortFilter/SortFilter";
-import { statusFilters } from "../../utils/search";
-
-import { AddressSummaryData } from "../../types/AddressData";
-import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
-import { Icon } from "../../components/Icon";
-import { useQueryParams } from "../../hooks/useQueryParams";
-import { DropdownItem, DropdownMenu } from "@faststore/ui";
-import { MainLinksDropdownMenu } from "../../components/MainLinksDropdownMenu/MainLinksDropdownMenu";
+import {
+  InternalTopBar,
+  MainLinksDropdownMenu,
+  InternalSearch,
+  DropdownFilter,
+  SortFilter,
+  Icon,
+} from "../../../shared/components";
+import { useQueryParams } from "../../../shared/hooks";
+import { GlobalLayout } from "../../../shared/layouts";
+import { statusFilters } from "../../../shared/utils";
+import { AddressLine } from "../../components";
+import type { AddressSummaryData } from "../../types";
 
 export type AddressLayoutProps = {
   data: AddressSummaryData[];
@@ -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 → features/addresses/layouts}/AddressesLayout/addresses-layout.scss

@@ -1,12 +1,15 @@
+@import "../../../shared/components/MainLinksDropdownMenu/main-links-dropdown-menu.scss";
+
 [data-fs-addresses-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 
   @import "../../components/AddressLine/address-line.scss";
-  @import "../../components/InternalSearch/internal-search.scss";
-  @import "../../components/DropdownFilter/dropdown-filter.scss";
-  @import "../../components/Tag/tag.scss";
-  @import "../../components/SortFilter/sort-filter.scss";
-  @import "../../components/InternalTopbar/internal-top-bar.scss";
+
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
+  @import "../../../shared/components/Tag/tag.scss";
+  @import "../../../shared/components/SortFilter/sort-filter.scss";
+  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
   [data-fs-topbar-actions-wrapper] {
     display: flex;

package/src/features/addresses/layouts/index.ts

@@ -0,0 +1,8 @@
+export {
+  AddressDetailsLayout,
+  type AddressDetailsLayoutProps,
+} from "./AddressDetailsLayout/AddressDetailsLayout";
+export {
+  AddressLayout,
+  type AddressLayoutProps,
+} from "./AddressesLayout/AddressesLayout";

package/src/{mock → features/addresses/mocks}/addresses-data.ts

@@ -1,4 +1,4 @@
-import { AddressData } from "../types/AddressData";
+import type { AddressData } from "../types";
 
 export const addressesData: AddressData[] = [
   {

package/src/features/addresses/mocks/index.ts

@@ -0,0 +1 @@
+export { addressesData } from "./addresses-data";

package/src/features/addresses/services/get-address-details.service.ts

@@ -0,0 +1,11 @@
+import { addressesData } from "../mocks";
+import type { AddressData } from "../types/AddressData";
+
+export const getAddressDetailsService = async (
+  id: string
+): Promise<AddressData | null> => {
+  // TODO: Need to create get of single address on api
+  const addressData =
+    addressesData.find((address) => String(address.id) === id) ?? null;
+  return addressData;
+};

package/src/features/addresses/services/get-addresses.service.ts

@@ -0,0 +1,51 @@
+import type { AddressSummaryData } from "../types/AddressData";
+import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { compareItems, statusFilters } from "../../shared/utils";
+
+export type GetAddressesServiceProps = Partial<{
+  search: string;
+  customerId: string;
+  status: string;
+  type: string;
+  sort: string;
+}> & {
+  cookie: string;
+};
+
+export const getAddressesService = async ({
+  search = "",
+  customerId,
+  status,
+  type,
+  sort,
+  cookie,
+}: GetAddressesServiceProps): Promise<AddressSummaryData[]> => {
+  if (!customerId) {
+    return [];
+  }
+
+  const addressesData: AddressSummaryData[] = [];
+
+  try {
+    const { addresses = [] } = await buyerPortalClient.getAddressesByCustomerId(
+      customerId,
+      cookie
+    );
+    addressesData.push(...addresses);
+  } catch (err) {
+    console.log(">> err", err);
+  }
+
+  return addressesData
+    ?.filter((address) => {
+      const matchesName = address.name
+        .toLowerCase()
+        .includes(search.toLowerCase());
+      const matchesStatus =
+        !status || address.isActive === statusFilters[status];
+      const matchesType = !type || address.types.includes(type);
+
+      return matchesName && matchesStatus && matchesType;
+    })
+    .sort((a, b) => compareItems(a, b, sort));
+};

package/src/features/addresses/services/index.ts

@@ -0,0 +1,5 @@
+export { getAddressDetailsService } from "./get-address-details.service";
+export {
+  getAddressesService,
+  type GetAddressesServiceProps,
+} from "./get-addresses.service";

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

@@ -0,0 +1 @@
+export { AddressData, AddressSummaryData } from "./AddressData";

package/src/{components → features/contracts/components}/ContractsCard/ContractsCard.tsx

@@ -6,9 +6,8 @@ import {
   DropdownMenu,
   DropdownButton,
 } from "@faststore/ui";
-import { Icon } from "../Icon";
-import { BasicCard } from "../BasicCard/BasicCard";
-import { ContractData } from "../../types/ContractData";
+import type { ContractData } from "../../types";
+import { BasicCard, Icon } from "../../../shared/components";
 
 type ContractsCardProps = {
   orgUnitData?: {

package/src/features/contracts/components/index.ts

@@ -0,0 +1 @@
+export { default as ContractsCard } from "./ContractsCard/ContractsCard";

package/src/{layouts → features/contracts/layouts}/ContractsLayout/ContractsLayout.tsx

@@ -1,14 +1,17 @@
-import { DropdownMenu, DropdownItem, Toggle } from "@faststore/ui";
-import DropdownFilter from "../../components/DropdownFilter/DropdownFilter";
-import InternalSearch from "../../components/InternalSearch/InternalSearch";
-import { InternalTopBar } from "../../components/InternalTopbar/InternalTopbar";
-import SortFilter from "../../components/SortFilter/SortFilter";
-import { statusFilters } from "../../utils/search";
+import { Toggle } from "@faststore/ui";
 
-import { ContractData } from "../../types/ContractData";
-import { GlobalLayout } from "../GlobalLayout/GlobalLayout";
-import { Icon } from "../../components/Icon";
-import { useQueryParams } from "../../hooks/useQueryParams";
+import type { ContractData } from "../../types/ContractData";
+import {
+  InternalTopBar,
+  MainLinksDropdownMenu,
+  InternalSearch,
+  DropdownFilter,
+  SortFilter,
+  Icon,
+} from "../../../shared/components";
+import { useQueryParams } from "../../../shared/hooks";
+import { GlobalLayout } from "../../../shared/layouts";
+import { statusFilters } from "../../../shared/utils";
 
 export type ContractsLayoutProps = {
   data: ContractData[];
@@ -21,14 +24,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 → features/contracts/layouts}/ContractsLayout/contracts-layout.scss

@@ -1,11 +1,11 @@
 [data-fs-contracts-section] {
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 
-  @import "../../components/InternalSearch/internal-search.scss";
-  @import "../../components/DropdownFilter/dropdown-filter.scss";
-  @import "../../components/Tag/tag.scss";
-  @import "../../components/SortFilter/sort-filter.scss";
-  @import "../../components/InternalTopbar/internal-top-bar.scss";
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
+  @import "../../../shared/components/Tag/tag.scss";
+  @import "../../../shared/components/SortFilter/sort-filter.scss";
+  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
   [data-fs-contracts-page] {
     padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0));

package/src/features/contracts/layouts/index.ts

@@ -0,0 +1,4 @@
+export {
+  ContractsLayout,
+  type ContractsLayoutProps,
+} from "./ContractsLayout/ContractsLayout";

package/src/{mock → features/contracts/mocks}/contracts-data.ts

@@ -1,4 +1,4 @@
-import { ContractData } from "../types/ContractData";
+import type { ContractData } from "../types";
 
 export const contractsData: ContractData[] = [
   // Uncomment to test with a single contract

package/src/features/contracts/mocks/index.ts

@@ -0,0 +1 @@
+export { contractsData } from "./contracts-data";

package/src/{services → features/contracts/services}/get-contracts.service.ts

@@ -1,7 +1,6 @@
-import { ContractData } from "../types/ContractData";
-import { statusFilters } from "../utils/search";
-import { buyerPortalClient } from "../clients/BuyerPortalClient";
-import { compareItems } from "../utils/compareItems";
+import { buyerPortalClient } from "../../../clients/BuyerPortalClient";
+import { compareItems, statusFilters } from "../../shared/utils";
+import type { ContractData } from "../types";
 
 export type GetContractsServiceProps = {
   search?: string;

package/src/features/contracts/services/index.ts

@@ -0,0 +1,4 @@
+export {
+  getContractsService,
+  type GetContractsServiceProps,
+} from "./get-contracts.service";

package/src/{types → features/contracts/types}/ContractData.ts

@@ -6,5 +6,5 @@ export type ContractData = {
   creationDate: string;
   salesRepresentative?: string;
   imageUrl?: string;
-  assortment?: any[];
+  assortment?: unknown[];
 };

package/src/features/contracts/types/index.ts

@@ -0,0 +1 @@
+export type { ContractData } from "./ContractData";