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

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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 +417,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.49...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 +467,7 @@ 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.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.49",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

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/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.49";