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

package/src/features/budgets/components/BudgetNotificationsInfo/budget-notifications-info.scss

@@ -0,0 +1,97 @@
+[data-fs-bp-budget-notifications] {
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+
+  width: 100%;
+
+  [data-fs-bp-budget-notifications-details-title] {
+    font-weight: var(--fs-text-weight-semibold);
+    font-size: var(--fs-text-size-2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--fs-spacing-3) 0;
+  }
+
+  [data-fs-bp-budget-notifications-divider] {
+    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+
+    &:first-of-type {
+      @include media("<tablet") {
+        border: none;
+      }
+    }
+  }
+
+  [data-fs-bp-budget-notifications-details-row] {
+    display: flex;
+    padding: 1.375rem 0;
+    font-weight: var(--fs-text-weight-medium);
+    font-size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    @include media("<tablet") {
+      flex-direction: column;
+      padding: var(--fs-spacing-2) 0;
+    }
+
+    [data-fs-bp-budget-notifications-details-row-label] {
+      width: 12.5rem;
+      color: #707070;
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-regular);
+
+      @include media("<tablet") {
+        font-size: var(--fs-text-size-0);
+      }
+    }
+
+    [data-fs-bp-budget-notifications-details-row-value] {
+      color: #000000;
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-medium);
+      display: flex;
+      gap: var(--fs-spacing-1);
+
+      [data-fs-badge] {
+        color: #000000;
+        font-size: var(--fs-text-size-0);
+        font-weight: var(--fs-text-weight-regular);
+      }
+
+      @include media("<tablet") {
+        font-weight: var(--fs-text-weight-regular);
+      }
+    }
+  }
+
+  [data-fs-budget-notifications-edit-line] {
+    padding: calc(var(--fs-spacing-4) - var(--fs-spacing-0)) 0;
+    border-top: var(--fs-border-width) solid #e0e0e0;
+    display: flex;
+    align-items: center;
+
+    &:first-of-type {
+      border-top: none;
+    }
+
+    [data-fs-budget-notifications-edit-title] {
+      font-weight: var(--fs-text-weight-semibold);
+      font-size: var(--fs-text-size-2);
+      line-height: var(--fs-spacing-4);
+      margin-right: auto;
+    }
+
+    [data-fs-budget-notifications-edit-button] {
+      border: var(--fs-border-width) solid #e0e0e0;
+      border-radius: var(--fs-border-radius-pill);
+      padding: var(--fs-spacing-1)
+        calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      font-weight: var(--fs-text-weight-semibold);
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      text-align: center;
+      color: #0366dd;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+import { memo } from "react";
+
+import { Icon, Tooltip } from "@faststore/ui";
+
+import { Table } from "../../../shared/components";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { useBuyerPortal } from "../../../shared/hooks";
+
+type UserRow = {
+  userId: string;
+  userName: string;
+  email: string;
+  removable?: boolean;
+};
+
+type BudgetUsersTableProps = {
+  users: UserRow[];
+  onRemove?: (userId: string) => void;
+  emptyMessage?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+function BudgetUsersTableBase({
+  users,
+  onRemove,
+  emptyMessage = "No users found",
+  className,
+  disabled = false,
+}: BudgetUsersTableProps) {
+  const { clientContext } = useBuyerPortal();
+  const currClientId = clientContext.userId;
+  const columns = getTableColumns({
+    actionsLength: onRemove ? 1 : 0,
+    nameColumnLabel: "User name",
+    nameColumnKey: "name",
+    nameColumnSize: "medium",
+    extraColumns: [
+      {
+        key: "email",
+        label: "Email",
+        align: "left",
+        size: "100%",
+        hideOnScreenSize: "phonemid",
+      },
+    ],
+  });
+
+  return (
+    <section
+      data-fs-bp-users-table
+      className={className}
+      aria-busy={disabled ? "true" : "false"}
+    >
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+
+        <Table.Body>
+          {users.length === 0 ? (
+            <Table.Row title={emptyMessage} enabled={false}>
+              <Table.Cell />
+            </Table.Row>
+          ) : (
+            users.map((u) => (
+              <Table.Row
+                key={u.userId}
+                title={
+                  currClientId === u.userId ? (
+                    <span>
+                      {u.userName}
+                      <span data-fs-bp-users-you> (you)</span>
+                    </span>
+                  ) : (
+                    u.userName
+                  )
+                }
+                enabled={!disabled}
+                actionIcons={(() => {
+                  const rowDisabled =
+                    disabled || users.length === 1 || !onRemove;
+                  const button = (
+                    <button
+                      type="button"
+                      data-fs-bp-users-remove
+                      aria-label={`Remove ${u.userName}`}
+                      disabled={rowDisabled}
+                      onClick={() => onRemove?.(u.userId)}
+                    >
+                      <Icon name="MinusCircle" width={20} height={20} />
+                    </button>
+                  );
+
+                  return rowDisabled && users.length === 1 ? (
+                    <Tooltip
+                      placement="left-center"
+                      content="At least one user must be notified. Add another user before removing this one."
+                    >
+                      {button}
+                    </Tooltip>
+                  ) : (
+                    button
+                  );
+                })()}
+              >
+                <Table.Cell>
+                  <span data-fs-bp-users-email>{u.email}</span>
+                </Table.Cell>
+              </Table.Row>
+            ))
+          )}
+        </Table.Body>
+      </Table>
+    </section>
+  );
+}
+
+export const BudgetUsersTable = memo(BudgetUsersTableBase);
+export default BudgetUsersTable;

package/src/features/budgets/components/BudgetUsersTable/budget-users-table.scss

@@ -0,0 +1,65 @@
+
+[data-fs-bp-users-table] {
+  @import "../../../shared/components/Table/table.scss";
+  display: block;
+  gap: 0;
+  margin-top: var(--fs-spacing-3);
+  width: 100%;
+  background: #fff;
+  overflow: hidden;
+
+  [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;
+        }
+
+      }
+    }
+  }
+
+  [data-fs-bp-users-you] {
+    color: #6b7280;
+    margin-left: 0.25rem;
+  }
+
+  [data-fs-bp-users-email] {
+    color: #374151;
+    font-size: var(--fs-text-size-1);
+    word-break: break-word;
+  }
+
+  [data-fs-bp-users-remove] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 9999px;
+    background: #fff;
+    color: #111827;
+    transition: box-shadow 0.15s ease, background 0.15s ease;
+    cursor: pointer;
+
+    svg {
+      color: #000000;
+      stroke-width: 1.3rem;
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      svg {
+        color: #9ca3af; 
+      }
+    }
+  }
+
+}

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

