@vtex/faststore-plugin-buyer-portal 1.3.22 → 1.3.23

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.23] - 2025-11-25
+
+### Changed
+
+- Refactor logic of fetching budgets to be handled by a new custom hook
+
 ## [1.3.22] - 2025-11-21
 
 ### Added
@@ -235,7 +241,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.22...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.23...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -250,6 +256,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.23]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.22...v1.3.23
 [1.3.22]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.21...v1.3.22
 [1.3.21]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.20...v1.3.21
 [1.3.20]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.19...v1.3.20

package/package.json

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

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

@@ -7,7 +7,6 @@ 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
@@ -20,7 +19,6 @@ export type AddBuyingPolicyDrawerProps = Omit<
   onCreate?: () => void;
   orgUnitId: string;
   contractId: string;
-  budgetData?: BudgetListResponse;
 };
 
 export const AddBuyingPolicyDrawer = ({
@@ -28,7 +26,6 @@ export const AddBuyingPolicyDrawer = ({
   onCreate,
   orgUnitId,
   contractId,
-  budgetData = { data: [], total: 0 },
   ...props
 }: AddBuyingPolicyDrawerProps) => {
   const { pushToast } = useUI();
@@ -88,7 +85,6 @@ export const AddBuyingPolicyDrawer = ({
       orgUnitId={orgUnitId}
       contractId={contractId}
       initialValues={defaultBuyingPolicyValues}
-      budgetData={budgetData}
       {...props}
     />
   );

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

@@ -31,8 +31,6 @@ import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkf
 import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
 import { BudgetCriteriaSelector } from "../BudgetCriteriaSelector";
 
-import type { BudgetListResponse } from "../../../budgets/types";
-
 const LIMIT_OF_LEVELS = 5;
 
 export type BuyingPolicyForm = Omit<BuyingPolicy, "id"> & {
@@ -54,7 +52,6 @@ export type BasicBuyingPolicyDrawerProps = Omit<
   drawerTitle?: string;
   saveButtonLabel?: string;
   isDrawerLoading?: boolean;
-  budgetData?: BudgetListResponse;
 };
 
 export const BasicBuyingPolicyDrawer = ({
@@ -67,7 +64,6 @@ export const BasicBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   initialValues = defaultBuyingPolicyValues,
-  budgetData = { data: [], total: 0 },
   ...props
 }: BasicBuyingPolicyDrawerProps) => {
   const [form, setForm] = useState<BuyingPolicyForm>(initialValues);
@@ -181,7 +177,6 @@ export const BasicBuyingPolicyDrawer = ({
     if (isBudgetCriteria) {
       return (
         <BudgetCriteriaSelector
-          budgetData={budgetData}
           currentCriteria={criteria}
           onCriteriaChange={(newCriteria) =>
             updateField("criteria", newCriteria)

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

@@ -1,22 +1,32 @@
 import { useState, useEffect } from "react";
 
 import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
-
-import type { BudgetListResponse } from "../../../budgets/types";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useGetBudgets } from "../../hooks/useGetBudgets";
 
 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 {
+    clientContext: { customerId },
+    currentOrgUnit: orgUnit,
+  } = useBuyerPortal();
+
+  const { budgets, isBudgetsLoading, refetchBudgets } = useGetBudgets({
+    data: { customerId, orgUnitId: orgUnit?.id || "" },
+    options: { lazy: true },
+  });
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   const extractBudgetValueFromCriteria = (criteria: string): string => {
     const match = criteria.match(/id="([^"]+)"/);
     return match ? match[1] : "budget-001";
@@ -31,31 +41,28 @@ export const BudgetCriteriaSelector = ({
     setCurrentBudgetValue(extractedValue);
   }, [currentCriteria]);
 
-  const getMatchingBudget = () => {
-    return budgetData.data.find(
-      (budget) =>
-        budget.id === currentBudgetValue || budget.id === currentBudgetValue
-    );
-  };
-
   const generateCriteriaString = (value: string) => {
     return `$exists(budgetData.budgets[id="${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);
-    }
+    if (budgetId === "loading") return;
+
+    const selectedBudget = budgets.data.find((b) => b.id === budgetId);
+    if (!selectedBudget) return;
+
+    setCurrentBudgetValue(selectedBudget.id);
+    onCriteriaChange(generateCriteriaString(selectedBudget.id));
+    setIsDropdownOpen(false);
   };
 
-  const handleBudgetSelectorClick = (e: React.MouseEvent) => {
+  const handleBudgetValueClick = (e: React.MouseEvent) => {
     e.stopPropagation();
+    setIsDropdownOpen(true);
+
+    if (budgets.data.length === 0 && !isBudgetsLoading) {
+      refetchBudgets();
+    }
   };
 
   const handleEditablePartClick = (e: React.MouseEvent) => {
@@ -63,47 +70,44 @@ export const BudgetCriteriaSelector = ({
     onEditablePartClick?.();
   };
 
-  const matchingBudget = getMatchingBudget();
-  const displayValue = matchingBudget ? matchingBudget.id : currentBudgetValue;
-  const hasBudgetData = budgetData.data.length > 0;
+  const loadingOptions = [{ label: "Loading budgets...", value: "loading" }];
+
+  const budgetOptions = budgets.data.map((b) => ({
+    label: b.name,
+    value: b.id,
+  }));
+
+  const options =
+    isBudgetsLoading || budgets.data.length === 0
+      ? loadingOptions
+      : budgetOptions;
 
   return (
-    <div
-      data-fs-bp-budget-criteria-selector
-      onClick={handleBudgetSelectorClick}
-    >
+    <div data-fs-bp-budget-criteria-selector>
       <div data-fs-bp-budget-criteria-string>
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
           $exists(budgetData.budgets[id="
         </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 onClick={handleBudgetValueClick}>
+          <CustomDropdown
+            options={options}
+            onSelect={handleBudgetSelect}
+            triggerLabel={isBudgetsLoading ? "Loading..." : currentBudgetValue}
+            isOpen={isDropdownOpen}
+            highlightText={(text) => (
+              <div data-fs-bp-dropdown-option>
+                <div data-fs-bp-dropdown-option-label>{text}</div>
+                {!isBudgetsLoading && (
                   <div data-fs-bp-dropdown-option-uuid>
-                    {budgetData.data.find((b) => b.name === text)?.id}
+                    {budgets.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>
-        )}
+                )}
+              </div>
+            )}
+          />
+        </div>
+
         <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
           "])
         </span>

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

@@ -7,14 +7,11 @@ 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 = ({
@@ -22,7 +19,6 @@ export const BuyingPolicyDropdownMenu = ({
   name,
   onDelete,
   onUpdate,
-  budgetData = { data: [], total: 0 },
 }: BuyingPolicyDropdownMenuProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -84,7 +80,6 @@ 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,8 +7,6 @@ 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"
@@ -17,7 +15,6 @@ export type UpdateBuyingPolicyDrawerProps = Omit<
   orgUnitId: string;
   contractId: string;
   buyingPolicyId: string;
-  budgetData?: BudgetListResponse;
 };
 
 export const UpdateBuyingPolicyDrawer = ({
@@ -26,7 +23,6 @@ export const UpdateBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   buyingPolicyId,
-  budgetData = { data: [], total: 0 },
   ...props
 }: UpdateBuyingPolicyDrawerProps) => {
   const { buyingPolicy, isBuyingPolicyLoading } = useGetBuyingPolicy(
@@ -97,7 +93,6 @@ export const UpdateBuyingPolicyDrawer = ({
       initialValues={{ ...buyingPolicyDefault, ...(buyingPolicy ?? {}) }}
       orgUnitId={orgUnitId}
       contractId={contractId}
-      budgetData={budgetData}
       {...props}
     />
   );

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

@@ -0,0 +1,35 @@
+import { listBudgetsService } from "../../budgets/services";
+import { QueryOptions, useQuery } from "../../shared/hooks";
+
+import type { BudgetListResponse } from "../../budgets/types";
+
+interface UseGetBudgetsProps {
+  data: {
+    customerId: string;
+    orgUnitId: string;
+  };
+  options?: QueryOptions<BudgetListResponse>;
+}
+
+export const useGetBudgets = ({
+  data: { customerId, orgUnitId },
+  options,
+}: UseGetBudgetsProps) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/budgets/${customerId}/${orgUnitId}`,
+    ({ cookie }) =>
+      listBudgetsService({
+        customerId,
+        unitId: orgUnitId,
+        cookie,
+      }),
+    options
+  );
+
+  return {
+    budgets: data ?? { data: [], total: 0 },
+    hasBudgetsError: error,
+    isBudgetsLoading: isLoading,
+    refetchBudgets: refetch,
+  };
+};

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

@@ -21,7 +21,6 @@ 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 = {
@@ -29,14 +28,12 @@ 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();
 
@@ -136,7 +133,6 @@ export const BuyingPoliciesLayout = ({
                   name={buyingPolicy.name}
                   onUpdate={handleRefetchBuyingPolicies}
                   onDelete={handleRefetchBuyingPolicies}
-                  budgetData={budgetData}
                 />
               }
             />
@@ -191,7 +187,6 @@ export const BuyingPoliciesLayout = ({
             contractId={currentContract?.id ?? ""}
             isOpen={isAddBuyingPolicyDrawerOpen}
             onCreate={handleRefetchBuyingPolicies}
-            budgetData={budgetData}
             {...addBuyingPolicyDrawerProps}
           />
         )}

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

@@ -10,6 +10,7 @@ interface CustomDropdownProps<T> {
   onSelect: (value: T) => void;
   triggerLabel: string;
   highlightText?: (text: string) => React.ReactNode;
+  isOpen?: boolean;
 }
 
 export function CustomDropdown<T>({
@@ -17,11 +18,18 @@ export function CustomDropdown<T>({
   onSelect,
   triggerLabel,
   highlightText = (text) => text,
+  isOpen: controlledIsOpen,
 }: CustomDropdownProps<T>) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(controlledIsOpen ?? false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (controlledIsOpen !== undefined) {
+      setIsOpen(controlledIsOpen);
+    }
+  }, [controlledIsOpen]);
+
   const handleOutsideClick = (e: MouseEvent) => {
     if (
       dropdownRef.current &&

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

@@ -24,7 +24,9 @@ export const useQuery = <TData>(
 ): QueryResult<TData> => {
   const [data, setData] = useState<TData | null>(null);
   const [error, setError] = useState<Error | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState<boolean>(
+    options?.lazy ? false : true
+  );
   const { clientContext } = useBuyerPortal();
 
   const fetchData = useCallback(async () => {

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

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.22";
+export const CURRENT_VERSION = "1.3.23";

package/src/pages/buying-policies.tsx

@@ -1,4 +1,3 @@
-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";
@@ -16,7 +15,6 @@ 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,7 +32,6 @@ export type BuyingPoliciesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
-  budgetData?: BudgetListResponse;
   hasError?: boolean;
   error?: ErrorBoundaryProps;
 };
@@ -68,40 +65,29 @@ const loaderFunction = async (
             currentContract: null,
             currentUser: null,
           },
-          budgetData: { data: [], total: 0 },
         };
       }
 
-      const [
-        currentOrgUnit,
-        user,
-        contract,
-        budgetData,
-        buyingPoliciesResponse,
-      ] = await Promise.all([
-        getOrgUnitBasicDataService({
-          id: orgUnitId,
-          cookie,
-        }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-        getContractDetailsService({
-          contractId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-        listBudgetsService({
-          customerId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-        getBuyingPoliciesService({
-          orgUnitId,
-          contractId,
-          cookie,
-          page,
-          search,
-        }),
-      ]);
+      const [currentOrgUnit, user, contract, buyingPoliciesResponse] =
+        await Promise.all([
+          getOrgUnitBasicDataService({
+            id: orgUnitId,
+            cookie,
+          }),
+          getUserByIdService({ orgUnitId, userId, cookie }),
+          getContractDetailsService({
+            contractId,
+            cookie,
+            unitId: orgUnitId,
+          }),
+          getBuyingPoliciesService({
+            orgUnitId,
+            contractId,
+            cookie,
+            page,
+            search,
+          }),
+        ]);
 
       const { data: buyingPolicies = [], total = 0 } = buyingPoliciesResponse;
 
@@ -122,7 +108,6 @@ const loaderFunction = async (
           currentUser: user,
           currentContract: contract,
         },
-        budgetData: budgetData ?? { data: [], total: 0 },
       };
     }
   );
@@ -140,7 +125,6 @@ const BuyingPoliciesPage = ({
   total,
   hasError,
   error,
-  budgetData = { data: [], total: 0 },
 }: BuyingPoliciesPageData) => (
   <>
     {hasError ? (
@@ -151,7 +135,6 @@ const BuyingPoliciesPage = ({
         search={search}
         page={page}
         total={total}
-        budgetData={budgetData}
       />
     )}
   </>