@vtex/faststore-plugin-buyer-portal 2.0.7 → 2.0.9

package/src/features/contracts/components/AddContractsDrawer/AddContractsDrawer.tsx

@@ -0,0 +1,323 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { useUI } from "@faststore/ui";
+
+import {
+  BasicDrawer,
+  type BasicDrawerProps,
+  Icon,
+  LetterHighlight,
+} from "../../../shared/components";
+import { useAddContracts, useListAvailableContracts } from "../../hooks";
+import {
+  buildRangeSet,
+  buildToggleSet,
+} from "../../hooks/contractSelectionHelpers";
+
+const PAGE_SIZE = 25;
+
+export type AddContractsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  orgUnitId: string;
+  orgUnitName: string;
+  existingContractIds: string[];
+  onSuccess: () => void;
+};
+
+export const AddContractsDrawer = ({
+  orgUnitId,
+  orgUnitName,
+  existingContractIds,
+  onSuccess,
+  ...drawerProps
+}: AddContractsDrawerProps) => {
+  const { pushToast } = useUI();
+
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const {
+    availableContracts,
+    availableContractsLoading,
+    fetchAvailableContracts,
+  } = useListAvailableContracts(orgUnitId);
+
+  const { addContracts, isAddContractsLoading } = useAddContracts({
+    onSuccess: () => {
+      onSuccess();
+      drawerProps.onDismiss?.();
+    },
+    onError: () => {
+      drawerProps.onDismiss?.();
+      pushToast({
+        message: "Failed to add contracts. Please try again.",
+        status: "ERROR",
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (drawerProps.isOpen) {
+      setSelectedIds(new Set());
+      setLastSelectedId(null);
+      setSearchQuery("");
+      setCurrentPage(1);
+      fetchAvailableContracts();
+    }
+  }, [drawerProps.isOpen]);
+
+  const existingSet = useMemo(
+    () => new Set(existingContractIds),
+    [existingContractIds]
+  );
+
+  const filteredContracts = useMemo(() => {
+    const pool = availableContracts.filter((c) => !existingSet.has(c.id));
+    const q = searchQuery.toLowerCase().trim();
+    if (!q) return pool;
+    return pool.filter((c) => c.name.toLowerCase().includes(q));
+  }, [availableContracts, existingSet, searchQuery]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredContracts.length / PAGE_SIZE)
+  );
+  const safePage = Math.min(currentPage, totalPages);
+
+  const displayedContracts = useMemo(() => {
+    const start = (safePage - 1) * PAGE_SIZE;
+    return filteredContracts.slice(start, start + PAGE_SIZE);
+  }, [filteredContracts, safePage]);
+
+  const allFilteredIds = filteredContracts.map((c) => c.id);
+  const isAllSelected =
+    filteredContracts.length > 0 &&
+    selectedIds.size === filteredContracts.length;
+  const isSomeSelected = selectedIds.size > 0 && !isAllSelected;
+
+  const handleToggleSelectAll = () => {
+    if (isAllSelected) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(allFilteredIds));
+    }
+    setLastSelectedId(null);
+  };
+
+  const handleRowClick = (id: string, event: React.MouseEvent) => {
+    if (event.shiftKey) {
+      setSelectedIds((prev) =>
+        buildRangeSet(prev, allFilteredIds, lastSelectedId, id)
+      );
+    } else {
+      setSelectedIds((prev) => buildToggleSet(prev, id));
+    }
+    setLastSelectedId(id);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === "a") {
+      event.preventDefault();
+      handleToggleSelectAll();
+    }
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setCurrentPage(1);
+  };
+
+  const handleConfirm = () => {
+    addContracts({
+      orgUnitId,
+      ids: Array.from(selectedIds),
+    });
+  };
+
+  const rangeStart =
+    filteredContracts.length === 0 ? 0 : (safePage - 1) * PAGE_SIZE + 1;
+  const rangeEnd = Math.min(safePage * PAGE_SIZE, filteredContracts.length);
+  const isDisabled = isAddContractsLoading;
+
+  return (
+    <BasicDrawer size="large" {...drawerProps}>
+      <BasicDrawer.Heading
+        title="Add contracts"
+        onClose={isAddContractsLoading ? undefined : drawerProps.onDismiss}
+      />
+
+      <BasicDrawer.Body data-fs-bp-add-contracts-drawer-body>
+        <p data-fs-bp-add-contracts-drawer-description>
+          Add available contracts to{" "}
+          <strong data-fs-bp-add-contracts-drawer-unit-name>
+            {orgUnitName}
+          </strong>
+        </p>
+
+        <div data-fs-bp-add-contracts-drawer-toolbar>
+          <div data-fs-bp-add-contracts-drawer-search>
+            <input
+              type="text"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={handleSearchChange}
+              disabled={isDisabled}
+              aria-label="Search contracts"
+              data-fs-bp-add-contracts-drawer-search-input
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => {
+                  setSearchQuery("");
+                  setCurrentPage(1);
+                }}
+                disabled={isDisabled}
+                aria-label="Clear search"
+                data-fs-bp-add-contracts-drawer-search-clear
+              >
+                <Icon name="X" width={14} height={14} />
+              </button>
+            )}
+          </div>
+
+          {filteredContracts.length > PAGE_SIZE && (
+            <div
+              data-fs-bp-add-contracts-drawer-pagination
+              aria-label="Pagination"
+            >
+              <span data-fs-bp-add-contracts-drawer-pagination-range>
+                {rangeStart}–{rangeEnd} of {filteredContracts.length}
+              </span>
+              <button
+                type="button"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={safePage === 1 || isDisabled}
+                aria-label="Previous page"
+                data-fs-bp-add-contracts-drawer-pagination-prev
+              >
+                <Icon name="ArrowLeft" width={16} height={16} />
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  setCurrentPage((p) => Math.min(totalPages, p + 1))
+                }
+                disabled={safePage >= totalPages || isDisabled}
+                aria-label="Next page"
+                data-fs-bp-add-contracts-drawer-pagination-next
+              >
+                <Icon name="ArrowRight" width={16} height={16} />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {availableContractsLoading ? (
+          <div data-fs-bp-add-contracts-drawer-loading aria-busy="true">
+            Loading contracts…
+          </div>
+        ) : filteredContracts.length === 0 ? (
+          <div data-fs-bp-add-contracts-drawer-empty>
+            <p>
+              {searchQuery
+                ? "No contracts match your search."
+                : "No contracts available to add."}
+            </p>
+          </div>
+        ) : (
+          // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handled via onKeyDown on wrapper
+          <div
+            data-fs-bp-add-contracts-drawer-list
+            role="grid"
+            aria-label="Available contracts"
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+          >
+            <div
+              data-fs-bp-add-contracts-drawer-select-all
+              role="row"
+              onClick={isDisabled ? undefined : handleToggleSelectAll}
+              aria-checked={
+                isAllSelected ? true : isSomeSelected ? "mixed" : false
+              }
+              aria-disabled={isDisabled || undefined}
+            >
+              <div data-fs-bp-add-contracts-drawer-checkbox aria-hidden="true">
+                {(isAllSelected || isSomeSelected) && (
+                  <Icon name="Check" width={12} height={12} />
+                )}
+              </div>
+              <span>Select all ({filteredContracts.length})</span>
+            </div>
+
+            {displayedContracts.map((contract) => {
+              const isSelected = selectedIds.has(contract.id);
+              return (
+                <div
+                  key={contract.id}
+                  data-fs-bp-add-contracts-drawer-row
+                  data-fs-bp-add-contracts-drawer-row-selected={
+                    isSelected || undefined
+                  }
+                  role="row"
+                  aria-selected={isSelected}
+                  onClick={(e) => !isDisabled && handleRowClick(contract.id, e)}
+                >
+                  <div
+                    data-fs-bp-add-contracts-drawer-checkbox
+                    aria-hidden="true"
+                  >
+                    {isSelected && <Icon name="Check" width={12} height={12} />}
+                  </div>
+                  <LetterHighlight size="small" letter={contract.name} />
+                  <span data-fs-bp-add-contracts-drawer-row-name>
+                    {contract.name}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <div data-fs-bp-add-contracts-drawer-selection-count>
+          {selectedIds.size > 0 && !isDisabled && (
+            <>
+              <button
+                type="button"
+                onClick={() => {
+                  setSelectedIds(new Set());
+                  setLastSelectedId(null);
+                }}
+                aria-label="Clear selection"
+                data-fs-bp-add-contracts-drawer-clear-selection
+              >
+                <Icon name="X" width={14} height={14} />
+              </button>
+              <span>{selectedIds.size} selected</span>
+            </>
+          )}
+        </div>
+        <BasicDrawer.Button
+          variant="ghost"
+          onClick={drawerProps.onDismiss}
+          type="button"
+          disabled={isDisabled}
+        >
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          onClick={handleConfirm}
+          type="button"
+          disabled={selectedIds.size === 0 || isDisabled}
+          isLoading={isAddContractsLoading}
+        >
+          Add
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/contracts/components/AddContractsDrawer/add-contracts-drawer.scss

@@ -0,0 +1,282 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
+
+[data-fs-bp-add-contracts-drawer-body] {
+  @import "../../../shared/components/LetterHighlight/letter-highlight.scss";
+
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: var(--fs-bp-padding-5) 0 0;
+  overflow: hidden;
+  height: 100%;
+
+  [data-fs-bp-add-contracts-drawer-description] {
+    font-size: var(--fs-bp-text-body);
+    color: var(--fs-bp-color-neutral-7);
+    padding: 0 var(--fs-bp-padding-5) var(--fs-bp-padding-3);
+    margin: 0;
+
+    [data-fs-bp-add-contracts-drawer-unit-name] {
+      color: var(--fs-bp-color-black);
+      font-weight: var(--fs-bp-weight-semibold);
+    }
+  }
+
+  [data-fs-bp-add-contracts-drawer-toolbar] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--fs-bp-gap-4);
+    padding: 0 var(--fs-bp-padding-5) var(--fs-bp-padding-3);
+
+    [data-fs-bp-add-contracts-drawer-search] {
+      position: relative;
+      flex: 1;
+      max-width: 14rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: var(--fs-bp-padding-3);
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rem;
+        height: 1rem;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-size: contain;
+        pointer-events: none;
+      }
+
+      [data-fs-bp-add-contracts-drawer-search-input] {
+        width: 100%;
+        height: 2rem;
+        padding: 0 var(--fs-bp-padding-3) 0 2.25rem;
+        border: 1px solid var(--fs-border-color-secondary, #e0e0e0);
+        border-radius: var(--fs-bp-border-radius-full);
+        font-size: var(--fs-bp-text-body);
+        color: var(--fs-bp-color-black);
+        background-color: var(--fs-bp-color-white);
+        outline: none;
+
+        &::placeholder {
+          color: var(--fs-bp-color-neutral-5);
+        }
+
+        &:focus {
+          border-color: var(--fs-bp-color-brand);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+
+      [data-fs-bp-add-contracts-drawer-search-clear] {
+        position: absolute;
+        right: var(--fs-bp-padding-2);
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: 2px;
+        cursor: pointer;
+        color: var(--fs-bp-color-neutral-5);
+        border-radius: 50%;
+
+        &:hover {
+          color: var(--fs-bp-color-black);
+          background-color: var(--fs-bp-color-neutral-1);
+        }
+      }
+    }
+
+    [data-fs-bp-add-contracts-drawer-pagination] {
+      display: flex;
+      align-items: center;
+      gap: var(--fs-bp-gap-2);
+      flex-shrink: 0;
+
+      [data-fs-bp-add-contracts-drawer-pagination-range] {
+        font-size: var(--fs-bp-text-body);
+        color: var(--fs-bp-color-neutral-7);
+        white-space: nowrap;
+      }
+
+      [data-fs-bp-add-contracts-drawer-pagination-prev],
+      [data-fs-bp-add-contracts-drawer-pagination-next] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--fs-bp-color-neutral-7);
+        border-radius: 50%;
+        padding: 0;
+
+        &:hover:not(:disabled) {
+          background-color: var(--fs-bp-color-neutral-1);
+          color: var(--fs-bp-color-black);
+        }
+
+        &:disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
+      }
+    }
+  }
+
+  [data-fs-bp-add-contracts-drawer-loading] {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--fs-bp-text-body);
+    color: var(--fs-bp-color-neutral-5);
+  }
+
+  [data-fs-bp-add-contracts-drawer-empty] {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
+
+    p {
+      font-size: var(--fs-bp-text-body);
+      color: var(--fs-bp-color-neutral-7);
+      margin: 0;
+    }
+  }
+
+  [data-fs-bp-add-contracts-drawer-list] {
+    flex: 1;
+    overflow-y: auto;
+    outline: none;
+    border-top: 1px solid #e0e0e0;
+
+    [data-fs-bp-add-contracts-drawer-select-all] {
+      display: flex;
+      align-items: center;
+      gap: var(--fs-bp-gap-3);
+      padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
+      border-bottom: 1px solid #e0e0e0;
+      cursor: pointer;
+      user-select: none;
+      font-size: var(--fs-bp-text-body);
+      font-weight: var(--fs-bp-weight-regular);
+      color: var(--fs-bp-color-black);
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      [data-fs-bp-add-contracts-drawer-checkbox] {
+        flex-shrink: 0;
+        width: 1.125rem;
+        height: 1.125rem;
+        border: 2px solid #9e9e9e;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &[aria-checked="true"],
+      &[aria-checked="mixed"] {
+        [data-fs-bp-add-contracts-drawer-checkbox] {
+          background-color: var(--fs-bp-color-brand);
+          border-color: var(--fs-bp-color-brand);
+          color: var(--fs-bp-color-white);
+        }
+      }
+    }
+
+    [data-fs-bp-add-contracts-drawer-row] {
+      display: flex;
+      align-items: center;
+      gap: var(--fs-bp-gap-3);
+      padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
+      border-bottom: 1px solid #e0e0e0;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      &[data-fs-bp-add-contracts-drawer-row-selected] {
+        background-color: #f0f7ff;
+
+        [data-fs-bp-add-contracts-drawer-checkbox] {
+          background-color: var(--fs-bp-color-brand);
+          border-color: var(--fs-bp-color-brand);
+          color: var(--fs-bp-color-white);
+        }
+      }
+
+      [data-fs-bp-add-contracts-drawer-checkbox] {
+        flex-shrink: 0;
+        width: 1.125rem;
+        height: 1.125rem;
+        border: 2px solid #9e9e9e;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-fs-bp-letter-highlight] {
+        flex-shrink: 0;
+        background-color: #1f1f1f;
+        color: var(--fs-bp-color-white);
+        width: var(--fs-spacing-5);
+        height: var(--fs-spacing-5);
+        font-size: var(--fs-bp-text-size-0);
+      }
+
+      [data-fs-bp-add-contracts-drawer-row-name] {
+        flex: 1;
+        font-size: var(--fs-bp-text-body);
+        font-weight: var(--fs-bp-weight-regular);
+        color: var(--fs-bp-color-black);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+[data-fs-bp-add-contracts-drawer-selection-count] {
+  display: flex;
+  align-items: center;
+  gap: var(--fs-bp-gap-2);
+  flex: 1;
+  font-size: var(--fs-bp-text-body);
+  color: var(--fs-bp-color-neutral-7);
+
+  [data-fs-bp-add-contracts-drawer-clear-selection] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 2px;
+    cursor: pointer;
+    color: var(--fs-bp-color-neutral-5);
+    border-radius: 50%;
+
+    &:hover {
+      color: var(--fs-bp-color-black);
+      background-color: var(--fs-bp-color-neutral-1);
+    }
+  }
+}

package/src/features/contracts/components/ConfirmRemoveDrawer/ConfirmRemoveDrawer.tsx

@@ -0,0 +1,58 @@
+import { BasicDrawer, type BasicDrawerProps } from "../../../shared/components";
+
+export type ConfirmRemoveDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  orgUnitName: string;
+  count: number;
+  onConfirm: () => void;
+  isLoading?: boolean;
+};
+
+export const ConfirmRemoveDrawer = ({
+  orgUnitName,
+  count,
+  onConfirm,
+  isLoading = false,
+  ...drawerProps
+}: ConfirmRemoveDrawerProps) => {
+  const label = count === 1 ? "contract" : "contracts";
+
+  return (
+    <BasicDrawer {...drawerProps}>
+      <BasicDrawer.Heading
+        title={`Remove ${label}`}
+        onClose={drawerProps.onDismiss}
+      />
+      <BasicDrawer.Body data-fs-bp-confirm-remove-drawer-body>
+        <p>
+          Are you sure you want to remove <strong>{count}</strong> {label} from{" "}
+          <strong>{orgUnitName}</strong>?
+        </p>
+        <p>
+          Removed contracts can be added again later, but any specific
+          configurations for these contracts within this organizational unit
+          will be lost. This will prevent users in this organization unit from
+          accessing these contracts during store navigation and checkout.
+        </p>
+      </BasicDrawer.Body>
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button
+          variant="ghost"
+          onClick={drawerProps.onDismiss}
+          type="button"
+          disabled={isLoading}
+        >
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="danger"
+          onClick={onConfirm}
+          type="button"
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
+          Remove
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/contracts/components/ConfirmRemoveDrawer/confirm-remove-drawer.scss

@@ -0,0 +1,18 @@
+@use "~@faststore/ui/src/styles/base/utilities" as u;
+
+[data-fs-bp-confirm-remove-drawer-body] {
+  [data-fs-bp-basic-drawer-body-wrapper] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-bp-gap-4);
+
+    p {
+      margin: 0;
+      font-size: var(--fs-bp-text-body);
+      color: var(--fs-bp-color-neutral-7);
+      line-height: 1.5;
+    }
+
+
+  }
+}