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

package/CHANGELOG.md

@@ -7,6 +7,17 @@ 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
+- Change Products Assortment to client side
+
 ## [1.3.47] - 2025-12-19
 
 - Alternative Login Keys:
@@ -406,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.47...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
@@ -456,6 +467,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.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
 [1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.47",
+  "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/org-units/hooks/useOrgUnitByUser.ts

@@ -8,7 +8,10 @@ export const useOrgUnitByUser = (
   const { data, error, isLoading, refetch } = useQuery(
     `api/org-unit-by-user-id/${userId}`,
     ({ cookie }) => getOrgUnitByUserIdService({ cookie, userId }),
-    options
+    {
+      ...options,
+      lazy: !userId || options?.lazy,
+    }
   );
   return {
     orgUnit: data,

package/src/features/product-assortment/hooks/useGetProductAssortment.ts

@@ -0,0 +1,52 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getProductAssortmentFromScopeService } from "../services/get-product-assortment-from-scope.service";
+
+export const useGetProductAssortment = ({
+  contractId,
+  orgUnitId,
+  search = "",
+  filterByScope = false,
+  page = 1,
+  options,
+}: {
+  contractId: string;
+  orgUnitId: string;
+  filterByScope?: boolean;
+  search?: string;
+  page?: number;
+  options?: QueryOptions<
+    AwaitedType<typeof getProductAssortmentFromScopeService>
+  >;
+}) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `customers/${contractId}/units/${orgUnitId}/collections`,
+    ({ cookie }) =>
+      getProductAssortmentFromScopeService({
+        args: {
+          cookie,
+          contractId,
+          unitId: orgUnitId,
+          filterByScope,
+          name: search,
+          page,
+        },
+      }),
+    { ...options }
+  );
+
+  return {
+    data: {
+      items: data?.items ?? [],
+      paging: {
+        page: data?.paging?.page ?? 1,
+        total: data?.paging?.total ?? 0,
+        pages: data?.paging?.pages ?? 0,
+        limit: data?.paging?.limit ?? 10,
+        perPage: data?.paging?.perPage ?? 10,
+      },
+    },
+    hasError: !!error,
+    isProductAssortmentLoading: isLoading,
+    refetchProductAssortment: refetch,
+  };
+};

package/src/features/product-assortment/hooks/useGetProductAssortmentFromContract.ts

@@ -0,0 +1,35 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getProductAssortmentFromContractService } from "../services/get-product-assortment-from-contract.service";
+
+export const useGetProductAssortmentFromContract = ({
+  contractId,
+  orgUnitId,
+  search = "",
+  options,
+}: {
+  contractId: string;
+  orgUnitId: string;
+  search?: string;
+  options?: QueryOptions<
+    AwaitedType<typeof getProductAssortmentFromContractService>
+  >;
+}) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `customers/${contractId}/units/${orgUnitId}/collections`,
+    ({ cookie }) =>
+      getProductAssortmentFromContractService({
+        cookie,
+        contractId,
+        unitId: orgUnitId,
+        name: search,
+      }),
+    { ...options }
+  );
+
+  return {
+    data,
+    hasError: !!error,
+    isProductAssortmentFromContractLoading: isLoading,
+    refetchProductAssortmentFromContract: refetch,
+  };
+};

