@vtex/faststore-plugin-buyer-portal 1.1.95 → 1.1.96

package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss

@@ -5,157 +5,67 @@
 @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 
 [data-fs-credit-card-section] {
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
-  @import "../../../shared/components/EmptyState/empty-state.scss";
-
-  padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
-
-  @include media("<=notebook") {
-    padding: 0;
-  }
-
-  [data-fs-topbar-actions-wrapper] {
-    display: flex;
-    flex-direction: row;
-    [data-fs-topbar-dropdown-filter-trigger] {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      [data-fs-topbar-dropdown-filter-trigger-label] {
-        font-weight: var(--fs-text-weight-medium);
-        font-size: var(--fs-text-size-2);
-        color: #1f1f1f;
-      }
-
-      [data-fs-topbar-dropdown-filter-trigger-icon] {
-        color: #707070;
-      }
-    }
-
-    [data-fs-topbar-dropdown-add-trigger] {
-      background-color: #0366dd;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0))
-        var(--fs-spacing-2);
-      border-radius: var(--fs-border-radius-pill);
-      color: white;
-      cursor: pointer;
-
-      [data-fs-topbar-dropdown-add-trigger-label] {
-        font-weight: var(--fs-text-weight-semibold);
-        font-size: var(--fs-text-size-1);
-        line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-      }
-
-      svg {
-        color: white;
-      }
-    }
-  }
-
-  [data-fs-bp-credit-card-search-container] {
-    display: flex;
-    gap: var(--fs-spacing-1);
-    padding-bottom: 2rem;
-  }
-
-  [data-fs-credit-card-divider] {
-    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
-  }
-
-  [data-fs-credit-card-list] {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    [data-fs-bp-credit-card-list-title] {
-      color: #5c5c5c;
-      margin-bottom: 0.5rem;
-    }
-
-    [data-fs-credit-card-line] {
-      border-top: var(--fs-border-width) solid #e5e5e5;
-    }
-
-    [data-fs-credit-card-line-loading] {
-      padding: var(--fs-spacing-2) 0;
-    }
-
-    [data-fs-credit-card-row] {
-      display: flex;
-      justify-content: space-between;
-
-      &:hover {
-        background-color: #f5f5f5;
-      }
-
-      &:visited {
-        color: red;
-      }
-
-      [data-fs-credit-card-default-icon] {
-        display: flex;
-        align-items: center;
-        padding-right: var(--fs-spacing-2);
-        color: #0366dd;
-      }
-
-      [data-fs-credit-card-row-information] {
-        display: flex;
-        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;
-
-        @include media("<=notebook") {
-          margin-left: 0;
-        }
-
-        [data-fs-credit-card-row-icon-wrapper] {
-          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-credit-card-name] {
-          width: var(--data-fs-users-table-width);
-          font-weight: 500;
-          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-credit-card-row-action] {
-        align-items: center;
-        display: flex;
-
-        [data-fs-credit-card-row-dropdown-button] {
-          height: var(--fs-spacing-6);
-          width: var(--fs-spacing-6);
-          border-radius: var(--fs-border-radius-pill);
-          color: #5c5c5c;
-          margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-
-          &:hover {
-            background-color: #e0e0e0;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/EmptyState/empty-state.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/IconBookmarked/icon-bookmarked.scss";
+
+	padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+
+	@include media("<=notebook") {
+		padding: 0;
+	}
+
+	[data-fs-topbar-actions-wrapper] {
+		display: flex;
+		flex-direction: row;
+		[data-fs-topbar-dropdown-filter-trigger] {
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+
+			[data-fs-topbar-dropdown-filter-trigger-label] {
+				font-weight: var(--fs-text-weight-medium);
+				font-size: var(--fs-text-size-2);
+				color: #1f1f1f;
+			}
+
+			[data-fs-topbar-dropdown-filter-trigger-icon] {
+				color: #707070;
+			}
+		}
+
+		[data-fs-topbar-dropdown-add-trigger] {
+			background-color: #0366dd;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0)) var(--fs-spacing-2);
+			border-radius: var(--fs-border-radius-pill);
+			color: white;
+			cursor: pointer;
+
+			[data-fs-topbar-dropdown-add-trigger-label] {
+				font-weight: var(--fs-text-weight-semibold);
+				font-size: var(--fs-text-size-1);
+				line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+			}
+
+			svg {
+				color: white;
+			}
+		}
+	}
+
+	[data-fs-bp-credit-card-search-container] {
+		display: flex;
+		gap: var(--fs-spacing-1);
+		padding-bottom: 2rem;
+	}
+
+	[data-fs-credit-card-divider] {
+		border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+	}
 }

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

@@ -2,19 +2,21 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { Checkbox, Skeleton, useUI } from "@faststore/ui";
+import { Checkbox, useUI } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
   BasicDrawer,
   EmptyState,
-  Icon,
+  Table,
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { useAddPaymentMethodsToUnit } from "../../hooks";
 import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
 import { SearchPaymentMethods } from "../SearchPaymentMethods/SearchPaymentMethods";
 
+import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
+
 export type AddPaymentMethodsDrawerProps = Omit<
   BasicDrawerProps,
   "children"
@@ -115,58 +117,65 @@ 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 columns: TableColumn[] = [
+    {
+      key: "check",
+      align: "center",
+      size: "2.5rem",
+      label: (
+        <Checkbox
+          data-fs-bp-payment-methods-checkbox
+          ref={selectAllRef}
+          checked={allSelected}
+          onChange={toggleAll}
+          disabled={readonly || availableMethods.length === 0}
+          aria-label="Select all payment methods"
+        />
+      ),
+    },
+    {
+      key: "name",
+      label: "Name",
+      align: "left",
+      size: "100%",
+    },
+  ];
 
   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>
+    <Table layoutFixed>
+      <Table.Head columns={columns} />
+      <Table.Body>
+        {availableMethods.map(({ id, name }) => (
+          <Table.Row
+            key={id}
+            title={name}
+            iconName="AccountBalanceWallet"
+            selected={selectedMethods.has(id)}
+            iconSize={20}
+            prependColumns={
+              <Table.Cell align="center">
+                <Checkbox
+                  data-fs-bp-payment-methods-checkbox
+                  checked={selectedMethods.has(id)}
+                  onChange={() => toggleItem(id)}
+                  disabled={readonly}
+                  aria-label={`Select ${name}`}
+                />
+              </Table.Cell>
+            }
+          />
+        ))}
+      </Table.Body>
+    </Table>
   );
 
   const renderLoading = () => (
-    <div data-fs-payment-methods-loading>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <Skeleton key={index} size={{ width: "100%", height: "1.5rem" }} />
-      ))}
-    </div>
+    <Table layoutFixed>
+      <Table.Head columns={columns} />
+      <Table.Body>
+        <Table.Loading columns={columns.length} />
+      </Table.Body>
+    </Table>
   );
 
   const renderEmpty = () => (

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

@@ -1,80 +1,75 @@
 @import "../SearchPaymentMethods/search-payment-methods.scss";
 
 [data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-  width: 66%;
-  min-width: 66%;
+	width: 66%;
+	min-width: 66%;
 
-  @include media(">=notebook") {
-    width: 60rem;
-    min-width: 60rem;
-    max-width: 60rem;
-  }
+	@include media(">=notebook") {
+		width: 60rem;
+		min-width: 60rem;
+		max-width: 60rem;
+	}
 }
 
 [data-fs-bp-add-payment-methods-drawer] {
-  [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-payment-methods-drawer] {
+		@import "../../../shared/components/EmptyState/empty-state.scss";
+		@import "../../../shared/components/Table/table.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);
+		[data-fs-bp-add-payment-methods-drawer-description] {
+			color: #1f1f1f;
+			margin-bottom: var(--fs-spacing-3);
 
-      span {
-        color: #0366dd;
-      }
-    }
+			span {
+				color: #0366dd;
+			}
+		}
 
-    [data-fs-bp-payment-methods-checkbox] {
-      border-color: #e5e5e5;
-    }
+		[data-fs-bp-payment-methods-checkbox] {
+			border-color: #e5e5e5;
+			margin: 0 auto;
+		}
 
-    [data-fs-bp-payment-methods-checkbox]:checked {
-      background-color: #0366dd;
-    }
+		[data-fs-bp-payment-methods-checkbox]:checked {
+			background-color: #0366dd;
+		}
 
-    [data-fs-bp-basic-drawer-button-loading-indicator] {
-      position: relative;
-    }
+		[data-fs-bp-basic-drawer-button-loading-indicator] {
+			position: relative;
+		}
+	}
 
-    [data-fs-payment-methods-loading] {
-      * {
-        margin-top: var(--fs-spacing-1);
-        padding: var(--fs-spacing-2) 0;
-      }
-    }
-  }
+	[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-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;
-      }
-    }
-  }
+	@include media("<=tablet") {
+		[data-fs-buyer-portal-internal-search] {
+			width: 18rem !important;
+		}
+	}
 
