@vtex/faststore-plugin-buyer-portal 1.3.36 → 1.3.38

package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss

@@ -5,129 +5,154 @@
 
 [data-fs-payment-methods-section] [data-fs-payment-methods-list],
 [data-fs-payment-methods-drawer] [data-fs-payment-methods-list] {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding-bottom: var(--fs-spacing-3);
-
-	[data-fs-bp-payment-methods-list-title] {
-		color: #5c5c5c;
-		margin-bottom: var(--fs-spacing-1);
-		display: flex;
-		justify-content: start;
-		align-items: center;
-		gap: var(--fs-spacing-3);
-
-		&[data-fs-bp-payment-methods-list-title-drawer="true"] {
-			padding-left: var(--fs-spacing-3);
-			padding-right: var(--fs-spacing-3);
-		}
-	}
-
-	[data-fs-payment-methods-line] {
-		border-top: var(--fs-border-width) solid #e5e5e5;
-	}
-
-	[data-fs-payment-methods-row] {
-		display: flex;
-		justify-content: space-between;
-
-		&:hover {
-			background-color: #f5f5f5;
-		}
-
-		&:visited {
-			color: #1f1f1f;
-		}
-
-		&[data-fs-payment-methods-row-selected="true"] {
-			background-color: #f1f8fd;
-		}
-
-		[data-fs-payment-methods-row-information] {
-			display: flex;
-			gap: var(--fs-spacing-2);
-			align-items: center;
-			margin-left: var(--fs-spacing-3);
-			padding: var(--fs-spacing-2) 0;
-			size: var(--fs-text-size-1);
-			color: #0366dd;
-			text-decoration: none;
-			flex: 1;
-
-			[data-fs-payment-methods-row-icon-wrapper] {
-				color: #0366dd;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: var(--fs-spacing-6);
-				height: var(--fs-spacing-6);
-
-				margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
-			}
-
-			[data-fs-payment-methods-name] {
-				width: var(--data-fs-users-table-width);
-				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));
-				text-decoration: none;
-				color: #000;
-			}
-		}
-	}
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--fs-spacing-3);
+
+  [data-fs-bp-payment-methods-list-title] {
+    color: #5c5c5c;
+    margin-bottom: var(--fs-spacing-1);
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: var(--fs-spacing-3);
+
+    &[data-fs-bp-payment-methods-list-title-drawer="true"] {
+      padding-left: var(--fs-spacing-3);
+      padding-right: var(--fs-spacing-3);
+    }
+  }
+
+  [data-fs-payment-methods-line] {
+    border-top: var(--fs-border-width) solid #e5e5e5;
+  }
+
+  [data-fs-payment-methods-row] {
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &:visited {
+      color: #1f1f1f;
+    }
+
+    &[data-fs-payment-methods-row-selected="true"] {
+      background-color: #f1f8fd;
+    }
+
+    [data-fs-payment-methods-row-information] {
+      display: flex;
+      gap: var(--fs-spacing-2);
+      align-items: center;
+      margin-left: var(--fs-spacing-3);
+      padding: var(--fs-spacing-2) 0;
+      size: var(--fs-text-size-1);
+      color: #0366dd;
+      text-decoration: none;
+      flex: 1;
+
+      [data-fs-payment-methods-row-icon-wrapper] {
+        color: #0366dd;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--fs-spacing-6);
+        height: var(--fs-spacing-6);
+
+        margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
+      }
+
+      [data-fs-payment-methods-name] {
+        width: var(--data-fs-users-table-width);
+        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));
+        text-decoration: none;
+        color: #000;
+      }
+    }
+  }
 }
 
 [data-fs-payment-methods-section] {
-	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-
-	@import "../../../shared/components/InternalSearch/internal-search.scss";
-	@import "../../../shared/components/HeaderInside/header-inside.scss";
-	@import "../../../shared/components/Table/table.scss";
-	@import "../../../shared/components/EmptyState/empty-state.scss";
-
-	@include media(">=notebook") {
-		padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
-	}
-
-	[data-fs-payment-methods-tooltip] {
-		--fs-tooltip-background: var(--fs-text-color-secondary);
-	}
-
-	[data-fs-bp-payment-method-table-row] {
-		td:nth-child(3) {
-			vertical-align: middle;
-			text-align: right;
-		}
-	}
-
-	[data-fs-bp-payment-methods-search-container-counter-bottom] {
-		font-size: var(--fs-text-size-1);
-		color: #5c5c5c;
-		text-align: end;
-		display: none;
-		margin-top: var(--fs-spacing-3);
-		@include media("<=tablet") {
-			display: block;
-		}
-	}
-
-	@include media("<=phonemid") {
-		padding-bottom: var(--fs-spacing-7);
-
-		[data-fs-buyer-portal-internal-search] {
-			width: 100% !important;
-		}
-
-		[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;
-			}
-		}
-	}
+  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/Table/table.scss";
+  @import "../../../shared/components/EmptyState/empty-state.scss";
+
+  @include media(">=notebook") {
+    padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+  }
+
+  [data-fs-payment-methods-tooltip] {
+    --fs-tooltip-background: var(--fs-text-color-secondary);
+  }
+
+  [data-fs-bp-payment-method-table-row] {
+    td:nth-child(3) {
+      vertical-align: middle;
+      text-align: right;
+    }
+  }
+
+  [data-fs-payment-methods-filter] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 2.5rem;
+
+    @include media("<=tablet") {
+      [data-fs-buyer-portal-internal-search] {
+        width: 100%;
+      }
+
+      [data-fs-bp-paginator-counter] {
+        display: none;
+      }
+    }
+  }
+
+  [data-fs-bp-payment-methods-paginator] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--fs-spacing-0);
+    padding: var(--fs-spacing-2) 0;
+  }
+
+  [data-fs-bp-payment-methods-search-container-counter-bottom] {
+    font-size: var(--fs-text-size-1);
+    color: #5c5c5c;
+    text-align: end;
+    display: none;
+    margin-top: var(--fs-spacing-3);
+    @include media("<=tablet") {
+      display: block;
+    }
+  }
+
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-buyer-portal-internal-search] {
+      width: 100% !important;
+    }
+
+    [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;
+      }
+    }
+  }
 }

