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

package/CHANGELOG.md

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

package/package.json

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

package/src/features/buying-policies/clients/BuyingPoliciesClient.ts

@@ -0,0 +1,123 @@
+import { Client } from "../../shared/clients/Client";
+import { getApiUrl } from "../../shared/utils";
+import type { BuyingPolicy } from "../types"; // ajuste conforme necessário
+
+class BuyingPoliciesClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  getBuyingPoliciesByOrgUnitId(
+    customerId: string,
+    orgUnitId: string,
+    cookie: string,
+    search?: string,
+    page = 1
+  ) {
+    const params = new URLSearchParams();
+    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${query}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getBuyingPolicyById(
+    customerId: string,
+    orgUnitId: string,
+    policyId: string,
+    cookie: string
+  ) {
+    return this.get<BuyingPolicy>(
+      `customers/${customerId}/units/${orgUnitId}/buying-policies/${policyId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  addBuyingPolicyToOrgUnit(
+    props: {
+      customerId: string;
+      orgUnitId: string;
+      name: string;
+      description: string;
+      criteria: string;
+      action: BuyingPolicy["action"];
+    },
+    cookie: string
+  ) {
+    const { customerId, orgUnitId, ...data } = props;
+
+    return this.post<BuyingPolicy, Omit<BuyingPolicy, "id">>(
+      `customers/${customerId}/units/${orgUnitId}/buying-policies`,
+      data,
+      {
+        headers: {
+          Cookie: cookie,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  updateBuyingPolicy(
+    props: {
+      customerId: string;
+      orgUnitId: string;
+      policyId: string;
+      name: string;
+      description: string;
+      criteria: string;
+      action: BuyingPolicy["action"];
+    },
+    cookie: string
+  ) {
+    const { customerId, orgUnitId, policyId, ...data } = props;
+
+    return this.patch<BuyingPolicy, Omit<BuyingPolicy, "id">>(
+      `customers/${customerId}/units/${orgUnitId}/buying-policies/${policyId}`,
+      data,
+      {
+        headers: {
+          Cookie: cookie,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  removeBuyingPolicyFromOrgUnit(
+    props: {
+      customerId: string;
+      orgUnitId: string;
+      policyId: string;
+    },
+    cookie: string
+  ) {
+    const { customerId, orgUnitId, policyId } = props;
+
+    return this.delete<unknown, unknown>(
+      `customers/${customerId}/units/${orgUnitId}/buying-policies/${policyId}`,
+      undefined,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+}
+
+const buyingPoliciesClient = new BuyingPoliciesClient();
+export { buyingPoliciesClient };

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

@@ -19,6 +19,7 @@ import {
 import { buyingPolicyOptions, type BuyingPolicy } from "../../types";
 import { OrgUnitInputSearch } from "../../../shared/components/OrgUnitInputSearch/OrgUnitInputSearch";
 import {
+  BUYING_POLICIES_WORKFLOW_TYPES,
   buyingPolicyDefault,
   orderFieldsCriteriaOptions,
   spendingLimitsCriteriaOptions,
@@ -31,7 +32,7 @@ export type BuyingPolicyForm = Omit<BuyingPolicy, "id"> & {
   id?: string;
 };
 
-const defaultBuyingPolicyValues: BuyingPolicyForm = buyingPolicyDefault;
+const { id, ...defaultBuyingPolicyValues } = buyingPolicyDefault;
 
 export type BasicBuyingPolicyDrawerProps = Omit<
   BasicDrawerProps,
@@ -91,7 +92,7 @@ export const BasicBuyingPolicyDrawer = ({
         return false;
       }
 
-      if (valueAction.type === "Sequential approval workflow") {
+      if (valueAction.type === BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL) {
         return (
           valueAction.levels?.length &&
           valueAction.levels.every((level) => {
@@ -312,7 +313,7 @@ export const BasicBuyingPolicyDrawer = ({
           )}
         />
 
-        {action.type === "Bypass all buying policies" && (
+        {action.type === BUYING_POLICIES_WORKFLOW_TYPES.BYPASS && (
           <InputText.Legend>
             When this policy is applied, all opther buying policy will be
             ignored
@@ -324,7 +325,7 @@ export const BasicBuyingPolicyDrawer = ({
           message="Action is required"
         />
 
-        {form.action.type === "Sequential approval workflow" && (
+        {form.action.type === BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL && (
           <>
             {form.action.levels?.map((level, index) => (
               <Fragment key={`${level.id}-${index}`}>

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

@@ -5,17 +5,20 @@ import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { DeleteBuyingPolicyDrawer, UpdateBuyingPolicyDrawer } from "..";
 import { useRouter } from "next/router";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import type { BuyingPolicy } from "../../types";
 
 export type BuyingPolicyDropdownMenuProps = {
   id: string;
   name: string;
   onDelete?: () => void;
+  onUpdate?: (buyingPolicy: BuyingPolicy) => void;
 };
 
 export const BuyingPolicyDropdownMenu = ({
   id,
   name,
   onDelete,
+  onUpdate,
 }: BuyingPolicyDropdownMenuProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -76,6 +79,7 @@ export const BuyingPolicyDropdownMenu = ({
           orgUnitId={currentOrgUnit?.id ?? ""}
           contractId={currentContract?.id ?? ""}
           buyingPolicyId={id}
+          onUpdate={onUpdate}
           {...updateBuyingPolicyDrawerProps}
           isOpen={isUpdateBuyingPolicyDrawerOpen}
         />

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

@@ -47,6 +47,8 @@ export const DeleteBuyingPolicyDrawer = ({
 
     removeBuyingPolicy({
       buyingPolicyId: buyingPolicy.id,
+      contractId: currentContract?.id ?? "",
+      orgUnitId: currentOrgUnit?.id ?? "",
     });
   };
 

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

@@ -4,12 +4,13 @@ import { useGetBuyingPolicy, useUpdateBuyingPolicy } from "../../hooks";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BasicBuyingPolicyDrawer, type BasicBuyingPolicyDrawerProps } from "..";
 import { buyingPolicyDefault } from "../../utils";
+import type { BuyingPolicy } from "../../types";
 
 export type UpdateBuyingPolicyDrawerProps = Omit<
   BasicBuyingPolicyDrawerProps,
   "children" | "initialValues"
 > & {
-  onCreate?: () => void;
+  onUpdate?: (buyingPolicy: BuyingPolicy) => void;
   orgUnitId: string;
   contractId: string;
   buyingPolicyId: string;
@@ -17,7 +18,7 @@ export type UpdateBuyingPolicyDrawerProps = Omit<
 
 export const UpdateBuyingPolicyDrawer = ({
   close,
-  onCreate,
+  onUpdate,
   orgUnitId,
   contractId,
   buyingPolicyId,
@@ -32,7 +33,7 @@ export const UpdateBuyingPolicyDrawer = ({
   const { pushToast } = useUI();
   const router = useRouter();
 
-  const handleUpdateBuyingPolicySuccess = () => {
+  const handleUpdateBuyingPolicySuccess = (buyingPolicy: BuyingPolicy) => {
     pushToast({
       message: "Buying policy updated successfully",
       status: "INFO",
@@ -55,16 +56,17 @@ export const UpdateBuyingPolicyDrawer = ({
         </button>
       ),
     });
-    onCreate?.();
+    onUpdate?.(buyingPolicy);
     close();
   };
 
   const { updateBuyingPolicy, isUpdateBuyingPolicyLoading } =
     useUpdateBuyingPolicy({
       onSuccess: handleUpdateBuyingPolicySuccess,
-      onError: () => {
+      onError: (err) => {
+        // TODO: Handle error
         pushToast({
-          message: "Error updating buying policy",
+          message: "Error adding buying policy",
           status: "ERROR",
         });
       },

package/src/features/buying-policies/components/UpdateBuyingPolicyDrawer/update-buying-policy-drawer.scss

@@ -0,0 +1 @@
+@import "../BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss";

package/src/features/buying-policies/hooks/useGetBuyingPolicies.ts

@@ -0,0 +1,32 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getBuyingPoliciesService } from "../services";
+
+export const useGetBuyingPolicies = (
+  {
+    contractId,
+    orgUnitId,
+    search,
+    page,
+  }: { orgUnitId: string; contractId: string; search?: string; page: number },
+  options?: QueryOptions<AwaitedType<typeof getBuyingPoliciesService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    ["api/buying-policies", orgUnitId, contractId, page].join("/"),
+    ({ cookie }) =>
+      getBuyingPoliciesService({
+        orgUnitId,
+        contractId,
+        cookie,
+        page,
+        search,
+      }),
+    options
+  );
+
+  return {
+    buyingPolicies: data,
+    hasBuyingPoliciesError: error,
+    isBuyingPoliciesLoading: isLoading,
+    refetchBuyingPolicies: refetch,
+  };
+};

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -2,7 +2,9 @@ import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { Table } from "../../../shared/components/Table/Table";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { HeaderInside, InternalSearch } from "../../../shared/components";
+import { Paginator } from "../../../shared/components";
 import {
+  usePageItems,
   useBuyerPortal,
   useDrawerProps,
   useQueryParams,
@@ -13,18 +15,33 @@ import { BuyingPolicyDropdownMenu } from "../../components";
 import { AddBuyingPolicyDrawer } from "../../components/AddBuyingPolicyDrawer/AddBuyingPolicyDrawer";
 
 export type BuyingPoliciesLayoutProps = {
-  data: { buyingPolicies: BuyingPolicy[] } | null;
+  buyingPolicies: BuyingPolicy[];
+  total: number;
   search: string;
+  page: number;
 };
 
 export const BuyingPoliciesLayout = ({
-  data,
+  buyingPolicies: initialBuyingPolicies,
   search,
+  total,
+  page,
 }: BuyingPoliciesLayoutProps) => {
-  const { setQueryString, removeQueryString } = useQueryParams();
-
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
+  const {
+    isLoading,
+    items: buyingPolicies,
+    searchTerm,
+    setSearchTerm,
+    increasePage,
+    setItems: setBuyingPolicies,
+  } = usePageItems<BuyingPolicy>({
+    initialItems: initialBuyingPolicies,
+    search,
+    page,
+  });
+
   const {
     isOpen: isAddBuyingPolicyDrawerOpen,
     open: openAddBuyingPolicyDrawer,
@@ -34,58 +51,73 @@ export const BuyingPoliciesLayout = ({
   return (
     <GlobalLayout>
       <FinanceTabsLayout pageName="Finance and Compliance">
-        <>
-          <section data-fs-buying-policies-section>
-            <HeaderInside title="Buying Policies">
-              <HeaderInside.Button onClick={openAddBuyingPolicyDrawer} />
-            </HeaderInside>
+        <section data-fs-buying-policies-section>
+          <HeaderInside title="Buying Policies">
+            <HeaderInside.Button onClick={openAddBuyingPolicyDrawer} />
+          </HeaderInside>
+
+          <div data-fs-buying-policies-filter>
+            <InternalSearch
+              defaultValue={searchTerm}
+              textSearch={setSearchTerm}
+            />
+            <Paginator.Counter
+              total={total}
+              itemsLength={buyingPolicies.length}
+            />
+          </div>
 
-            <div data-fs-buying-policies-filter>
-              <InternalSearch
-                defaultValue={search}
-                textSearch={(searchTerm) => {
-                  searchTerm
-                    ? setQueryString("search", searchTerm)
-                    : removeQueryString("search");
-                }}
-              />
-            </div>
+          <Table>
+            <Table.Head columns={getTableColumns({ withType: false })} />
+            <Table.Body>
+              {buyingPolicies.map((buyingPolicy) => (
+                <Table.Row
+                  key={buyingPolicy.id}
+                  title={buyingPolicy.name}
+                  iconName="Rebase"
+                  iconSize={20}
+                  href={buyerPortalRoutes.buyingPolicyDetails({
+                    contractId: currentContract?.id ?? "",
+                    orgUnitId: currentOrgUnit?.id ?? "",
+                    buyingPolicyId: buyingPolicy.id,
+                  })}
+                  dropdownMenu={
+                    <BuyingPolicyDropdownMenu
+                      id={buyingPolicy.id}
+                      name={buyingPolicy.name}
+                    />
+                  }
+                />
+              ))}
+            </Table.Body>
+          </Table>
 
-            <Table>
-              <Table.Head columns={getTableColumns({ withType: false })} />
-              <Table.Body>
-                {data?.buyingPolicies.map((buyingPolicy) => (
-                  <Table.Row
-                    key={buyingPolicy.id}
-                    title={buyingPolicy.name}
-                    iconName="Rebase"
-                    iconSize={20}
-                    href={buyerPortalRoutes.buyingPolicyDetails({
-                      contractId: currentContract?.id ?? "",
-                      orgUnitId: currentOrgUnit?.id ?? "",
-                      buyingPolicyId: buyingPolicy.id,
-                    })}
-                    dropdownMenu={
-                      <BuyingPolicyDropdownMenu
-                        id={buyingPolicy.id}
-                        name={buyingPolicy.name}
-                      />
-                    }
-                  />
-                ))}
-              </Table.Body>
-            </Table>
-          </section>
+          <div data-fs-bp-buying-policies-paginator>
+            {total > buyingPolicies.length ? (
+              <Paginator.NextPageButton
+                onClick={increasePage}
+                disabled={isLoading}
+              >
+                {isLoading ? "Loading" : "Load More"}
+              </Paginator.NextPageButton>
+            ) : (
+              <span />
+            )}
 
-          {isAddBuyingPolicyDrawerOpen && (
-            <AddBuyingPolicyDrawer
-              orgUnitId={currentOrgUnit?.id ?? ""}
-              contractId={currentContract?.id ?? ""}
-              isOpen={isAddBuyingPolicyDrawerOpen}
-              {...addBuyingPolicyDrawerProps}
+            <Paginator.Counter
+              total={total}
+              itemsLength={buyingPolicies.length}
             />
-          )}
-        </>
+          </div>
+        </section>
+        {isAddBuyingPolicyDrawerOpen && (
+          <AddBuyingPolicyDrawer
+            orgUnitId={currentOrgUnit?.id ?? ""}
+            contractId={currentContract?.id ?? ""}
+            isOpen={isAddBuyingPolicyDrawerOpen}
+            {...addBuyingPolicyDrawerProps}
+          />
+        )}
       </FinanceTabsLayout>
     </GlobalLayout>
   );

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -23,4 +23,11 @@
     color: #5c5c5c;
     margin-bottom: var(--fs-spacing-1);
   }
+
+  [data-fs-bp-buying-policies-paginator] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--fs-spacing-0);
+  }
 }

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout.tsx

@@ -1,10 +1,14 @@
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { BasicDropdownMenu, HeaderInside } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import type { BuyingPolicy } from "../../types";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { Dropdown } from "@faststore/ui";
-import { BuyingPolicyDropdownMenu } from "../../components";
+import {
+  BuyingPolicyDropdownMenu,
+  UpdateBuyingPolicyDrawer,
+} from "../../components";
+import { useRouter } from "next/router";
 
 export type BuyingPolicyDetailsLayoutProps = {
   data: { buyingPolicy: BuyingPolicy | null };
@@ -15,6 +19,14 @@ export const BuyingPolicyDetailsLayout = ({
 }: BuyingPolicyDetailsLayoutProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
+  const { reload } = useRouter();
+
+  const {
+    open: openUpdateBuyingPolicyDrawerProps,
+    isOpen: isUpdateBuyingPolicyDrawerOpen,
+    ...updateBuyingPolicyDrawerProps
+  } = useDrawerProps();
+
   return (
     <GlobalLayout>
       <FinanceTabsLayout pageName="Finance and Compliance">
@@ -37,7 +49,11 @@ export const BuyingPolicyDetailsLayout = ({
 
           <div data-fs-buying-policy-details-line>
             <span data-fs-buying-policy-details-title>Settings</span>
-            <button type="button" data-fs-buying-policy-details-edit-button>
+            <button
+              type="button"
+              data-fs-buying-policy-details-edit-button
+              onClick={openUpdateBuyingPolicyDrawerProps}
+            >
               Edit
             </button>
           </div>
@@ -82,6 +98,16 @@ export const BuyingPolicyDetailsLayout = ({
             </span>
           </div>
         </section>
+        {isUpdateBuyingPolicyDrawerOpen && (
+          <UpdateBuyingPolicyDrawer
+            orgUnitId={currentOrgUnit?.id ?? ""}
+            contractId={currentContract?.id ?? ""}
+            buyingPolicyId={buyingPolicy?.id ?? ""}
+            onUpdate={reload}
+            {...updateBuyingPolicyDrawerProps}
+            isOpen={isUpdateBuyingPolicyDrawerOpen}
+          />
+        )}
       </FinanceTabsLayout>
     </GlobalLayout>
   );

package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/buying-policy-details-layout.scss

@@ -2,6 +2,7 @@
 
 @import "../../../shared/layouts/FinanceTabsLayout/finance-tabs-layout.scss";
 @import "../../components/BuyingPolicyDropdownMenu/buying-policy-dropdown-menu.scss";
+@import "../../components/UpdateBuyingPolicyDrawer/update-buying-policy-drawer.scss";
 
 [data-fs-buying-policy-details-section] {
   @import "../../../shared/components/HeaderInside/header-inside.scss";

package/src/features/buying-policies/mocks/buying-policy-data.ts

@@ -16,7 +16,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Policy for handling bulk orders with discounts.",
     criteria: "quantity > 100",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Manager" },
         { id: "2", name: "Director" },
@@ -48,7 +48,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Handles seasonal promotions and discounts.",
     criteria: "season == 'holiday'",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Marketing Manager" },
         { id: "2", name: "Finance Director" },
@@ -61,7 +61,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Requires approval for high-value purchases.",
     criteria: "purchaseAmount > 10000",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Manager" },
         { id: "2", name: "Finance Director" },
@@ -93,7 +93,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Custom rules for corporate accounts.",
     criteria: "accountType == 'corporate'",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Account Manager" },
         { id: "2", name: "Finance Director" },
@@ -115,7 +115,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Rules for international orders.",
     criteria: "shippingCountry != 'domestic'",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Logistics Manager" },
         { id: "2", name: "Finance Director" },
@@ -155,7 +155,7 @@ export const buyingPoliciesData: BuyingPolicy[] = [
     description: "Encourages eco-friendly purchases.",
     criteria: "productType == 'eco-friendly'",
     action: {
-      type: "Sequential approval workflow",
+      type: "Sequential workflow",
       levels: [
         { id: "1", name: "Sustainability Manager" },
         { id: "2", name: "CEO" },

package/src/features/buying-policies/services/add-buying-policy.service.ts

@@ -1,3 +1,4 @@
+import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
 import type { BuyingPolicy } from "../types";
 
 export type AddBuyingPolicyServiceProps = {
@@ -9,7 +10,16 @@ export type AddBuyingPolicyServiceProps = {
 
 export const addBuyingPolicyService = async ({
   buyingPolicy,
+  contractId,
+  orgUnitId,
   cookie,
 }: AddBuyingPolicyServiceProps) => {
-  return null as unknown as BuyingPolicy; //TODO: Placeholder for the actual implementation
+  return buyingPoliciesClient.addBuyingPolicyToOrgUnit(
+    {
+      ...buyingPolicy,
+      customerId: contractId,
+      orgUnitId,
+    },
+    cookie
+  );
 };

package/src/features/buying-policies/services/get-buying-policies.service.ts

@@ -0,0 +1,25 @@
+import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
+
+export type GetBuyingPoliciesServiceProps = {
+  orgUnitId: string;
+  contractId: string;
+  cookie: string;
+  search?: string;
+  page?: number;
+};
+
+export const getBuyingPoliciesService = async ({
+  search,
+  page = 1,
+  contractId,
+  cookie,
+  orgUnitId,
+}: GetBuyingPoliciesServiceProps) => {
+  return buyingPoliciesClient.getBuyingPoliciesByOrgUnitId(
+    contractId,
+    orgUnitId,
+    cookie,
+    search,
+    page
+  );
+};

package/src/features/buying-policies/services/get-buying-policy.service.ts

@@ -1,4 +1,4 @@
-import { buyingPoliciesData } from "../mocks";
+import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
 
 export type GetBuyingPolicyServiceProps = {
   orgUnitId: string;
@@ -11,9 +11,12 @@ export const getBuyingPolicyService = async ({
   orgUnitId,
   contractId,
   buyingPolicyId,
+  cookie,
 }: GetBuyingPolicyServiceProps) => {
-  // biome-ignore lint/style/noNonNullAssertion: <explanation>
-  return buyingPoliciesData.find((buyingPolicy) => {
-    return buyingPolicy.id === buyingPolicyId;
-  })!;
+  return buyingPoliciesClient.getBuyingPolicyById(
+    contractId,
+    orgUnitId,
+    buyingPolicyId,
+    cookie
+  );
 };

package/src/features/buying-policies/services/index.ts

@@ -17,3 +17,8 @@ export {
   getBuyingPolicyService,
   type GetBuyingPolicyServiceProps,
 } from "./get-buying-policy.service";
+
+export {
+  getBuyingPoliciesService,
+  type GetBuyingPoliciesServiceProps,
+} from "./get-buying-policies.service";

package/src/features/buying-policies/services/remove-buying-policy.service.ts

@@ -1,11 +1,24 @@
+import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
+
 export type RemoveBuyingPolicyServiceProps = {
+  contractId: string;
+  orgUnitId: string;
   buyingPolicyId: string;
   cookie: string;
 };
 
 export const removeBuyingPolicyService = async ({
+  contractId,
+  orgUnitId,
   buyingPolicyId,
   cookie,
 }: RemoveBuyingPolicyServiceProps) => {
-  return null; //TODO: Placeholder for the actual implementation
+  return buyingPoliciesClient.removeBuyingPolicyFromOrgUnit(
+    {
+      customerId: contractId,
+      orgUnitId: orgUnitId,
+      policyId: buyingPolicyId,
+    },
+    cookie
+  );
 };

package/src/features/buying-policies/services/update-buying-policy.service.ts

@@ -1,3 +1,4 @@
+import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
 import type { BuyingPolicy } from "../types";
 
 export type UpdateBuyingPolicyServiceProps = {
@@ -13,6 +14,15 @@ export const updateBuyingPolicyService = async ({
   buyingPolicy,
   contractId,
   orgUnitId,
+  cookie,
 }: UpdateBuyingPolicyServiceProps) => {
-  return;
+  return buyingPoliciesClient.updateBuyingPolicy(
+    {
+      ...buyingPolicy,
+      customerId: contractId,
+      orgUnitId,
+      policyId: buyingPolicyId,
+    },
+    cookie
+  );
 };

package/src/features/buying-policies/types/BuyingPolicy.ts

@@ -1,7 +1,12 @@
+import {
+  BUYING_POLICIES_WORKFLOW_TYPES,
+  type BuyingPoliciesWorkflowType,
+} from "../utils";
+
 export const buyingPolicyOptions = [
-  "Deny order",
-  "Sequential approval workflow",
-  "Bypass all buying policies",
+  BUYING_POLICIES_WORKFLOW_TYPES.DENY,
+  BUYING_POLICIES_WORKFLOW_TYPES.SEQUENTIAL,
+  BUYING_POLICIES_WORKFLOW_TYPES.BYPASS,
 ] as const;
 
 export type BuyingPolicy = {
@@ -10,7 +15,7 @@ export type BuyingPolicy = {
   description: string;
   criteria: string;
   action: {
-    type: (typeof buyingPolicyOptions)[number];
+    type: BuyingPoliciesWorkflowType;
     levels?: {
       id: string;
       name?: string;

package/src/features/buying-policies/utils/buyingPoliciesWorkflowTypes.ts

@@ -0,0 +1,8 @@
+export const BUYING_POLICIES_WORKFLOW_TYPES = {
+  SEQUENTIAL: "Sequential workflow",
+  DENY: "Deny order",
+  BYPASS: "Bypass all buying policies",
+} as const;
+
+export type BuyingPoliciesWorkflowType =
+  (typeof BUYING_POLICIES_WORKFLOW_TYPES)[keyof typeof BUYING_POLICIES_WORKFLOW_TYPES];

package/src/features/buying-policies/utils/buyingPolicyDefault.ts

@@ -1,4 +1,5 @@
 import type { BuyingPolicy } from "../types";
+import { BUYING_POLICIES_WORKFLOW_TYPES } from "./buyingPoliciesWorkflowTypes";
 
 export const buyingPolicyDefault: BuyingPolicy = {
   id: "",
@@ -6,7 +7,7 @@ export const buyingPolicyDefault: BuyingPolicy = {
   description: "",
   criteria: "",
   action: {
-    type: "Deny order",
+    type: BUYING_POLICIES_WORKFLOW_TYPES.DENY,
     levels: [
       {
         id: "",
@@ -14,4 +15,4 @@ export const buyingPolicyDefault: BuyingPolicy = {
       },
     ],
   },
-};
+} as const;

package/src/features/buying-policies/utils/index.ts

@@ -1,3 +1,7 @@
 export { buyingPolicyDefault } from "./buyingPolicyDefault";
 export { orderFieldsCriteriaOptions } from "./orderFieldsCriteriaOptions";
 export { spendingLimitsCriteriaOptions } from "./spendingLimitsCriteriaOptions";
+export {
+  BUYING_POLICIES_WORKFLOW_TYPES,
+  BuyingPoliciesWorkflowType,
+} from "./buyingPoliciesWorkflowTypes";

package/src/features/shared/components/Paginator/Counter.tsx

@@ -0,0 +1,10 @@
+export type CounterProps = {
+  total: number;
+  itemsLength: number;
+};
+
+export const Counter = ({ total, itemsLength }: CounterProps) => (
+  <span data-fs-bp-paginator-counter>
+    {itemsLength} of {total}
+  </span>
+);

package/src/features/shared/components/Paginator/NextPageButton.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+
+export type NextPageButtonProps = ComponentProps<"button">;
+
+export const NextPageButton = ({
+  type = "button",
+  children = "Next Page",
+  ...otherProps
+}: NextPageButtonProps) => {
+  return (
+    <button data-fs-paginator-next-page-button type="button" {...otherProps}>
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,4 @@
+import { Counter } from "./Counter";
+import { NextPageButton } from "./NextPageButton";
+
+export const Paginator = { Counter, NextPageButton };

package/src/features/shared/components/Paginator/paginator.scss

@@ -0,0 +1,22 @@
+[data-fs-bp-paginator-counter] {
+  color: #5c5c5c;
+  font-weight: var(--fs-text-weight-medium);
+  font-size: var(--fs-text-size-1);
+  line-height: calc(var(--fs-spacing-3) - var(--fs-spacing-0));
+  text-align: right;
+}
+
+[data-fs-paginator-next-page-button] {
+  color: #0366dd;
+  font-weight: var(--fs-text-weight-semibold);
+  font-size: var(--fs-text-size-1);
+  line-height: var(--fs-spacing-3);
+  text-align: center;
+  cursor: pointer;
+  padding: var(--fs-spacing-0);
+  border-radius: var(--fs-spacing-0);
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}

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

@@ -71,3 +71,7 @@ export {
   LevelDivider,
   type LevelDividerProps,
 } from "./LevelDivider/LevelDivider";
+
+export { Paginator } from "./Paginator/Paginator";
+export { CounterProps as PaginatorCounterProps } from "./Paginator/Counter";
+export { NextPageButtonProps as PaginatorNextPageButtonProps } from "./Paginator/NextPageButton";

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

@@ -10,3 +10,4 @@ export { useQueryParams } from "./useQueryParams";
 export { useDebounce } from "./useDebounce";
 export { useAddToScope } from "./useAddToScope";
 export { useRemoveFromScope } from "./useRemoveFromScope";
+export { usePageItems, type UsePageItemsProps } from "./usePageItems";

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

@@ -1,11 +1,25 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-export function useDebounce<T>(value: T, delay: number): T {
+export function useDebounce<T>(
+  value: T,
+  delay: number,
+  options?: { onDebounce?: (value: T) => void }
+): T {
+  const { onDebounce } = options || {};
   const [debouncedValue, setDebouncedValue] = useState(value);
 
+  const firstChangeRef = useRef(true);
+
   useEffect(() => {
     const handler = setTimeout(() => {
+      if (firstChangeRef.current) {
+        firstChangeRef.current = false;
+
+        return;
+      }
       setDebouncedValue(value);
+
+      onDebounce?.(value);
     }, delay);
 
     return () => {

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

@@ -0,0 +1,88 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useDebounce } from "./useDebounce";
+import { useQueryParams } from "./useQueryParams";
+import { DEBOUNCE_TIMEOUT } from "../utils";
+
+export type UsePageItemsProps<T> = {
+  initialItems: T[];
+  search?: string;
+  page?: number;
+};
+
+export const usePageItems = <T>({
+  initialItems,
+  search,
+  page = 1,
+}: UsePageItemsProps<T>) => {
+  const [items, setItems] = useState<T[]>(initialItems ?? []);
+
+  const [searchTerm, setSearchTerm] = useState(search ?? "");
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useDebounce(searchTerm, DEBOUNCE_TIMEOUT, {
+    onDebounce: (value) => {
+      setIsLoading(true);
+      if (value) {
+        setQueryStrings({
+          search: value,
+          page: "1",
+        });
+      } else {
+        setQueryStrings({
+          search: null,
+          page: "1",
+        });
+      }
+    },
+  });
+
+  const { setQueryStrings, setQueryString } = useQueryParams();
+
+  const firstSearchRef = useRef(true);
+
+  useEffect(() => {
+    setItems([]);
+  }, [search]);
+
+  useEffect(() => {
+    if (firstSearchRef.current) {
+      setItems(initialItems);
+      firstSearchRef.current = false;
+      return;
+    }
+
+    setItems((prev) => [...prev, ...initialItems]);
+    setIsLoading(false);
+  }, [initialItems]);
+
+  const increasePage = useCallback(() => {
+    setQueryString("page", (page + 1).toString());
+    setIsLoading(true);
+  }, [page, setQueryString]);
+
+  const decreasePage = useCallback(() => {
+    setQueryString("page", (page - 1).toString());
+    setIsLoading(true);
+  }, [setQueryString, page]);
+
+  const setPage = useCallback(
+    (newPage: number) => {
+      setQueryString("page", newPage.toString());
+      setIsLoading(true);
+    },
+    [setQueryString]
+  );
+
+  return {
+    items,
+    setItems,
+    searchTerm,
+    setSearchTerm,
+    isLoading,
+    setIsLoading,
+    increasePage,
+    decreasePage,
+    setPage,
+  };
+};

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

@@ -19,9 +19,24 @@ export const useQueryParams = () => {
 
   const setQueryString = useCallback(
     (prop: string, value: string) => {
-      router.push(pathname + "?" + createQueryString(prop, value));
+      router.push(`${pathname}?${createQueryString(prop, value)}`);
     },
-    [router]
+    [router, pathname, createQueryString]
+  );
+
+  const setQueryStrings = useCallback(
+    (props: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+      for (const [key, value] of Object.entries(props)) {
+        if (value === null) {
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams]
   );
 
   const removeQueryString = useCallback(
@@ -29,10 +44,10 @@ export const useQueryParams = () => {
       const params = new URLSearchParams(searchParams.toString());
       params.delete(prop);
 
-      router.push(pathname + "?" + params.toString());
+      router.push(`${pathname}?${params.toString()}`);
     },
-    [router]
+    [router, pathname, searchParams]
   );
 
-  return { setQueryString, removeQueryString };
+  return { setQueryString, removeQueryString, setQueryStrings };
 };

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

@@ -5,3 +5,5 @@ export const API_URL = (checkoutUrl: string, operation?: string) =>
 // DEV URL - CHANGE BEFORE MERGE
 // export const API_URL = (checkoutUrl?: string, operation?: string) =>
 //   `https://everton--b2bfaststoredev.myvtex.com/_v/buyer-portal/${operation}`;
+
+export const DEBOUNCE_TIMEOUT = 500;

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

@@ -0,0 +1,6 @@
+export function getValidPage(pageValue: unknown): number {
+  const parsed = Number(pageValue);
+  return Number.isNaN(parsed) || !Number.isFinite(parsed) || parsed < 1
+    ? 1
+    : Math.floor(parsed);
+}

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

@@ -1,7 +1,7 @@
 export { addressLabelToPropMapping } from "./addresLabelToPropMapping";
 export { getApiUrl, getPostalCodeApiUrl } from "./api";
 export { compareItems } from "./compareItems";
-export { API_URL, AUT_COOKIE_KEY } from "./constants";
+export { API_URL, AUT_COOKIE_KEY, DEBOUNCE_TIMEOUT } from "./constants";
 export {
   getAuthCookie,
   getCookieAsString,
@@ -26,3 +26,4 @@ export { getContractSettingsLinks } from "./getContractSettingsLinks";
 export { getOrganizationSettingsLinks } from "./getOrganizationSettingsLinks";
 export { maskCardNumber, maskCVV, maskExpirationDate } from "./creditCard";
 export { getFinanceSettingsLinks } from "./getFinanceSettingsLinks";
+export { getValidPage } from "./getValidPage";

package/src/features/users/hooks/useDebouncedSearchOrgUnit.ts

@@ -1,8 +1,9 @@
 import { useSearchOrgUnits } from "../../org-units/hooks";
 import { useDebounce } from "../../shared/hooks";
+import { DEBOUNCE_TIMEOUT } from "../../shared/utils";
 
 export const useDebouncedSearchOrgUnit = (searchTerm = "") => {
-  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const debouncedSearchTerm = useDebounce(searchTerm, DEBOUNCE_TIMEOUT);
   const { searchedOrgUnits } = useSearchOrgUnits(debouncedSearchTerm);
 
   if (searchTerm === "") {

package/src/pages/buying-policies.tsx

@@ -1,15 +1,10 @@
-import {
-  getAddressesService,
-  type GetAddressesServiceProps,
-} from "../features/addresses/services";
+import type { GetAddressesServiceProps } from "../features/addresses/services";
 
 import {
   type ClientContext,
   getClientContext,
-  getCustomerIdFromCookieServerSide,
+  getValidPage,
 } from "../features/shared/utils";
-import type { AddressData } from "../features/addresses/types";
-import { AddressLayout } from "../features/addresses/layouts";
 import { BuyerPortalProvider } from "../features/shared/components";
 import type { LoaderData } from "../features/shared/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
@@ -19,12 +14,14 @@ import type { UserData } from "../features/users/types";
 import type { ContractData } from "../features/contracts/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import type { BuyingPolicy } from "../features/buying-policies/types";
-import { buyingPoliciesData } from "../features/buying-policies/mocks";
 import { BuyingPoliciesLayout } from "../features/buying-policies/layouts";
+import { getBuyingPoliciesService } from "../features/buying-policies/services";
 
 export type BuyingPoliciesPageData = {
-  data: { buyingPolicies: BuyingPolicy[] };
+  buyingPolicies: BuyingPolicy[];
+  total: number;
   search: string;
+  page: number;
   context: {
     currentContract: ContractData | null;
     clientContext: ClientContext;
@@ -37,12 +34,15 @@ export type BuyingPoliciesPageQuery = GetAddressesServiceProps & {
   orgUnitId: string;
   contractId: string;
   search?: string;
+  page?: string;
 };
 
 export async function loader(
   data: LoaderData<BuyingPoliciesPageQuery>
 ): Promise<BuyingPoliciesPageData> {
-  const { contractId, orgUnitId, search = "" } = data.query;
+  const { contractId, orgUnitId, search = "", page: pageString } = data.query;
+
+  const page = getValidPage(pageString);
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
@@ -58,11 +58,20 @@ export async function loader(
     cookie,
   });
 
+  const { data: buyingPolicies = [], total = 0 } =
+    await getBuyingPoliciesService({
+      orgUnitId,
+      contractId,
+      cookie,
+      page,
+      search,
+    });
+
   return {
-    data: {
-      buyingPolicies: buyingPoliciesData,
-    },
+    buyingPolicies,
+    total,
     search,
+    page,
     context: {
       clientContext: { cookie, userId, ...clientContext },
       currentOrgUnit,
@@ -72,9 +81,20 @@ export async function loader(
   };
 }
 
-const AddressPage = ({ data, search, context }: BuyingPoliciesPageData) => (
+const AddressPage = ({
+  buyingPolicies,
+  search,
+  page,
+  context,
+  total,
+}: BuyingPoliciesPageData) => (
   <BuyerPortalProvider {...context}>
-    <BuyingPoliciesLayout data={data} search={search} />
+    <BuyingPoliciesLayout
+      buyingPolicies={buyingPolicies}
+      search={search}
+      page={page}
+      total={total}
+    />
   </BuyerPortalProvider>
 );
 

package/src/pages/buying-policy-details.tsx

@@ -12,6 +12,7 @@ import { getContractDetailsService } from "../features/contracts/services";
 import type { BuyingPolicy } from "../features/buying-policies/types";
 import { buyingPoliciesData } from "../features/buying-policies/mocks";
 import { BuyingPolicyDetailsLayout } from "../features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout";
+import { getBuyingPolicyService } from "../features/buying-policies/services";
 
 export type BuyingPolicyDetailsPageData = {
   data: { buyingPolicy: BuyingPolicy | null };
@@ -48,11 +49,16 @@ export async function loader(
     cookie,
   });
 
+  const buyingPolicy = await getBuyingPolicyService({
+    orgUnitId,
+    contractId,
+    buyingPolicyId,
+    cookie,
+  });
+
   return {
     data: {
-      buyingPolicy:
-        buyingPoliciesData.find((policy) => policy.id === buyingPolicyId) ??
-        null,
+      buyingPolicy,
     },
     context: {
       clientContext: { cookie, userId, ...clientContext },