@vtex/faststore-plugin-buyer-portal 1.1.95 → 1.1.97

package/src/features/budgets/components/BudgetsTable/budgets-table.scss

@@ -1,128 +1,130 @@
-@import "../BudgetProgressBar/budget-progress-bar.scss";
 [data-fs-bp-budgets-table] {
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-  width: 100%;
-
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-  [data-fs-bp-table-row] {
-    cursor: pointer;
-  }
-
-  [data-fs-bp-head-row] {
-    border-bottom: var(--fs-table-bordered-border-width) solid
-      var(--fs-table-bordered-border-color);
-
-    color: #5c5c5c;
-    height: var(--fs-spacing-8);
-  }
-
-  [data-fs-table-head="true"] {
-    [data-fs-bp-head-row="true"] {
-      &:hover {
-        background-color: initial;
-      }
-    }
-  }
-
-  [data-fs-table-cell-content] {
-    width: 99%;
-    height: 1.875rem;
-  }
-
-  [data-fs-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-    border-bottom: none;
-    text-wrap: balance;
-    text-align: justify;
-
-    [data-fs-tooltip-placement="left-center"] {
-      [data-fs-tooltip-indicator="true"] {
-        margin-left: -0.1%;
-      }
-    }
-    [data-fs-tooltip-placement="top-center"] {
-      [data-fs-tooltip-indicator="true"] {
-        margin-top: -1%;
-      }
-    }
-  }
-
-  [data-fs-table-row] {
-    height: var(--fs-spacing-8);
-    cursor: pointer;
-    padding: 0 var(--fs-spacing-4);
-
-    &:hover {
-      background-color: var(--fs-color-neutral-bkg);
-    }
-
-    [data-fs-table-cell="header"] {
-      display: flex;
-      height: var(--fs-spacing-8);
-      cursor: pointer;
-      align-items: center;
-    }
-
-    @include media("<tablet") {
-      [data-fs-table-cell] {
-        display: none;
-
-        &:first-child {
-          display: flex;
-        }
-
-        &:last-child {
-          display: table-cell;
-          padding-right: 0;
-        }
-      }
-    }
-
-    @include media("<notebook") {
-      [data-fs-table-cell="data"]:not(:first-of-type) {
-        text-align: right;
-      }
-
-      [data-fs-bp-cell-remaining] {
-        opacity: 0;
-      }
-
-      [data-fs-bp-cell-currency] {
-        display: none;
-      }
-    }
-  }
-  [data-fs-table-cell-width] {
-    width: 13.75rem;
-  }
-
-  [data-fs-bp-text-medium] {
-    font-weight: var(--fs-text-weight-medium);
-    font-size: var(--fs-text-size-1);
-    line-height: 20px;
-    letter-spacing: -1%;
-  }
-
-  [data-fs-bp-budgets-dropdown-trigger] [data-fs-icon] {
-    margin-right: 0;
-  }
-
-  [data-fs-bp-table-row-options] {
-    width: var(--fs-spacing-8);
-  }
-
-  [data-fs-bp-icon-cell] {
-    display: flex;
-    align-items: center;
-    height: inherit;
-
-    &[data-fs-table-cell] {
-      [data-fs-icon] {
-        width: var(--fs-spacing-4);
-        height: var(--fs-spacing-4);
-      }
-    }
-  }
+	@import "../BudgetProgressBar/budget-progress-bar.scss";
+	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	width: 100%;
+
+	[data-fs-table] {
+		overflow-x: visible;
+	}
+	[data-fs-bp-table-row] {
+		cursor: pointer;
+	}
+
+	[data-fs-bp-head-row] {
+		border-bottom: var(--fs-table-bordered-border-width) solid
+			var(--fs-table-bordered-border-color);
+
+		color: #5c5c5c;
+		height: var(--fs-spacing-8);
+	}
+
+	[data-fs-table-head="true"] {
+		[data-fs-bp-head-row="true"] {
+			&:hover {
+				background-color: initial;
+			}
+		}
+	}
+
+	[data-fs-table-cell-content] {
+		width: 99%;
+		height: 1.875rem;
+	}
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+		border-bottom: none;
+		text-wrap: balance;
+		text-align: justify;
+
+		[data-fs-tooltip-placement="left-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-left: -0.1%;
+			}
+		}
+		[data-fs-tooltip-placement="top-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-top: -1%;
+			}
+		}
+	}
+
+	[data-fs-table-row] {
+		height: var(--fs-spacing-8);
+		cursor: pointer;
+		padding: 0 var(--fs-spacing-4);
+
+		&:hover {
+			background-color: var(--fs-color-neutral-bkg);
+		}
+
+		[data-fs-table-cell="header"] {
+			display: flex;
+			height: var(--fs-spacing-8);
+			cursor: pointer;
+			align-items: center;
+		}
+
+		@include media("<tablet") {
+			[data-fs-table-cell] {
+				display: none;
+
+				&:first-child {
+					display: flex;
+				}
+
+				&:last-child {
+					display: table-cell;
+					padding-right: 0;
+				}
+			}
+		}
+
+		@include media("<notebook") {
+			[data-fs-table-cell="data"]:not(:first-of-type) {
+				text-align: right;
+			}
+
+			[data-fs-bp-cell-remaining] {
+				opacity: 0;
+			}
+
+			[data-fs-bp-cell-currency] {
+				display: none;
+			}
+		}
+	}
+	[data-fs-table-cell-width] {
+		width: 13.75rem;
+	}
+
+	[data-fs-bp-text-medium] {
+		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));
+		letter-spacing: -1%;
+	}
+
+	[data-fs-bp-budgets-dropdown-trigger] [data-fs-icon] {
+		margin-right: 0;
+	}
+
+	[data-fs-bp-table-row-options] {
+		width: var(--fs-spacing-8);
+	}
+
+	[data-fs-bp-icon-cell] {
+		display: flex;
+		align-items: center;
+		height: inherit;
+
+		&[data-fs-table-cell] {
+			[data-fs-icon] {
+				width: var(--fs-spacing-4);
+				height: var(--fs-spacing-4);
+			}
+		}
+	}
 }

