@vtex/faststore-plugin-buyer-portal 1.1.86 → 1.1.88

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

@@ -1,12 +1,13 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { useUI, Checkbox, Skeleton } from "@faststore/ui";
+import { Checkbox, Skeleton, useUI } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
   BasicDrawer,
+  EmptyState,
   Icon,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
@@ -49,8 +50,9 @@ export const AddPaymentMethodsDrawer = ({
       search: querySearch,
     });
 
-  const availableMethods = paymentMethods?.filter(
-    (method) => !method?.isEnabled
+  const availableMethods = useMemo(
+    () => (paymentMethods ?? []).filter((method) => !method?.isEnabled),
+    [paymentMethods]
   );
 
   const handleSuccess = () => {
@@ -95,13 +97,10 @@ export const AddPaymentMethodsDrawer = ({
 
   const toggleItem = useCallback((id: number) => {
     setSelectedMethods((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
   }, []);
 
@@ -116,6 +115,86 @@ export const AddPaymentMethodsDrawer = ({
     addPaymentMethods({ customerId, unitId, paymentMethodsIds });
   };
 
+  const renderListHeader = () => (
+    <li
+      data-fs-bp-payment-methods-list-title
+      data-fs-bp-payment-methods-list-title-drawer
+      aria-label="Payment methods header"
+    >
+      <Checkbox
+        data-fs-bp-payment-methods-checkbox
+        ref={selectAllRef}
+        checked={allSelected}
+        onChange={toggleAll}
+        disabled={readonly || availableMethods.length === 0}
+        aria-label="Select all payment methods"
+      />
+      Name
+    </li>
+  );
+
+  const renderList = () => (
+    <ul data-fs-payment-methods-list>
+      {renderListHeader()}
+      {availableMethods.map(({ id, name }) => (
+        <li key={id} data-fs-payment-methods-line>
+          <div
+            data-fs-payment-methods-row
+            data-fs-payment-methods-row-selected={selectedMethods.has(id)}
+          >
+            <div data-fs-payment-methods-row-information>
+              <Checkbox
+                data-fs-bp-payment-methods-checkbox
+                checked={selectedMethods.has(id)}
+                onChange={() => toggleItem(id)}
+                disabled={readonly}
+                aria-label={`Select ${name}`}
+              />
+              <span data-fs-payment-methods-row-icon-wrapper>
+                <Icon name="AccountBalanceWallet" width={20} height={20} />
+              </span>
+              <div data-fs-payment-methods-name>{name}</div>
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+
+  const renderLoading = () => (
+    <div data-fs-payment-methods-loading>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Skeleton key={index} size={{ width: "100%", height: "1.5rem" }} />
+      ))}
+    </div>
+  );
+
+  const renderEmpty = () => (
+    <EmptyState
+      title="No results found"
+      description={
+        querySearch.length > 0
+          ? "Try using different terms"
+          : "No payment methods found"
+      }
+    />
+  );
+
+  const renderBodyContent = () => {
+    if (isLoadingPaymentMethods) return renderLoading();
+
+    if ((paymentMethods?.length ?? 0) === 0) return renderEmpty();
+
+    if (availableMethods.length > 0) return renderList();
+
+    return (
+      <EmptyState
+        title="All methods already added"
+        description="There are no additional payment methods to add for this unit."
+      />
+    );
+  };
+
   return (
     <BasicDrawer data-fs-bp-add-payment-methods-drawer close={close} {...props}>
       <BasicDrawer.Heading title="Add payment methods" onClose={close} />
@@ -134,62 +213,7 @@ export const AddPaymentMethodsDrawer = ({
             textSearch={setQuerySearch}
           />
 
-          {isLoadingPaymentMethods ? (
-            <div data-fs-payment-methods-loading>
-              {Array.from({ length: 5 }).map((_, index) => (
-                <Skeleton
-                  key={index}
-                  size={{ width: "100%", height: "1.5rem" }}
-                />
-              ))}
-            </div>
-          ) : (
-            <ul data-fs-payment-methods-list>
-              <div
-                data-fs-bp-payment-methods-list-title
-                data-fs-bp-payment-methods-list-title-drawer
-              >
-                <Checkbox
-                  data-fs-bp-payment-methods-checkbox
-                  ref={selectAllRef}
-                  checked={allSelected}
-                  onChange={toggleAll}
-                  disabled={readonly}
-                  aria-label="Select all payment methods"
-                />
-                Name
-              </div>
-
-              {availableMethods.map(({ id, name }) => (
-                <li key={id} data-fs-payment-methods-line>
-                  <div
-                    data-fs-payment-methods-row
-                    data-fs-payment-methods-row-selected={selectedMethods.has(
-                      id
-                    )}
-                  >
-                    <div data-fs-payment-methods-row-information>
-                      <Checkbox
-                        data-fs-bp-payment-methods-checkbox
-                        checked={selectedMethods.has(id)}
-                        onChange={() => toggleItem(id)}
-                        disabled={readonly}
-                        aria-label={`Select ${name}`}
-                      />
-                      <span data-fs-payment-methods-row-icon-wrapper>
-                        <Icon
-                          name="AccountBalanceWallet"
-                          width={20}
-                          height={20}
-                        />
-                      </span>
-                      <div data-fs-payment-methods-name>{name}</div>
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
+          {renderBodyContent()}
         </section>
       </BasicDrawer.Body>
 
@@ -197,11 +221,12 @@ export const AddPaymentMethodsDrawer = ({
         <BasicDrawer.Button variant="ghost" onClick={close}>
           Cancel
         </BasicDrawer.Button>
+
         <BasicDrawer.Button
           variant="confirm"
           isLoading={isAddPaymentMethodsLoading}
           onClick={handleSubmit}
-          disabled={!selectedMethods.size}
+          disabled={isAddPaymentMethodsLoading || selectedMethods.size === 0}
         >
           Add
         </BasicDrawer.Button>

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

@@ -1,44 +1,80 @@
 @import "../SearchPaymentMethods/search-payment-methods.scss";
 
+[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
+  width: 66%;
+  min-width: 66%;
+
+  @include media(">=notebook") {
+    width: 60rem;
+    min-width: 60rem;
+    max-width: 60rem;
+  }
+}
+
 [data-fs-bp-add-payment-methods-drawer] {
-    min-width: 66% !important;
+  [data-fs-payment-methods-drawer] {
+    @import "../../../shared/components/EmptyState/empty-state.scss";
+    @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+
+    [data-fs-bp-add-payment-methods-drawer-description] {
+      color: #1f1f1f;
+      margin-bottom: var(--fs-spacing-3);
+
+      span {
+        color: #0366dd;
+      }
+    }
 
-    [data-fs-payment-methods-drawer] {
-        @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-        @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+    [data-fs-bp-payment-methods-checkbox] {
+      border-color: #e5e5e5;
+    }
 
-        [data-fs-bp-add-payment-methods-drawer-description] {
-            color: #1f1f1f;
-            margin-bottom: var(--fs-spacing-3);
+    [data-fs-bp-payment-methods-checkbox]:checked {
+      background-color: #0366dd;
+    }
 
-            span {
-                color: #0366dd;
-            }
-        }
+    [data-fs-bp-basic-drawer-button-loading-indicator] {
+      position: relative;
+    }
 
-        [data-fs-bp-payment-methods-checkbox] {
-            border-color: #e5e5e5;
-        }
+    [data-fs-payment-methods-loading] {
+      * {
+        margin-top: var(--fs-spacing-1);
+        padding: var(--fs-spacing-2) 0;
+      }
+    }
+  }
 
-        [data-fs-bp-payment-methods-checkbox]:checked {
-            background-color: #0366dd;
-        }
+  [data-fs-bp-add-payment-methods-drawer-footer] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--fs-spacing-3);
+  }
+  [data-fs-bp-payment-methods-search-container] {
+    [data-fs-bp-pagination] {
+      [data-fs-bp-counter-bottom] {
+        display: block;
+        text-align: end;
+      }
+    }
+  }
 
-        [data-fs-bp-basic-drawer-button-loading-indicator] {
-            position: relative;
-        }
+  @include media("<=tablet") {
+    [data-fs-buyer-portal-internal-search] {
+      width: 18rem !important;
+    }
+  }
 
-        [data-fs-payment-methods-loading] {
-            * {
-                margin-top: var(--fs-spacing-1);
-                padding: var(--fs-spacing-2) 0;
-            }
-        }
+  @include media("<=phonemid") {
+    [data-fs-buyer-portal-internal-search] {
+      width: 14rem !important;
     }
+  }
 
-    [data-fs-bp-add-payment-methods-drawer-footer] {
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--fs-spacing-3);
+  @include media("<=phone") {
+    [data-fs-buyer-portal-internal-search] {
+      width: 10rem !important;
     }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { InternalSearch } from "../../../shared/components";
+import { InternalSearch, Pagination } from "../../../shared/components";
 import { InternalSearchProps } from "../../../shared/components/InternalSearch/InternalSearch";
 import { useQueryParams } from "../../../shared/hooks";
 
@@ -36,9 +36,11 @@ export const SearchPaymentMethods = ({
               }
         }
       />
-      <p data-fs-bp-payment-methods-search-container-counter>
-        {`${getCount(data)} of ${getCount(paymentMethodsData)}`}
-      </p>
+      <Pagination
+        total={getCount(paymentMethodsData)}
+        currentCount={getCount(data)}
+        variant="counter"
+      />
     </div>
   );
 };

package/src/features/payment-methods/components/SearchPaymentMethods/search-payment-methods.scss

@@ -14,7 +14,7 @@
     display: block;
   }
 
-  @media (max-width: 768px) {
+  @include media("<=tablet") {
     [data-fs-payment-methods-section] {
       [data-fs-buyer-portal-internal-search] {
         width: 100%;
@@ -24,5 +24,8 @@
     [data-fs-bp-payment-methods-search-container-counter] {
       display: none;
     }
+    [data-fs-bp-counter-bottom] {
+      display: none;
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { HeaderInside, Table } from "../../../shared/components";
 import ConditionalTooltip from "../../../shared/components/ConditionalTooltip/ConditionalTooltip";
@@ -49,6 +49,7 @@ export const PaymentMethodsLayout = ({
     isOpen: isAddPaymentMethodDrawerOpen,
     ...addDrawerProps
   } = useDrawerProps();
+
   const {
     open: openRemoveDrawer,
     isOpen: isRemovePaymentMethodDrawerOpen,
@@ -68,11 +69,21 @@ export const PaymentMethodsLayout = ({
       search: querySearch,
     });
 
+  const fetchedMethods = paymentMethods ?? [];
+  const currentPaymentMethods = useMemo(
+    () => (paymentMethodsData ?? []).filter((m) => m?.isEnabled),
+    [paymentMethodsData]
+  );
+
+  const isSinglePaymentMethod = currentPaymentMethods.length <= 1;
+  const allPaymentMethodsSelected =
+    currentPaymentMethods.length === (paymentMethodsData?.length ?? 0);
+
   useEffect(() => {
     if (!isLoadingPaymentMethods && querySearch.length > 0) {
-      setPaymentMethodsData(paymentMethods);
+      setPaymentMethodsData(fetchedMethods);
     }
-  }, [paymentMethods, isLoadingPaymentMethods, querySearch]);
+  }, [fetchedMethods, isLoadingPaymentMethods, querySearch]);
 
   const handleSearch = (searchTerm: string) => {
     setQuerySearch(searchTerm);
@@ -94,13 +105,53 @@ export const PaymentMethodsLayout = ({
     }
   };
 
-  const currentPaymentMethods = paymentMethodsData?.filter(
-    (method) => method?.isEnabled
+  // --------- Render helpers (sem ternários encadeados) ----------
+  const renderEmpty = () => (
+    <EmptyState
+      title="No results found"
+      description={
+        querySearch.length > 0
+          ? "Try using different terms"
+          : "No payment methods found"
+      }
+    />
   );
 
-  const isSinglePaymentMethod = currentPaymentMethods?.length <= 1;
-  const allPaymentMethodsSelected =
-    currentPaymentMethods?.length === paymentMethodsData?.length;
+  const renderTableRows = () =>
+    currentPaymentMethods.map((method) => (
+      <Table.Row
+        data-fs-bp-payment-method-table-row
+        key={method?.id}
+        searchTerm={querySearch}
+        title={method?.name}
+        iconName="AccountBalanceWallet"
+        iconSize={24}
+        children={
+          <td>
+            <RemoveMethodButton
+              isLoading={isRemovingPaymentMethod}
+              onClick={() => onRemoveClick(method)}
+              disabled={isSinglePaymentMethod || isRemovingPaymentMethod}
+            />
+          </td>
+        }
+      />
+    ));
+
+  const renderTable = () => (
+    <Table>
+      <Table.Head columns={getTableColumns()} />
+      <Table.Body>
+        {isLoadingPaymentMethods ? <Table.Loading /> : renderTableRows()}
+      </Table.Body>
+    </Table>
+  );
+
+  const renderContent = () => {
+    if (!isLoadingPaymentMethods && fetchedMethods.length === 0)
+      return renderEmpty();
+    return renderTable();
+  };
 
   return (
     <GlobalLayout>
@@ -129,71 +180,31 @@ export const PaymentMethodsLayout = ({
               />
             </ConditionalTooltip>
           </HeaderInside>
+
           <SearchPaymentMethods
             data={currentPaymentMethods}
             paymentMethodsData={paymentMethodsData}
             defaultValue={querySearch}
             textSearch={handleSearch}
           />
-          {!isLoadingPaymentMethods && paymentMethods?.length === 0 ? (
-            <EmptyState
-              title="No results found"
-              description={
-                querySearch.length > 0
-                  ? "Try using different terms"
-                  : "No payment methods found"
-              }
-            />
-          ) : (
-            <Table>
-              <Table.Head columns={getTableColumns()} />
-              {isLoadingPaymentMethods ? (
-                <Table.Body>
-                  <Table.Loading />
-                </Table.Body>
-              ) : (
-                <Table.Body>
-                  {currentPaymentMethods.map((method) => (
-                    <Table.Row
-                      data-fs-bp-payment-method-table-row
-                      key={method?.id}
-                      searchTerm={querySearch}
-                      title={method?.name}
-                      iconName={"AccountBalanceWallet"}
-                      iconSize={24}
-                      children={
-                        <td>
-                          <RemoveMethodButton
-                            isLoading={isRemovingPaymentMethod}
-                            onClick={() => {
-                              onRemoveClick(method);
-                            }}
-                            disabled={
-                              isSinglePaymentMethod || isRemovingPaymentMethod
-                            }
-                          />
-                        </td>
-                      }
-                    />
-                  ))}
-                </Table.Body>
-              )}
-            </Table>
-          )}
+
+          {renderContent()}
 
           {!isLoadingPaymentMethods && (
             <p data-fs-bp-payment-methods-search-container-counter-bottom>
-              {`${currentPaymentMethods?.length ?? 0} of ${
+              {`${currentPaymentMethods.length} of ${
                 paymentMethodsData?.length ?? 0
               }`}
             </p>
           )}
+
           {isAddPaymentMethodDrawerOpen && (
             <AddPaymentMethodsDrawer
               {...addDrawerProps}
               isOpen={isAddPaymentMethodDrawerOpen}
             />
           )}
+
           {isRemovePaymentMethodDrawerOpen && selectedMethod && (
             <RemovePaymentMethodsDrawer
               {...removeDrawerProps}