@vtex/faststore-plugin-buyer-portal 1.0.46 → 1.0.48

package/.github/workflows/release.yaml

@@ -4,7 +4,7 @@ name: CD
 on:
   push:
     branches:
-      - feat/demo
+      - main
 
 jobs:
   build:

package/CHANGELOG.md

@@ -14,17 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add Buying Policies Page
-- Add Buying Policy Details Page
-- Add Buying Policy Drawers
-
-### Added
-
 - Add Buying Policies Page
 - Add Buying Policy Details Page
 - 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.46",
+  "version": "1.0.48",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {
@@ -8,8 +8,8 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@faststore/core": "^3.50.1",
-    "@faststore/ui": "^3.49.1",
+    "@faststore/core": "^3.0.147",
+    "@faststore/ui": "^3.0.147",
     "@types/react": "^18.2.42",
     "next": "13.5.7",
     "typescript": "4.7.3"

package/plugin.config.js

@@ -10,8 +10,6 @@ module.exports = {
       path: "/buyer-portal/address/[orgUnitId]/[contractId]/[addressId]",
       appLayout: false,
     },
-
-    // ----
     profile: {
       path: "/buyer-portal/profile/[orgUnitId]/[contractId]",
       appLayout: false,
@@ -20,26 +18,28 @@ module.exports = {
       path: "/buyer-portal/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
-    "payment-methods": {
-      path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
-      appLayout: false,
-    },
+
+    // Theses Routes will be added in the future
+    // "payment-methods": {
+    //   path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
     "credit-cards": {
       path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
       appLayout: false,
     },
-    collections: {
-      path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
-      appLayout: false,
-    },
-    "po-numbers": {
-      path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
-      appLayout: false,
-    },
-    "cost-centers": {
-      path: "/buyer-portal/cost-centers/[orgUnitId]/[contractId]",
-      appLayout: false,
-    },
+    // collections: {
+    //   path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // "po-numbers": {
+    //   path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
+    // "cost-centers": {
+    //   path: "/buyer-portal/cost-centers/[orgUnitId]/[contractId]",
+    //   appLayout: false,
+    // },
     // releases: {
     //   path: "/buyer-portal/releases/[orgUnitId]/[contractId]",
     //   appLayout: false,

package/public/buyer-portal-icons.svg

@@ -1,15 +1,4 @@
-
 <svg style="display:none">
-
-  <symbol
-  id="Shapes"
-  viewBox="0 0 19 20"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <path fill="currentColor" d="M3.5 9L9 0L14.5 9H3.5ZM14.5 20C13.25 20 12.1875 19.5625 11.3125 18.6875C10.4375 17.8125 10 16.75 10 15.5C10 14.25 10.4375 13.1875 11.3125 12.3125C12.1875 11.4375 13.25 11 14.5 11C15.75 11 16.8125 11.4375 17.6875 12.3125C18.5625 13.1875 19 14.25 19 15.5C19 16.75 18.5625 17.8125 17.6875 18.6875C16.8125 19.5625 15.75 20 14.5 20ZM0 19.5V11.5H8V19.5H0ZM14.5 18C15.2 18 15.7917 17.7583 16.275 17.275C16.7583 16.7917 17 16.2 17 15.5C17 14.8 16.7583 14.2083 16.275 13.725C15.7917 13.2417 15.2 13 14.5 13C13.8 13 13.2083 13.2417 12.725 13.725C12.2417 14.2083 12 14.8 12 15.5C12 16.2 12.2417 16.7917 12.725 17.275C13.2083 17.7583 13.8 18 14.5 18ZM2 17.5H6V13.5H2V17.5ZM7.05 7H10.95L9 3.85L7.05 7Z" />
-  </symbol>
-
   <symbol id="Active" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
     viewBox="0 -960 960 960">
     <path
@@ -25,11 +14,6 @@
     <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
   </symbol>
 
-
-<symbol id="DoNotDisturb" fill="currentColor"  viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
-<path d="M5 11H15V9H5V11ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z"/>
-</symbol>
-
   <symbol
     id="Address" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
     fill="currentColor">
@@ -109,15 +93,6 @@
       d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" />
   </symbol>
 
-  <symbol
-    id="TableEdit"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-  >
-    <path d="M5 13H11V9H5V13ZM5 7H19V5H5V7ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V11.3C20.6833 11.1667 20.3542 11.0792 20.0125 11.0375C19.6708 10.9958 19.3333 11 19 11.05C18.65 11.1167 18.3125 11.2292 17.9875 11.3875C17.6625 11.5458 17.3667 11.7583 17.1 12.025L16.125 13L11 18.1V21H5ZM5 19H11V15H5V19ZM13 13H16.125L17.1 12.025C17.3667 11.7583 17.6625 11.5458 17.9875 11.3875C18.3125 11.2292 18.65 11.1167 19 11.05V9H13V13ZM13 22V18.925L18.525 13.425C18.675 13.275 18.8417 13.1667 19.025 13.1C19.2083 13.0333 19.3917 13 19.575 13C19.775 13 19.9667 13.0375 20.15 13.1125C20.3333 13.1875 20.5 13.3 20.65 13.45L21.575 14.375C21.7083 14.525 21.8125 14.6917 21.8875 14.875C21.9625 15.0583 22 15.2417 22 15.425C22 15.6083 21.9667 15.7958 21.9 15.9875C21.8333 16.1792 21.725 16.35 21.575 16.5L16.075 22H13ZM14.5 20.5H15.45L18.475 17.45L17.55 16.525L14.5 19.55V20.5ZM18.025 16.975L17.55 16.525L18.475 17.45L18.025 16.975Z" fill="currentColor"/>
-  </symbol>
-
   <symbol
     id="FilledFolder"
     xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
@@ -281,31 +256,6 @@
       fill="currentColor" />
   </symbol>
 
-  <symbol id="Settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M9.25019 22L8.85019 18.8C8.63353 18.7167 8.42936 18.6167 8.23769 18.5C8.04603 18.3833 7.85853 18.2583 7.67519 18.125L4.70019 19.375L1.9502 14.625L4.52519 12.675C4.50853 12.5583 4.50019 12.4458 4.50019 12.3375V11.6625C4.50019 11.5542 4.50853 11.4417 4.52519 11.325L1.9502 9.375L4.70019 4.625L7.67519 5.875C7.85853 5.74167 8.05019 5.61667 8.25019 5.5C8.45019 5.38333 8.65019 5.28333 8.85019 5.2L9.25019 2H14.7502L15.1502 5.2C15.3669 5.28333 15.571 5.38333 15.7627 5.5C15.9544 5.61667 16.1419 5.74167 16.3252 5.875L19.3002 4.625L22.0502 9.375L19.4752 11.325C19.4919 11.4417 19.5002 11.5542 19.5002 11.6625V12.3375C19.5002 12.4458 19.4835 12.5583 19.4502 12.675L22.0252 14.625L19.2752 19.375L16.3252 18.125C16.1419 18.2583 15.9502 18.3833 15.7502 18.5C15.5502 18.6167 15.3502 18.7167 15.1502 18.8L14.7502 22H9.25019ZM11.0002 20H12.9752L13.3252 17.35C13.8419 17.2167 14.321 17.0208 14.7627 16.7625C15.2044 16.5042 15.6085 16.1917 15.9752 15.825L18.4502 16.85L19.4252 15.15L17.2752 13.525C17.3585 13.2917 17.4169 13.0458 17.4502 12.7875C17.4835 12.5292 17.5002 12.2667 17.5002 12C17.5002 11.7333 17.4835 11.4708 17.4502 11.2125C17.4169 10.9542 17.3585 10.7083 17.2752 10.475L19.4252 8.85L18.4502 7.15L15.9752 8.2C15.6085 7.81667 15.2044 7.49583 14.7627 7.2375C14.321 6.97917 13.8419 6.78333 13.3252 6.65L13.0002 4H11.0252L10.6752 6.65C10.1585 6.78333 9.67936 6.97917 9.23769 7.2375C8.79603 7.49583 8.39186 7.80833 8.02519 8.175L5.55019 7.15L4.57519 8.85L6.72519 10.45C6.64186 10.7 6.58353 10.95 6.55019 11.2C6.51686 11.45 6.50019 11.7167 6.50019 12C6.50019 12.2667 6.51686 12.525 6.55019 12.775C6.58353 13.025 6.64186 13.275 6.72519 13.525L4.57519 15.15L5.55019 16.85L8.02519 15.8C8.39186 16.1833 8.79603 16.5042 9.23769 16.7625C9.67936 17.0208 10.1585 17.2167 10.6752 17.35L11.0002 20ZM12.0502 15.5C13.0169 15.5 13.8419 15.1583 14.5252 14.475C15.2085 13.7917 15.5502 12.9667 15.5502 12C15.5502 11.0333 15.2085 10.2083 14.5252 9.525C13.8419 8.84167 13.0169 8.5 12.0502 8.5C11.0669 8.5 10.2377 8.84167 9.56269 9.525C8.88769 10.2083 8.55019 11.0333 8.55019 12C8.55019 12.9667 8.88769 13.7917 9.56269 14.475C10.2377 15.1583 11.0669 15.5 12.0502 15.5Z" fill="currentColor"/>
-  </symbol>
-
-  <symbol id="FormatSize" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-    <path d="M12 16V6H8V4H18V6H14V16H12ZM4.5 16V10H2V8H9V10H6.5V16H4.5Z" fill="currentColor"/>
-  </symbol>
-
-  <symbol id="BookmarkAdd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-    <path d="M5 17V4.5C5 4.08181 5.14583 3.72375 5.4375 3.42583C5.72917 3.12806 6.08333 2.98611 6.5 3H11V4.5H6.5V14.7708L10 13.375L13.5 14.7708V9H15V17L10 15L5 17ZM14.25 7.25V5.75H12.75V4.25H14.25V2.75H15.75V4.25H17.25V5.75H15.75V7.25H14.25Z" fill="currentColor"/>
-  </symbol>
-
-  <symbol id="BookmarkRemove" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-    <path d="M17.25 5.74995H12.75V4.24995H17.25V5.74995ZM5 17V4.49995C5 4.08176 5.14583 3.7237 5.4375 3.42579C5.72917 3.12801 6.08333 2.98606 6.5 2.99995H11V4.49995H6.5V14.7708L10 13.375L13.5 14.7708V8.99995H15V17L10 15L5 17Z" fill="currentColor"/>
-  </symbol>
-
-  <symbol id="CircleRemove" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-    <path d="M5.83317 10.8332H14.1665V9.1665H5.83317V10.8332ZM9.99984 18.3332C8.84706 18.3332 7.76373 18.1144 6.74984 17.6769C5.73595 17.2394 4.854 16.6457 4.104 15.8957C3.354 15.1457 2.76025 14.2637 2.32275 13.2498C1.88525 12.2359 1.6665 11.1526 1.6665 9.99984C1.6665 8.84706 1.88525 7.76373 2.32275 6.74984C2.76025 5.73595 3.354 4.854 4.104 4.104C4.854 3.354 5.73595 2.76025 6.74984 2.32275C7.76373 1.88525 8.84706 1.6665 9.99984 1.6665C11.1526 1.6665 12.2359 1.88525 13.2498 2.32275C14.2637 2.76025 15.1457 3.354 15.8957 4.104C16.6457 4.854 17.2394 5.73595 17.6769 6.74984C18.1144 7.76373 18.3332 8.84706 18.3332 9.99984C18.3332 11.1526 18.1144 12.2359 17.6769 13.2498C17.2394 14.2637 16.6457 15.1457 15.8957 15.8957C15.1457 16.6457 14.2637 17.2394 13.2498 17.6769C12.2359 18.1144 11.1526 18.3332 9.99984 18.3332ZM9.99984 16.6665C11.8609 16.6665 13.4373 16.0207 14.729 14.729C16.0207 13.4373 16.6665 11.8609 16.6665 9.99984C16.6665 8.13873 16.0207 6.56234 14.729 5.27067C13.4373 3.979 11.8609 3.33317 9.99984 3.33317C8.13873 3.33317 6.56234 3.979 5.27067 5.27067C3.979 6.56234 3.33317 8.13873 3.33317 9.99984C3.33317 11.8609 3.979 13.4373 5.27067 14.729C6.56234 16.0207 8.13873 16.6665 9.99984 16.6665Z" fill="currentColor"/>
-  </symbol>
-
-  <symbol id="Default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-    <path d="M5 21V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V21L12 18L5 21ZM7 17.95L12 15.8L17 17.95V5H7V17.95Z" fill="currentColor"/>
-  </symbol>
-
   <symbol
     id="ErrorX"
     xmlns="http://www.w3.org/2000/svg"
@@ -404,11 +354,4 @@
       fill="currentColor" />
   </symbol>
 
-  <symbol
-  id="AccountBalanceWallet"
-  viewBox="0 0 19 18"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V4.5H16V2H2V16H16V13.5H18V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM10 14C9.45 14 8.97917 13.8042 8.5875 13.4125C8.19583 13.0208 8 12.55 8 12V6C8 5.45 8.19583 4.97917 8.5875 4.5875C8.97917 4.19583 9.45 4 10 4H17C17.55 4 18.0208 4.19583 18.4125 4.5875C18.8042 4.97917 19 5.45 19 6V12C19 12.55 18.8042 13.0208 18.4125 13.4125C18.0208 13.8042 17.55 14 17 14H10ZM17 12V6H10V12H17ZM13 10.5C13.4167 10.5 13.7708 10.3542 14.0625 10.0625C14.3542 9.77083 14.5 9.41667 14.5 9C14.5 8.58333 14.3542 8.22917 14.0625 7.9375C13.7708 7.64583 13.4167 7.5 13 7.5C12.5833 7.5 12.2292 7.64583 11.9375 7.9375C11.6458 8.22917 11.5 8.58333 11.5 9C11.5 9.41667 11.6458 9.77083 11.9375 10.0625C12.2292 10.3542 12.5833 10.5 13 10.5Z" fill="currentColor"/>
-  </symbol>
-</svg>
+</svg>

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,16 +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) {
-    const url = `unit/addresses/${orgUnitId}` + (name ? `?name=${name}` : "");
-    return this.get<AddressList>(url, {
+  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();
+
+    const url = `unit/addresses/${orgUnitId}?${queryString}`;
+
+    return this.get<AddressResponse>(url, {
       headers: {
         Cookie: cookie,
       },
@@ -37,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/components/AddressLine/AddressLine.tsx

@@ -1,4 +1,4 @@
-import { Dropdown } from "@faststore/ui";
+import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
 import Link from "next/link";
 import { BasicDropdownMenu, Icon, Tag } from "../../../shared/components";
 import type { AddressData } from "../../types";

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
@@ -73,23 +65,26 @@ export const AddressLayout = ({ data, search }: AddressLayoutProps) => {
         }}
       >
         <section data-fs-addresses-section>
-          <HeaderInside title="Addresses">
+          <HeaderInside title="Address">
             <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}
+                  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"
@@ -98,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/clients/BuyingPoliciesClient.ts

@@ -18,20 +18,16 @@ class BuyingPoliciesClient extends Client {
     if (search) params.append("search", search);
     if (page && page > 1) params.append("page", String(page));
     const queryString = params.toString();
+    const query = queryString ? `?${queryString}` : "";
 
     return this.get<{
       data: BuyingPolicy[];
       total: number;
-    }>(
-      `customers/${customerId}/units/${orgUnitId}/buying-policies${
-        queryString && `?${queryString}`
-      }`,
-      {
-        headers: {
-          Cookie: cookie,
-        },
-      }
-    );
+    }>(`customers/${customerId}/units/${orgUnitId}/buying-policies${query}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
   }
 
   getBuyingPolicyById(

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

@@ -54,8 +54,7 @@ export const AddBuyingPolicyDrawer = ({
 
   const { addBuyingPolicy, isAddBuyingPolicyLoading } = useAddBuyingPolicy({
     onSuccess: handleAddBuyingPolicySuccess,
-    onError: (err) => {
-      // TODO: Handle error
+    onError: () => {
       pushToast({
         message: "Error adding buying policy",
         status: "ERROR",