package/src/features/product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from "react";
+
 import { Tooltip } from "@faststore/ui";
 
 import {
@@ -6,11 +8,16 @@ import {
   Paginator,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
-import { useBuyerPortal, usePageItems } from "../../../shared/hooks";
-import { useDrawerProps } from "../../../shared/hooks";
+import {
+  useBuyerPortal,
+  useDrawerProps,
+  usePageItems,
+} from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { AddProductAssortmentDrawer } from "../../components";
 import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/ProductAssortmentTable";
+import { useGetProductAssortment } from "../../hooks/useGetProductAssortment";
+import { useGetProductAssortmentFromContract } from "../../hooks/useGetProductAssortmentFromContract";
 
 import type {
   ProductAssortmentLayoutProps,
@@ -18,11 +25,10 @@ import type {
 } from "../../types";
 
 export const ProductAssortmentLayout = ({
-  initialProductAssortment,
-  drawerProductAssortment,
-  isContractEmpty,
   page,
   search,
+  orgUnitId,
+  contractId,
 }: ProductAssortmentLayoutProps) => {
   const {
     currentOrgUnit: orgUnit,
@@ -30,6 +36,39 @@ export const ProductAssortmentLayout = ({
     currentContract: contract,
   } = useBuyerPortal();
 
+  const { data: drawerProductAssortment } = useGetProductAssortment({
+    contractId,
+    orgUnitId,
+  });
+  const { data: contractAssortment } = useGetProductAssortmentFromContract({
+    contractId,
+    orgUnitId,
+  });
+  const { data: initialProductAssortment, isProductAssortmentLoading } =
+    useGetProductAssortment({
+      filterByScope: true,
+      contractId,
+      orgUnitId,
+      search,
+      page,
+    });
+
+  const isContractEmpty = !contractAssortment || contractAssortment.total === 0;
+
+  const itemsKey = useMemo(
+    () =>
+      initialProductAssortment.items
+        .map((item) => item.id)
+        .sort()
+        .join(","),
+    [initialProductAssortment.items]
+  );
+
+  const memoizedInitialItems = useMemo(
+    () => initialProductAssortment.items,
+    [itemsKey]
+  );
+
   const {
     isLoading,
     items: productAssortment,
@@ -38,7 +77,7 @@ export const ProductAssortmentLayout = ({
     increasePage,
     decreasePage,
   } = usePageItems<ProductAssortmentWithAdditionalInformation>({
-    initialItems: initialProductAssortment.items,
+    initialItems: memoizedInitialItems,
     search,
     page,
   });
@@ -53,7 +92,6 @@ export const ProductAssortmentLayout = ({
     ...addProductAssortmentDrawerProps
   } = useDrawerProps();
 
-  //const enabledAssortment = productAssortment.filter((p) => p.isEnabled);
   const hasAllAssortment = drawerProductAssortment.items.length === 0;
   const isEmpty = productAssortment.length === 0;
 
@@ -72,7 +110,7 @@ export const ProductAssortmentLayout = ({
     <GlobalLayout>
       <ContractTabsLayout
         orgUnitName={orgUnit?.name ?? ""}
-        orgUnitId={orgUnit?.id ?? ""}
+        orgUnitId={orgUnitId ?? orgUnit?.id ?? ""}
         contractName={contract?.name ?? ""}
         contractId={contract?.id ?? ""}
         pageName="Contract"
@@ -80,6 +118,7 @@ export const ProductAssortmentLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-product-assortment-container>
@@ -140,9 +179,11 @@ export const ProductAssortmentLayout = ({
                     {initialProductAssortment.paging.page > 1 ? (
                       <Paginator.NextPageButton
                         onClick={decreasePage}
-                        disabled={isLoading}
+                        disabled={isLoading || isProductAssortmentLoading}
                       >
-                        {isLoading ? "Loading" : "Previous Page"}
+                        {isLoading || isProductAssortmentLoading
+                          ? "Loading"
+                          : "Previous Page"}
                       </Paginator.NextPageButton>
                     ) : (
                       <></>
@@ -150,9 +191,11 @@ export const ProductAssortmentLayout = ({
                     {!isLastPage && !isEmpty ? (
                       <Paginator.NextPageButton
                         onClick={increasePage}
-                        disabled={isLoading}
+                        disabled={isLoading || isProductAssortmentLoading}
                       >
-                        {isLoading ? "Loading" : "Next Page"}
+                        {isLoading || isProductAssortmentLoading
+                          ? "Loading"
+                          : "Next Page"}
                       </Paginator.NextPageButton>
                     ) : (
                       <></>

package/src/features/product-assortment/layouts/ProductAssortmentLayout/product-assortment-layout.scss

@@ -95,4 +95,4 @@
     margin-top: var(--fs-spacing-0);
     padding: var(--fs-spacing-2) 0;
   }
-}
+}

package/src/features/product-assortment/types/index.ts

@@ -1,8 +1,5 @@
-import type { ContractData } from "../../contracts/types";
-import type { OrgUnitBasicData } from "../../org-units/types";
 import type { BasicDrawerProps } from "../../shared/components";
 import type { ErrorBoundaryProps } from "../../shared/components/ErrorBoundary/types";
-import type { ClientContext } from "../../shared/utils";
 
 export type ProductAssortmentSummary = {
   id: string;
@@ -55,24 +52,19 @@ export interface ProductAssortmentSelectedProps {
 }
 
 export type ProductAssortmentLayoutProps = {
-  initialProductAssortment: GetProductAssortmentFromContractResponse;
-  drawerProductAssortment: GetProductAssortmentFromContractResponse;
+  userId?: string;
+  orgUnitId: string;
+  contractId: string;
   page: number;
   search: string;
-  isContractEmpty: boolean;
 };
 
 export type ProductAssortmentData = {
-  productAssortment: GetProductAssortmentFromContractResponse;
-  drawerProductAssortment: GetProductAssortmentFromContractResponse;
-  isContractEmpty: boolean;
+  userId: string;
+  orgUnitId: string;
+  contractId: string;
   search: string;
   page: number;
-  context: {
-    clientContext: ClientContext;
-    currentOrgUnit: OrgUnitBasicData;
-    currentContract: ContractData | null;
-  };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
 };

package/src/features/shared/hooks/usePageItems.ts

@@ -37,6 +37,8 @@ export const usePageItems = <T>({
   const [searchTerm, setSearchTerm] = useState(search ?? "");
   const [isLoading, setIsLoading] = useState(false);
 
+  const { setQueryStrings, setQueryString } = useQueryParams();
+
   useDebounce(searchTerm, DEBOUNCE_TIMEOUT, {
     onDebounce: (value) => {
       setIsLoading(true);
@@ -54,8 +56,6 @@ export const usePageItems = <T>({
     },
   });
 
-  const { setQueryStrings, setQueryString } = useQueryParams();
-
   useEffect(() => {
     setItems([]);
   }, [search]);

package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx

@@ -18,6 +18,7 @@ export type ContractTabsLayoutProps = {
     image?: ReactNode;
     name: string;
     role?: string;
+    id?: string;
   };
   loading?: boolean;
   children?: ReactNode;

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.47";
+export const CURRENT_VERSION = "1.3.49";

package/src/pages/productAssortment.tsx

@@ -1,80 +1,80 @@
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { ProductAssortmentLayout } from "../features/product-assortment/layouts";
-import { getProductAssortmentFromContractService } from "../features/product-assortment/services/get-product-assortment-from-contract.service";
-import { getProductAssortmentFromScopeService } from "../features/product-assortment/services/get-product-assortment-from-scope.service";
 import { withErrorBoundary } from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
+  type ClientContext,
   getValidPage,
-  withLoaderErrorBoundary,
   withAuthLoader,
+  withLoaderErrorBoundary,
   withProviders,
 } from "../features/shared/utils";
+import { getUserByIdService } from "../features/users/services";
 
-import type {
-  ProductAssortmentData,
-  ProductAssortmentQuery,
-} from "../features/product-assortment/types";
+import type { ContractData } from "../features/contracts/types";
+import type { OrgUnitBasicData } from "../features/org-units/types";
+import type { ProductAssortmentQuery } from "../features/product-assortment/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
+import type { UserData } from "../features/users/types";
+
+export type ProductAssortmentPageData = {
+  data: {
+    orgUnitId: string;
+    contractId: string;
+    userId: string;
+    search: string;
+    page: number;
+  };
+  context: {
+    clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData;
+    currentContract: ContractData | null;
+    currentUser: UserData | null;
+  };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
+};
 
 const loaderFunction = async (
   data: LoaderData<ProductAssortmentQuery>
-): Promise<AuthRouteProps<ProductAssortmentData>> => {
+): Promise<AuthRouteProps<ProductAssortmentPageData>> => {
   const { contractId, orgUnitId, search = "", page: pageString } = data.query;
 
-  const page = getValidPage(pageString);
-
-  return withAuthLoader(data, async ({ cookie, ...clientContext }) => {
-    const [currentOrgUnit, contract] = await Promise.all([
-      getOrgUnitBasicDataService({ id: orgUnitId, cookie }),
-      getContractDetailsService({ contractId, cookie, unitId: orgUnitId }),
-    ]);
-
-    const [enabledAssortment, notAddedAssortments, contractAssortment] =
-      await Promise.all([
-        getProductAssortmentFromScopeService({
-          args: {
-            cookie,
-            contractId,
-            unitId: orgUnitId,
-            filterByScope: true,
-            name: search,
-            page,
-          },
-        }),
-        getProductAssortmentFromScopeService({
-          args: {
-            cookie,
-            contractId,
-            unitId: orgUnitId,
-            filterByScope: false,
-            page: 1,
-          },
+  return withAuthLoader(
+    data,
+    async ({ customerId, cookie, userId, ...clientContext }) => {
+      const [orgUnit, contract, user] = await Promise.all([
+        getOrgUnitBasicDataService({
+          id: orgUnitId,
+          cookie,
         }),
-        getProductAssortmentFromContractService({
+        getContractDetailsService({
           contractId,
-          cookie,
           unitId: orgUnitId,
+          cookie,
         }),
+        getUserByIdService({ orgUnitId, userId, cookie }),
       ]);
 
-    const isContractEmpty =
-      !contractAssortment || contractAssortment.total === 0;
-
-    return {
-      productAssortment: enabledAssortment,
-      drawerProductAssortment: notAddedAssortments,
-      isContractEmpty,
-      search,
-      page,
-      context: {
-        clientContext: { cookie, ...clientContext },
-        currentContract: contract,
-        currentOrgUnit,
-      },
-    };
-  });
+      return {
+        data: {
+          orgUnitId,
+          contractId,
+          userId,
+          search,
+          page: getValidPage(pageString),
+        },
+        context: {
+          clientContext: { customerId, cookie, userId, ...clientContext },
+          currentOrgUnit: orgUnit,
+          currentContract: contract,
+          currentUser: user,
+        },
+      };
+    }
+  );
 };
 
 export const loader = withLoaderErrorBoundary(loaderFunction, {
@@ -83,24 +83,20 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
 });
 
 const ProductAssortmentPage = ({
-  productAssortment,
-  drawerProductAssortment,
-  isContractEmpty,
-  page,
-  search,
+  data,
   hasError,
   error,
-}: ProductAssortmentData) => (
+}: ProductAssortmentPageData) => (
   <>
     {hasError ? (
       <ErrorTabsLayout error={error} />
     ) : (
       <ProductAssortmentLayout
-        page={page}
-        search={search}
-        initialProductAssortment={productAssortment}
-        drawerProductAssortment={drawerProductAssortment}
-        isContractEmpty={isContractEmpty}
+        page={data.page}
+        search={data.search}
+        userId={data.userId}
+        orgUnitId={data.orgUnitId}
+        contractId={data.contractId}
       />
     )}
   </>