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

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.38] - 2025-12-08
+
+### Added
+
+- Pagination to payment methods
+- Pagination to product assorments
+
+## [1.3.37] - 2025-12-04
+
+## Changed
+
+- Allow Credit Card CVV to accept 4 digits
+
 ## [1.3.36] - 2025-12-04
 
 ### Added
@@ -333,7 +346,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.36...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...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
@@ -375,5 +388,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 > > > > > > > main
 > > > > > > > [1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
 
+[1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
+[1.3.37]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.36...v1.3.37
 [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.36",
+  "version": "1.3.38",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/payment-methods/clients/PaymentMethodsClient.ts

@@ -6,7 +6,7 @@ import type {
   PaymentMethodsIdArray,
   PaymentMethodsReqCommonParams,
 } from "../../shared/types";
-import type { PaymentMethodData } from "../types";
+import type { PaginatedPaymentMethod } from "../types";
 
 export default class PaymentMethodsClient extends Client {
   constructor() {
@@ -18,6 +18,7 @@ export default class PaymentMethodsClient extends Client {
       options?: {
         filterByScope?: boolean;
         name?: string;
+        page?: number;
       };
     }
   ) {
@@ -25,7 +26,7 @@ export default class PaymentMethodsClient extends Client {
 
     const queryParams = new URLSearchParams();
 
-    if (options?.filterByScope) {
+    if (options?.filterByScope !== undefined) {
       queryParams.append("filterByScope", options.filterByScope.toString());
     }
 
@@ -33,12 +34,16 @@ export default class PaymentMethodsClient extends Client {
       queryParams.append("name", options.name);
     }
 
+    if (options?.page) {
+      queryParams.append("page", options.page.toString());
+    }
+
     const queryString = queryParams.toString();
-    const url = `customers/${customerId}/units/${unitId}/payment-methods${
+    const url = `customers/${customerId}/units/${unitId}/payment-methods/paginated${
       queryString ? `?${queryString}` : ""
     }`;
 
-    return await this.get<PaymentMethodData[]>(url, {
+    return await this.get<PaginatedPaymentMethod>(url, {
       headers: {
         Cookie: cookie,
       },

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx

@@ -8,12 +8,14 @@ import {
   type BasicDrawerProps,
   BasicDrawer,
   EmptyState,
+  InternalSearch,
+  Paginator,
   Table,
 } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
+import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
+import { DEBOUNCE_TIMEOUT } from "../../../shared/utils";
 import { useAddPaymentMethodsToUnit } from "../../hooks";
 import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
-import { SearchPaymentMethods } from "../SearchPaymentMethods/SearchPaymentMethods";
 
 import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 
@@ -30,6 +32,8 @@ export const AddPaymentMethodsDrawer = ({
   ...props
 }: AddPaymentMethodsDrawerProps) => {
   const [querySearch, setQuerySearch] = useState("");
+  const [drawerPage, setDrawerPage] = useState(1);
+  const [isLastPage, setIsLastPage] = useState(true);
   const [selectedMethods, setSelectedMethods] = useState<Set<number>>(
     new Set()
   );
@@ -44,19 +48,33 @@ export const AddPaymentMethodsDrawer = ({
   const customerId = contract?.id ?? "";
   const unitId = orgUnit?.id ?? "";
 
+  useDebounce(querySearch, DEBOUNCE_TIMEOUT, {
+    onDebounce: (value) => {
+      setQuerySearch(value);
+      setDrawerPage(1);
+    },
+  });
+
   const { paymentMethods, isLoadingPaymentMethods } =
     useDebouncedSearchPaymentMethods({
       customerId,
       unitId,
       filterByScope: false,
       search: querySearch,
+      page: drawerPage,
     });
 
   const availableMethods = useMemo(
-    () => (paymentMethods ?? []).filter((method) => !method?.isEnabled),
+    () => paymentMethods?.items ?? [],
     [paymentMethods]
   );
 
+  useEffect(() => {
+    if (paymentMethods?.paging) {
+      setIsLastPage(paymentMethods.paging.pages === drawerPage);
+    }
+  }, [paymentMethods]);
+
   const handleSuccess = () => {
     pushToast({
       message: "Payment methods added successfully",
@@ -192,7 +210,7 @@ export const AddPaymentMethodsDrawer = ({
   const renderBodyContent = () => {
     if (isLoadingPaymentMethods) return renderLoading();
 
-    if ((paymentMethods?.length ?? 0) === 0) return renderEmpty();
+    if ((paymentMethods?.items.length ?? 0) === 0) return renderEmpty();
 
     if (availableMethods.length > 0) return renderList();
 
@@ -220,14 +238,61 @@ export const AddPaymentMethodsDrawer = ({
             {orgUnit?.name && <span>{` to ${orgUnit.name}`}</span>}
           </p>
 
-          <SearchPaymentMethods
-            data={selectedMethods.size}
-            paymentMethodsData={availableMethods}
-            defaultValue={querySearch}
-            textSearch={setQuerySearch}
-          />
+          {paymentMethods && (
+            <div data-fs-payment-methods-filter>
+              <InternalSearch
+                textSearch={setQuerySearch}
+                defaultValue={querySearch}
+              />
+
+              {paymentMethods?.paging && paymentMethods.items.length > 0 && (
+                <Paginator.Counter
+                  total={paymentMethods.paging.total}
+                  itemsLength={
+                    isLastPage
+                      ? paymentMethods.paging.total
+                      : drawerPage * paymentMethods.paging.perPage
+                  }
+                />
+              )}
+            </div>
+          )}
 
           {renderBodyContent()}
+
+          {paymentMethods.items && paymentMethods.paging && (
+            <div data-fs-bp-drawer-payment-methods-paginator>
+              {availableMethods.length > 0 &&
+              paymentMethods?.paging?.page > 1 ? (
+                <Paginator.NextPageButton
+                  onClick={() => setDrawerPage(drawerPage - 1)}
+                  disabled={isLoadingPaymentMethods}
+                >
+                  {isLoadingPaymentMethods ? "Loading" : "Previous page"}
+                </Paginator.NextPageButton>
+              ) : (
+                <></>
+              )}
+
+              {!isLastPage && (
+                <Paginator.NextPageButton
+                  onClick={() => setDrawerPage(drawerPage + 1)}
+                  disabled={isLoadingPaymentMethods}
+                >
+                  {isLoadingPaymentMethods ? "Loading" : "Next page"}
+                </Paginator.NextPageButton>
+              )}
+
+              <Paginator.Counter
+                total={paymentMethods.paging.total}
+                itemsLength={
+                  isLastPage
+                    ? paymentMethods.paging.total
+                    : drawerPage * paymentMethods.paging.perPage
+                }
+              />
+            </div>
+          )}
         </section>
       </BasicDrawer.Body>
 

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss

@@ -16,6 +16,23 @@
       }
     }
 
+    [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-checkbox] {
       border-color: #e5e5e5;
       margin: 0 auto;

package/src/features/payment-methods/hooks/useDebouncedSearchPaymentMethods.ts

@@ -3,22 +3,22 @@ import { GetPaymentMethodsByUnitIdServiceProps } from "../services";
 
 import { useGetPaymentMethodsByUnitId } from "./useGetPaymentMethodsByUnitId";
 
-import type { PaymentMethodData } from "../types";
-
 export const useDebouncedSearchPaymentMethods = (
   data: Omit<GetPaymentMethodsByUnitIdServiceProps, "cookie">
 ) => {
-  const { customerId, unitId, search = "" } = data;
+  const { customerId, unitId, search = "", page, filterByScope } = data;
   const debouncedSearchTerm = useDebounce(search, 500);
   const { paymentMethods, isLoadingPaymentMethods } =
     useGetPaymentMethodsByUnitId({
       customerId,
       unitId,
       search: debouncedSearchTerm,
+      filterByScope,
+      page: page ?? 1,
     });
 
   return {
-    paymentMethods: (paymentMethods ?? []) as PaymentMethodData[],
+    paymentMethods: paymentMethods,
     isLoadingPaymentMethods,
   };
 };

package/src/features/payment-methods/hooks/useGetPaymentMethodsByUnitId.ts

@@ -3,8 +3,7 @@ import {
   getPaymentMethodsByUnitIdService,
   type GetPaymentMethodsByUnitIdServiceProps,
 } from "../services";
-
-import type { PaymentMethodData } from "../types";
+import { PaginatedPaymentMethod } from "../types";
 
 export const useGetPaymentMethodsByUnitId = (
   params: Omit<GetPaymentMethodsByUnitIdServiceProps, "cookie">,
@@ -23,7 +22,7 @@ export const useGetPaymentMethodsByUnitId = (
   );
 
   return {
-    paymentMethods: (data ?? []) as PaymentMethodData[],
+    paymentMethods: data ?? ({} as PaginatedPaymentMethod),
     isLoadingPaymentMethods: isLoading,
     hasPaymentMethodsError: error,
     refetchPaymentMethods: refetch,

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -1,47 +1,65 @@
-import { useEffect, useMemo, useState } from "react";
+import { useState } from "react";
 
-import { HeaderInside, Table } from "../../../shared/components";
+import {
+  HeaderInside,
+  InternalSearch,
+  Paginator,
+  Table,
+} from "../../../shared/components";
 import ConditionalTooltip from "../../../shared/components/ConditionalTooltip/ConditionalTooltip";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import {
   useBuyerPortal,
   useDrawerProps,
-  useQueryParams,
+  usePageItems,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import {
   AddPaymentMethodsDrawer,
   RemoveMethodButton,
   RemovePaymentMethodsDrawer,
-  SearchPaymentMethods,
 } from "../../components";
-import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
-import type { PaymentMethodData } from "../../types";
+import type { PaginatedPaymentMethod, PaymentMethodData } from "../../types";
 
 export type PaymentMethodsLayoutProps = {
-  data: PaymentMethodData[];
+  data: PaginatedPaymentMethod;
+  totalPaymentMethods: number;
   search?: string;
+  page?: number;
 };
 
 export const PaymentMethodsLayout = ({
   data,
   search,
+  totalPaymentMethods,
+  page = 1,
 }: PaymentMethodsLayoutProps) => {
-  const [paymentMethodsData, setPaymentMethodsData] =
-    useState<PaymentMethodData[]>(data);
   const [selectedMethod, setSelectedMethod] = useState<
     PaymentMethodData | undefined
   >(undefined);
-  const [querySearch, setQuerySearch] = useState(search ?? "");
 
-  const { setQueryString, removeQueryString } = useQueryParams();
   const { isRemovingPaymentMethod } = useRemovePaymentMethod(() => {
     setSelectedMethod(undefined);
   });
 
+  const isLastPage = data.paging.pages === page;
+
+  const {
+    isLoading,
+    items: paymentMethods,
+    searchTerm,
+    setSearchTerm,
+    increasePage,
+    decreasePage,
+  } = usePageItems<PaymentMethodData>({
+    initialItems: data.items,
+    search,
+    page,
+  });
+
   const {
     open: openAddDrawer,
     isOpen: isAddPaymentMethodDrawerOpen,
@@ -60,39 +78,9 @@ export const PaymentMethodsLayout = ({
     currentContract: contract,
   } = useBuyerPortal();
 
-  const { paymentMethods, isLoadingPaymentMethods } =
-    useDebouncedSearchPaymentMethods({
-      customerId: contract?.id ?? "",
-      unitId: orgUnit?.id ?? "",
-      search: querySearch,
-    });
-
-  const fetchedMethods = paymentMethods ?? [];
-  const currentPaymentMethods = useMemo(
-    () => (paymentMethodsData ?? []).filter((m) => m?.isEnabled),
-    [paymentMethodsData]
-  );
-
-  const isSinglePaymentMethod = currentPaymentMethods.length <= 1;
+  const isSinglePaymentMethod = paymentMethods.length <= 1;
   const allPaymentMethodsSelected =
-    currentPaymentMethods.length === (paymentMethodsData?.length ?? 0);
-
-  useEffect(() => {
-    if (!isLoadingPaymentMethods && querySearch.length > 0) {
-      setPaymentMethodsData(fetchedMethods);
-    }
-  }, [fetchedMethods, isLoadingPaymentMethods, querySearch]);
-
-  const handleSearch = (searchTerm: string) => {
-    setQuerySearch(searchTerm);
-
-    if (searchTerm) {
-      setQueryString("search", searchTerm);
-    } else {
-      removeQueryString("search");
-      setPaymentMethodsData(data);
-    }
-  };
+    paymentMethods.length === totalPaymentMethods;
 
   const onRemoveClick = (method: PaymentMethodData) => {
     setSelectedMethod(method);
@@ -106,7 +94,7 @@ export const PaymentMethodsLayout = ({
     <EmptyState
       title="No results found"
       description={
-        querySearch.length > 0
+        searchTerm.length > 0
           ? "Try using different terms"
           : "No payment methods found"
       }
@@ -114,10 +102,10 @@ export const PaymentMethodsLayout = ({
   );
 
   const renderTableRows = () =>
-    currentPaymentMethods.map((method) => (
+    paymentMethods.map((method) => (
       <Table.Row
         key={method?.id}
-        searchTerm={querySearch}
+        searchTerm={searchTerm}
         title={method?.name}
         iconName="AccountBalanceWallet"
         iconSize={24}
@@ -135,7 +123,7 @@ export const PaymentMethodsLayout = ({
     <Table layoutFixed>
       <Table.Head columns={columns} />
       <Table.Body>
-        {isLoadingPaymentMethods ? (
+        {isLoading ? (
           <Table.Loading columns={columns.length} />
         ) : (
           renderTableRows()
@@ -145,8 +133,7 @@ export const PaymentMethodsLayout = ({
   );
 
   const renderContent = () => {
-    if (!isLoadingPaymentMethods && fetchedMethods.length === 0)
-      return renderEmpty();
+    if (!isLoading && paymentMethods.length === 0) return renderEmpty();
     return renderTable();
   };
 
@@ -178,20 +165,54 @@ export const PaymentMethodsLayout = ({
             </ConditionalTooltip>
           </HeaderInside>
 
-          <SearchPaymentMethods
-            data={currentPaymentMethods}
-            paymentMethodsData={paymentMethodsData}
-            defaultValue={querySearch}
-            textSearch={handleSearch}
-          />
+          <div data-fs-payment-methods-filter>
+            <InternalSearch
+              defaultValue={searchTerm}
+              textSearch={setSearchTerm}
+            />
+            <Paginator.Counter
+              total={data.paging.total}
+              itemsLength={
+                isLastPage ? data.paging.total : page * data.paging.perPage
+              }
+            />
+          </div>
 
           {renderContent()}
 
-          {!isLoadingPaymentMethods && (
+          <div data-fs-bp-payment-methods-paginator>
+            {data.paging.page > 1 ? (
+              <Paginator.NextPageButton
+                onClick={decreasePage}
+                disabled={isLoading}
+              >
+                {isLoading ? "Loading" : "Previous Page"}
+              </Paginator.NextPageButton>
+            ) : (
+              <></>
+            )}
+            {!isLastPage ? (
+              <Paginator.NextPageButton
+                onClick={increasePage}
+                disabled={isLoading}
+              >
+                {isLoading ? "Loading" : "Next Page"}
+              </Paginator.NextPageButton>
+            ) : (
+              <></>
+            )}
+
+            <Paginator.Counter
+              total={data.paging.total}
+              itemsLength={
+                isLastPage ? data.paging.total : page * data.paging.perPage
+              }
+            />
+          </div>
+
+          {!isLoading && (
             <p data-fs-bp-payment-methods-search-container-counter-bottom>
-              {`${currentPaymentMethods.length} of ${
-                paymentMethodsData?.length ?? 0
-              }`}
+              {`${paymentMethods.length} of ${paymentMethods?.length ?? 0}`}
             </p>
           )}