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

package/src/features/buying-policies/components/BudgetCriteriaSelector/budget-criteria-selector.scss

@@ -0,0 +1,139 @@
+[data-fs-bp-budget-criteria-selector] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: #f5f5f5;
+  border: var(--fs-border-width) solid #d6d6d6;
+  border-radius: calc(var(--fs-border-radius) * 2);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  [data-fs-bp-budget-criteria-string] {
+    font-family: "Roboto", monospace;
+    font-size: var(--fs-text-size-1);
+    color: #5c5c5c;
+    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: #f5f5f5;
+        color: #1f1f1f;
+      }
+    }
+
+    [data-fs-bp-custom-dropdown] {
+      display: inline-flex;
+
+      [data-fs-bp-custom-dropdown-trigger] {
+        color: #b521b6;
+        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: #f5f5f5;
+        }
+      }
+
+      [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: #fff;
+        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: #fff;
+        }
+
+        &::-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: #ebebeb;
+          }
+
+          [data-fs-bp-dropdown-option] {
+            font-family: Inter;
+
+            [data-fs-bp-dropdown-option-label] {
+              font-weight: var(--fs-text-weight-semibold);
+              color: #1f1f1f;
+              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: #5c5c5c;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [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 #e0e0e0;
+    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-budget-value] {
+    color: #b521b6;
+  }
+}

package/src/features/buying-policies/components/BudgetCriteriaSelector/index.ts

@@ -0,0 +1,4 @@
+export {
+  BudgetCriteriaSelector,
+  type BudgetCriteriaSelectorProps,
+} from "./BudgetCriteriaSelector";

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

