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

package/CHANGELOG.md

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

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.48";

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}
       />
     )}
   </>