@vtex/faststore-plugin-buyer-portal 1.3.16 → 1.3.18

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/QuantitySelectorWithPercentage/QuantitySelectorWithPercentage.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { Icon, IconButton, Input } from "@faststore/ui";
+
+interface QuantitySelectorWithPercentageParams {
+  testId?: string;
+  max?: number;
+  min?: number;
+  initial?: number;
+  unitMultiplier?: number;
+  useUnitMultiplier?: boolean;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+  onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
+
+  formatAsPercent?: boolean;
+  allowPercentToggle?: boolean;
+  onFormatToggle?: (formatAsPercent: boolean) => void;
+}
+
+const QuantitySelectorWithPercentage = ({
+  max,
+  min = 1,
+  unitMultiplier = 1,
+  useUnitMultiplier,
+  initial,
+  disabled = false,
+  onChange,
+  onValidateBlur,
+  testId = "fs-quantity-selector",
+  formatAsPercent = true,
+  ...otherProps
+}: QuantitySelectorWithPercentageParams) => {
+  const [quantity, setQuantity] = useState<number>(initial ?? min);
+  const [multipliedUnit, setMultipliedUnit] = useState<number>(
+    quantity * unitMultiplier
+  );
+
+  const [showPercent, setShowPercent] = useState<boolean>(formatAsPercent);
+
+  useEffect(() => {
+    if (initial) setQuantity(initial);
+  }, [initial]);
+
+  useEffect(() => {
+    setShowPercent(formatAsPercent);
+  }, [formatAsPercent]);
+
+  const roundUpQuantityIfNeeded = (q: number) => {
+    if (!useUnitMultiplier) return q;
+    return Math.ceil(q / unitMultiplier) * unitMultiplier;
+  };
+
+  const isLeftDisabled = quantity === min;
+  const isRightDisabled = quantity === max;
+
+  const validateQuantityBounds = (n: number): number => {
+    const maxValue = min ? Math.max(n, min) : n;
+    return max
+      ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
+      : maxValue;
+  };
+
+  const increase = () => changeQuantity(1);
+  const decrease = () => changeQuantity(-1);
+
+  const changeQuantity = (delta: number) => {
+    const next = validateQuantityBounds(quantity + delta);
+    onChange?.(next);
+    setQuantity(next);
+    setMultipliedUnit(next * unitMultiplier);
+  };
+
+  const validateBlur = () => {
+    const q = validateQuantityBounds(quantity);
+    const rounded = roundUpQuantityIfNeeded(q);
+
+    const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
+    const isOut = quantity > maxValue || quantity < min;
+    if (isOut) {
+      onValidateBlur?.(min, maxValue, rounded);
+    }
+
+    setQuantity(() => {
+      setMultipliedUnit(rounded);
+      onChange?.(rounded / unitMultiplier);
+      return rounded / unitMultiplier;
+    });
+  };
+
+  const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(/\s+/g, "").replace(/[^\d]/g, "");
+
+    const numeric = Number(raw || "0");
+    setQuantity(numeric);
+  };
+
+  const displayValue = useMemo(() => {
+    const base = useUnitMultiplier ? multipliedUnit : quantity;
+    if (showPercent) return `${base}%`;
+    return String(base);
+  }, [showPercent, useUnitMultiplier, multipliedUnit, quantity]);
+
+  return (
+    <div
+      data-fs-quantity-selector={disabled ? "disabled" : "true"}
+      data-testid={testId}
+      {...otherProps}
+      style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
+    >
+      <IconButton
+        data-quantity-selector-button="left"
+        icon={<Icon name="Minus" width={16} height={16} weight="bold" />}
+        aria-label="Decrement Quantity"
+        aria-controls="quantity-selector-input"
+        disabled={isLeftDisabled || disabled}
+        onClick={decrease}
+        testId={`${testId}-left-button`}
+        size="small"
+      />
+
+      <Input
+        data-quantity-selector-input
+        id="quantity-selector-input"
+        aria-label={showPercent ? "Quantity (percent)" : "Quantity"}
+        value={displayValue}
+        onChange={changeInputValue}
+        onBlur={validateBlur}
+        onInput={(event: React.FormEvent<HTMLInputElement>) => {
+          const input = event.currentTarget;
+          input.value = input.value.replace(/[^0-9%]/g, "");
+        }}
+        disabled={disabled}
+      />
+
+      <IconButton
+        data-quantity-selector-button="right"
+        aria-controls="quantity-selector-input"
+        aria-label="Increment Quantity"
+        disabled={isRightDisabled || disabled}
+        icon={<Icon name="Plus" width={16} height={16} weight="bold" />}
+        onClick={increase}
+        testId={`${testId}-right-button`}
+        size="small"
+      />
+    </div>
+  );
+};
+
+export default QuantitySelectorWithPercentage;

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

@@ -1,8 +1,8 @@
 export {
   AutocompleteDropdown,
+  useAutocompleteDropdownContext,
   type AutocompleteDropdownContextProps,
   type AutocompleteDropdownProps,
-  useAutocompleteDropdownContext,
 } from "./AutocompleteDropdown/AutocompleteDropdown";
 export { useAutocompletePosition } from "./AutocompleteDropdown/useAutocompletePosition";
 export { BasicCard, type BasicCardProps } from "./BasicCard/BasicCard";
