@vtex/faststore-plugin-buyer-portal 1.1.96 → 1.1.97

package/package.json

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

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

@@ -7,6 +7,7 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useAddBuyingPolicy } from "../../hooks";
 import { buyingPolicyDefault } from "../../utils";
 
+import type { BudgetListResponse } from "../../../budgets/types";
 import type { BuyingPolicy } from "../../types";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -19,6 +20,7 @@ export type AddBuyingPolicyDrawerProps = Omit<
   onCreate?: () => void;
   orgUnitId: string;
   contractId: string;
+  budgetData?: BudgetListResponse;
 };
 
 export const AddBuyingPolicyDrawer = ({
@@ -26,6 +28,7 @@ export const AddBuyingPolicyDrawer = ({
   onCreate,
   orgUnitId,
   contractId,
+  budgetData = { data: [], total: 0 },
   ...props
 }: AddBuyingPolicyDrawerProps) => {
   const { pushToast } = useUI();
@@ -85,6 +88,7 @@ export const AddBuyingPolicyDrawer = ({
       orgUnitId={orgUnitId}
       contractId={contractId}
       initialValues={defaultBuyingPolicyValues}
+      budgetData={budgetData}
       {...props}
     />
   );

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

@@ -23,11 +23,15 @@ import { type BuyingPolicy } from "../../types";
 import {
   BUYING_POLICIES_WORKFLOW_TYPES,
   buyingPolicyDefault,
+  BUDGET_CRITERIA,
   orderFieldsCriteriaOptions,
   spendingLimitsCriteriaOptions,
 } from "../../utils";
 import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkflowTypes";
 import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
+import { BudgetCriteriaSelector } from "../BudgetCriteriaSelector";
+
+import type { BudgetListResponse } from "../../../budgets/types";
 
 const LIMIT_OF_LEVELS = 5;
 
@@ -50,6 +54,7 @@ export type BasicBuyingPolicyDrawerProps = Omit<
   drawerTitle?: string;
   saveButtonLabel?: string;
   isDrawerLoading?: boolean;
+  budgetData?: BudgetListResponse;
 };
 
 export const BasicBuyingPolicyDrawer = ({
@@ -62,6 +67,7 @@ export const BasicBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   initialValues = defaultBuyingPolicyValues,
+  budgetData = { data: [], total: 0 },
   ...props
 }: BasicBuyingPolicyDrawerProps) => {
   const [form, setForm] = useState<BuyingPolicyForm>(initialValues);
@@ -167,6 +173,27 @@ export const BasicBuyingPolicyDrawer = ({
     });
   };
 
+  const isBudgetCriteria =
+    criteria === BUDGET_CRITERIA ||
+    criteria.includes('$exists(budgetData.unitAllocations.*[budgetId="');
+
+  const renderCriteria = (criteria: string) => {
+    if (isBudgetCriteria) {
+      return (
+        <BudgetCriteriaSelector
+          budgetData={budgetData}
+          currentCriteria={criteria}
+          onCriteriaChange={(newCriteria) =>
+            updateField("criteria", newCriteria)
+          }
+          onEditablePartClick={() => setCriteriaFocused(true)}
+        />
+      );
+    }
+
+    return getHighlightedText(criteria);
+  };
+
   const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
@@ -258,10 +285,14 @@ export const BasicBuyingPolicyDrawer = ({
               {!criteriaFocused && (
                 <div
                   data-fs-bp-basic-buying-policy-criteria-input-highlighted
-                  onClick={() => setCriteriaFocused(true)}
+                  onClick={() => {
+                    if (!isBudgetCriteria) {
+                      setCriteriaFocused(true);
+                    }
+                  }}
                 >
                   {criteria ? (
-                    getHighlightedText(criteria)
+                    renderCriteria(criteria)
                   ) : (
                     <span data-fs-bp-label>Example: value {">"} 10000</span>
                   )}
@@ -280,7 +311,7 @@ export const BasicBuyingPolicyDrawer = ({
                   label: option.label,
                   value: option.criteria,
                 }))}
-                onSelect={(value) => updateField("criteria", value)}
+                onSelect={(value: string) => updateField("criteria", value)}
                 triggerLabel="Set spending limit criteria"
                 highlightText={getHighlightedText}
               />
@@ -290,7 +321,7 @@ export const BasicBuyingPolicyDrawer = ({
                   label: option.label,
                   value: option.criteria,
                 }))}
-                onSelect={(value) => updateField("criteria", value)}
+                onSelect={(value: string) => updateField("criteria", value)}
                 triggerLabel="Set order field criteria"
                 highlightText={getHighlightedText}
               />

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -1,6 +1,7 @@
 @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
 @import "../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss";
 @import "../../../shared/components/CustomDropdown/custom-dropdown.scss";
+@import "../BudgetCriteriaSelector/budget-criteria-selector.scss";
 
 [data-fs-bp-basic-buying-policy-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
@@ -105,7 +106,6 @@
           var(--fs-spacing-3);
         border-radius: calc(var(--fs-border-radius) * 2);
         text-wrap: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         cursor: pointer;
@@ -124,6 +124,7 @@
       }
     }
 
+
     [data-fs-bp-input-text-criteria] {
       color: #5c5c5c;
 

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

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+
+import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+
+import type { BudgetListResponse } from "../../../budgets/types";
+
+export type BudgetCriteriaSelectorProps = {
+  onCriteriaChange: (criteria: string) => void;
+  currentCriteria: string;
+  onEditablePartClick?: () => void;
+  budgetData?: BudgetListResponse;
+};
+
+export const BudgetCriteriaSelector = ({
+  onCriteriaChange,
+  currentCriteria,
+  onEditablePartClick,
+  budgetData = { data: [], total: 0 },
+}: BudgetCriteriaSelectorProps) => {
+  const extractBudgetValueFromCriteria = (criteria: string): string => {
+    const match = criteria.match(/budgetId="([^"]+)"/);
+    return match ? match[1] : "budget-001";
+  };
+
+  const [currentBudgetValue, setCurrentBudgetValue] = useState<string>(
+    extractBudgetValueFromCriteria(currentCriteria)
+  );
+
+  useEffect(() => {
+    const extractedValue = extractBudgetValueFromCriteria(currentCriteria);
+    setCurrentBudgetValue(extractedValue);
+  }, [currentCriteria]);
+
+  const getMatchingBudget = () => {
+    return budgetData.data.find(
+      (budget) =>
+        budget.id === currentBudgetValue || budget.id === currentBudgetValue
+    );
+  };
+
+  const generateCriteriaString = (value: string) => {
+    return `$exists(budgetData.unitAllocations.*[budgetId="${value}"])`;
+  };
+
+  const handleBudgetSelect = (budgetId: string) => {
+    const selectedBudget = budgetData.data.find(
+      (budget) => budget.id === budgetId
+    );
+    if (selectedBudget) {
+      const newValue = selectedBudget.id;
+      setCurrentBudgetValue(newValue);
+      const newCriteria = generateCriteriaString(newValue);
+      onCriteriaChange(newCriteria);
+    }
+  };
+
+  const handleBudgetSelectorClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleEditablePartClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEditablePartClick?.();
+  };
+
+  const matchingBudget = getMatchingBudget();
+  const displayValue = matchingBudget ? matchingBudget.id : currentBudgetValue;
+  const hasBudgetData = budgetData.data.length > 0;
+
+  return (
+    <div
+      data-fs-bp-budget-criteria-selector
+      onClick={handleBudgetSelectorClick}
+    >
+      <div data-fs-bp-budget-criteria-string>
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          $exists(budgetData.unitAllocations.*[budgetId="
+        </span>
+        {hasBudgetData ? (
+          <div onClick={handleBudgetSelectorClick}>
+            <CustomDropdown
+              options={budgetData.data.map((budget) => ({
+                label: budget.name,
+                value: budget.id,
+              }))}
+              onSelect={handleBudgetSelect}
+              triggerLabel={displayValue}
+              highlightText={(text) => (
+                <div data-fs-bp-dropdown-option>
+                  <div data-fs-bp-dropdown-option-label>{text}</div>
+                  <div data-fs-bp-dropdown-option-uuid>
+                    {budgetData.data.find((b) => b.name === text)?.id}
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+        ) : (
+          <span
+            onClick={handleEditablePartClick}
+            data-fs-bp-editable-part
+            data-fs-bp-budget-value
+          >
+            {displayValue}
+          </span>
+        )}
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          "])
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/features/buying-policies/components/BudgetCriteriaSelector/budget-criteria-selector.scss

@@ -0,0 +1,139 @@
+[data-fs-bp-budget-criteria-selector] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: #f5f5f5;
+  border: var(--fs-border-width) solid #d6d6d6;
+  border-radius: calc(var(--fs-border-radius) * 2);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  [data-fs-bp-budget-criteria-string] {
+    font-family: "Roboto", monospace;
+    font-size: var(--fs-text-size-1);
+    color: #5c5c5c;
+    display: flex;
+    align-items: center;
+    padding: var(--fs-spacing-3) var(--fs-spacing-3);
+    gap: 0;
+    flex-wrap: wrap;
+    width: 100%;
+
+    > span {
+      white-space: nowrap;
+    }
+
+    [data-fs-bp-editable-part] {
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      padding: 0.125rem 0 0.25rem;
+      border-radius: calc(var(--fs-border-radius) * 0.5);
+
+      &:hover {
+        background-color: #f5f5f5;
+        color: #1f1f1f;
+      }
+    }
+
+    [data-fs-bp-custom-dropdown] {
+      display: inline-flex;
+
+      [data-fs-bp-custom-dropdown-trigger] {
+        color: #b521b6;
+        border: none;
+        min-width: 0;
+        border-radius: calc(var(--fs-border-radius) * 1.5);
+        font-family: "Roboto", monospace;
+        font-size: calc(var(--fs-text-size-1) * 0.9);
+        padding: 0;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        background-color: transparent;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+
+      [data-fs-bp-custom-dropdown-menu] {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: var(--fs-spacing-1);
+        padding: var(--fs-spacing-1) 0;
+        background-color: #fff;
+        box-shadow: 0rem 0.5rem 0.625rem 0rem rgba(0, 0, 0, 0.0784313725);
+        max-height: 15rem;
+        min-width: 20rem;
+        overflow-y: auto;
+        z-index: 1;
+        border-radius: calc(var(--fs-border-radius) * 2);
+
+        &::-webkit-scrollbar {
+          width: 0.75rem; 
+          height: 0.75rem;
+          background-color: #fff;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #adadad;
+          border: 0.25rem solid transparent; 
+          border-radius: 0.375rem; 
+          background-clip: content-box; 
+        }
+
+        [data-fs-bp-custom-dropdown-item] {
+          padding: var(--fs-spacing-2) var(--fs-spacing-3);
+          cursor: pointer;
+          border-bottom: var(--fs-border-width) solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          &:hover,
+          &[data-focused="true"] {
+            background-color: #ebebeb;
+          }
+
+          [data-fs-bp-dropdown-option] {
+            font-family: Inter;
+
+            [data-fs-bp-dropdown-option-label] {
+              font-weight: var(--fs-text-weight-semibold);
+              color: #1f1f1f;
+              font-size: var(--fs-text-size-1);
+              margin-bottom: var(--fs-spacing-0);
+            }
+
+            [data-fs-bp-dropdown-option-uuid] {
+              font-size: var(--fs-text-size-0);
+              color: #5c5c5c;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [data-fs-bp-custom-value-indicator] {
+    font-size: calc(var(--fs-text-size-0) * 0.85);
+    color: #666666;
+    font-style: italic;
+    padding: 0 var(--fs-spacing-3) calc(var(--fs-spacing-1) * 0.5);
+    border-top: 0.0625rem solid #e0e0e0;
+    margin-top: auto;
+    width: 100%;
+    background-color: #fafafa;
+    border-radius: 0 0 calc(var(--fs-border-radius) * 2)
+      calc(var(--fs-border-radius) * 2);
+  }
+
+  [data-fs-bp-budget-value] {
+    color: #b521b6;
+  }
+}

package/src/features/buying-policies/components/BudgetCriteriaSelector/index.ts

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

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

@@ -7,11 +7,14 @@ import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
+import type { BudgetListResponse } from "../../../budgets/types";
+
 export type BuyingPolicyDropdownMenuProps = {
   id: string;
   name: string;
   onDelete?: () => void;
   onUpdate?: () => void;
+  budgetData?: BudgetListResponse;
 };
 
 export const BuyingPolicyDropdownMenu = ({
@@ -19,6 +22,7 @@ export const BuyingPolicyDropdownMenu = ({
   name,
   onDelete,
   onUpdate,
+  budgetData = { data: [], total: 0 },
 }: BuyingPolicyDropdownMenuProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -80,6 +84,7 @@ export const BuyingPolicyDropdownMenu = ({
           contractId={currentContract?.id ?? ""}
           buyingPolicyId={id}
           onUpdate={onUpdate}
+          budgetData={budgetData}
           {...updateBuyingPolicyDrawerProps}
           isOpen={isUpdateBuyingPolicyDrawerOpen}
         />

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

@@ -7,6 +7,8 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useGetBuyingPolicy, useUpdateBuyingPolicy } from "../../hooks";
 import { buyingPolicyDefault } from "../../utils";
 
+import type { BudgetListResponse } from "../../../budgets/types";
+
 export type UpdateBuyingPolicyDrawerProps = Omit<
   BasicBuyingPolicyDrawerProps,
   "children" | "initialValues"
@@ -15,6 +17,7 @@ export type UpdateBuyingPolicyDrawerProps = Omit<
   orgUnitId: string;
   contractId: string;
   buyingPolicyId: string;
+  budgetData?: BudgetListResponse;
 };
 
 export const UpdateBuyingPolicyDrawer = ({
@@ -23,6 +26,7 @@ export const UpdateBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   buyingPolicyId,
+  budgetData = { data: [], total: 0 },
   ...props
 }: UpdateBuyingPolicyDrawerProps) => {
   const { buyingPolicy, isBuyingPolicyLoading } = useGetBuyingPolicy(
@@ -93,6 +97,7 @@ export const UpdateBuyingPolicyDrawer = ({
       initialValues={{ ...buyingPolicyDefault, ...(buyingPolicy ?? {}) }}
       orgUnitId={orgUnitId}
       contractId={contractId}
+      budgetData={budgetData}
       {...props}
     />
   );

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

@@ -21,6 +21,7 @@ import { BuyingPolicyDropdownMenu } from "../../components";
 import { AddBuyingPolicyDrawer } from "../../components/AddBuyingPolicyDrawer/AddBuyingPolicyDrawer";
 import { useGetBuyingPolicies } from "../../hooks/useGetBuyingPolicies";
 
+import type { BudgetListResponse } from "../../../budgets/types";
 import type { BuyingPolicy } from "../../types";
 
 export type BuyingPoliciesLayoutProps = {
@@ -28,12 +29,14 @@ export type BuyingPoliciesLayoutProps = {
   total: number;
   search: string;
   page: number;
+  budgetData?: BudgetListResponse;
 };
 
 export const BuyingPoliciesLayout = ({
   buyingPolicies: initialBuyingPolicies,
   search,
   page,
+  budgetData = { data: [], total: 0 },
 }: BuyingPoliciesLayoutProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -108,7 +111,7 @@ export const BuyingPoliciesLayout = ({
       return renderLoading();
     }
 
-    if (buyingPolicies.length > 0) {
+    if (buyingPolicies.length === 0) {
       return renderEmptyState();
     }
 
@@ -133,6 +136,7 @@ export const BuyingPoliciesLayout = ({
                   name={buyingPolicy.name}
                   onUpdate={handleRefetchBuyingPolicies}
                   onDelete={handleRefetchBuyingPolicies}
+                  budgetData={budgetData}
                 />
               }
             />
@@ -187,6 +191,7 @@ export const BuyingPoliciesLayout = ({
             contractId={currentContract?.id ?? ""}
             isOpen={isAddBuyingPolicyDrawerOpen}
             onCreate={handleRefetchBuyingPolicies}
+            budgetData={budgetData}
             {...addBuyingPolicyDrawerProps}
           />
         )}

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

@@ -1,5 +1,8 @@
 export { buyingPolicyDefault } from "./buyingPolicyDefault";
-export { orderFieldsCriteriaOptions } from "./orderFieldsCriteriaOptions";
+export {
+  BUDGET_CRITERIA,
+  orderFieldsCriteriaOptions,
+} from "./orderFieldsCriteriaOptions";
 export { spendingLimitsCriteriaOptions } from "./spendingLimitsCriteriaOptions";
 export {
   BUYING_POLICIES_WORKFLOW_TYPES,

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

@@ -1,39 +1,42 @@
+export const BUDGET_CRITERIA =
+  '$exists(budgetData.unitAllocations.*[budgetId="${budget-id}"])';
+
 export const orderFieldsCriteriaOptions = [
   {
     label: "If the order contains a budget",
-    criteria: "$count(budgetData.unitAllocations) > 0",
+    criteria: "$exists(budgetData.unitAllocations.*[])",
   },
   {
     label: "If the order contains the budgets X, Y, Z",
-    criteria:
-      'budgetData.unitAllocations.budgetId = "Tech" or budgetData.unitAllocations.budgetId = "Growth"',
+    criteria: BUDGET_CRITERIA,
   },
   {
     label: "If the order contains an exceeded budget",
-    criteria: "budgetData.unitAllocations.budgetBalance.remaining < 0",
+    criteria:
+      "$exists(budgetData.unitAllocations.**.budgetBalance[remaining < 0])",
   },
   {
     label: "If the order contains an expired budget Pending confirmation",
-    criteria: "budgetData.unitAllocations.cycleConfiguration.endDate < now()",
+    criteria: "$exists(budgetData.unitAllocations.*[budgetEndDate < $now()])",
   },
   {
     label: "If the order contains a PO number",
-    criteria: '$exists(customData.customFields.fields[name="poNumber"].value)',
+    criteria: '$exists(customData.customFields.fields[name="PO Number"].value)',
   },
   {
     label: "If the order contains the PO numbers X, Y, Z",
     criteria:
-      'customData.customFields.fields[name="poNumber"].value = "1112223334444" or customData.customFields.fields[name="poNumber"].value = "1234567890"',
+      'customData.customFields.fields[name="PO Number"].value = "1112223334444" or customData.customFields.fields[name="PO Number"].value = "1234567890"',
   },
   {
     label: "If the order contains a cost center",
     criteria:
-      '$exists(customData.customFields.fields[name="costCenter"].value)',
+      '$exists(customData.customFields.fields[name="Cost Center"].value)',
   },
   {
     label: "If the order contains the cost centers X, Y, Z",
     criteria:
-      'customData.customFields.fields[name="costCenter"].value = "CC1" or customData.customFields.fields[name="costCenter"].value = "CC2"',
+      'customData.customFields.fields[name="Cost Center"].value = "CC1" or customData.customFields.fields[name="Cost Center"].value = "CC2"',
   },
   {
     label: "If all order items are negotiated items",

package/src/pages/budgets.tsx

@@ -1,6 +1,5 @@
 import { BudgetsLayout } from "../features/budgets/layouts";
 import { listBudgetsService } from "../features/budgets/services";
-import { BudgetListResponse } from "../features/budgets/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import {
@@ -16,6 +15,7 @@ import {
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
+import type { BudgetListResponse } from "../features/budgets/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
 import type { LoaderData } from "../features/shared/types";

package/src/pages/buying-policies.tsx

@@ -1,3 +1,4 @@
+import { listBudgetsService } from "../features/budgets/services";
 import { BuyingPoliciesLayout } from "../features/buying-policies/layouts";
 import { getBuyingPoliciesService } from "../features/buying-policies/services";
 import { getContractDetailsService } from "../features/contracts/services";
@@ -17,6 +18,7 @@ import {
 import { getUserByIdService } from "../features/users/services";
 
 import type { GetAddressesServiceProps } from "../features/addresses/services";
+import type { BudgetListResponse } from "../features/budgets/types";
 import type { BuyingPolicy } from "../features/buying-policies/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
@@ -34,6 +36,7 @@ export type BuyingPoliciesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  budgetData?: BudgetListResponse;
   hasError?: boolean;
   error?: ErrorBoundaryProps;
 };
@@ -54,7 +57,7 @@ const loaderFunction = async (
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
-  const [currentOrgUnit, user, contract, buyingPoliciesResponse] =
+  const [currentOrgUnit, user, contract, budgetData, buyingPoliciesResponse] =
     await Promise.all([
       getOrgUnitBasicDataService({
         id: orgUnitId,
@@ -66,6 +69,13 @@ const loaderFunction = async (
         cookie,
         unitId: orgUnitId,
       }),
+
+      listBudgetsService({
+        customerId: clientContext.customerId,
+        cookie,
+        unitId: orgUnitId,
+      }),
+
       getBuyingPoliciesService({
         orgUnitId,
         contractId,
@@ -94,6 +104,7 @@ const loaderFunction = async (
       currentUser: user,
       currentContract: contract,
     },
+    budgetData: budgetData ?? { data: [], total: 0 },
   };
 };
 
@@ -110,6 +121,7 @@ const BuyingPoliciesPage = ({
   total,
   hasError,
   error,
+  budgetData = { data: [], total: 0 },
 }: BuyingPoliciesPageData) => (
   <BuyerPortalProvider {...context}>
     {hasError ? (
@@ -120,6 +132,7 @@ const BuyingPoliciesPage = ({
         search={search}
         page={page}
         total={total}
+        budgetData={budgetData}
       />
     )}
   </BuyerPortalProvider>