package/src/features/payment-methods/services/get-payment-methods-by-unit-id.service.ts

@@ -1,6 +1,6 @@
 import { paymentMethodsClient } from "../clients/PaymentMethodsClient";
 
-import type { PaymentMethodData } from "../types";
+import type { PaginatedPaymentMethod } from "../types";
 
 export type GetPaymentMethodsByUnitIdServiceProps = {
   customerId: string;
@@ -8,6 +8,7 @@ export type GetPaymentMethodsByUnitIdServiceProps = {
   cookie: string;
   filterByScope?: boolean;
   search?: string;
+  page?: number;
 };
 
 export const getPaymentMethodsByUnitIdService = async ({
@@ -16,19 +17,20 @@ export const getPaymentMethodsByUnitIdService = async ({
   cookie,
   filterByScope,
   search,
-}: GetPaymentMethodsByUnitIdServiceProps): Promise<PaymentMethodData[]> => {
+  page = 1,
+}: GetPaymentMethodsByUnitIdServiceProps): Promise<PaginatedPaymentMethod> => {
   try {
     const paymentMethods = await paymentMethodsClient.getPaymentMethodsByUnitId(
       {
         customerId,
         unitId,
         cookie,
-        options: { filterByScope, name: search },
+        options: { filterByScope, name: search, page: page },
       }
     );
-    return paymentMethods || [];
+    return paymentMethods;
   } catch (err) {
     console.error("Failed to fetch payment methods", err);
-    return [];
+    return {} as PaginatedPaymentMethod;
   }
 };

package/src/features/payment-methods/types/PaymentMethod.ts

@@ -1,5 +1,12 @@
+import { PageControl } from "../../product-assortment/types";
+
 export type PaymentMethodData = {
   id: number;
   name: string;
   isEnabled?: boolean;
 };
+
+export type PaginatedPaymentMethod = {
+  items: PaymentMethodData[];
+  paging: PageControl;
+};

package/src/features/payment-methods/types/index.ts

@@ -1 +1 @@
-export type { PaymentMethodData } from "./PaymentMethod";
+export * from "./PaymentMethod";

package/src/features/product-assortment/clients/ProductAssortmentClient.ts

@@ -5,7 +5,6 @@ import type {
   AddProductAssortmentPayload,
   AddProductAssortmentResponse,
   GetProductAssortmentFromContractResponse,
-  GetProductAssortmentFromScopeResponse,
 } from "../types";
 
 type DefaultArgs = {
@@ -19,14 +18,20 @@ export class ProductAssortmentClient extends Client {
     super(getApiUrl());
   }
 
-  getProductAssortmentFromContract(args: DefaultArgs & { name?: string }) {
-    const { contractId, cookie, name, unitId } = args;
+  getProductAssortmentsInfoInContract(
+    args: DefaultArgs & { name?: string; page?: number }
+  ) {
+    const { contractId, cookie, name, unitId, page } = args;
 
-    return this.get<GetProductAssortmentFromContractResponse["collections"]>(
-      `customers/${contractId}/units/${unitId}/collections`,
+    return this.get<GetProductAssortmentFromContractResponse>(
+      `customers/${contractId}/units/${unitId}/collections/paginated`,
       {
         headers: { Cookie: cookie },
-        params: { ...(name ? { name } : undefined), filteredByContract: false },
+        params: {
+          ...(name ? { name } : undefined),
+          filterByScope: true,
+          ...(page ? { page } : undefined),
+        },
       }
     );
   }
@@ -39,14 +44,15 @@ export class ProductAssortmentClient extends Client {
       filterByScope: boolean;
     }
   ) {
-    const { contractId, cookie, name, unitId, filterByScope } = args;
+    const { contractId, cookie, name, unitId, filterByScope, page } = args;
 
-    return this.get<GetProductAssortmentFromScopeResponse["collections"]>(
-      `customers/${contractId}/units/${unitId}/collections`,
+    return this.get<GetProductAssortmentFromContractResponse>(
+      `customers/${contractId}/units/${unitId}/collections/paginated`,
       {
         headers: { Cookie: cookie },
         params: {
           ...(name ? { name } : undefined),
+          page,
           filterByScope,
           v: new Date().getTime(),
         },

package/src/features/product-assortment/components/AddProductAssortmentDrawer/AddProductAssortmentDrawer.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { Link, useUI } from "@faststore/ui";
+import { Link, Skeleton, useUI } from "@faststore/ui";
 
 import {
   BasicDrawer,
@@ -10,7 +10,9 @@ import {
   InternalSearch,
   Paginator,
 } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
+import { DEBOUNCE_TIMEOUT } from "../../../shared/utils";
+import { useGetProductAssorments } from "../../hooks";
 import { useAddProductAssortmentToScope } from "../../hooks/useAddProductAssortmentToScope";
 import { AddProductAssortmentDrawerTable } from "../table/AddProductAssortmentDrawerTable";
 
@@ -19,31 +21,46 @@ import type {
   ProductAssortmentSummary,
 } from "../../types";
 
-export const PAGE_SIZE = 10;
-
 export const AddProductAssortmentDrawer = ({
   close,
-  productAssortment,
   ...props
 }: AddProductAssortmentDrawerProps) => {
   const { pushToast } = useUI();
   const [drawerSearch, setDrawerSearch] = useState("");
+  const [drawerPage, setDrawerPage] = useState(1);
   const { currentOrgUnit, currentContract } = useBuyerPortal();
   const { reload } = useRouter();
 
+  const { productAssortments: productAssortment, isLoadingProductAssortments } =
+    useGetProductAssorments({
+      contractId: currentContract?.id ?? "",
+      unitId: currentOrgUnit?.id ?? "",
+      filterByScope: false,
+      page: drawerPage,
+      name: drawerSearch,
+    });
+
   const unitId = currentOrgUnit?.id;
   const contractId = currentContract?.id;
-  const isLoading = false;
+  const isLoading = isLoadingProductAssortments;
+  const [isLastPage, setIsLastPage] = useState(true);
 
   useEffect(() => {
     setDrawerSearch("");
   }, [props.isOpen]);
 
-  const drawerProductAssortment = useMemo(() => {
-    return productAssortment.filter((p) =>
-      p.name.toLowerCase().includes(drawerSearch.toLowerCase())
-    );
-  }, [productAssortment, drawerSearch]);
+  useDebounce(drawerSearch, DEBOUNCE_TIMEOUT, {
+    onDebounce: (value) => {
+      setDrawerSearch(value);
+      setDrawerPage(1);
+    },
+  });
+
+  useEffect(() => {
+    if (productAssortment?.paging) {
+      setIsLastPage(productAssortment.paging.pages === drawerPage);
+    }
+  }, [productAssortment.paging]);
 
   const addProductAssortmentMutation = useAddProductAssortmentToScope();
 
@@ -84,36 +101,64 @@ export const AddProductAssortmentDrawer = ({
 
         <div data-fs-bp-add-product-assortment-wrapper>
           <InternalSearch
-            textSearch={(searchTerm) => {
-              setDrawerSearch(searchTerm);
-            }}
+            textSearch={setDrawerSearch}
+            defaultValue={drawerSearch}
           />
 
-          <Paginator.Counter
-            total={drawerProductAssortment.length}
-            itemsLength={drawerProductAssortment.length}
-          />
+          {productAssortment.paging && productAssortment.items.length > 0 && (
+            <Paginator.Counter
+              total={productAssortment.paging.total}
+              itemsLength={
+                isLastPage
+                  ? productAssortment.paging.total
+                  : drawerPage * productAssortment.paging.perPage
+              }
+            />
+          )}
         </div>
         <section>
-          {drawerProductAssortment.length ? (
+          {isLoading ? (
+            <div data-fs-bp-drawer-product-assortment-skeleton>
+              <Skeleton size={{ height: "3.5rem", width: "100%" }} />
+            </div>
+          ) : productAssortment.items && productAssortment.items.length ? (
             <div>
               <AddProductAssortmentDrawerTable
-                data={drawerProductAssortment}
+                data={productAssortment.items}
                 onChange={setSelectedAssortment}
               />
-              {drawerProductAssortment.length > 0 && (
+              {productAssortment.items.length > 0 && (
                 <div data-fs-bp-drawer-product-assortment-paginator>
-                  {drawerProductAssortment.length > 0 ? (
-                    <Paginator.NextPageButton>
-                      {isLoading ? "Loading" : "Load More"}
+                  {productAssortment.items.length > 0 &&
+                  productAssortment.paging.page > 1 ? (
+                    <Paginator.NextPageButton
+                      onClick={() => setDrawerPage(drawerPage - 1)}
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "Loading" : "Previous page"}
+                    </Paginator.NextPageButton>
+                  ) : (
+                    <></>
+                  )}
+
+                  {productAssortment.items.length > 0 && !isLastPage ? (
+                    <Paginator.NextPageButton
+                      onClick={() => setDrawerPage(drawerPage + 1)}
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "Loading" : "Next page"}
                     </Paginator.NextPageButton>
                   ) : (
-                    <span />
+                    <></>
                   )}
 
                   <Paginator.Counter
-                    total={drawerProductAssortment.length}
-                    itemsLength={drawerProductAssortment.length}
+                    total={productAssortment.paging.total}
+                    itemsLength={
+                      isLastPage
+                        ? productAssortment.paging.total
+                        : drawerPage * productAssortment.paging.perPage
+                    }
                   />
                 </div>
               )}

package/src/features/product-assortment/components/AddProductAssortmentDrawer/add-product-assortment-drawer.scss

@@ -47,6 +47,10 @@
     }
   }
 
+  [data-fs-bp-drawer-product-assortment-skeleton] {
+    padding-top: var(--fs-spacing-2);
+  }
+
   [data-fs-bp-drawer-product-assortment-paginator] {
     display: flex;
     align-items: center;

package/src/features/product-assortment/components/ProductAssortmentTable/ProductAssortmentTable.tsx

@@ -11,13 +11,13 @@ import { RemoveProductAssortmentDrawer } from "../RemoveProductAssortmentDrawer/
 
 import type {
   ProductAssortmentSelectedProps,
-  ScopeProductAssortment,
+  ProductAssortmentWithAdditionalInformation,
 } from "../../types";
 
 export function ProductAssortmentTable({
   productAssortment,
 }: {
-  productAssortment: ScopeProductAssortment[];
+  productAssortment: ProductAssortmentWithAdditionalInformation[];
 }) {
   const [assortmentSelected, setAssortmentSelected] =
     useState<ProductAssortmentSelectedProps | null>();

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

@@ -0,0 +1,3 @@
+export * from "./useAddProductAssortmentToScope";
+export * from "./useGetProductAssortments";
+export * from "./useRemoveProductAssortmentFromScope";

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

@@ -0,0 +1,35 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import {
+  getProductAssortmentFromScopeService,
+  type GetProductAssortmentFromScopeServiceProps,
+} from "../services";
+import { GetProductAssortmentFromContractResponse } from "../types";
+
+export const useGetProductAssorments = (
+  params: Omit<GetProductAssortmentFromScopeServiceProps["args"], "cookie">,
+  options?: QueryOptions<
+    AwaitedType<typeof getProductAssortmentFromScopeService>
+  >
+) => {
+  const { data, isLoading, error, refetch } = useQuery<
+    AwaitedType<typeof getProductAssortmentFromScopeService>
+  >(
+    `api/search/product-assortments/${JSON.stringify(params)}`,
+    (clientContext: { cookie: string }) =>
+      getProductAssortmentFromScopeService({
+        args: {
+          ...params,
+          cookie: clientContext.cookie,
+        },
+      }),
+    options
+  );
+
+  return {
+    productAssortments: (data ??
+      {}) as GetProductAssortmentFromContractResponse,
+    isLoadingProductAssortments: isLoading,
+    hasProductAssormentsError: error,
+    refetchProductAssortments: refetch,
+  };
+};