@@ -20,6 +20,7 @@ interface IBudgetsTable {
   onClickEditBudget(budgetId: string): void;
   openDeleteDrawer(budgetId: string): void;
   loading: boolean;
+  onClickCreateNotification?(budgetId: string): void;
 }
 
 export function BudgetsTable({
@@ -28,6 +29,7 @@ export function BudgetsTable({
   onClickEditBudget,
   openDeleteDrawer,
   loading,
+  onClickCreateNotification,
 }: IBudgetsTable) {
   const budgets = data;
   const route = useRouter();
@@ -96,6 +98,14 @@ export function BudgetsTable({
                       <Icon name="Edit" width={20} height={20} />
                       <span>Edit settings</span>
                     </DropdownItem>
+                    {onClickCreateNotification && (
+                      <DropdownItem
+                        onClick={() => onClickCreateNotification(item.id)}
+                      >
+                        <Icon name="Edit" width={20} height={20} />
+                        <span>Edit notifications</span>
+                      </DropdownItem>
+                    )}
                     <DropdownItem
                       onClick={() => onClickAllocationPage(item.id)}
                     >

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

@@ -10,7 +10,7 @@ import {
 import { useBuyerPortal } from "../../../shared/hooks";
 import { sortingOptionsAllocations } from "../../../shared/utils";
 import { getKeyByValue } from "../../../shared/utils/getKeyByValue";
-import { useAddAllocations } from "../../hooks";
+import { useAddAllocations } from "../../hooks/useAddAllocations";
 import { useGetAllocations } from "../../hooks/useGetAllocations";
 import { BudgetAllocationsSelection } from "../BudgetAllocationsSelection/BudgetAllocationsSelection";
 

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;