@vtex/faststore-plugin-buyer-portal 1.1.87 → 1.1.89

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

@@ -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}

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

@@ -5,110 +5,128 @@
 
 [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-5);
-
-  [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";
-
-  @media (min-width: 1028px) {
-    padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
-  }
-
-  [data-fs-payment-methods-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-  }
-
-  [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;
-    }
-  }
+	@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("<=tablet") {
+		[data-fs-buyer-portal-internal-search] {
+			width: 100% !important;
+		}
+
+		[data-fs-bp-header-inside] {
+			[data-fs-header-inside-button] {
+				position: fixed;
+				bottom: 20px;
+				right: 20px;
+				border: none;
+				border-radius: 50%;
+				cursor: pointer;
+				z-index: 1;
+			}
+		}
+	}
 }

package/src/features/shared/components/CustomDropdown/custom-dropdown.scss

@@ -49,11 +49,16 @@
     position: relative;
     cursor: pointer;
     padding: var(--fs-spacing-2) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
     min-width: 10.625rem;
     border-radius: var(--fs-border-radius-pill);
     font-size: var(--fs-text-size-1);
     font-weight: var(--fs-text-weight-semibold);
     line-height: var(--fs-spacing-3);
     text-align: center;
+
+    @include media("<=tablet") {
+      min-width: 8rem;
+    }
   }
 }

package/src/features/shared/components/InternalTopbar/InternalTopbar.tsx

@@ -25,7 +25,7 @@ export const InternalTopBar = ({
   titleDropDownItems,
   showActions = true,
   children,
-  href = "/buyer-portal",
+  href = "/pvt/organization-account",
 }: InternapTopBarProps) => {
   const { currentOrgUnit } = useBuyerPortal();
 

package/src/features/shared/components/MainLinksDropdownMenu/MainLinksDropdownMenu.tsx

@@ -25,7 +25,7 @@ const getMenuItems = (orgUnit?: OrgUnitBasicData | null) => {
 
   const firstOption = orgUnit
     ? { name: orgUnit.name, link: `/org-unit/${orgUnit.id}` }
-    : { name: "Buyer Portal", link: "/buyer-portal" };
+    : { name: "Organization Account", link: "/pvt/organization-account" };
 
   return [firstOption, ...menuItems];
 };

package/src/features/shared/components/Pagination/Pagination.tsx

@@ -2,7 +2,7 @@ import { Button, Skeleton } from "@faststore/ui";
 
 interface PaginationProps {
   currentCount: number;
-  variant?: "default" | "onlyText";
+  variant?: "default" | "onlyText" | "counter";
   total: number;
   loading?: boolean;
   showMore?(): void;
@@ -23,13 +23,23 @@ export const Pagination = ({
         </Button>
       )}
 
-      <span data-fs-bp-pagination-span>
-        {loading ? (
-          <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
-        ) : (
-          `${currentCount} of ${total}`
-        )}
-      </span>
+      {variant === "counter" ? (
+        <span data-fs-bp-counter-bottom>
+          {loading ? (
+            <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
+          ) : (
+            `${currentCount} of ${total}`
+          )}
+        </span>
+      ) : (
+        <span data-fs-bp-pagination-span>
+          {loading ? (
+            <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
+          ) : (
+            `${currentCount} of ${total}`
+          )}
+        </span>
+      )}
     </div>
   );
 };

package/src/features/shared/components/Pagination/pagination.scss

@@ -24,4 +24,18 @@
     color: #5c5c5c;
     margin-left: auto;
   }
+
+  @include media("<=tablet") {
+    [data-fs-buyer-portal-internal-search] {
+      width: 100% !important;
+    }
+    & > [data-fs-bp-counter-bottom] {
+      display: none !important;
+    }
+  }
+
+  & > [data-fs-bp-counter-bottom] {
+    display: block;
+    text-align: end;
+  }
 }

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss

@@ -60,9 +60,11 @@
   }
 
   @include media("<=tablet") {
-    width: 20.9375rem !important;
-    min-width: 20.9375rem !important;
-    max-width: 20.9375rem !important;
+    width: 19rem !important;
+    min-width: 19rem !important;
+    max-width: 19rem !important;
+    height: 100% !important;
+    border-radius: 0 !important;
     & > [data-fs-bp-basic-drawer-heading] {
       padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
         calc(var(--fs-spacing-3) + var(--fs-spacing-0))

package/src/features/shared/utils/buyerPortalRoutes.ts

@@ -1,4 +1,4 @@
-const base = "/buyer-portal";
+const base = "/organization-account";
 
 function replaceParams(template: string, params: Record<string, string>) {
   return Object.entries(params).reduce((url, [key, value]) => {