@vtex/faststore-plugin-buyer-portal 1.3.48 → 1.3.50

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.50] - 2025-12-19
+
+### Changed
+- Introduces several improvements and refactorings to the budget notification drawer, focusing on user experience.
+
+## [1.3.49] - 2025-12-19
+
+### Added
+
+- Add component of Criteria Selection of Custom Fields on Buying Policies
+
 ## [1.3.48] - 2025-12-19
 
 - Adjustment from merge to Collections to Products Assortment
@@ -411,7 +422,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.48...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.50...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
@@ -461,6 +472,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
 [1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
 
+[1.3.50]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.49...v1.3.50
+[1.3.49]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.48...v1.3.49
 [1.3.48]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...v1.3.48
 [1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
 [1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46

package/package.json

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

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

@@ -104,6 +104,7 @@ export function BudgetEditNotificationDrawer({
     <BasicDrawer
       data-fs-bp-budget-notifications-drawer
       close={close}
+      size="large"
       {...props}
     >
       <BasicDrawer.Heading title="Edit notifications" onClose={close} />

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

@@ -7,6 +7,7 @@ import {
   QuantitySelectorWithPercentage,
   Table,
 } from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
 import { CurrencyType, LocaleType } from "../../../shared/types";
 import { useDebouncedSearchBudgetNotification } from "../../hooks/useDebouncedSearchBudgetNotification";
 import BudgetUsersTable from "../BudgetUsersTable/BudgetUsersTable";
@@ -36,6 +37,8 @@ type BudgetNotificationFormProps = {
 
 type UserOption = { id: string; name: string; email?: string };
 
+const MAX_THRESHOLDS = 5;
+
 export const BudgetNotificationForm = ({
   budget,
   contractId,
@@ -47,6 +50,8 @@ export const BudgetNotificationForm = ({
   locale = "en-US",
   showUsersError = false,
 }: BudgetNotificationFormProps) => {
+  const { currentUser } = useBuyerPortal();
+
   const [enabled, setEnabled] = useState<boolean>(
     Boolean(budget?.notifications?.hasNotification)
   );
@@ -124,7 +129,7 @@ export const BudgetNotificationForm = ({
   const addThreshold = () => {
     if (readonly || parsedTotal <= 0) return;
     setThresholds((prev) =>
-      prev.length >= 5 ? prev : [...prev, { value: 50 }]
+      prev.length >= MAX_THRESHOLDS ? prev : [...prev, { value: 50 }]
     );
   };
 
@@ -154,8 +159,20 @@ export const BudgetNotificationForm = ({
       name: String(u.name ?? "Usuário"),
       email: u.email,
     }));
-    setOptions(mapped);
-  }, [usersResponse]);
+
+    setOptions(
+      currentUser?.id
+        ? [
+            {
+              id: String(currentUser.id),
+              email: currentUser?.email ?? "",
+              name: currentUser?.name ? `${currentUser.name} (You)` : "You",
+            },
+            ...mapped,
+          ]
+        : mapped
+    );
+  }, [usersResponse, currentUser]);
 
   const addUserIfNotExists = (opt: UserOption) => {
     const exists = selectedUsers.some((u) => u.userId === opt.id);
@@ -178,8 +195,21 @@ export const BudgetNotificationForm = ({
     setSelectedUsers(next);
   };
 
+  const handleThresholdsChange = (value: number, idx: number) => {
+    setThresholds((prev) =>
+      prev.map((th, i) =>
+        i === idx
+          ? {
+              value: Math.min(100, Math.max(1, value)),
+            }
+          : th
+      )
+    );
+  };
+
   const sizeProps = { width: 20, height: 20 };
   const disableRows = readonly || !enabled;
+  const isLoading = isLoadingUsers || isDebouncing;
 
   return (
     <div data-fs-bp-budget-notification>
@@ -200,8 +230,8 @@ export const BudgetNotificationForm = ({
 
       <div data-fs-bp-budget-notification-section-label>
         <span>
-          Set up to 5 thresholds and notify users when the total amount reaches
-          specific percentages
+          Set up to {MAX_THRESHOLDS} thresholds and notify users when the total
+          amount reaches specific percentages
         </span>
       </div>
 
@@ -240,37 +270,35 @@ export const BudgetNotificationForm = ({
                         title={
                           <div data-fs-bp-budget-notification-stepper>
                             <QuantitySelectorWithPercentage
-                              min={1}
+                              min={5}
                               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
-                                  )
-                                )
+                              onChange={(value) =>
+                                handleThresholdsChange(value, idx)
                               }
+                              increaseQuantityBy={5}
+                              decreaseQuantityBy={5}
                             />
                           </div>
                         }
                         enabled={!disableRows}
                         actionIcons={
-                          <Icon
-                            name="MinusCircle"
-                            {...sizeProps}
-                            data-fs-bp-budget-notification-remove
+                          <button
+                            data-fs-bp-budget-notification-remove-button
+                            type="button"
                             onClick={() => removeThreshold(idx)}
                             aria-label="Remove threshold"
-                          />
+                            title="Remove threshold"
+                            disabled={disableRows}
+                          >
+                            <Icon
+                              name="MinusCircle"
+                              {...sizeProps}
+                              data-fs-bp-budget-notification-remove
+                            />
+                          </button>
                         }
                       >
                         <Table.Cell>
@@ -294,7 +322,11 @@ export const BudgetNotificationForm = ({
               <button
                 type="button"
                 onClick={addThreshold}
-                disabled={disableRows || thresholds.length >= 5}
+                disabled={
+                  disableRows ||
+                  parsedTotal <= 0 ||
+                  thresholds.length >= MAX_THRESHOLDS
+                }
               >
                 Add threshold
               </button>
@@ -315,11 +347,17 @@ export const BudgetNotificationForm = ({
               shouldOpenOnFocus={false}
               autoComplete="off"
               shouldShowArrowDown={false}
+              isLoading={isLoading}
+              disabled={isLoading}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 setInputValue(e.target.value);
               }}
               options={
-                isLoadingUsers || isDebouncing ? [loadingObject] : options
+                isLoading
+                  ? [loadingObject]
+                  : options.filter(
+                      (opt) => !selectedUsers.some((u) => u.userId === opt.id)
+                    )
               }
               hasError={showUsersError && enabled && selectedUsers.length === 0}
               helperLabel={

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

@@ -1,11 +1,11 @@
 [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";
+  @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);
 
@@ -29,7 +29,7 @@
   [data-fs-bp-budget-notification-section-label] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);
-    color: #5c5c5c;
+    color: var(--fs-bp-color-neutral-7);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
   }
 
@@ -38,7 +38,7 @@
     flex-direction: column;
     width: 100%;
 
-    @include media(">=notebook") {
+    @include media('>=notebook') {
       align-items: center;
       flex-direction: row;
       gap: var(--fs-spacing-3);
@@ -62,9 +62,9 @@
     }
   }
 
-  [data-fs-bp-autocomplete-dropdown]{
-    [data-fs-bp-autocomplete-dropdown-menu]{
-      z-index:2;
+  [data-fs-bp-autocomplete-dropdown] {
+    [data-fs-bp-autocomplete-dropdown-menu] {
+      z-index: 2;
     }
   }
 
@@ -99,7 +99,7 @@
             text-align: start;
             font-weight: var(--fs-text-weight-medium);
             font-size: var(--fs-text-size-1);
-            color: #5c5c5c;
+            color: var(--fs-bp-color-neutral-7);
             padding: var(--fs-spacing-2) 0;
           }
 
@@ -165,7 +165,7 @@
       }
     }
 
-    div[data-fs-quantity-selector="disabled"] {
+    div[data-fs-quantity-selector='disabled'] {
       [data-fs-input] {
         color: #c3c3c3;
       }
@@ -185,18 +185,23 @@
   [data-fs-bp-budget-notification-money] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);
-    color: #5C5C5C;
+    color: var(--fs-bp-color-neutral-7);
   }
 
   [data-fs-bp-budget-notification-remove] {
     color: #000000;
     stroke-width: 1.3rem;
+    cursor: pointer;
     &[disabled] {
       color: #9ca3af; /* gray when disabled */
       cursor: not-allowed;
     }
   }
 
+  [data-fs-bp-budget-notification-remove-button] {
+    cursor: pointer;
+  }
+
   [data-fs-bp-budget-notification-add] {
     margin-top: var(--fs-spacing-3);
     display: flex;
@@ -204,6 +209,7 @@
     gap: var(--fs-spacing-2);
 
     button {
+      cursor: pointer;
       height: var(--fs-spacing-6);
       width: 8.4375rem;
       border-radius: var(--fs-border-radius-pill);
@@ -214,6 +220,11 @@
       color: #0068d7;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-semibold);
+
+      &:disabled {
+        cursor: not-allowed;
+        color: #9ca3af; /* gray when disabled */
+      }
     }
   }
 }

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

@@ -4,7 +4,6 @@ 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;
@@ -28,8 +27,6 @@ function BudgetUsersTableBase({
   className,
   disabled = false,
 }: BudgetUsersTableProps) {
-  const { clientContext } = useBuyerPortal();
-  const currClientId = clientContext.userId;
   const columns = getTableColumns({
     actionsLength: onRemove ? 1 : 0,
     nameColumnLabel: "User name",
@@ -64,16 +61,7 @@ function BudgetUsersTableBase({
             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
-                  )
-                }
+                title={u.userName}
                 enabled={!disabled}
                 actionIcons={(() => {
                   const rowDisabled =
@@ -85,6 +73,7 @@ function BudgetUsersTableBase({
                       aria-label={`Remove ${u.userName}`}
                       disabled={rowDisabled}
                       onClick={() => onRemove?.(u.userId)}
+                      title={rowDisabled ? undefined : `Remove ${u.userName}`}
                     >
                       <Icon name="MinusCircle" width={20} height={20} />
                     </button>

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -21,15 +21,6 @@
     width: 100%;
     max-width: none;
 
-    @include media(">=tablet") {
-      max-width: 30rem;
-      min-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-
     [data-fs-divider] {
       border: var(--fs-border-radius-small) solid #e0e0e0;
       margin: var(--fs-spacing-4) 0rem;

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

@@ -23,12 +23,6 @@
       }
     }
 
-    @include media(">=notebook") {
-      &[data-fs-modal-content] {
-        max-width: 40rem;
-        width: 100%;
-      }
-    }
     [data-fs-divider] {
       border: var(--fs-border-radius-small) solid #e0e0e0;
       margin: var(--fs-spacing-4) 0rem;

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer.tsx

@@ -24,12 +24,15 @@ import {
   BUYING_POLICIES_WORKFLOW_TYPES,
   buyingPolicyDefault,
   BUDGET_CRITERIA,
+  COST_CENTER_CRITERIA,
+  PO_NUMBER_CRITERIA,
   orderFieldsCriteriaOptions,
   spendingLimitsCriteriaOptions,
 } from "../../utils";
 import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkflowTypes";
 import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
 import { BudgetCriteriaSelector } from "../BudgetCriteriaSelector";
+import { CustomFieldCriteriaSelector } from "../CustomFieldCriteriaSelector/CustomFieldCriteriaSelector";
 
 const LIMIT_OF_LEVELS = 5;
 
@@ -173,6 +176,18 @@ export const BasicBuyingPolicyDrawer = ({
     criteria === BUDGET_CRITERIA ||
     criteria.includes('$exists(budgetData.budgets[id="');
 
+  const isPONumberCriteria =
+    criteria === PO_NUMBER_CRITERIA ||
+    criteria.includes(
+      'customData.customFields.fields[name="PO Number"].value ='
+    );
+
+  const isCostCenterCriteria =
+    criteria === COST_CENTER_CRITERIA ||
+    criteria.includes(
+      'customData.customFields.fields[name="Cost Center"].value ='
+    );
+
   const renderCriteria = (criteria: string) => {
     if (isBudgetCriteria) {
       return (
@@ -186,6 +201,34 @@ export const BasicBuyingPolicyDrawer = ({
       );
     }
 
+    if (isPONumberCriteria) {
+      return (
+        <CustomFieldCriteriaSelector
+          key={"PO Number"}
+          fieldName="PO Number"
+          currentCriteria={criteria}
+          onCriteriaChange={(newCriteria) =>
+            updateField("criteria", newCriteria)
+          }
+          onEditablePartClick={() => setCriteriaFocused(true)}
+        />
+      );
+    }
+
+    if (isCostCenterCriteria) {
+      return (
+        <CustomFieldCriteriaSelector
+          key={"Cost Center"}
+          fieldName="Cost Center"
+          currentCriteria={criteria}
+          onCriteriaChange={(newCriteria) =>
+            updateField("criteria", newCriteria)
+          }
+          onEditablePartClick={() => setCriteriaFocused(true)}
+        />
+      );
+    }
+
     return getHighlightedText(criteria);
   };
 

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -2,6 +2,7 @@
 @import '../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss';
 @import '../../../shared/components/CustomDropdown/custom-dropdown.scss';
 @import '../BudgetCriteriaSelector/budget-criteria-selector.scss';
+@import '../CustomFieldCriteriaSelector/custom-field-criteria-selector.scss';
 
 [data-fs-bp-basic-buying-policy-drawer] {
   @import '../../../shared/components/InputText/input-text.scss';
@@ -108,7 +109,6 @@
         text-wrap: nowrap;
         text-overflow: ellipsis;
         white-space: nowrap;
-        overflow: hidden;
         max-width: 840px;
         cursor: pointer;
 

package/src/features/buying-policies/components/CustomFieldCriteriaSelector/CustomFieldCriteriaSelector.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+
+import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useCustomFieldValues } from "../../../shared/hooks/custom-field";
+
+export type CustomFieldCriteriaSelectorProps = {
+  fieldName: "PO Number" | "Cost Center";
+  onCriteriaChange: (criteria: string) => void;
+  currentCriteria: string;
+  onEditablePartClick?: () => void;
+};
+
+export const CustomFieldCriteriaSelector = ({
+  fieldName,
+  onCriteriaChange,
+  currentCriteria,
+  onEditablePartClick,
+}: CustomFieldCriteriaSelectorProps) => {
+  const {
+    currentOrgUnit: orgUnit,
+    currentContract: contract,
+    clientContext,
+  } = useBuyerPortal();
+
+  const cookie = clientContext?.cookie ?? "";
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const { data, isLoading, refetch } = useCustomFieldValues({
+    data: {
+      contractId: contract?.id || "",
+      customField: fieldName,
+      unitId: orgUnit?.id || "",
+      cookie,
+      params: {
+        value: "",
+        page: 1,
+        filterByUnit: true,
+      },
+    },
+    options: { lazy: true },
+  });
+
+  const extractValueFromCriteria = (criteria: string): string => {
+    const match = criteria.match(/value\s*=\s*"([^"]+)"/);
+    return match
+      ? match[1]
+      : `${fieldName.toLowerCase().replace(/\s+/g, "-")}-001`;
+  };
+
+  const [currentFieldValue, setCurrentFieldValue] = useState<string>(
+    extractValueFromCriteria(currentCriteria)
+  );
+
+  useEffect(() => {
+    setIsDropdownOpen(false);
+    const extractedValue = extractValueFromCriteria(currentCriteria);
+    setCurrentFieldValue(extractedValue);
+  }, [currentCriteria, fieldName]);
+
+  const generateCriteriaString = (value: string) => {
+    return `customData.customFields.fields[name="${fieldName}"].value = "${value}"`;
+  };
+
+  const handleFieldSelect = (selectedIdOrValue: string) => {
+    if (selectedIdOrValue === "loading") return;
+
+    const items = data?.data || [];
+
+    const selectedItem = items.find(
+      (item) =>
+        item.value === selectedIdOrValue || item.id === selectedIdOrValue
+    );
+
+    if (!selectedItem) return;
+
+    const valueToUse = selectedItem.value || selectedIdOrValue;
+    setCurrentFieldValue(valueToUse);
+    onCriteriaChange(generateCriteriaString(valueToUse));
+    setIsDropdownOpen(false);
+  };
+
+  const handleFieldValueClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDropdownOpen(true);
+
+    if ((!data?.data || data.data.length === 0) && !isLoading) {
+      refetch();
+    }
+  };
+
+  const handleEditablePartClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEditablePartClick?.();
+  };
+
+  const loadingOptions = [
+    {
+      label: `Loading ${fieldName.toLowerCase()}...`,
+      value: "loading",
+    },
+  ];
+
+  const fieldOptions = (data?.data || []).map((item) => ({
+    label: item.name || item.value || `${fieldName}-${item.id?.slice(0, 8)}`,
+    value: item.value || item.id,
+  }));
+
+  const options =
+    isLoading || !data?.data || data.data.length === 0
+      ? loadingOptions
+      : fieldOptions;
+
+  const triggerLabel = isLoading ? "Loading..." : currentFieldValue;
+
+  return (
+    <div data-fs-bp-custom-field-criteria-selector data-field-name={fieldName}>
+      <div data-fs-bp-custom-field-criteria-string>
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          customData.customFields.fields[name="{fieldName}"].value = "
+        </span>
+
+        <div
+          onClick={handleFieldValueClick}
+          style={{ display: "inline-block" }}
+        >
+          <CustomDropdown
+            options={options}
+            onSelect={handleFieldSelect}
+            triggerLabel={triggerLabel}
+            isOpen={isDropdownOpen}
+            highlightText={(text) => (
+              <div data-fs-bp-dropdown-option>
+                <div data-fs-bp-dropdown-option-label>{text}</div>
+                {!isLoading && data?.data && (
+                  <div data-fs-bp-dropdown-option-uuid>
+                    {data.data.find(
+                      (item) => (item.name || item.value) === text
+                    )?.value || text}
+                  </div>
+                )}
+              </div>
+            )}
+          />
+        </div>
+
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          "
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/features/buying-policies/components/CustomFieldCriteriaSelector/custom-field-criteria-selector.scss

@@ -0,0 +1,139 @@
+[data-fs-bp-custom-field-criteria-selector] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: var(--fs-bp-color-neutral-1);
+  border: var(--fs-border-width) solid var(--fs-bp-color-neutral-4);
+  border-radius: calc(var(--fs-border-radius) * 2);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  [data-fs-bp-custom-field-criteria-string] {
+    font-family: "Roboto", monospace;
+    font-size: var(--fs-text-size-1);
+    color: var(--fs-bp-color-neutral-7);
+    display: flex;
+    align-items: center;
+    padding: var(--fs-spacing-3) var(--fs-spacing-3);
+    gap: 0;
+    flex-wrap: wrap;
+    width: 100%;
+
+    > span {
+      white-space: nowrap;
+    }
+
+    [data-fs-bp-editable-part] {
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      padding: 0.125rem 0 0.25rem;
+      border-radius: calc(var(--fs-border-radius) * 0.5);
+
+      &:hover {
+        background-color: var(--fs-bp-color-neutral-1);
+        color: var(--fs-bp-color-neutral-8);
+      }
+    }
+
+    [data-fs-bp-custom-dropdown] {
+      display: inline-flex;
+
+      [data-fs-bp-custom-dropdown-trigger] {
+        color: var(--fs-color-highlight); 
+        border: none;
+        min-width: 0;
+        border-radius: calc(var(--fs-border-radius) * 1.5);
+        font-family: "Roboto", monospace;
+        font-size: calc(var(--fs-text-size-1) * 0.9);
+        padding: 0;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        background-color: transparent;
+
+        &:hover {
+          background-color: var(--fs-bp-color-neutral-1);
+        }
+      }
+
+      [data-fs-bp-custom-dropdown-menu] {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: var(--fs-spacing-1);
+        padding: var(--fs-spacing-1) 0;
+        background-color: var(--fs-bp-color-neutral-0);
+        box-shadow: 0rem 0.5rem 0.625rem 0rem rgba(0, 0, 0, 0.0784313725);
+        max-height: 15rem;
+        min-width: 20rem;
+        overflow-y: auto;
+        z-index: 1;
+        border-radius: calc(var(--fs-border-radius) * 2);
+
+        &::-webkit-scrollbar {
+          width: 0.75rem; 
+          height: 0.75rem;
+          background-color: var(--fs-bp-color-neutral-0);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #adadad;
+          border: 0.25rem solid transparent; 
+          border-radius: 0.375rem; 
+          background-clip: content-box; 
+        }
+
+        [data-fs-bp-custom-dropdown-item] {
+          padding: var(--fs-spacing-2) var(--fs-spacing-3);
+          cursor: pointer;
+          border-bottom: var(--fs-border-width) solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          &:hover,
+          &[data-focused="true"] {
+            background-color: var(--fs-bp-color-neutral-2);
+          }
+
+          [data-fs-bp-dropdown-option] {
+            font-family: Inter;
+
+            [data-fs-bp-dropdown-option-label] {
+              font-weight: var(--fs-text-weight-semibold);
+              color: var(--fs-bp-color-neutral-8);
+              font-size: var(--fs-text-size-1);
+              margin-bottom: var(--fs-spacing-0);
+            }
+
+            [data-fs-bp-dropdown-option-uuid] {
+              font-size: var(--fs-text-size-0);
+              color: var(--fs-bp-color-neutral-7);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [data-fs-bp-custom-value-indicator] {
+    font-size: calc(var(--fs-text-size-0) * 0.85);
+    color: #666666;
+    font-style: italic;
+    padding: 0 var(--fs-spacing-3) calc(var(--fs-spacing-1) * 0.5);
+    border-top: 0.0625rem solid var(--fs-bp-color-neutral-3);
+    margin-top: auto;
+    width: 100%;
+    background-color: #fafafa;
+    border-radius: 0 0 calc(var(--fs-border-radius) * 2)
+      calc(var(--fs-border-radius) * 2);
+  }
+
+  [data-fs-bp-custom-field-value] {
+    color: var(--fs-color-highlight);
+  }
+}

package/src/features/buying-policies/utils/index.ts

@@ -1,6 +1,8 @@
 export { buyingPolicyDefault } from "./buyingPolicyDefault";
 export {
   BUDGET_CRITERIA,
+  PO_NUMBER_CRITERIA,
+  COST_CENTER_CRITERIA,
   orderFieldsCriteriaOptions,
 } from "./orderFieldsCriteriaOptions";
 export { spendingLimitsCriteriaOptions } from "./spendingLimitsCriteriaOptions";

package/src/features/buying-policies/utils/orderFieldsCriteriaOptions.ts

@@ -1,4 +1,8 @@
 export const BUDGET_CRITERIA = '$exists(budgetData.budgets[id="${budget-id}"])';
+export const PO_NUMBER_CRITERIA =
+  'customData.customFields.fields[name="PO Number"].value = "${po-number}"';
+export const COST_CENTER_CRITERIA =
+  'customData.customFields.fields[name="Cost Center"].value = "${cost-center}"';
 
 export const orderFieldsCriteriaOptions = [
   {
@@ -25,8 +29,7 @@ export const orderFieldsCriteriaOptions = [
   },
   {
     label: "If the order contains the PO numbers X, Y, Z",
-    criteria:
-      'customData.customFields.fields[name="PO Number"].value = "1112223334444" or customData.customFields.fields[name="PO Number"].value = "1234567890"',
+    criteria: PO_NUMBER_CRITERIA,
   },
   {
     label: "If the order contains a cost center",
@@ -35,8 +38,7 @@ export const orderFieldsCriteriaOptions = [
   },
   {
     label: "If the order contains the cost centers X, Y, Z",
-    criteria:
-      'customData.customFields.fields[name="Cost Center"].value = "CC1" or customData.customFields.fields[name="Cost Center"].value = "CC2"',
+    criteria: COST_CENTER_CRITERIA,
   },
   {
     label: "If all order items are negotiated items",

package/src/features/shared/components/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -43,6 +43,7 @@ export type AutocompleteDropdownProps<T> = ComponentProps<typeof InputText> & {
   renderOption?: (option: T, index: number) => ReactNode;
   onConfirmKeyPress?: (option: T) => void;
   hasError?: boolean;
+  isLoading?: boolean;
   shouldOpenOnFocus?: boolean;
   shouldShowArrowDown?: boolean;
   shouldCloseOnSelect?: boolean;
@@ -57,6 +58,7 @@ export const AutocompleteDropdown = <T,>({
   disabled,
   onConfirmKeyPress,
   hasError,
+  isLoading = false,
   value,
   helperLabel,
   shouldOpenOnFocus = true,
@@ -138,6 +140,25 @@ export const AutocompleteDropdown = <T,>({
     setIsOpened(false);
   }, []);
 
+  const getIconElement = () => {
+    if (shouldShowArrowDown) {
+      return <Icon name="ArrowDropDown" width={20} height={20} />;
+    }
+
+    if (isLoading) {
+      return (
+        <Icon
+          name="LoadingIndicator"
+          width={20}
+          height={20}
+          data-fs-icon-loading="true"
+        />
+      );
+    }
+
+    return undefined;
+  };
+
   useEffect(() => {
     const event = (e: MouseEvent) => {
       const target = e.target as Node;
@@ -215,11 +236,7 @@ export const AutocompleteDropdown = <T,>({
         <InputText
           label={label}
           onKeyDown={handleBackdropKeyDown}
-          icon={
-            shouldShowArrowDown ? (
-              <Icon name="ArrowDropDown" width={20} height={20} />
-            ) : null
-          }
+          icon={getIconElement()}
           onChange={onChange}
           disabled={disabled}
           hasError={hasError}
@@ -229,7 +246,7 @@ export const AutocompleteDropdown = <T,>({
           {...props}
         />
 
-        {isOpened && options.length > 0 ? (
+        {!isLoading && isOpened && options.length > 0 ? (
           <div
             style={{ width: positionStyle.width }}
             data-fs-bp-autocomplete-dropdown-menu={position}

package/src/features/shared/components/AutocompleteDropdown/autocomplete-dropdown.scss

@@ -1,9 +1,9 @@
-@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
 
 [data-fs-bp-autocomplete-dropdown] {
   position: relative;
-  
-  &[data-fs-bp-autocomplete-dropdown-only-select="true"] {
+
+  &[data-fs-bp-autocomplete-dropdown-only-select='true'] {
     [data-fs-bp-input-text-input] {
       caret-color: transparent;
       background-color: #ffffff;
@@ -11,6 +11,20 @@
   }
 }
 
+[data-fs-icon-loading] {
+  &[data-fs-icon-loading='true'] {
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    animation: rotate 2s linear infinite;
+  }
+}
+
 [data-fs-bp-autocomplete-dropdown-menu] {
   padding: var(--fs-spacing-1) 0;
   background-color: #fff;
@@ -22,11 +36,11 @@
 
   border-radius: calc(var(--fs-border-radius) * 2);
 
-  &[data-fs-bp-autocomplete-dropdown-menu="bottom"] {
+  &[data-fs-bp-autocomplete-dropdown-menu='bottom'] {
     top: calc(100% + var(--fs-spacing-0));
   }
 
-  &[data-fs-bp-autocomplete-dropdown-menu="top"] {
+  &[data-fs-bp-autocomplete-dropdown-menu='top'] {
     bottom: calc(100% + var(--fs-spacing-0));
   }
 
@@ -59,12 +73,12 @@
       color: var(--fs-color-neutral-7);
     }
 
-    &[data-fs-bp-autocomplete-dropdown-option-focused="true"] {
+    &[data-fs-bp-autocomplete-dropdown-option-focused='true'] {
       background-color: #f5f5f5;
       color: #3d3d3d;
     }
 
-    &[data-fs-bp-autocomplete-dropdown-option-selected="true"] {
+    &[data-fs-bp-autocomplete-dropdown-option-selected='true'] {
       color: #0366dd;
     }
 

package/src/features/shared/components/BuyerPortalProvider/BuyerPortalProvider.tsx

@@ -19,6 +19,7 @@ export type BuyerPortalContextType = {
     id: string;
     name: string;
     role?: string;
+    email?: string;
   } | null;
   featureFlags?: FeatureFlags;
 };

package/src/features/shared/components/QuantitySelectorWithPercentage/QuantitySelectorWithPercentage.tsx

@@ -12,10 +12,11 @@ interface QuantitySelectorWithPercentageParams {
   disabled?: boolean;
   onChange?: (value: number) => void;
   onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
-
   formatAsPercent?: boolean;
   allowPercentToggle?: boolean;
   onFormatToggle?: (formatAsPercent: boolean) => void;
+  increaseQuantityBy?: number;
+  decreaseQuantityBy?: number;
 }
 
 const QuantitySelectorWithPercentage = ({
@@ -29,6 +30,8 @@ const QuantitySelectorWithPercentage = ({
   onValidateBlur,
   testId = "fs-quantity-selector",
   formatAsPercent = true,
+  increaseQuantityBy = 1,
+  decreaseQuantityBy = 1,
   ...otherProps
 }: QuantitySelectorWithPercentageParams) => {
   const [quantity, setQuantity] = useState<number>(initial ?? min);
@@ -61,8 +64,8 @@ const QuantitySelectorWithPercentage = ({
       : maxValue;
   };
 
-  const increase = () => changeQuantity(1);
-  const decrease = () => changeQuantity(-1);
+  const increase = () => changeQuantity(increaseQuantityBy);
+  const decrease = () => changeQuantity(-decreaseQuantityBy);
 
   const changeQuantity = (delta: number) => {
     const next = validateQuantityBounds(quantity + delta);

package/src/features/shared/components/Table/TableRow/table-row.scss

@@ -98,6 +98,10 @@
 			align-items: center;
 			gap: var(--fs-spacing-1);
 			justify-content: flex-end;
+			
+			svg {
+				cursor: pointer;
+			}
 
 			&:empty {
 				padding: 0;

package/src/features/shared/utils/constants.ts

@@ -22,4 +22,4 @@ export const SCOPE_KEYS = {
   CREDIT_CARDS: "creditCards",
 } as const;
 
-export const CURRENT_VERSION = "1.3.48";
+export const CURRENT_VERSION = "1.3.50";