@@ -12,19 +12,19 @@ export {
   type BasicDropdownMenuProps,
 } from "./BasicDropdownMenu/BasicDropdownMenu";
 export {
-  BuyerPortalProvider,
-  type BuyerPortalProviderProps,
   BuyerPortalContext,
+  BuyerPortalProvider,
   type BuyerPortalContextType,
+  type BuyerPortalProviderProps,
 } from "./BuyerPortalProvider/BuyerPortalProvider";
 export { Card, CardBody, CardFooter, CardHeader } from "./Card";
 export {
   CustomerSwitchDrawer,
   CustomerSwitchOption,
-  type CustomerSwitchOptionProps,
   CustomerSwitchOptionsList,
-  type CustomerSwitchOptionsListProps,
   CustomerSwitchSearch,
+  type CustomerSwitchOptionProps,
+  type CustomerSwitchOptionsListProps,
   type CustomerSwitchSearchProps,
 } from "./CustomerSwitch";
 export { default as DropdownFilter } from "./DropdownFilter/DropdownFilter";
@@ -32,6 +32,10 @@ export {
   ErrorMessage,
   type ErrorMessageProps,
 } from "./ErrorMessage/ErrorMessage";
+export {
+  HeaderInside,
+  type HeaderInsideProps,
+} from "./HeaderInside/HeaderInside";
 export {
   HierarchyTree,
   type HierarchyTreeLevelProps,
@@ -42,37 +46,34 @@ export { Icon } from "./Icon";
 export { InputText, type InputTextProps } from "./InputText/InputText";
 export { default as InternalSearch } from "./InternalSearch/InternalSearch";
 export { InternalTopBar } from "./InternalTopbar/InternalTopbar";
+export {
+  LetterHighlight,
+  type LetterHighlightProps,
+} from "./LetterHighlight/LetterHighlight";
+export {
+  LevelDivider,
+  type LevelDividerProps,
+} from "./LevelDivider/LevelDivider";
 export { Logo } from "./Logo/Logo";
 export { MainLinksDropdownMenu } from "./MainLinksDropdownMenu/MainLinksDropdownMenu";
+export { Pagination } from "./Pagination/Pagination";
 export { default as SortFilter } from "./SortFilter/SortFilter";
-export { Tab, type TabProps, useTab } from "./Tab/Tab";
+export { Tab, useTab, type TabProps } from "./Tab/Tab";
+export { Table, type TableProps } from "./Table/Table";
 export { Tag, type TagProps } from "./Tag/Tag";
 export { default as Toast } from "./Toast/Toast";
 export {
   VerticalNav,
   type VerticalNavMenuProps,
 } from "./VerticalNav/VerticalNavMenu";
-export {
-  LetterHighlight,
-  type LetterHighlightProps,
-} from "./LetterHighlight/LetterHighlight";
-export {
-  HeaderInside,
-  type HeaderInsideProps,
-} from "./HeaderInside/HeaderInside";
-export { Pagination } from "./Pagination/Pagination";
-export { Table, type TableProps } from "./Table/Table";
-export {
-  LevelDivider,
-  type LevelDividerProps,
-} from "./LevelDivider/LevelDivider";
 
-export { Paginator } from "./Paginator/Paginator";
 export type { CounterProps as PaginatorCounterProps } from "./Paginator/Counter";
 export type { NextPageButtonProps as PaginatorNextPageButtonProps } from "./Paginator/NextPageButton";
+export { Paginator } from "./Paginator/Paginator";
 
 export { EmptyState, type EmptyStateProps } from "./EmptyState/EmptyState";
-export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
-export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";
 export { default as Error } from "./Error/Error";
+export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
 export { IconBookmarked } from "./IconBookmarked/IconBookmarked";
+export { default as QuantitySelectorWithPercentage } from "./QuantitySelectorWithPercentage/QuantitySelectorWithPercentage";
+export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";

package/src/features/shared/types/CurrencyType.d.ts

@@ -0,0 +1,4 @@
+type CurrencyType = "USD" | "BRL";
+type LocaleType = "en-US" | "pt-BR";
+
+export type { CurrencyType, LocaleType };

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

@@ -1,10 +1,11 @@
+export { type AuthRouteProps } from "./AuthRouteProps";
 export type { BreadcrumbData } from "./BreadcrumbData";
+export type { CurrencyType, LocaleType } from "./CurrencyType";
 export type { LoaderData } from "./LoaderData";
 export type { IPagination } from "./Pagination";
-export type { ScopeInput } from "./ScopeInput";
 export type {
-  PaymentMethodsIdArray,
   PaymentMethodResponse,
+  PaymentMethodsIdArray,
   PaymentMethodsReqCommonParams,
 } from "./PaymentMethodsClientTypes";
-export { type AuthRouteProps } from "./AuthRouteProps";
+export type { ScopeInput } from "./ScopeInput";

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

@@ -0,0 +1,24 @@
+export const parseAmount = (raw?: string) => {
+  if (!raw) return 0;
+  const cleaned = raw
+    .toString()
+    .replace(/[^\d.,-]/g, "")
+    .trim();
+
+  const lastComma = cleaned.lastIndexOf(",");
+  const lastDot = cleaned.lastIndexOf(".");
+  let normalized = cleaned;
+
+  if (lastComma > -1 && lastDot > -1) {
+    if (lastComma > lastDot) {
+      normalized = cleaned.replace(/\./g, "").replace(",", ".");
+    } else {
+      normalized = cleaned.replace(/,/g, "");
+    }
+  } else if (lastComma > -1) {
+    normalized = cleaned.replace(",", ".");
+  }
+
+  const n = Number(normalized);
+  return Number.isFinite(n) ? n : 0;
+};

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.16";
+export const CURRENT_VERSION = "1.3.18";