@@ -7,11 +7,14 @@ import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
+import type { BudgetListResponse } from "../../../budgets/types";
+
 export type BuyingPolicyDropdownMenuProps = {
   id: string;
   name: string;
   onDelete?: () => void;
   onUpdate?: () => void;
+  budgetData?: BudgetListResponse;
 };
 
 export const BuyingPolicyDropdownMenu = ({
@@ -19,6 +22,7 @@ export const BuyingPolicyDropdownMenu = ({
   name,
   onDelete,
   onUpdate,
+  budgetData = { data: [], total: 0 },
 }: BuyingPolicyDropdownMenuProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -80,6 +84,7 @@ export const BuyingPolicyDropdownMenu = ({
           contractId={currentContract?.id ?? ""}
           buyingPolicyId={id}
           onUpdate={onUpdate}
+          budgetData={budgetData}
           {...updateBuyingPolicyDrawerProps}
           isOpen={isUpdateBuyingPolicyDrawerOpen}
         />

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

@@ -7,6 +7,8 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useGetBuyingPolicy, useUpdateBuyingPolicy } from "../../hooks";
 import { buyingPolicyDefault } from "../../utils";
 
+import type { BudgetListResponse } from "../../../budgets/types";
+
 export type UpdateBuyingPolicyDrawerProps = Omit<
   BasicBuyingPolicyDrawerProps,
   "children" | "initialValues"
@@ -15,6 +17,7 @@ export type UpdateBuyingPolicyDrawerProps = Omit<
   orgUnitId: string;
   contractId: string;
   buyingPolicyId: string;
+  budgetData?: BudgetListResponse;
 };
 
 export const UpdateBuyingPolicyDrawer = ({
@@ -23,6 +26,7 @@ export const UpdateBuyingPolicyDrawer = ({
   orgUnitId,
   contractId,
   buyingPolicyId,
+  budgetData = { data: [], total: 0 },
   ...props
 }: UpdateBuyingPolicyDrawerProps) => {
   const { buyingPolicy, isBuyingPolicyLoading } = useGetBuyingPolicy(
@@ -93,6 +97,7 @@ export const UpdateBuyingPolicyDrawer = ({
       initialValues={{ ...buyingPolicyDefault, ...(buyingPolicy ?? {}) }}
       orgUnitId={orgUnitId}
       contractId={contractId}
+      budgetData={budgetData}
       {...props}
     />
   );

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -21,6 +21,7 @@ import { BuyingPolicyDropdownMenu } from "../../components";
 import { AddBuyingPolicyDrawer } from "../../components/AddBuyingPolicyDrawer/AddBuyingPolicyDrawer";
 import { useGetBuyingPolicies } from "../../hooks/useGetBuyingPolicies";
 
+import type { BudgetListResponse } from "../../../budgets/types";
 import type { BuyingPolicy } from "../../types";
 
 export type BuyingPoliciesLayoutProps = {
@@ -28,12 +29,14 @@ export type BuyingPoliciesLayoutProps = {
   total: number;
   search: string;
   page: number;
+  budgetData?: BudgetListResponse;
 };
 
 export const BuyingPoliciesLayout = ({
   buyingPolicies: initialBuyingPolicies,
   search,
   page,
+  budgetData = { data: [], total: 0 },
 }: BuyingPoliciesLayoutProps) => {
   const { currentContract, currentOrgUnit } = useBuyerPortal();
 
@@ -82,6 +85,67 @@ export const BuyingPoliciesLayout = ({
     ...addBuyingPolicyDrawerProps
   } = useDrawerProps();
 
+  const columns = getTableColumns({
+    actionsLength: 1,
+  });
+
+  const renderLoading = () => (
+    <Table layoutFixed>
+      <Table.Head columns={columns} />
+      <Table.Body>
+        <Table.Loading columns={columns.length} />
+      </Table.Body>
+    </Table>
+  );
+
+  const renderEmptyState = () => (
+    <EmptyState
+      title="No buying policies yet"
+      iconName="Rebase"
+      iconSize={40}
+    />
+  );
+
+  function renderContent() {
+    if (isLoading) {
+      return renderLoading();
+    }
+
+    if (buyingPolicies.length === 0) {
+      return renderEmptyState();
+    }
+
+    return (
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
+          {buyingPolicies.map((buyingPolicy) => (
+            <Table.Row
+              key={buyingPolicy.id}
+              title={buyingPolicy.name}
+              iconName="Rebase"
+              iconSize={24}
+              href={buyerPortalRoutes.buyingPolicyDetails({
+                contractId: currentContract?.id ?? "",
+                orgUnitId: currentOrgUnit?.id ?? "",
+                buyingPolicyId: buyingPolicy.id,
+              })}
+              dropdownMenu={
+                <BuyingPolicyDropdownMenu
+                  id={buyingPolicy.id}
+                  name={buyingPolicy.name}
+                  onUpdate={handleRefetchBuyingPolicies}
+                  onDelete={handleRefetchBuyingPolicies}
+                  budgetData={budgetData}
+                />
+              }
+            />
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  }
+
   return (
     <GlobalLayout>
       <FinanceTabsLayout pageName="Finance and Compliance">
@@ -101,52 +165,7 @@ export const BuyingPoliciesLayout = ({
             />
           </div>
 
-          {isLoading ? (
-            <Table>
-              <Table.Head
-                columns={getTableColumns({
-                  withType: false,
-                  withActions: false,
-                })}
-              />{" "}
-              <Table.Body>
-                <Table.Loading />
-              </Table.Body>
-            </Table>
-          ) : buyingPolicies.length === 0 ? (
-            <EmptyState
-              title="No buying policies yet"
-              iconName="Rebase"
-              iconSize={40}
-            />
-          ) : (
-            <Table>
-              <Table.Head columns={getTableColumns({ withType: false })} />
-              <Table.Body>
-                {buyingPolicies.map((buyingPolicy) => (
-                  <Table.Row
-                    key={buyingPolicy.id}
-                    title={buyingPolicy.name}
-                    iconName="Rebase"
-                    iconSize={24}
-                    href={buyerPortalRoutes.buyingPolicyDetails({
-                      contractId: currentContract?.id ?? "",
-                      orgUnitId: currentOrgUnit?.id ?? "",
-                      buyingPolicyId: buyingPolicy.id,
-                    })}
-                    dropdownMenu={
-                      <BuyingPolicyDropdownMenu
-                        id={buyingPolicy.id}
-                        name={buyingPolicy.name}
-                        onUpdate={handleRefetchBuyingPolicies}
-                        onDelete={handleRefetchBuyingPolicies}
-                      />
-                    }
-                  />
-                ))}
-              </Table.Body>
-            </Table>
-          )}
+          {renderContent()}
 
           <div data-fs-bp-buying-policies-paginator>
             {totalBuyingPolicies > buyingPolicies.length ? (
@@ -172,6 +191,7 @@ export const BuyingPoliciesLayout = ({
             contractId={currentContract?.id ?? ""}
             isOpen={isAddBuyingPolicyDrawerOpen}
             onCreate={handleRefetchBuyingPolicies}
+            budgetData={budgetData}
             {...addBuyingPolicyDrawerProps}
           />
         )}

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -4,83 +4,77 @@
 @import "../../components/AddBuyingPolicyDrawer/add-buying-policy-drawer.scss";
 
 [data-fs-buying-policies-section] {
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/Table/table.scss";
-  @import "../../../shared/components/LevelDivider/level-divider.scss";
-  @import "../../../shared/components/Paginator/paginator.scss";
-  @import "../../../shared/components/EmptyState/empty-state.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/LevelDivider/level-divider.scss";
+	@import "../../../shared/components/Paginator/paginator.scss";
+	@import "../../../shared/components/EmptyState/empty-state.scss";
 
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
 
-  @include media("<=tablet") {
-    padding-bottom: 3rem;
+	@include media("<=tablet") {
+		padding-bottom: var(--fs-spacing-7);
 
-    [data-fs-bp-header-inside] {
-      [data-fs-header-inside-button] {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        padding: 12px;
-        cursor: pointer;
-        z-index: 10;
-      }
-    }
-  }
+		[data-fs-bp-header-inside] {
+			[data-fs-header-inside-button] {
+				position: fixed;
+				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				padding: var(--fs-spacing-2);
+				cursor: pointer;
+				z-index: 10;
+			}
+		}
+	}
 
-  [data-fs-empty-state-section] {
-    flex: 1;
-    color: #858585;
-  }
+	[data-fs-empty-state-section] {
+		flex: 1;
+		color: #858585;
+	}
 
-  [data-fs-buying-policies-filter] {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 0 var(--fs-spacing-4);
-    [data-fs-bp-paginator-counter] {
-      font-size: var(--fs-text-size-1);
-      color: #5c5c5c;
-      display: block;
-    }
+	[data-fs-buying-policies-filter] {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 0 var(--fs-spacing-4);
+		[data-fs-bp-paginator-counter] {
+			font-size: var(--fs-text-size-1);
+			color: #5c5c5c;
+			display: block;
+		}
 
-    @include media("<=tablet") {
-      [data-fs-buyer-portal-internal-search] {
-        width: 100%;
-      }
+		@include media("<=tablet") {
+			[data-fs-buyer-portal-internal-search] {
+				width: 100%;
+			}
 
-      [data-fs-bp-paginator-counter] {
-        display: none;
-      }
-    }
-  }
+			[data-fs-bp-paginator-counter] {
+				display: none;
+			}
+		}
+	}
 
-  [data-fs-buying-policies-heading] {
-    display: flex;
-    font-weight: var(--fs-text-weight-regular);
-    font-size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-    color: #5c5c5c;
-    margin-bottom: var(--fs-spacing-1);
-  }
+	[data-fs-buying-policies-heading] {
+		display: flex;
+		font-weight: var(--fs-text-weight-regular);
+		font-size: var(--fs-text-size-1);
+		line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+		color: #5c5c5c;
+		margin-bottom: var(--fs-spacing-1);
+	}
 
-  [data-fs-bp-buying-policies-paginator] {
-    display: none;
-    @include media("<=tablet") {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: var(--fs-spacing-0);
-      padding: var(--fs-spacing-2) 0;
-      font-size: var(--fs-text-size-1);
-      color: #5c5c5c;
-    }
-  }
-
-  [data-fs-bp-table] {
-    td {
-      padding: var(--fs-spacing-1) 0;
-    }
-  }
+	[data-fs-bp-buying-policies-paginator] {
+		display: none;
+		@include media("<=tablet") {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: var(--fs-spacing-0);
+			padding: var(--fs-spacing-2) 0;
+			font-size: var(--fs-text-size-1);
+			color: #5c5c5c;
+		}
+	}
 }

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

@@ -1,5 +1,8 @@
 export { buyingPolicyDefault } from "./buyingPolicyDefault";
-export { orderFieldsCriteriaOptions } from "./orderFieldsCriteriaOptions";
+export {
+  BUDGET_CRITERIA,
+  orderFieldsCriteriaOptions,
+} from "./orderFieldsCriteriaOptions";
 export { spendingLimitsCriteriaOptions } from "./spendingLimitsCriteriaOptions";
 export {
   BUYING_POLICIES_WORKFLOW_TYPES,

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

@@ -1,39 +1,42 @@
+export const BUDGET_CRITERIA =
+  '$exists(budgetData.unitAllocations.*[budgetId="${budget-id}"])';
+
 export const orderFieldsCriteriaOptions = [
   {
     label: "If the order contains a budget",
-    criteria: "$count(budgetData.unitAllocations) > 0",
+    criteria: "$exists(budgetData.unitAllocations.*[])",
   },
   {
     label: "If the order contains the budgets X, Y, Z",
-    criteria:
-      'budgetData.unitAllocations.budgetId = "Tech" or budgetData.unitAllocations.budgetId = "Growth"',
+    criteria: BUDGET_CRITERIA,
   },
   {
     label: "If the order contains an exceeded budget",
-    criteria: "budgetData.unitAllocations.budgetBalance.remaining < 0",
+    criteria:
+      "$exists(budgetData.unitAllocations.**.budgetBalance[remaining < 0])",
   },
   {
     label: "If the order contains an expired budget Pending confirmation",
-    criteria: "budgetData.unitAllocations.cycleConfiguration.endDate < now()",
+    criteria: "$exists(budgetData.unitAllocations.*[budgetEndDate < $now()])",
   },
   {
     label: "If the order contains a PO number",
-    criteria: '$exists(customData.customFields.fields[name="poNumber"].value)',
+    criteria: '$exists(customData.customFields.fields[name="PO Number"].value)',
   },
   {
     label: "If the order contains the PO numbers X, Y, Z",
     criteria:
-      'customData.customFields.fields[name="poNumber"].value = "1112223334444" or customData.customFields.fields[name="poNumber"].value = "1234567890"',
+      'customData.customFields.fields[name="PO Number"].value = "1112223334444" or customData.customFields.fields[name="PO Number"].value = "1234567890"',
   },
   {
     label: "If the order contains a cost center",
     criteria:
-      '$exists(customData.customFields.fields[name="costCenter"].value)',
+      '$exists(customData.customFields.fields[name="Cost Center"].value)',
   },
   {
     label: "If the order contains the cost centers X, Y, Z",
     criteria:
-      'customData.customFields.fields[name="costCenter"].value = "CC1" or customData.customFields.fields[name="costCenter"].value = "CC2"',
+      'customData.customFields.fields[name="Cost Center"].value = "CC1" or customData.customFields.fields[name="Cost Center"].value = "CC2"',
   },
   {
     label: "If all order items are negotiated items",

package/src/features/collections/components/CollectionsTable/CollectionsTable.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { useSearchParams } from "next/navigation";
 
-import { Tooltip } from "@faststore/ui";
+import { IconButton, Tooltip } from "@faststore/ui";
 
 import { Icon, Table } from "../../../shared/components";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
@@ -45,10 +45,12 @@ export function CollectionsTable({
     openRemoveCollectionDrawer();
   }
 
+  const columns = getTableColumns({ actionsLength: 1 });
+
   return (
     <div data-fs-bp-collection-table>
-      <Table>
-        <Table.Head columns={getTableColumns()} />
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
         <Table.Body>
           {collections.map((item) => (
             <Table.Row
@@ -57,34 +59,26 @@ export function CollectionsTable({
               key={item.id}
               iconSize={24}
               searchTerm={searchTerm ?? undefined}
-            >
-              <Table.Cell data-fs-bp-table-row-options align="right">
+              actionIcons={
                 <Tooltip
                   content={removeTooltipContent}
                   placement={"left-center"}
                 >
-                  <button
+                  <IconButton
                     data-fs-collections-row-action-button
-                    disabled={removeDisabled}
+                    icon={<Icon name={"MinusCircle"} width={20} height={20} />}
                     aria-label="Remove collections"
-                    type="button"
+                    disabled={removeDisabled}
                     onClick={() =>
                       handleRemoveSelectedCollection({
                         id: item.id,
                         name: item.name,
                       })
                     }
-                  >
-                    <Icon
-                      data-fs-icon
-                      name={"MinusCircle"}
-                      width={20}
-                      height={20}
-                    />
-                  </button>
+                  />
                 </Tooltip>
-              </Table.Cell>
-            </Table.Row>
+              }
+            />
           ))}
         </Table.Body>
       </Table>