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

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.19] - 2025-11-05
+
+### Added
+
+- Add isLoading state to orgUnit search input
+
+## [1.3.18] - 2025-11-05
+
+### Added
+
+- Responsiviness to Roles and Roles Details page
+
+### Added
+
+- Notifications details on budget and integration
+
+### Added
+
+- Add budget notification page
+
 ## [1.3.17] - 2025-11-03
 
 ### Added
@@ -106,13 +126,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.2.4] - 2025-10-16
 
 ### Added
-
-- Responsiviness to Roles and Roles Details page
-
-### Added
-
 - Responsiviness adjustment to to Buying policies page
 
+
 ### Added
 
 - Responsiviness to Buying policies page
@@ -201,7 +217,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.17...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.19...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
@@ -216,6 +232,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.19]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.18...v1.3.19
+[1.3.18]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.17...v1.3.18
 [1.3.17]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.16...v1.3.17
 [1.3.16]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.15...v1.3.16
 [1.3.15]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.14...v1.3.15

package/package.json

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

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

@@ -11,7 +11,7 @@ import {
   InputText,
 } from "../../../shared/components";
 import { useDebounce } from "../../../shared/hooks";
-import { useDeleteBudget } from "../../hooks";
+import { useDeleteBudget } from "../../hooks/useDeleteBudget";
 
 export interface BudgetDeleteDrawerProps
   extends Omit<BasicDrawerProps, "children"> {

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

@@ -0,0 +1,139 @@
+import { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+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 { BudgetNotificationForm } from "../BudgetNotificationForm/BudgetNotificationForm";
+
+import type { BudgetInput, BudgetNotification } from "../../types";
+
+interface BudgetEditNotificationDrawerProps
+  extends Omit<BasicDrawerProps, "children"> {
+  budget: BudgetInput;
+  budgetId: string;
+  orgUnitId: string;
+  contractId: string;
+}
+
+export function BudgetEditNotificationDrawer({
+  budget,
+  budgetId,
+  close,
+  orgUnitId,
+  contractId,
+  ...props
+}: BudgetEditNotificationDrawerProps) {
+  const { pushToast } = useUI();
+  const { clientContext } = useBuyerPortal();
+  const router = useRouter();
+
+  const [notifications, setNotifications] = useState<
+    BudgetNotification | undefined
+  >(budget.notifications);
+  const [showNotificationsUsersError, setShowNotificationsUsersError] =
+    useState(false);
+
+  const { mutate: updateBudget, isLoading } = useUpdateBudget({
+    options: {
+      onSuccess: () => {
+        pushToast({ message: "Budget updated successfully.", status: "INFO" });
+        close();
+        router.reload();
+      },
+      onError: (error: Error) => {
+        pushToast({
+          message: error?.message || "An error occurred. Please try again.",
+          status: "ERROR",
+        });
+      },
+    },
+  });
+
+  const handleChange = useCallback(
+    <K extends keyof BudgetInput>(field: K, value: BudgetInput[K]) => {
+      if (field !== "notifications") return;
+
+      const next = value as BudgetInput["notifications"];
+
+      setNotifications(next);
+    },
+    [notifications]
+  );
+
+  const handleSubmit = () => {
+    const notificationsEnabled = Boolean(notifications?.hasNotification);
+    const hasUsers = (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 payload: BudgetInput = {
+      ...budget,
+      endDate: budget.endDate || budget.expirationDate,
+      amount: budget.amount ? String(budget.amount).replace(",", "") : "0",
+      allocations: budget?.allocations ?? [],
+      notifications: notifications ?? {
+        hasNotification: false,
+        thresholds: [],
+        users: [],
+      },
+    };
+
+    updateBudget({
+      budgetId,
+      cookie: clientContext.cookie,
+      customerId: contractId,
+      data: payload,
+      unitId: orgUnitId,
+    });
+  };
+
+  return (
+    <BasicDrawer
+      data-fs-bp-budget-notifications-drawer
+      close={close}
+      {...props}
+    >
+      <BasicDrawer.Heading title="Edit notifications" onClose={close} />
+
+      <BasicDrawer.Body>
+        <BudgetNotificationForm
+          budget={{ ...budget, notifications }}
+          handleChange={handleChange}
+          totalAmount={parseAmount(budget.amount)}
+          currency="USD"
+          locale="en-US"
+          unitId={orgUnitId}
+          contractId={contractId}
+          showUsersError={showNotificationsUsersError}
+        />
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer data-fs-bp-budget-notifications-drawer-footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          onClick={handleSubmit}
+          disabled={isLoading}
+          isLoading={isLoading}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+}

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

@@ -0,0 +1,34 @@
+
+
+[data-fs-bp-budget-notifications-drawer] {
+  @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+  @import "../../../shared/components/EmptyState/empty-state.scss";
+  @import "../../../shared/components/InputText/input-text.scss";
+  @import "../../../shared/components/ErrorMessage/error-message.scss";
+
+  &[data-fs-bp-basic-drawer] > [data-fs-bp-basic-drawer-footer] {
+    justify-content: flex-end;
+    gap: var(--fs-spacing-1);
+  }
+
+  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
+    width: 100%;
+    max-width: none;
+
+    @include media(">=tablet") {
+      max-width: 30rem;
+    }
+
+    @include media(">=notebook") {
+      max-width: 40rem;
+    }
+  }
+
+  [data-fs-bp-basic-drawer-body] {
+    overflow-y: auto;
+  }
+
+  [data-fs-bp-budget-notifications-drawer-name] {
+    color: #0366dd;
+  }
+}

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

@@ -0,0 +1,361 @@
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
+
+import { Icon, Toggle } from "@faststore/ui";
+
+import {
+  AutocompleteDropdown,
+  QuantitySelectorWithPercentage,
+  Table,
+} from "../../../shared/components";
+import { CurrencyType, LocaleType } from "../../../shared/types";
+import { useDebouncedSearchBudgetNotification } from "../../hooks/useDebouncedSearchBudgetNotification";
+import BudgetUsersTable from "../BudgetUsersTable/BudgetUsersTable";
+
+import type {
+  BudgetInput,
+  BudgetNotification,
+  NotificationThresholds,
+  NotificationUsers,
+} from "../../types";
+
+type BudgetNotificationFormProps = {
+  budget: BudgetInput;
+  contractId: string;
+  unitId: string;
+  handleChange: <K extends keyof BudgetInput>(
+    field: K,
+    value: BudgetInput[K]
+  ) => void;
+  readonly?: boolean;
+  totalAmount?: number;
+  onThresholdsChange?: (thresholds: number[]) => void;
+  currency?: CurrencyType;
+  locale?: LocaleType;
+  showUsersError?: boolean;
+};
+
+type UserOption = { id: string; name: string; email?: string };
+
+export const BudgetNotificationForm = ({
+  budget,
+  contractId,
+  unitId,
+  handleChange,
+  readonly = false,
+  totalAmount,
+  currency = "USD",
+  locale = "en-US",
+  showUsersError = false,
+}: BudgetNotificationFormProps) => {
+  const [enabled, setEnabled] = useState<boolean>(
+    Boolean(budget?.notifications?.hasNotification)
+  );
+
+  const [thresholds, setThresholds] = useState<NotificationThresholds[]>(
+    budget?.notifications?.thresholds?.length
+      ? budget.notifications.thresholds
+      : [{ value: 50 }]
+  );
+
+  const [inputValue, setInputValue] = useState<string>("");
+  const [options, setOptions] = useState<UserOption[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<NotificationUsers[]>(
+    budget?.notifications?.users?.length ? budget.notifications.users : []
+  );
+
+  const parsedTotal = useMemo(() => {
+    if (typeof totalAmount === "number") return totalAmount;
+    const raw =
+      typeof budget?.amount === "string"
+        ? budget.amount.replace(/[^\d.,-]/g, "").replace(",", ".")
+        : budget?.amount;
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : 0;
+  }, [totalAmount, budget?.amount]);
+
+  const fmtCurrency = (value: number) =>
+    new Intl.NumberFormat(locale, { style: "currency", currency }).format(
+      value
+    );
+
+  useEffect(() => {
+    if (enabled && thresholds.length === 0) {
+      setThresholds([{ value: 50 }]);
+    }
+  }, [enabled, thresholds.length]);
+
+  useEffect(() => {
+    setEnabled(Boolean(budget?.notifications?.hasNotification));
+  }, [budget?.notifications?.hasNotification]);
+
+  useEffect(() => {
+    const prev = budget.notifications;
+
+    const next: BudgetNotification = {
+      hasNotification: enabled,
+      thresholds: enabled ? thresholds : [],
+      users: selectedUsers,
+    };
+
+    const sameHas = prev?.hasNotification === next.hasNotification;
+
+    const sameThresholds =
+      Array.isArray(prev?.thresholds) &&
+      prev!.thresholds.length === next.thresholds.length &&
+      prev!.thresholds.every((t, i) => t.value === next.thresholds[i].value);
+
+    const sameUsers =
+      Array.isArray(prev?.users) &&
+      prev!.users.length === next.users.length &&
+      prev!.users.every(
+        (u, i) =>
+          u.userId === next.users[i].userId &&
+          u.userName === next.users[i].userName &&
+          u.userEmail === next.users[i].userEmail
+      );
+
+    const isSame = sameHas && sameThresholds && sameUsers;
+
+    if (!isSame) {
+      handleChange("notifications", next);
+    }
+  }, [enabled, thresholds, selectedUsers, handleChange, budget.notifications]);
+
+  const addThreshold = () => {
+    if (readonly || parsedTotal <= 0) return;
+    setThresholds((prev) =>
+      prev.length >= 5 ? prev : [...prev, { value: 50 }]
+    );
+  };
+
+  const removeThreshold = (idx: number) => {
+    if (readonly) return;
+    setThresholds((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const onToggleNotifications = (checked: boolean) => {
+    setEnabled(checked);
+    if (checked && thresholds.length === 0) {
+      setThresholds([{ value: 50 }]);
+    }
+  };
+
+  const { usersResponse, isLoadingUsers, isDebouncing } =
+    useDebouncedSearchBudgetNotification({
+      customerId: contractId,
+      unitId,
+      search: inputValue,
+    });
+  const loadingObject: UserOption = { id: "loading", name: "Loading..." };
+
+  useEffect(() => {
+    const mapped: UserOption[] = (usersResponse?.users ?? []).map((u) => ({
+      id: String(u.userId),
+      name: String(u.name ?? "Usuário"),
+      email: u.email,
+    }));
+    setOptions(mapped);
+  }, [usersResponse]);
+
+  const addUserIfNotExists = (opt: UserOption) => {
+    const exists = selectedUsers.some((u) => u.userId === opt.id);
+    if (readonly || exists) return;
+
+    const next: NotificationUsers[] = [
+      ...selectedUsers,
+      {
+        userId: opt.id,
+        userName: opt.name,
+        userEmail: opt.email ?? "",
+      },
+    ];
+    setSelectedUsers(next);
+    setInputValue("");
+  };
+
+  const handleRemove = (id: string) => {
+    const next = selectedUsers.filter((u) => u.userId !== id);
+    setSelectedUsers(next);
+  };
+
+  const sizeProps = { width: 20, height: 20 };
+  const disableRows = readonly || !enabled;
+
+  return (
+    <div data-fs-bp-budget-notification>
+      <div
+        data-fs-bp-budget-notification-row-section
+        data-fs-bp-budget-notification-renew
+      >
+        <span data-fs-bp-budget-notification-renew-label>Notifications</span>
+        <div data-fs-bp-budget-notification-row-section-action>
+          <Toggle
+            id="notificationsToggle"
+            checked={enabled}
+            onChange={(e) => onToggleNotifications(e.target.checked)}
+            disabled={readonly}
+          />
+        </div>
+      </div>
+
+      <div data-fs-bp-budget-notification-section-label>
+        <span>
+          Set up to 5 thresholds and notify users when the total amount reaches
+          specific percentages
+        </span>
+      </div>
+
+      {enabled && (
+        <>
+          <div>
+            <div data-fs-bp-budget-notification-table>
+              <Table layoutFixed>
+                <Table.Head
+                  columns={[
+                    { key: "threshold", label: "Threshold", size: "medium" },
+                    {
+                      key: "consumed",
+                      label: "Consumed",
+                      size: "medium",
+                      align: "right",
+                    },
+                    {
+                      key: "remaining",
+                      label: "Remaining",
+                      size: "large",
+                      align: "right",
+                    },
+                    { key: "actions", label: "", size: "3rem" },
+                  ]}
+                />
+
+                <Table.Body>
+                  {thresholds.map((t, idx) => {
+                    const consumed = (parsedTotal * t.value) / 100;
+                    const remaining = Math.max(parsedTotal - consumed, 0);
+
+                    return (
+                      <Table.Row
+                        key={`${idx}-${t.value}`}
+                        title={
+                          <div data-fs-bp-budget-notification-stepper>
+                            <QuantitySelectorWithPercentage
+                              min={1}
+                              max={100}
+                              initial={t.value}
+                              formatAsPercent
+                              disabled={disableRows || parsedTotal <= 0}
+                              onChange={(val: number) =>
+                                setThresholds((prev) =>
+                                  prev.map((th, i) =>
+                                    i === idx
+                                      ? {
+                                          value: Math.min(
+                                            100,
+                                            Math.max(1, val)
+                                          ),
+                                        }
+                                      : th
+                                  )
+                                )
+                              }
+                            />
+                          </div>
+                        }
+                        enabled={!disableRows}
+                        actionIcons={
+                          <Icon
+                            name="MinusCircle"
+                            {...sizeProps}
+                            data-fs-bp-budget-notification-remove
+                            onClick={() => removeThreshold(idx)}
+                            aria-label="Remove threshold"
+                          />
+                        }
+                      >
+                        <Table.Cell>
+                          <span data-fs-bp-budget-notification-money>
+                            {fmtCurrency(consumed)}
+                          </span>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <span data-fs-bp-budget-notification-money>
+                            {fmtCurrency(remaining)}
+                          </span>
+                        </Table.Cell>
+                      </Table.Row>
+                    );
+                  })}
+                </Table.Body>
+              </Table>
+            </div>
+
+            <div data-fs-bp-budget-notification-add>
+              <button
+                type="button"
+                onClick={addThreshold}
+                disabled={disableRows || thresholds.length >= 5}
+              >
+                Add threshold
+              </button>
+            </div>
+          </div>
+
+          <div data-fs-bp-budget-notification-section-user>
+            <div data-fs-bp-budget-notification-section-label>
+              <span>
+                Add users to be notified by email. At least one user must be
+                added
+              </span>
+            </div>
+
+            <AutocompleteDropdown
+              label="Add users"
+              value={inputValue}
+              shouldOpenOnFocus={false}
+              autoComplete="off"
+              shouldShowArrowDown={false}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setInputValue(e.target.value);
+              }}
+              options={
+                isLoadingUsers || isDebouncing ? [loadingObject] : options
+              }
+              hasError={showUsersError && enabled && selectedUsers.length === 0}
+              helperLabel={
+                showUsersError && enabled && selectedUsers.length === 0
+                  ? "Select at least one user."
+                  : undefined
+              }
+              renderOption={(option, index) => (
+                <AutocompleteDropdown.Item
+                  key={option.id}
+                  closeOnClick
+                  index={index}
+                  isSelected={false}
+                  onClick={() => addUserIfNotExists(option)}
+                >
+                  <div data-fs-bp-budget-notification-autocomplete>
+                    <span>{option.name}</span>
+                    <span>{option.email ? `${option.email}` : ""}</span>
+                  </div>
+                </AutocompleteDropdown.Item>
+              )}
+            />
+
+            {selectedUsers.length > 0 && (
+              <BudgetUsersTable
+                users={selectedUsers.map((u) => ({
+                  userId: u.userId,
+                  userName: u.userName,
+                  email: u.userEmail || "",
+                }))}
+                onRemove={(id: string) => handleRemove(id)}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};