-  @include media("<=tablet") {
-    [data-fs-buyer-portal-internal-search] {
-      width: 18rem !important;
-    }
-  }
+	@include media("<=phonemid") {
+		[data-fs-buyer-portal-internal-search] {
+			width: 14rem !important;
+		}
+	}
 
-  @include media("<=phonemid") {
-    [data-fs-buyer-portal-internal-search] {
-      width: 14rem !important;
-    }
-  }
-
-  @include media("<=phone") {
-    [data-fs-buyer-portal-internal-search] {
-      width: 10rem !important;
-    }
-  }
+	@include media("<=phone") {
+		[data-fs-buyer-portal-internal-search] {
+			width: 10rem !important;
+		}
+	}
 }

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

@@ -105,6 +105,8 @@ export const PaymentMethodsLayout = ({
     }
   };
 
+  const columns = getTableColumns({ actionsLength: 1 });
+
   // --------- Render helpers (sem ternários encadeados) ----------
   const renderEmpty = () => (
     <EmptyState
@@ -120,29 +122,30 @@ export const PaymentMethodsLayout = ({
   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>
+        actionIcons={
+          <RemoveMethodButton
+            isLoading={isRemovingPaymentMethod}
+            onClick={() => onRemoveClick(method)}
+            disabled={isSinglePaymentMethod || isRemovingPaymentMethod}
+          />
         }
       />
     ));
 
   const renderTable = () => (
-    <Table>
-      <Table.Head columns={getTableColumns()} />
+    <Table layoutFixed>
+      <Table.Head columns={columns} />
       <Table.Body>
-        {isLoadingPaymentMethods ? <Table.Loading /> : renderTableRows()}
+        {isLoadingPaymentMethods ? (
+          <Table.Loading columns={columns.length} />
+        ) : (
+          renderTableRows()
+        )}
       </Table.Body>
     </Table>
   );

package/src/features/roles/layout/RoleDetailsLayout/RoleDetailsLayout.tsx

@@ -1,11 +1,11 @@
 import { HeaderInside, Icon } from "../../../shared/components";
 import { Table } from "../../../shared/components/Table/Table";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 
-import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 import type { RolePermission } from "../../types";
 
 export type RoleDetailsLayoutProps = {
@@ -20,29 +20,19 @@ export const RoleDetailsLayout = ({
 }: RoleDetailsLayoutProps) => {
   const { currentOrgUnit } = useBuyerPortal();
 
-  const configTable: Array<TableColumn> = [
-    {
-      key: "permissions",
-      label: "Permissions",
-      align: "left",
-      colspan: 1,
-      size: "large",
-    },
-    {
-      key: "details",
-      label: "",
-      align: "left",
-      colspan: 3,
-      size: "large",
-    },
-    {
-      key: "active",
-      label: "",
-      align: "right",
-      colspan: 1,
-      size: "large",
-    },
-  ];
+  const columns = getTableColumns({
+    nameColumnLabel: "Permissions",
+    nameColumnSize: "18rem",
+    actionsLength: 1,
+    extraColumns: [
+      {
+        label: "",
+        key: "description",
+        size: "100%",
+        hideOnScreenSize: "tablet",
+      },
+    ],
+  });
 
   return (
     <GlobalLayout>
@@ -56,7 +46,48 @@ export const RoleDetailsLayout = ({
           />
 
           <div data-fs-role-details-page>
-            <Table>
+            <Table layoutFixed>
+              <Table.Head columns={columns} />
+              <Table.Body>
+                {roles.map((role) => (
+                  <Table.Row
+                    data-fs-bp-role-details-row
+                    key={role.label}
+                    title={
+                      <>
+                        <p data-fs-bp-role-details-label>{role.label}</p>
+                        <p data-fs-bp-role-details-description>
+                          {role.description}
+                        </p>
+                      </>
+                    }
+                    enabled={role.inRole}
+                    actionIcons={
+                      role.inRole ? (
+                        <Icon
+                          name="CheckCircle"
+                          width={20}
+                          height={20}
+                          data-fs-bp-check-icon
+                        />
+                      ) : (
+                        <Icon
+                          name="Block"
+                          width={20}
+                          height={20}
+                          data-fs-bp-block-icon
+                        />
+                      )
+                    }
+                  >
+                    <Table.Cell align="left" hideOnScreenSize="tablet">
+                      {role.description}
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+            {/* <Table>
               <Table.Head columns={configTable} />
               <Table.Body>
                 {roles.map((role) => (
@@ -88,7 +119,7 @@ export const RoleDetailsLayout = ({
                   </Table.Row>
                 ))}
               </Table.Body>
-            </Table>
+            </Table> */}
           </div>
         </section>
       </OrgUnitTabsLayout>