@vtex/faststore-plugin-buyer-portal 1.3.17 → 1.3.19

package/src/features/budgets/components/CreateBudgetDrawer/CreateBudgetDrawer.tsx

@@ -11,14 +11,18 @@ import {
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { sortingOptionsAllocations } from "../../../shared/utils";
+import { parseAmount } from "../../../shared/utils/budgetAmountParse";
 import { getKeyByValue } from "../../../shared/utils/getKeyByValue";
-import { useCreateBudget, useUpdateBudget } from "../../hooks";
+import { useCreateBudget } from "../../hooks/useCreateBudget";
 import { useGetAllocations } from "../../hooks/useGetAllocations";
+import { useUpdateBudget } from "../../hooks/useUpdateBudget";
 import { listBudgetsService } from "../../services";
-import { BudgetInput, BudgetList } from "../../types";
 import { BudgetAddForm } from "../BudgetAddForm/BudgetAddForm";
 import { BudgetAddSuccess } from "../BudgetAddSuccess/BudgetAddSuccess";
 import { BudgetAllocationsSelection } from "../BudgetAllocationsSelection/BudgetAllocationsSelection";
+import { BudgetNotificationForm } from "../BudgetNotificationForm/BudgetNotificationForm";
+
+import type { BudgetInput, BudgetList, BudgetListResponse } from "../../types";
 
 const createTouchedState = (): Record<keyof BudgetInput, boolean> => ({
   name: false,
@@ -31,6 +35,7 @@ const createTouchedState = (): Record<keyof BudgetInput, boolean> => ({
   allocations: false,
   preventCheckoutBudgetExceeded: false,
   preventCheckoutBudgetExpired: false,
+  notifications: false,
 });
 
 const isBudgetValid = (budget: BudgetInput) => {
@@ -93,6 +98,7 @@ export const CreateBudgetDrawer = ({
     preventCheckoutBudgetExpired: false,
     description: "",
     allocations: [],
+    notifications: undefined,
   });
 
   const [touched, setTouched] = useState(createTouchedState);
@@ -101,6 +107,8 @@ export const CreateBudgetDrawer = ({
   const [blockOnExpiration, setBlockOnExpiration] = useState(true);
   const [listBudgetsLoading, setListBudgetsLoading] = useState(false);
   const [firstBudget, setFirstBudget] = useState<BudgetList | null>(null);
+  const [showNotificationsUsersError, setShowNotificationsUsersError] =
+    useState(false);
 
   const { mutate: createBudget, isLoading: isCreatingBudget } = useCreateBudget(
     {
@@ -108,13 +116,15 @@ export const CreateBudgetDrawer = ({
         onSuccess: async () => {
           setListBudgetsLoading(true);
 
-          const { data, total } = await listBudgetsService({
+          const res = await listBudgetsService({
             customerId: contractId,
             unitId,
             page: 1,
             cookie,
           }).finally(() => setListBudgetsLoading(false));
 
+          const { data, total } = res as BudgetListResponse;
+
           if (total === 1) {
             setStep("confirmation");
             setFirstBudget(data[0]);
@@ -129,7 +139,7 @@ export const CreateBudgetDrawer = ({
           close();
           router.reload();
         },
-        onError: (error) =>
+        onError: (error: Error) =>
           pushToast({ message: error.message, status: "ERROR" }),
       },
     }
@@ -156,7 +166,7 @@ export const CreateBudgetDrawer = ({
           close();
           router.reload();
         },
-        onError: (error) => {
+        onError: (error: Error) => {
           pushToast({
             message: error?.message || "An error occurred. Please try again.",
             status: "ERROR",
@@ -166,15 +176,11 @@ export const CreateBudgetDrawer = ({
     });
 
   const handleChange = useCallback(
-    (field: keyof BudgetInput, value: string | boolean) => {
+    <K extends keyof BudgetInput>(field: K, value: BudgetInput[K]) => {
       if (field === "amount" && typeof value === "string") {
-        setBudget((prev) => ({
-          ...prev,
-          amount: value,
-        }));
+        setBudget((prev) => ({ ...prev, amount: value }));
         return;
       }
-
       if (
         (field === "startDate" || field === "expirationDate") &&
         typeof value === "string" &&
@@ -208,18 +214,24 @@ export const CreateBudgetDrawer = ({
       pushToast({ message: "Fill in all required fields.", status: "ERROR" });
       return;
     }
+    const hasUsers = (budget?.notifications?.users?.length ?? 0) > 0;
+    const hasThresholds = (budget?.notifications?.thresholds?.length ?? 0) > 0;
 
-    const payload = {
+    const payload: BudgetInput = {
       ...budget,
+      ...(hasUsers &&
+        hasThresholds && {
+          notifications: budget.notifications,
+        }),
       amount: budget.amount ? budget.amount.replace(",", "") : "0",
       allocations: skipAllocations
         ? []
-        : selectedAllocations.map((allocation) => ({
+        : (selectedAllocations.map((allocation) => ({
             id: ["USER", "ADDRESS"].includes(allocation.type)
               ? allocation.id
               : allocation.name,
             type: allocation.type,
-          })),
+          })) as NonNullable<BudgetInput["allocations"]>),
       preventCheckoutBudgetExceeded: false,
       preventCheckoutBudgetExpired: false,
     };
@@ -241,9 +253,12 @@ export const CreateBudgetDrawer = ({
       description: budget.description,
       startDate: budget.startDate,
       endDate: budget.endDate,
+      expirationDate: budget.expirationDate,
       autoResetOnPeriodEnd: budget.autoResetOnPeriodEnd,
       preventCheckoutBudgetExceeded: enforcePolicy ? blockOnExceed : false,
       preventCheckoutBudgetExpired: enforcePolicy ? blockOnExpiration : false,
+      allocations: [],
+      notifications: budget.notifications,
     };
 
     updateBudget({
@@ -280,18 +295,31 @@ export const CreateBudgetDrawer = ({
         }
         onClose={close}
       />
-
       <BasicDrawer.Body>
         {step === "form" && (
-          <BudgetAddForm
-            budget={budget}
-            setBudget={setBudget}
-            touched={touched}
-            setTouched={setTouched}
-            handleChange={handleChange}
-            handleBlur={handleBlur}
-            readonly={readonly}
-          />
+          <>
+            <BudgetAddForm
+              budget={budget}
+              setBudget={setBudget}
+              touched={touched}
+              setTouched={setTouched}
+              handleChange={handleChange}
+              handleBlur={handleBlur}
+              readonly={readonly}
+            />
+            <div data-fs-divider />
+            <BudgetNotificationForm
+              budget={budget}
+              contractId={contractId}
+              unitId={unitId}
+              handleChange={handleChange}
+              totalAmount={parseAmount(budget.amount)}
+              currency="USD"
+              locale="en-US"
+              readonly={readonly}
+              showUsersError={showNotificationsUsersError}
+            />
+          </>
         )}
 
         {step === "allocations" && (
@@ -337,7 +365,40 @@ export const CreateBudgetDrawer = ({
             </BasicDrawer.Button>
             <BasicDrawer.Button
               variant="confirm"
-              onClick={() => setStep("allocations")}
+              onClick={() => {
+                const notificationsEnabled = Boolean(
+                  budget?.notifications?.hasNotification
+                );
+                const hasUsers =
+                  (budget?.notifications?.users?.length ?? 0) > 0;
+                if (!isBudgetValid(budget)) {
+                  setTouched(
+                    Object.keys(budget).reduce(
+                      (acc, key) => ({ ...acc, [key]: true }),
+                      {} as Record<keyof BudgetInput, boolean>
+                    )
+                  );
+                  if (notificationsEnabled && !hasUsers)
+                    setShowNotificationsUsersError(true);
+                  pushToast({
+                    message: "Fill in all required fields.",
+                    status: "ERROR",
+                  });
+                  return;
+                }
+
+                if (notificationsEnabled && !hasUsers) {
+                  setShowNotificationsUsersError(true);
+                  pushToast({
+                    message:
+                      "Add at least one user to notifications or turn it off.",
+                    status: "ERROR",
+                  });
+                  return;
+                }
+                setShowNotificationsUsersError(false);
+                setStep("allocations");
+              }}
             >
               Continue
             </BasicDrawer.Button>

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -1,6 +1,7 @@
 @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 @import "../BudgetAddForm/budget-add-form.scss";
+@import "../BudgetNotificationForm/budget-notification-form.scss";
 @import "../BudgetAllocationsSelection/budget-allocations-selection.scss";
 @import "../BudgetAddSuccess/budget-add-success.scss";
 
@@ -29,6 +30,11 @@
       max-width: 40rem;
     }
 
+    [data-fs-divider] {
+      border: var(--fs-border-radius-small) solid #e0e0e0;
+      margin: var(--fs-spacing-4) 0rem;
+    }
+
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end;
       gap: var(--fs-spacing-1);

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/DeleteBudgetAllocationDrawer.tsx

@@ -10,7 +10,7 @@ import {
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
-import { useDeleteAllocation } from "../../hooks";
+import { useDeleteAllocation } from "../../hooks/useDeleteAllocations";
 
 import type { BudgetAllocation } from "../../types";
 

package/src/features/budgets/components/EditBudgetDrawer/EditBudgetDrawer.tsx

@@ -6,8 +6,10 @@ import { useUI } from "@faststore/ui";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
+import { parseAmount } from "../../../shared/utils/budgetAmountParse";
 import { useUpdateBudget } from "../../hooks";
 import { BudgetAddForm } from "../BudgetAddForm/BudgetAddForm";
+import { BudgetNotificationForm } from "../BudgetNotificationForm/BudgetNotificationForm";
 
 import type { BudgetInput } from "../../types";
 
@@ -22,6 +24,7 @@ const getInitialBudget = (initial?: BudgetInput): BudgetInput => ({
   preventCheckoutBudgetExceeded: false,
   preventCheckoutBudgetExpired: false,
   allocations: [],
+  notifications: initial?.notifications,
   ...initial,
 });
 
@@ -36,6 +39,7 @@ const createTouchedObject = (): Record<keyof BudgetInput, boolean> => ({
   preventCheckoutBudgetExceeded: false,
   preventCheckoutBudgetExpired: false,
   allocations: false,
+  notifications: false,
 });
 
 const isBudgetValid = (budget: BudgetInput) => {
@@ -76,6 +80,8 @@ export const EditBudgetDrawer = ({
     getInitialBudget(initialBudget)
   );
   const [touched, setTouched] = useState(createTouchedObject);
+  const [showNotificationsUsersError, setShowNotificationsUsersError] =
+    useState(false);
 
   const { mutate: updateBudget, isLoading } = useUpdateBudget({
     options: {
@@ -85,7 +91,7 @@ export const EditBudgetDrawer = ({
         close();
         router.reload();
       },
-      onError: (error) => {
+      onError: (error: Error) => {
         pushToast({
           message: error?.message || "An error occurred. Please try again.",
           status: "ERROR",
@@ -117,6 +123,7 @@ export const EditBudgetDrawer = ({
       preventCheckoutBudgetExceeded: true,
       preventCheckoutBudgetExpired: true,
       allocations: true,
+      notifications: true,
     });
 
     if (!isBudgetValid(budget)) {
@@ -127,8 +134,28 @@ export const EditBudgetDrawer = ({
       return;
     }
 
+    const notificationsEnabled = Boolean(
+      budget?.notifications?.hasNotification
+    );
+    const hasUsers = (budget?.notifications?.users?.length ?? 0) > 0;
+    if (notificationsEnabled && !hasUsers) {
+      setShowNotificationsUsersError(true);
+      pushToast({
+        message: "Add at least one user to notifications or turn it off.",
+        status: "ERROR",
+      });
+      return;
+    }
+    setShowNotificationsUsersError(false);
+
+    const hasThresholds = (budget?.notifications?.thresholds?.length ?? 0) > 0;
+
     const payload: BudgetInput = {
       ...budget,
+      ...(hasUsers &&
+        hasThresholds && {
+          notifications: budget.notifications,
+        }),
       endDate: budget.endDate || budget.expirationDate,
       amount: budget.amount ? String(budget.amount).replace(",", "") : "0",
       allocations: initialBudget?.allocations ?? [],
@@ -157,6 +184,18 @@ export const EditBudgetDrawer = ({
           handleBlur={handleBlur}
           readonly={readonly}
         />
+        <div data-fs-divider />
+        <BudgetNotificationForm
+          budget={budget}
+          contractId={contractId}
+          unitId={orgUnitId}
+          handleChange={handleChange}
+          totalAmount={parseAmount(budget.amount)}
+          currency="USD"
+          locale="en-US"
+          readonly={readonly}
+          showUsersError={showNotificationsUsersError}
+        />
       </BasicDrawer.Body>
 
       <BasicDrawer.Footer>

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -3,6 +3,7 @@
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
   @import "../BudgetAddForm/budget-add-form.scss";
+  @import "../BudgetNotificationForm/budget-notification-form.scss";
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
@@ -31,6 +32,10 @@
         width: 100%;
       }
     }
+    [data-fs-divider] {
+      border: var(--fs-border-radius-small) solid #e0e0e0;
+      margin: var(--fs-spacing-4) 0rem;
+    }
 
     footer[data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end;

package/src/features/budgets/hooks/useDebouncedSearchBudgetNotification.ts

@@ -0,0 +1,37 @@
+import { useDebounce } from "../../shared/hooks";
+import { DEBOUNCE_TIMEOUT } from "../../shared/utils";
+
+import { useListUsers } from "./useListUsers";
+
+type Params = {
+  customerId: string;
+  unitId: string;
+  search?: string;
+};
+
+export const useDebouncedSearchBudgetNotification = ({
+  customerId,
+  unitId,
+  search = "",
+}: Params) => {
+  const debouncedSearchTerm = useDebounce(search, DEBOUNCE_TIMEOUT);
+  const isDebouncing = search !== debouncedSearchTerm;
+
+  const { listUsers, isListUsersLoading } = useListUsers({
+    keys: `${debouncedSearchTerm}`,
+    data: {
+      customerId,
+      unitId,
+      params: {
+        search: debouncedSearchTerm,
+        page: 1,
+      },
+    },
+  });
+
+  return {
+    usersResponse: listUsers,
+    isLoadingUsers: isListUsersLoading,
+    isDebouncing,
+  };
+};

package/src/features/budgets/hooks/useListUsers.ts

@@ -29,7 +29,7 @@ export const useListUsers = ({
       listUsersService({
         unitId,
         params: {
-          budgetId,
+          ...(budgetId && { budgetId }),
           name: search,
           page,
         },

package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx

@@ -16,11 +16,12 @@ import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetAllocationsTable } from "../../components/BudgetAllocationsTable/BudgetAllocationsTable";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
+import { BudgetNotificationsInfo } from "../../components/BudgetNotificationsInfo/BudgetNotificationsInfo";
 import { BudgetRemainingBalance } from "../../components/BudgetRemainingBalance/BudgetRemainingBalance";
 import { BudgetSettingsInfoBalance } from "../../components/BudgetSettingsInfo/BudgetSettingsInfo";
 import { CreateBudgetAllocationDrawer } from "../../components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
 import { EditBudgetDrawer } from "../../components/EditBudgetDrawer/EditBudgetDrawer";
-import { useListAllocations } from "../../hooks";
+import { useListAllocations } from "../../hooks/useListAllocations";
 
 import type { Budget, BudgetAllocationListResponse } from "../../types";
 
@@ -203,6 +204,13 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
               contractId={contract?.id ?? ""}
             />
 
+            <BudgetNotificationsInfo
+              initialBudget={budget}
+              budgetId={budget.id}
+              orgUnitId={orgUnit?.id ?? ""}
+              contractId={contract?.id ?? ""}
+            />
+
             {hasMounted && (
               <BudgetAllocationsTable
                 loading={isAllocationsLoading && !loadingLoadMore}

package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss

@@ -4,12 +4,14 @@
 @import "../../components/BudgetAllocationsSelection/budget-allocations-selection.scss";
 @import "../../../budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss";
 @import "../../components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss";
+@import "../../components/BudgetEditNotificationDrawer/budget-edit-notification-drawer.scss";
 
 [data-fs-bp-budgets-details-layout] {
   @import "../../components/CreateBudgetDrawer/create-budget-drawer.scss";
   @import "../../components/BudgetAddForm/budget-add-form.scss";
   @import "../../components/BudgetRemainingBalance/budget-remaining-balance.scss";
-
+  @import "../../components/BudgetNotificationForm/budget-notification-form.scss";
+  @import "../../components/BudgetNotificationsInfo/budget-notifications-info.scss";
   @import "../../components/BudgetSettingsInfo/budget-settings-info.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../components/BudgetsTable/budgets-table.scss";
@@ -37,6 +39,17 @@
       cursor: pointer;
     }
   }
+  [data-fs-bp-budget-notifications-empty] {
+    [data-fs-empty-state-section] {
+      padding: 4rem 17rem;
+      text-align: center;
+      color: #858585;
+
+      @include media("<=tablet") {
+        padding: 4rem clamp(1rem, 5vw, 17rem);
+      }
+    }
+  }
 
   [data-fs-bp-budgets-details-section] {
     min-height: calc(100vh - calc(var(--fs-spacing-9) + var(--fs-spacing-0)));

package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
+import { BudgetEditNotificationDrawer } from "../../components/BudgetEditNotificationDrawer/BudgetEditNotificationDrawer";
 import { BudgetsTable } from "../../components/BudgetsTable/BudgetsTable";
 import { CreateBudgetAllocationDrawer } from "../../components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
 import { CreateBudgetDrawer } from "../../components/CreateBudgetDrawer/CreateBudgetDrawer";
@@ -73,6 +74,12 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     ...createBudgetDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openNotificationDrawer,
+    isOpen: isNotificationDrawerOpen,
+    ...notificationDrawerProps
+  } = useDrawerProps();
+
   async function loadMore() {
     setPaginationLoading(true);
     setLoading(true);
@@ -134,6 +141,26 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     [page, contract?.id, orgUnit?.id, cookie]
   );
 
+  const handleCreateNotification = useCallback(
+    async (budgetId: string) => {
+      setSelectedBudgetId(budgetId);
+      try {
+        const budgetsData = await getBudgetByIdService({
+          budgetId,
+          customerId: contract?.id ?? "",
+          unitId: orgUnit?.id ?? "",
+          cookie,
+        });
+
+        setBudgetToEdit({ ...budgetsData, amount: String(budgetsData.amount) });
+        openNotificationDrawer();
+      } catch (error) {
+        console.error("Failed to load budget:", error);
+      }
+    },
+    [page, contract?.id, orgUnit?.id, cookie]
+  );
+
   return (
     <GlobalLayout>
       <FinanceTabsLayout pageName="Finance and Compliance">
@@ -164,6 +191,7 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
                   total={Number(total ?? 0)}
                   onClickAllocationPage={handleAddAllocation}
                   onClickEditBudget={handleBudgetEditPage}
+                  onClickCreateNotification={handleCreateNotification}
                   openDeleteDrawer={(budgetId) => {
                     setSelectedBudgetId(budgetId);
                     openDeleteDrawer();
@@ -232,6 +260,17 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
               initialBudget={budgetsToEdit}
             />
           )}
+
+          {isNotificationDrawerOpen && budgetsToEdit && (
+            <BudgetEditNotificationDrawer
+              {...notificationDrawerProps}
+              isOpen={isNotificationDrawerOpen}
+              budget={budgetsToEdit}
+              budgetId={selectedBudgetId}
+              orgUnitId={orgUnit?.id ?? ""}
+              contractId={contract?.id ?? ""}
+            />
+          )}
         </section>
       </FinanceTabsLayout>
     </GlobalLayout>

package/src/features/budgets/layouts/BudgetsLayout/budgets-layout.scss

@@ -4,7 +4,7 @@
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "@faststore/ui/src/components/molecules/Table/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-
+  @import "../../components/BudgetNotificationForm/budget-notification-form.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
   @import "../../components/BudgetsTable/budgets-table.scss";

package/src/features/budgets/types/index.ts

@@ -25,6 +25,22 @@ export type BudgetAllocationListResponse = {
   data: BudgetAllocation[];
   total: number;
 };
+
+export type NotificationThresholds = {
+  value: number;
+};
+export type NotificationUsers = {
+  userId: string;
+  userName: string;
+  userEmail: string;
+};
+
+export type BudgetNotification = {
+  hasNotification: boolean;
+  thresholds: NotificationThresholds[];
+  users: NotificationUsers[];
+};
+
 export type Budget = {
   id: string;
   name: string;
@@ -39,6 +55,7 @@ export type Budget = {
   preventCheckoutBudgetExceeded?: boolean;
   preventCheckoutBudgetExpired?: boolean;
   allocations?: BudgetAllocation[];
+  notifications?: BudgetNotification;
 };
 
 export type BudgetInputForm = Omit<BudgetInput, "amount"> & {

package/src/features/shared/components/AutocompleteDropdown/AutocompleteDropdownItem.tsx

@@ -29,7 +29,11 @@ export const AutocompleteDropdownItem = ({
       }
       data-fs-bp-autocomplete-dropdown-option-selected={isSelected}
       onMouseEnter={() => setFocusedItemIndex(index)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
       onClick={(e) => {
+        e.stopPropagation();
         if (closeOnClick) {
           close();
         }

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

@@ -4,6 +4,11 @@ import { AutocompleteDropdown } from "..";
 import { useDebouncedSearchOrgUnit } from "../../../users/hooks";
 import { OptionSelected } from "../OptionSelected/OptionSelected";
 
+type Option = {
+  name: string;
+  id: string;
+};
+
 export type OrgUnitInputSearchProps = Omit<
   ComponentProps<typeof AutocompleteDropdown>,
   "onSelect" | "label" | "onConfirmKeyPress"
@@ -25,9 +30,15 @@ export const OrgUnitInputSearch = ({
 }: OrgUnitInputSearchProps) => {
   const [autocompleteInputValue, setAutocompleteInputValue] = useState("");
 
-  const { searchedOrgUnits } = useDebouncedSearchOrgUnit(
-    autocompleteInputValue
-  );
+  const { searchedOrgUnits, isSearchedOrgUnitsLoading } =
+    useDebouncedSearchOrgUnit(autocompleteInputValue);
+
+  const loadingObject: Option = { id: "loading", name: "loading..." };
+
+  const handleSelect = (option: Option) => {
+    if (option.id === loadingObject.id) return;
+    onSelect?.(option);
+  };
 
   return orgUnit.name ? (
     <OptionSelected
@@ -47,15 +58,8 @@ export const OrgUnitInputSearch = ({
       {...otherProps}
       label="Search organizational units"
       value={autocompleteInputValue}
-      options={searchedOrgUnits}
-      onConfirmKeyPress={(option) =>
-        onSelect?.(
-          option as {
-            name: string;
-            id: string;
-          }
-        )
-      }
+      options={isSearchedOrgUnitsLoading ? [loadingObject] : searchedOrgUnits}
+      onConfirmKeyPress={handleSelect}
       onChange={(event) => {
         setAutocompleteInputValue(event.currentTarget.value);
       }}
@@ -65,7 +69,7 @@ export const OrgUnitInputSearch = ({
           closeOnClick
           index={index}
           isSelected={orgUnit?.id === option?.id}
-          onClick={() => onSelect?.(option)}
+          onClick={() => handleSelect(option)}
         >
           {option?.name}
         </AutocompleteDropdown.Item>