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

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>
+  );
+};

package/src/features/budgets/components/BudgetNotificationForm/budget-notification-form.scss

@@ -0,0 +1,219 @@
+[data-fs-bp-budget-notification] {
+  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
+  @import "../../../shared/components/InputText/input-text.scss";
+  @import "../../../shared/components/Table/table.scss";
+  @import "../../../shared/components/ErrorMessage/error-message.scss";
+  @import "../BudgetUsersTable/budget-users-table.scss";
+
+  padding-bottom: var(--fs-spacing-7);
+
+  [data-fs-bp-budget-notification-section-user] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-3);
+    margin-top: var(--fs-spacing-5);
+
+    [data-fs-bp-budget-notification-autocomplete] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-1);
+      span:first-child {
+        font-weight: var(--fs-text-weight-semibold);
+        color: #000000;
+      }
+    }
+  }
+
+  [data-fs-bp-budget-notification-section-label] {
+    font-weight: var(--fs-text-weight-regular);
+    font-size: var(--fs-text-size-1);
+    color: #5c5c5c;
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+  }
+
+  [data-fs-bp-budget-notification-row-section] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    @include media(">=notebook") {
+      align-items: center;
+      flex-direction: row;
+      gap: var(--fs-spacing-3);
+    }
+
+    &[data-fs-bp-budget-notification-renew] {
+      justify-content: space-between;
+      flex-direction: row;
+
+      [data-fs-bp-budget-notification-renew-label] {
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-2);
+        color: #000000;
+        margin-bottom: var(--fs-spacing-1);
+      }
+      [data-fs-toggle] {
+        width: var(--fs-spacing-6);
+        height: var(--fs-spacing-4);
+        min-width: auto;
+      }
+    }
+  }
+
+  [data-fs-bp-autocomplete-dropdown]{
+    [data-fs-bp-autocomplete-dropdown-menu]{
+      z-index:2;
+    }
+  }
+
+  [data-fs-bp-budget-notification-data-section] {
+    & > div {
+      flex: 1;
+    }
+  }
+
+  [data-fs-bp-basic-drawer-footer] {
+    justify-content: flex-end;
+    gap: var(--fs-spacing-1);
+  }
+  [data-fs-bp-budget-notification-row-section-action] {
+    display: flex;
+    flex-direction: row;
+    gap: var(--fs-spacing-3);
+    align-items: center;
+  }
+
+  [data-fs-bp-budget-notification-table] {
+    margin-top: var(--fs-spacing-3);
+    width: 100%;
+    display: block;
+
+    [data-fs-bp-table] {
+      [data-fs-bp-table-head] {
+        [data-fs-bp-table-head-row] {
+          border-bottom: var(--fs-border-radius-small) solid #e0e0e0;
+
+          th[data-fs-bp-table-head-column] {
+            text-align: start;
+            font-weight: var(--fs-text-weight-medium);
+            font-size: var(--fs-text-size-1);
+            color: #5c5c5c;
+            padding: var(--fs-spacing-2) 0;
+          }
+
+          th[data-fs-bp-table-head-column]:last-child {
+            min-width: var(--fs-spacing-4);
+          }
+        }
+      }
+    }
+  }
+  [data-fs-bp-budget-notification-stepper] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fs-spacing-1);
+
+    &[data-fs-bp-budget-notification-stepper-qty-wrapper] {
+      position: relative;
+      display: inline-block;
+
+      [data-fs-bp-budget-notification-stepper-qty-suffix] {
+        position: absolute;
+        right: var(--fs-spacing-2);
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        opacity: 0.7;
+        font: inherit;
+      }
+    }
+
+    div[data-fs-quantity-selector] {
+      height: 2.25rem;
+      width: 7.75rem;
+      border-radius: var(--fs-border-radius-pill);
+      border: var(--fs-border-radius-small) solid #d6d6d6;
+      --fs-qty-selector-border-radius: var(--fs-border-radius-pill);
+
+      [data-fs-input] {
+        height: 2.25rem;
+        color: #000000;
+        font-weight: var(--fs-text-weight-regular);
+        font-size: var(--fs-text-size-1);
+      }
+
+      button {
+        cursor: pointer;
+        &:first-child {
+          left: 0.3125rem;
+        }
+        &:last-child {
+          right: 0.3125rem;
+        }
+        border: none;
+        [data-fs-button-wrapper] {
+          [data-fs-button-icon] {
+            svg {
+              color: #0068d7;
+              width: 1.25rem;
+              height: 1.25rem;
+            }
+          }
+        }
+      }
+    }
+
+    div[data-fs-quantity-selector="disabled"] {
+      [data-fs-input] {
+        color: #c3c3c3;
+      }
+      --fs-qty-selector-bkg-color: #ebeaea;
+      button {
+        [data-fs-button-wrapper] {
+          [data-fs-button-icon] {
+            svg {
+              color: #c3c3c3;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [data-fs-bp-budget-notification-money] {
+    font-weight: var(--fs-text-weight-regular);
+    font-size: var(--fs-text-size-1);
+    color: #5C5C5C;
+  }
+
+  [data-fs-bp-budget-notification-remove] {
+    color: #000000;
+    stroke-width: 1.3rem;
+    &[disabled] {
+      color: #9ca3af; /* gray when disabled */
+      cursor: not-allowed;
+    }
+  }
+
+  [data-fs-bp-budget-notification-add] {
+    margin-top: var(--fs-spacing-3);
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-2);
+
+    button {
+      height: var(--fs-spacing-6);
+      width: 8.4375rem;
+      border-radius: var(--fs-border-radius-pill);
+      border: var(--fs-border-radius-small) solid #d6d6d6;
+
+      background: #fff;
+      padding: 0 var(--fs-spacing-3);
+      color: #0068d7;
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-semibold);
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+import { Badge } from "@faststore/ui";
+
+import { EmptyState } from "../../../shared/components";
+import { useDrawerProps } from "../../../shared/hooks";
+import { BudgetEditNotificationDrawer } from "../BudgetEditNotificationDrawer/BudgetEditNotificationDrawer";
+
+import type {
+  Budget,
+  BudgetNotification,
+  NotificationThresholds,
+  NotificationUsers,
+} from "../../types";
+
+type BudgetNotificationsInfoProps = {
+  initialBudget: Budget;
+  contractId: string;
+  orgUnitId: string;
+  budgetId: string;
+};
+
+const DetailRow = ({
+  label,
+  notifications,
+}: {
+  label: string;
+  notifications: BudgetNotification;
+}) => {
+  const isUserLabel = label === "Users";
+  const list = isUserLabel
+    ? (notifications.users as NotificationUsers[])
+    : (notifications.thresholds as NotificationThresholds[]);
+
+  return (
+    <>
+      <div data-fs-bp-budget-notifications-details-row>
+        <span data-fs-bp-budget-notifications-details-row-label>{label}</span>
+        <span data-fs-bp-budget-notifications-details-row-value>
+          {list.map((item, index) => (
+            <Badge key={index} size="big">
+              {isUserLabel
+                ? (item as NotificationUsers).userName
+                : `${(item as NotificationThresholds).value}%`}
+            </Badge>
+          ))}
+        </span>
+      </div>
+      <hr data-fs-bp-budget-notifications-divider />
+    </>
+  );
+};
+
+export const BudgetNotificationsInfo = ({
+  initialBudget,
+  budgetId,
+  orgUnitId,
+  contractId,
+}: BudgetNotificationsInfoProps) => {
+  const {
+    open: openNotificationsDrawerProps,
+    isOpen: isEditDrawerOpen,
+    ...editDrawerProps
+  } = useDrawerProps();
+
+  return (
+    <>
+      <div data-fs-bp-budget-notifications>
+        <div data-fs-bp-budget-notifications-details>
+          <div data-fs-budget-notifications-edit-line>
+            <span data-fs-budget-notifications-edit-title>Notifications</span>
+            <button
+              type="button"
+              data-fs-budget-notifications-edit-button
+              onClick={openNotificationsDrawerProps}
+            >
+              Edit
+            </button>
+          </div>
+
+          {initialBudget.notifications?.hasNotification ? (
+            <>
+              <hr data-fs-bp-budget-notifications-divider />
+              <DetailRow
+                key="Thresholds"
+                label="Thresholds"
+                notifications={initialBudget.notifications}
+              />
+              <DetailRow
+                key="Users"
+                label="Users"
+                notifications={initialBudget.notifications}
+              />
+            </>
+          ) : (
+            <div data-fs-bp-budget-notifications-empty>
+              <EmptyState
+                title="No notifications"
+                description="Set up to 5 thresholds and notify users when the total amount reaches specific percentages."
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isEditDrawerOpen && (
+        <BudgetEditNotificationDrawer
+          {...editDrawerProps}
+          isOpen={isEditDrawerOpen}
+          budget={initialBudget}
+          contractId={contractId}
+          orgUnitId={orgUnitId}
+          budgetId={budgetId}
+        />
+      )}
+    </>
+  );
+};