package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx

@@ -1,7 +1,5 @@
 import { useCallback, useState } from "react";
 
-import { useRouter } from "next/router";
-
 import { IconButton } from "@faststore/ui";
 
 import { HeaderInside, Icon, InternalSearch } from "../../../shared/components";
@@ -13,7 +11,6 @@ import {
   useQueryParams,
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
 import { BudgetsTable } from "../../components/BudgetsTable/BudgetsTable";
 import { CreateBudgetAllocationDrawer } from "../../components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
@@ -41,7 +38,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     currentOrgUnit: orgUnit,
     currentContract: contract,
   } = useBuyerPortal();
-  const route = useRouter();
   const [paginationLoading, setPaginationLoading] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [page, setPage] = useState<number>(1);
@@ -54,16 +50,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     useState<BudgetAllocationListResponse>();
   const [budgetsToEdit, setBudgetToEdit] = useState<Budget>();
 
-  const handleEditPage = (budgetId: string) => {
-    route.push(
-      buyerPortalRoutes.budgetsDetails({
-        orgUnitId: orgUnit?.id ?? "",
-        contractId: contract?.id ?? "",
-        budgetId,
-      })
-    );
-  };
-
   const {
     open: openDeleteDrawer,
     close: closeDeleteDrawer,
@@ -186,7 +172,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
                   total={Number(total ?? 0)}
                   onClickAllocationPage={handleAddAllocation}
                   onClickEditBudget={handleBudgetEditPage}
-                  onClickDetailsPage={handleEditPage}
                   openDeleteDrawer={(budgetId) => {
                     setSelectedBudgetId(budgetId);
                     openDeleteDrawer();

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

@@ -7,6 +7,7 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useAddBuyingPolicy } from "../../hooks";
 import { buyingPolicyDefault } from "../../utils";
 
+import type { BudgetListResponse } from "../../../budgets/types";
 import type { BuyingPolicy } from "../../types";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -19,6 +20,7 @@ export type AddBuyingPolicyDrawerProps = Omit<
   onCreate?: () => void;
   orgUnitId: string;
   contractId: string;
+  budgetData?: BudgetListResponse;
 };
 
 export const AddBuyingPolicyDrawer = ({
@@ -26,6 +28,7 @@ export const AddBuyingPolicyDrawer = ({
   onCreate,
   orgUnitId,
   contractId,
+  budgetData = { data: [], total: 0 },
   ...props
 }: AddBuyingPolicyDrawerProps) => {
   const { pushToast } = useUI();
@@ -85,6 +88,7 @@ export const AddBuyingPolicyDrawer = ({
       orgUnitId={orgUnitId}
       contractId={contractId}
       initialValues={defaultBuyingPolicyValues}
+      budgetData={budgetData}
       {...props}
     />
   );

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

@@ -23,11 +23,15 @@ import { type BuyingPolicy } from "../../types";
 import {
   BUYING_POLICIES_WORKFLOW_TYPES,
   buyingPolicyDefault,
+  BUDGET_CRITERIA,
   orderFieldsCriteriaOptions,
   spendingLimitsCriteriaOptions,
 } from "../../utils";
 import { BUYING_POLICIES_WORKFLOW_LABELS } from "../../utils/buyingPoliciesWorkflowTypes";
 import { getHighlightedText } from "../../utils/criteriaHighlightSyntax";
+import { BudgetCriteriaSelector } from "../BudgetCriteriaSelector";
+
+import type { BudgetListResponse } from "../../../budgets/types";
 
 const LIMIT_OF_LEVELS = 5;
 
@@ -50,6 +54,7 @@ export type BasicBuyingPolicyDrawerProps = Omit<
   drawerTitle?: string;
   saveButtonLabel?: string;
   isDrawerLoading?: boolean;
+  budgetData?: BudgetListResponse;
 };
 
 export const BasicBuyingPolicyDrawer = ({
@@ -62,6 +67,7 @@ export const BasicBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   initialValues = defaultBuyingPolicyValues,
+  budgetData = { data: [], total: 0 },
   ...props
 }: BasicBuyingPolicyDrawerProps) => {
   const [form, setForm] = useState<BuyingPolicyForm>(initialValues);
@@ -167,6 +173,27 @@ export const BasicBuyingPolicyDrawer = ({
     });
   };
 
+  const isBudgetCriteria =
+    criteria === BUDGET_CRITERIA ||
+    criteria.includes('$exists(budgetData.unitAllocations.*[budgetId="');
+
+  const renderCriteria = (criteria: string) => {
+    if (isBudgetCriteria) {
+      return (
+        <BudgetCriteriaSelector
+          budgetData={budgetData}
+          currentCriteria={criteria}
+          onCriteriaChange={(newCriteria) =>
+            updateField("criteria", newCriteria)
+          }
+          onEditablePartClick={() => setCriteriaFocused(true)}
+        />
+      );
+    }
+
+    return getHighlightedText(criteria);
+  };
+
   const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
@@ -258,10 +285,14 @@ export const BasicBuyingPolicyDrawer = ({
               {!criteriaFocused && (
                 <div
                   data-fs-bp-basic-buying-policy-criteria-input-highlighted
-                  onClick={() => setCriteriaFocused(true)}
+                  onClick={() => {
+                    if (!isBudgetCriteria) {
+                      setCriteriaFocused(true);
+                    }
+                  }}
                 >
                   {criteria ? (
-                    getHighlightedText(criteria)
+                    renderCriteria(criteria)
                   ) : (
                     <span data-fs-bp-label>Example: value {">"} 10000</span>
                   )}
@@ -280,7 +311,7 @@ export const BasicBuyingPolicyDrawer = ({
                   label: option.label,
                   value: option.criteria,
                 }))}
-                onSelect={(value) => updateField("criteria", value)}
+                onSelect={(value: string) => updateField("criteria", value)}
                 triggerLabel="Set spending limit criteria"
                 highlightText={getHighlightedText}
               />
@@ -290,7 +321,7 @@ export const BasicBuyingPolicyDrawer = ({
                   label: option.label,
                   value: option.criteria,
                 }))}
-                onSelect={(value) => updateField("criteria", value)}
+                onSelect={(value: string) => updateField("criteria", value)}
                 triggerLabel="Set order field criteria"
                 highlightText={getHighlightedText}
               />

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

@@ -1,6 +1,7 @@
 @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
 @import "../../../shared/components/OrgUnitInputSearch/org-unit-input-search.scss";
 @import "../../../shared/components/CustomDropdown/custom-dropdown.scss";
+@import "../BudgetCriteriaSelector/budget-criteria-selector.scss";
 
 [data-fs-bp-basic-buying-policy-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
@@ -105,7 +106,6 @@
           var(--fs-spacing-3);
         border-radius: calc(var(--fs-border-radius) * 2);
         text-wrap: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         cursor: pointer;
@@ -124,6 +124,7 @@
       }
     }
 
+
     [data-fs-bp-input-text-criteria] {
       color: #5c5c5c;
 

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

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+
+import { CustomDropdown } from "../../../shared/components/CustomDropdown/CustomDropdown";
+
+import type { BudgetListResponse } from "../../../budgets/types";
+
+export type BudgetCriteriaSelectorProps = {
+  onCriteriaChange: (criteria: string) => void;
+  currentCriteria: string;
+  onEditablePartClick?: () => void;
+  budgetData?: BudgetListResponse;
+};
+
+export const BudgetCriteriaSelector = ({
+  onCriteriaChange,
+  currentCriteria,
+  onEditablePartClick,
+  budgetData = { data: [], total: 0 },
+}: BudgetCriteriaSelectorProps) => {
+  const extractBudgetValueFromCriteria = (criteria: string): string => {
+    const match = criteria.match(/budgetId="([^"]+)"/);
+    return match ? match[1] : "budget-001";
+  };
+
+  const [currentBudgetValue, setCurrentBudgetValue] = useState<string>(
+    extractBudgetValueFromCriteria(currentCriteria)
+  );
+
+  useEffect(() => {
+    const extractedValue = extractBudgetValueFromCriteria(currentCriteria);
+    setCurrentBudgetValue(extractedValue);
+  }, [currentCriteria]);
+
+  const getMatchingBudget = () => {
+    return budgetData.data.find(
+      (budget) =>
+        budget.id === currentBudgetValue || budget.id === currentBudgetValue
+    );
+  };
+
+  const generateCriteriaString = (value: string) => {
+    return `$exists(budgetData.unitAllocations.*[budgetId="${value}"])`;
+  };
+
+  const handleBudgetSelect = (budgetId: string) => {
+    const selectedBudget = budgetData.data.find(
+      (budget) => budget.id === budgetId
+    );
+    if (selectedBudget) {
+      const newValue = selectedBudget.id;
+      setCurrentBudgetValue(newValue);
+      const newCriteria = generateCriteriaString(newValue);
+      onCriteriaChange(newCriteria);
+    }
+  };
+
+  const handleBudgetSelectorClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const handleEditablePartClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEditablePartClick?.();
+  };
+
+  const matchingBudget = getMatchingBudget();
+  const displayValue = matchingBudget ? matchingBudget.id : currentBudgetValue;
+  const hasBudgetData = budgetData.data.length > 0;
+
+  return (
+    <div
+      data-fs-bp-budget-criteria-selector
+      onClick={handleBudgetSelectorClick}
+    >
+      <div data-fs-bp-budget-criteria-string>
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          $exists(budgetData.unitAllocations.*[budgetId="
+        </span>
+        {hasBudgetData ? (
+          <div onClick={handleBudgetSelectorClick}>
+            <CustomDropdown
+              options={budgetData.data.map((budget) => ({
+                label: budget.name,
+                value: budget.id,
+              }))}
+              onSelect={handleBudgetSelect}
+              triggerLabel={displayValue}
+              highlightText={(text) => (
+                <div data-fs-bp-dropdown-option>
+                  <div data-fs-bp-dropdown-option-label>{text}</div>
+                  <div data-fs-bp-dropdown-option-uuid>
+                    {budgetData.data.find((b) => b.name === text)?.id}
+                  </div>
+                </div>
+              )}
+            />
+          </div>
+        ) : (
+          <span
+            onClick={handleEditablePartClick}
+            data-fs-bp-editable-part
+            data-fs-bp-budget-value
+          >
+            {displayValue}
+          </span>
+        )}
+        <span onClick={handleEditablePartClick} data-fs-bp-editable-part>
+          "])
+        </span>
+      </div>
+    </div>
+  );
+};