@vtex/faststore-plugin-buyer-portal 1.0.47 → 1.0.49

package/CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add Buying Policy Drawers
 - Add Buying Policy Integrations
 - Add Pagination Tools
+- Add Address Pagination
 
 ### Added
 

package/package.json

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

package/src/features/addresses/clients/AddressesClient.ts

@@ -2,8 +2,9 @@ import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
 import type { AddressData, AddressInput } from "../types";
 
-type AddressList = {
+type AddressResponse = {
   addresses: AddressData[];
+  total: number;
 };
 
 export default class AddressesClient extends Client {
@@ -12,17 +13,27 @@ export default class AddressesClient extends Client {
   }
 
   getAddressesByCustomerId(customerId: string, cookie: string) {
-    return this.get<AddressList>(`addresses/${customerId}`, {
+    return this.get<AddressResponse>(`addresses/${customerId}`, {
       headers: {
         Cookie: cookie,
       },
     });
   }
 
+  getAddressesByUnitId(
+    orgUnitId: string,
+    cookie: string,
+    name?: string,
+    page = 1
+  ) {
+    const params = new URLSearchParams();
+    if (name) params.append("name", name);
+    if (page && page > 1) params.append("page", String(page));
+    const queryString = params.toString();
 
-  getAddressesByUnitId(orgUnitId: string, cookie: string, name?: string) {
-    const url = `unit/addresses/${orgUnitId}` + (name ? `?name=${name}` : "");
-    return this.get<AddressList>(url, {
+    const url = `unit/addresses/${orgUnitId}?${queryString}`;
+
+    return this.get<AddressResponse>(url, {
       headers: {
         Cookie: cookie,
       },
@@ -38,7 +49,7 @@ export default class AddressesClient extends Client {
   }
 
   searchAddressesByName(customerId: string, name: string, cookie: string) {
-    return this.get<AddressList>(
+    return this.get<AddressResponse>(
       `search/addresses/${customerId}?name=${name}`,
       {
         headers: {

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -1,28 +1,42 @@
-import { use, useEffect, useState } from "react";
-import { InternalSearch, HeaderInside } from "../../../shared/components";
 import {
-  useQueryParams,
-  useDrawerProps,
-  useBuyerPortal,
-} from "../../../shared/hooks";
+  InternalSearch,
+  HeaderInside,
+  Paginator,
+} from "../../../shared/components";
+import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { AddressDropdownMenu, CreateAddressDrawer } from "../../components";
 import type { AddressData } from "../../types";
-import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
 import { Table } from "../../../shared/components/Table/Table";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { usePageItems } from "../../../shared/hooks/usePageItems";
 
 export type AddressLayoutProps = {
-  data: AddressData[];
-  search?: string;
+  addresses: AddressData[];
+  total: number;
+  search: string;
+  page: number;
 };
 
-export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
-  const [addressesData, setAddressesData] = useState<AddressData[]>(data);
-  const [querySearch, setQuerySearch] = useState(search ?? "");
-  const { setQueryString, removeQueryString } = useQueryParams();
+export const AddressLayout = ({
+  addresses: initialAddresses,
+  search,
+  total,
+  page,
+}: AddressLayoutProps) => {
+  const {
+    isLoading,
+    items: addresses,
+    searchTerm,
+    setSearchTerm,
+    increasePage,
+  } = usePageItems<AddressData>({
+    initialItems: initialAddresses,
+    search,
+    page,
+  });
 
   const {
     open: openCreateDrawer,
@@ -36,28 +50,6 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
     currentContract: contract,
   } = useBuyerPortal();
 
-  const { searchedAddresses, isLoading } = useDebouncedSearchAddressByUnitId(
-    querySearch,
-    orgUnit?.id ?? ""
-  );
-
-  useEffect(() => {
-    if (!isLoading && querySearch.length > 0) {
-      setAddressesData(searchedAddresses);
-    }
-  }, [searchedAddresses, querySearch, isLoading]);
-
-  const handleSearch = (searchTerm: string) => {
-    setQuerySearch(searchTerm);
-
-    if (searchTerm) {
-      setQueryString("search", searchTerm);
-    } else {
-      removeQueryString("search");
-      setAddressesData(data);
-    }
-  };
-
   return (
     <GlobalLayout>
       <ContractTabsLayout
@@ -77,16 +69,22 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
 
-          {data.length === 0 ? (
+          {addresses.length === 0 && !isLoading && searchTerm.length === 0 ? (
             <EmptyState title="No addresses yet" iconName="LocalPostOffice" />
           ) : (
             <>
               <div data-fs-buyer-portal-address-filter>
-                <InternalSearch defaultValue={querySearch} textSearch={handleSearch} />
+                <InternalSearch
+                  defaultValue={searchTerm}
+                  textSearch={setSearchTerm}
+                />
+
+                <Paginator.Counter
+                  total={total}
+                  itemsLength={addresses.length}
+                />
               </div>
-              {!isLoading &&
-              addressesData.length === 0 &&
-              querySearch.length > 0 ? (
+              {!isLoading && addresses.length === 0 && searchTerm.length > 0 ? (
                 <EmptyState
                   title="No results found"
                   description="Try using different terms or filters"
@@ -95,46 +93,57 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
                 <div data-fs-addresses-table>
                   <Table>
                     <Table.Head columns={getTableColumns({ withType: true })} />
-                    {isLoading ? (
-                      <Table.Body>
-                        <Table.Loading />
-                      </Table.Body>
-                    ) : (
-                      <Table.Body>
-                        {addressesData.map(({ id, ...address }) => (
-                          <Table.Row
-                            key={id}
-                            title={address.name}
-                            searchTerm={querySearch}
-                            iconName="LocalPostOffice"
-                            iconSize={20}
-                            children={
-                              Array.isArray(address.types) &&
-                              address.types.length > 0
-                                ? address.types.map((type) => (
-                                    <span key={type}>{type}</span>
-                                  ))
-                                : null
-                            }
-                            href={buyerPortalRoutes.addressDetails({
-                              orgUnitId: orgUnit?.id ?? "",
-                              contractId: contract?.id ?? "",
-                              addressId: id,
-                            })}
-                            dropdownMenu={
-                              <AddressDropdownMenu
-                                currentAddress={{
-                                  id,
-                                  ...address,
-                                }}
-                              />
-                            }
-                          />
-                        ))}
-                      </Table.Body>
-                    )}
+
+                    <Table.Body>
+                      {addresses.map(({ id, ...address }) => (
+                        <Table.Row
+                          key={id}
+                          title={address.name}
+                          searchTerm={search}
+                          iconName="LocalPostOffice"
+                          iconSize={20}
+                          children={
+                            Array.isArray(address.types) &&
+                            address.types.length > 0
+                              ? address.types.map((type) => (
+                                  <span key={type}>{type}</span>
+                                ))
+                              : null
+                          }
+                          href={buyerPortalRoutes.addressDetails({
+                            orgUnitId: orgUnit?.id ?? "",
+                            contractId: contract?.id ?? "",
+                            addressId: id,
+                          })}
+                          dropdownMenu={
+                            <AddressDropdownMenu
+                              currentAddress={{
+                                id,
+                                ...address,
+                              }}
+                            />
+                          }
+                        />
+                      ))}
+                    </Table.Body>
                   </Table>
 
+                  <div data-fs-bp-addresses-paginator>
+                    {total > addresses.length && (
+                      <Paginator.NextPageButton
+                        onClick={increasePage}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Loading" : "Load More"}
+                      </Paginator.NextPageButton>
+                    )}
+
+                    <Paginator.Counter
+                      total={total}
+                      itemsLength={addresses.length}
+                    />
+                  </div>
+
                   {isCreateAddressDrawerOpen && (
                     <CreateAddressDrawer
                       readonly

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

@@ -12,8 +12,9 @@
   @import "../../../shared/components/HeaderInside/header-inside.scss";
   @import "../../../shared/components/Table/table.scss";
   @import "../../../shared/components/EmptyState/empty-state.scss";
+  @import "../../../shared/components/Paginator/paginator.scss";
 
-  padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+  padding: calc(var(--fs-spacing-9) - var(--fs-spacing-0));
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -62,7 +63,7 @@
   [data-fs-buyer-portal-address-filter] {
     display: flex;
     justify-content: space-between;
-    padding-bottom: var(--fs-spacing-4);
+    padding: 0 0 var(--fs-spacing-4);
   }
 
   [data-fs-buyer-portal-address-filter-search-container] {
@@ -70,9 +71,15 @@
     gap: var(--fs-spacing-1);
   }
 
-  [data-fs-addresses-list] {
-    width: 100%;
+  [data-fs-addresses-table] {
+    padding-bottom: var(--fs-spacing-9);
+  }
+
+  [data-fs-bp-addresses-paginator] {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--fs-spacing-0);
+    padding: var(--fs-spacing-2) 0;
   }
 }

package/src/features/addresses/services/get-addresses-by-unit-id.service.ts

@@ -8,6 +8,7 @@ export type GetAddressesByUnitIdServiceProps = Partial<{
   status: string;
   type: string;
   sort: string;
+  page?: number;
 }> & {
   cookie: string;
 };
@@ -18,24 +19,20 @@ export const getAddressesByUnitIdService = async ({
   type,
   sort,
   cookie,
-}: GetAddressesByUnitIdServiceProps): Promise<AddressData[]> => {
+  search = "",
+  page = 1,
+}: GetAddressesByUnitIdServiceProps) => {
   if (!orgUnitId) {
-    return [];
+    return { data: [], total: 0 };
   }
+  const { addresses, total } = await addressesClient.getAddressesByUnitId(
+    orgUnitId,
+    cookie,
+    search,
+    page
+  );
 
-  const addressesData: AddressData[] = [];
-
-  try {
-    const { addresses = [] } = await addressesClient.getAddressesByUnitId(
-      orgUnitId,
-      cookie
-    );
-    addressesData.push(...addresses);
-  } catch (err) {
-    throw new Error(JSON.stringify(err));
-  }
-
-  return addressesData
+  const formattedAddress = addresses
     ?.filter((address) => {
       const matchesStatus =
         !status || address.isActive === statusFilters[status];
@@ -44,4 +41,6 @@ export const getAddressesByUnitIdService = async ({
       return matchesStatus && matchesType;
     })
     .sort((a, b) => compareItems(a, b, sort));
+
+  return { data: formattedAddress, total };
 };

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

@@ -19,10 +19,6 @@ export {
   searchAddressByNameService,
   type SearchAddressByNameProps,
 } from "./search-address-by-name.service";
-export {
-  searchAddressByUnitIdService,
-  type SearchAddressByUnitIdProps,
-} from "./search-address-by-unit-id.service";
 export {
   editAddressService,
   type EditAddressServiceProps,

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer.tsx

@@ -82,7 +82,7 @@ export const BasicBuyingPolicyDrawer = ({
     }));
   };
 
-  const isAllFeldsFilled = Object.keys(form).every((key) => {
+  const isAllFieldsFilled = Object.keys(form).every((key) => {
     const value = form[key as keyof typeof form];
 
     if (key === "action") {
@@ -110,7 +110,7 @@ export const BasicBuyingPolicyDrawer = ({
   const handleConfirmClick = () => {
     setIsTouched(true);
 
-    if (!isAllFeldsFilled) {
+    if (!isAllFieldsFilled) {
       return;
     }
 
@@ -160,7 +160,7 @@ export const BasicBuyingPolicyDrawer = ({
     });
   };
 
-  const isConfirmButtonEnabled = isAllFeldsFilled && !isLoading;
+  const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
     <BasicDrawer data-fs-bp-basic-buying-policy-drawer close={close} {...props}>

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

@@ -40,7 +40,7 @@ export const OrgUnitsDetailsLayout = ({
       {/* TODO: Add person here */}
       <OrgUnitDetailsNavbar
         orgName={orgUnit.name}
-        person={{ name: user?.name ?? "", role: user?.role }}
+        person={{ name: user?.name ?? "", role: user?.roles?.[0] }}
       />
       <section data-fs-org-units-details-section>
         <HeaderInside title={orgUnit.name}>
@@ -67,7 +67,7 @@ export const OrgUnitsDetailsLayout = ({
                 footerMessage="Manage contract settings"
                 footerLink={buyerPortalRoutes.profileDetails({
                   orgUnitId: orgUnit.id,
-                  contractId: contracts[0].id,
+                  contractId: contracts[0]?.id ?? "",
                 })}
                 enableFooter
               >
@@ -75,7 +75,7 @@ export const OrgUnitsDetailsLayout = ({
                 <VerticalNav.Menu title={orgUnit.name}>
                   {getContractSettingsLinks({
                     orgUnitId: orgUnit.id,
-                    contractId: contracts[0].id,
+                    contractId: contracts[0]?.id ?? "",
                   }).map(({ name, link }) => (
                     <VerticalNav.Link key={name} link={link}>
                       {name}
@@ -139,14 +139,14 @@ export const OrgUnitsDetailsLayout = ({
               footerMessage="Manage finance and compliance settings"
               footerLink={buyerPortalRoutes.buyingPolicies({
                 orgUnitId: orgUnit.id,
-                contractId: contracts[0].id,
+                contractId: contracts[0]?.id,
               })}
               enableFooter
             >
               <VerticalNav.Menu title="Finance and Compliance">
                 {getFinanceSettingsLinks({
                   orgUnitId: orgUnit.id,
-                  contractId: contracts[0].id,
+                  contractId: contracts[0]?.id ?? "",
                 }).map((option) => (
                   <VerticalNav.Link key={option.name} link={option.link}>
                     {option.name}

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

@@ -2,6 +2,7 @@ import { TableRow } from "./TableRow/TableRow";
 import { TableBody } from "./TableBody/TableBody";
 import TableHead from "./TableHead/TableHead";
 import { TableLoading } from "./TableLoading/TableLoading";
+import { TableCell } from "./TableCell/TableCell";
 
 export type TableProps = {
   children: React.ReactNode;
@@ -15,3 +16,4 @@ Table.Head = TableHead;
 Table.Body = TableBody;
 Table.Row = TableRow;
 Table.Loading = TableLoading;
+Table.Cell = TableCell;

package/src/features/shared/components/Table/TableCell/TableCell.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+
+export type TableCellProps = ComponentProps<"td">;
+
+export const TableCell = ({ ...otherProps }) => (
+  <td data-fs-bp-table-cell {...otherProps} />
+);

package/src/features/shared/components/Table/TableHead/TableHead.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export type TableColumn<T extends string = string> = {
   key: T;

package/src/features/shared/components/Table/TableHead/table-head.scss

@@ -1,4 +1,6 @@
 [data-fs-bp-table-head] {
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
+
   &[data-fs-bp-table-cell-align="left"] {
     justify-content: flex-start;
   }

package/src/features/shared/components/Table/TableRow/TableRow.tsx

@@ -47,7 +47,7 @@ export const TableRow = ({
           <SearchHighlight text={title} highlight={searchTerm} />
         </span>
       </td>
-      <td>{children}</td>
+      {children}
       <td data-fs-bp-table-row-dropdown>
         {dropdownMenu && (
           <Dropdown>

package/src/features/shared/components/Table/TableRow/table-row.scss

@@ -2,8 +2,7 @@
 
 [data-fs-bp-table-row] {
   @import "../../SearchHighlight/search-highlight.scss";
-  
-  border-top: var(--fs-border-width) solid #e0e0e0;
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
   cursor: pointer;
   position: relative;
 

package/src/features/shared/utils/api.ts

@@ -1,10 +1,11 @@
 import { API_URL } from "./constants";
 import storeConfig from "discovery.config";
 
-export function getApiUrl(operation: string = "", customerId: string = "") {
-  return `${API_URL(`${storeConfig?.secureSubdomain ?? ""}`, operation)}${
-    customerId ? `/${customerId}` : ""
-  }`;
+export function getApiUrl(operation = "", customerId = "") {
+  return `${API_URL(
+    `https://${storeConfig?.api.storeId}.myvtex.com`,
+    operation
+  )}${customerId ? `/${customerId}` : ""}`;
 }
 
 export function getPostalCodeApiUrl() {

package/src/features/users/clients/UsersClient.ts

@@ -121,6 +121,36 @@ class UsersClient extends Client {
       },
     });
   }
+
+  updateUser(
+    props: {
+      orgUnitId: string;
+      userId: string;
+      name?: string;
+      role?: string;
+    },
+    cookie: string
+  ) {
+    const { orgUnitId, userId, ...data } = props;
+
+    return this.patch<
+      unknown,
+      {
+        name?: string;
+        role?: string;
+      }
+    >(
+      `units/${orgUnitId}/users/${userId}`,
+      {
+        ...data,
+      },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
 }
 
 const usersClient = new UsersClient();