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

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

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";