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

package/src/features/collections/components/CollectionsTable/collections-table.scss

@@ -1,120 +1,140 @@
 [data-fs-bp-collection-table] {
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-  @import "../AddCollectionsDrawer/add-collections-drawer.scss";
-  @import "../../../shared/components/Table/table.scss";
-
-  width: 100%;
-
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-
-  [data-fs-bp-head-row] {
-    border-bottom: var(--fs-table-bordered-border-width) solid
-      var(--fs-table-bordered-border-color);
-
-    color: #5c5c5c;
-    height: var(--fs-spacing-8);
-  }
-
-  [data-fs-table-head="true"] {
-    [data-fs-bp-head-row="true"] {
-      &:hover {
-        background-color: initial;
-      }
-    }
-  }
-
-  [data-fs-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-    border-bottom: none;
-    text-wrap: balance;
-    text-align: justify;
-
-    [data-fs-tooltip-placement="left-center"] {
-      [data-fs-tooltip-indicator="true"] {
-        margin-left: -0.1%;
-      }
-    }
-    [data-fs-tooltip-placement="top-center"] {
-      [data-fs-tooltip-indicator="true"] {
-        margin-top: -1%;
-      }
-    }
-  }
-
-  [data-fs-bp-table-row-options] {
-    [data-fs-collections-row-action-button] {
-      margin: 0 var(--fs-spacing-1);
-      border-radius: var(--fs-border-radius-pill);
-      width: var(--fs-spacing-5);
-      aspect-ratio: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-
-      &:disabled {
-        cursor: not-allowed;
-
-        [data-fs-icon] {
-          color: #adadad;
-
-          &[data-fs-icon-loading="true"] {
-            @keyframes rotate {
-              from {
-                transform: rotate(0deg);
-              }
-              to {
-                transform: rotate(360deg);
-              }
-            }
-            animation: rotate 2s linear infinite;
-          }
-        }
-      }
-
-      &:hover {
-        background-color: #e0e0e0;
-      }
-
-      &:active {
-        opacity: 0.8;
-      }
-
-      [data-fs-icon] {
-        color: #000;
-      }
-    }
-  }
-
-  [data-fs-table-row] {
-    height: var(--fs-spacing-8);
-
-    &:hover {
-      background-color: var(--fs-color-neutral-bkg);
-    }
-
-    [data-fs-table-cell="header"] {
-      display: flex;
-      height: var(--fs-spacing-8);
-      cursor: pointer;
-    }
-
-    [data-fs-bp-table-row-options] {
-      width: 3rem;
-    }
-
-    [data-fs-table-cell="data"] {
-      padding: var(--fs-spacing-0);
-    }
-  }
-
-  [data-fs-bp-text-medium] {
-    font-family: Inter;
-    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));
-    letter-spacing: -1%;
-  }
+	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+	@import "../AddCollectionsDrawer/add-collections-drawer.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	width: 100%;
+
+	[data-fs-table] {
+		overflow-x: visible;
+	}
+
+	[data-fs-bp-head-row] {
+		border-bottom: var(--fs-table-bordered-border-width) solid
+			var(--fs-table-bordered-border-color);
+
+		color: #5c5c5c;
+		height: var(--fs-spacing-8);
+	}
+
+	[data-fs-table-head="true"] {
+		[data-fs-bp-head-row="true"] {
+			&:hover {
+				background-color: initial;
+			}
+		}
+	}
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+		border-bottom: none;
+		text-wrap: balance;
+		text-align: justify;
+
+		[data-fs-tooltip-placement="left-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-left: -0.1%;
+			}
+		}
+		[data-fs-tooltip-placement="top-center"] {
+			[data-fs-tooltip-indicator="true"] {
+				margin-top: -1%;
+			}
+		}
+	}
+
+	[data-fs-collections-row-action-button] {
+		width: var(--fs-spacing-6);
+		height: var(--fs-spacing-6);
+		display: inline-flex;
+		border-radius: var(--fs-border-radius-pill);
+		justify-content: center;
+		align-items: center;
+
+		&:hover:not(:disabled) {
+			background-color: #ebebeb;
+			cursor: pointer;
+		}
+
+		[data-fs-button-icon] {
+			display: block;
+			width: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+		}
+	}
+
+	[data-fs-bp-table-row-options] {
+		[data-fs-collections-row-action-button] {
+			margin: 0 var(--fs-spacing-1);
+			border-radius: var(--fs-border-radius-pill);
+			width: var(--fs-spacing-5);
+			aspect-ratio: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+
+			&:disabled {
+				cursor: not-allowed;
+
+				[data-fs-icon] {
+					color: #adadad;
+
+					&[data-fs-icon-loading="true"] {
+						@keyframes rotate {
+							from {
+								transform: rotate(0deg);
+							}
+							to {
+								transform: rotate(360deg);
+							}
+						}
+						animation: rotate 2s linear infinite;
+					}
+				}
+			}
+
+			&:hover {
+				background-color: #e0e0e0;
+			}
+
+			&:active {
+				opacity: 0.8;
+			}
+
+			[data-fs-icon] {
+				color: #000;
+			}
+		}
+	}
+
+	[data-fs-table-row] {
+		height: var(--fs-spacing-8);
+
+		&:hover {
+			background-color: var(--fs-color-neutral-bkg);
+		}
+
+		[data-fs-table-cell="header"] {
+			display: flex;
+			height: var(--fs-spacing-8);
+			cursor: pointer;
+		}
+
+		[data-fs-bp-table-row-options] {
+			width: 3rem;
+		}
+
+		[data-fs-table-cell="data"] {
+			padding: var(--fs-spacing-0);
+		}
+	}
+
+	[data-fs-bp-text-medium] {
+		font-family: Inter;
+		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));
+		letter-spacing: -1%;
+	}
 }

package/src/features/collections/components/table/AddCollectionsDrawerTable.tsx

@@ -6,19 +6,12 @@ import {
   useState,
 } from "react";
 
-import {
-  Checkbox,
-  Skeleton,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@faststore/ui";
+import { Checkbox } from "@faststore/ui";
 
-import { Icon } from "../../../shared/components";
+import { Table } from "../../../shared/components";
 import { CollectionsSummary } from "../../types";
-import { PAGE_SIZE } from "../AddCollectionsDrawer/AddCollectionsDrawer";
+
+import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 
 interface AddCollectionsDrawerTableProps {
   loading?: boolean;
@@ -57,55 +50,56 @@ export const AddCollectionsDrawerTable = ({
     onChange(selectedItems);
   }, [allSelected, allIds, data, onChange]);
 
+  const columns: TableColumn[] = [
+    {
+      key: "check",
+      align: "center",
+      size: "2.5rem",
+      label: (
+        <Checkbox
+          data-fs-bp-collections-checkbox
+          checked={allSelected}
+          partial={partiallySelected}
+          onChange={handleSelectAll}
+        />
+      ),
+    },
+    {
+      key: "name",
+      label: "Name",
+      align: "left",
+      size: "100%",
+    },
+  ];
+
   return (
     <div data-fs-bp-add-collections-drawer-table>
-      <Table variant="bordered">
-        <TableHead>
-          <TableRow>
-            <TableCell scope="col" variant="header" align="left">
-              <Checkbox
-                checked={allSelected}
-                partial={partiallySelected}
-                onChange={handleSelectAll}
-              />
-            </TableCell>
-            <TableCell scope="col" variant="header" align="left">
-              Name
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {loading
-            ? Array.from({ length: PAGE_SIZE }).map((_, index) => (
-                <TableRow key={index}>
-                  <TableCell>
-                    <Skeleton size={{ width: "1.25rem", height: "1.25rem" }} />
-                  </TableCell>
-                  <TableCell>
-                    <Skeleton size={{ width: "90%", height: "1.25rem" }} />
-                  </TableCell>
-                </TableRow>
-              ))
-            : data.map((option) => (
-                <TableRow
-                  key={option.id}
-                  data-selected={selectedIds.includes(option.id)}
-                >
-                  <TableCell>
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
+          {loading ? (
+            <Table.Loading columns={columns.length} />
+          ) : (
+            data.map((option) => (
+              <Table.Row
+                key={option.id}
+                title={option.name}
+                iconName="Shapes"
+                iconSize={24}
+                selected={selectedIds.includes(option.id)}
+                prependColumns={
+                  <Table.Cell align="center">
                     <Checkbox
+                      data-fs-bp-collections-checkbox
                       checked={selectedIds.includes(option.id)}
                       onChange={() => handleSelect(option.id)}
                     />
-                  </TableCell>
-                  <TableCell>
-                    <span data-fs-bp-add-collections-drawer-cell-span>
-                      <Icon color="#0366DD" name="Shapes" />
-                      {option.name}
-                    </span>
-                  </TableCell>
-                </TableRow>
-              ))}
-        </TableBody>
+                  </Table.Cell>
+                }
+              />
+            ))
+          )}
+        </Table.Body>
       </Table>
     </div>
   );

package/src/features/collections/components/table/add-collections-drawer-table.scss

@@ -1,70 +1,71 @@
-@import "@faststore/ui/src/components/molecules/Table/styles.scss";
-
 [data-fs-bp-add-collections-drawer-table] {
-  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+	@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	margin-top: 1.25rem;
+	[data-fs-table-content] {
+		table-layout: initial;
+	}
 
-  margin-top: 1.25rem;
-  [data-fs-table-content] {
-    table-layout: initial;
-  }
+	[data-fs-table-head="true"] {
+		[data-fs-table-row="true"] {
+			border-bottom: 1px solid #d6d6d6;
 
-  [data-fs-table-head="true"] {
-    [data-fs-table-row="true"] {
-      border-bottom: 1px solid #d6d6d6;
+			[data-fs-table-cell="header"] {
+				height: 2.5rem;
+				padding: 0 0.875rem;
 
-      [data-fs-table-cell="header"] {
-        height: 2.5rem;
-        padding: 0 0.875rem;
+				font-weight: var(--fs-text-weight-regular);
+				color: #5c5c5c;
+				font-size: var(--fs-text-size-1);
+			}
+		}
+	}
 
-        font-weight: var(--fs-text-weight-regular);
-        color: #5c5c5c;
-        font-size: var(--fs-text-size-1);
-      }
-    }
-  }
+	[data-fs-table-body="true"] {
+		[data-fs-table-row="true"] {
+			&[data-selected="true"] {
+				background-color: #f1f8fe;
+			}
 
-  [data-fs-table-body="true"] {
-    [data-fs-table-row="true"] {
-      &[data-selected="true"] {
-        background-color: #f1f8fe;
-      }
+			&:last-child {
+				border-bottom: 1px solid #d6d6d6;
+			}
 
-      &:last-child {
-        border-bottom: 1px solid #d6d6d6;
-      }
+			[data-fs-table-cell] {
+				height: 3.5rem;
+				font-weight: var(--fs-text-weight-medium);
+				color: #1f1f1f;
+				font-size: var(--fs-text-size-1);
+				padding: 0 0.875rem;
+				text-align: left;
 
-      [data-fs-table-cell] {
-        height: 3.5rem;
-        font-weight: var(--fs-text-weight-medium);
-        color: #1f1f1f;
-        font-size: var(--fs-text-size-1);
-        padding: 0 0.875rem;
-        text-align: left;
+				[data-fs-bp-add-collections-drawer-cell-span] {
+					display: flex;
+					align-items: center;
+				}
 
-        [data-fs-bp-add-collections-drawer-cell-span] {
-          display: flex;
-          align-items: center;
-        }
+				&:first-child {
+					width: 2.5rem;
+					text-align: center;
 
-        &:first-child {
-          width: 2.5rem;
-          text-align: center;
+					> svg {
+						margin: 0;
+					}
+				}
+			}
+		}
+	}
 
-          > svg {
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
+	[data-fs-skeleton] {
+		display: inline-block;
+	}
 
-  [data-fs-skeleton] {
-    display: inline-block;
-  }
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+	}
 
-  [data-fs-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-  }
+	[data-fs-bp-collections-checkbox] {
+		margin: 0 auto;
+	}
 }

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -1,13 +1,14 @@
 import { useEffect, type ChangeEvent } from "react";
 
-import { Dropdown, Skeleton, Toggle } from "@faststore/ui";
+import { Toggle } from "@faststore/ui";
 
 import {
-  Icon,
   HeaderInside,
-  BasicDropdownMenu,
+  Table,
+  IconBookmarked,
 } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import {
   useDrawerProps,
   useBuyerPortal,
@@ -84,6 +85,35 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
     refetchCreditCards();
   };
 
+  const columns = getTableColumns({
+    actionsLength: 3,
+    nameColumnLabel: "Card Nickname",
+  });
+
+  const renderRowActions = (creditCard: CreditCardData) => {
+    const actions = [
+      <Toggle
+        id="isContractActive"
+        aria-label="is contract active"
+        defaultChecked={creditCard.isActive}
+        onChange={(event) => {
+          creditCard.isActive = !creditCard.isActive;
+          handleCardChangeStatus(
+            event,
+            creditCard.accountId,
+            creditCard.isActive
+          );
+        }}
+      />,
+    ];
+
+    if (creditCard.isDefault) {
+      actions.unshift(<IconBookmarked />);
+    }
+
+    return actions;
+  };
+
   return (
     <GlobalLayout>
       <ContractTabsLayout
@@ -105,65 +135,29 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
           {data.length === 0 ? (
             <EmptyState iconName="CreditCard" title="No credit cards yet" />
           ) : (
-            <ul data-fs-credit-card-list>
-              <div data-fs-bp-credit-card-list-title> Card Nickname </div>
-              {isLoading ? (
-                <>
-                  <li data-fs-credit-card-line data-fs-credit-card-line-loading>
-                    <Skeleton size={{ width: "100%", height: "1.5rem" }} />
-                  </li>
-                  <li data-fs-credit-card-line data-fs-credit-card-line-loading>
-                    <Skeleton size={{ width: "100%", height: "1.5rem" }} />
-                  </li>
-                  <li data-fs-credit-card-line data-fs-credit-card-line-loading>
-                    <Skeleton size={{ width: "100%", height: "1.5rem" }} />
-                  </li>
-                </>
-              ) : (
-                creditCards.map((creditCard) => (
-                  <li data-fs-credit-card-line key={creditCard.accountId}>
-                    <div data-fs-credit-card-row>
-                      <div data-fs-credit-card-row-information>
-                        <span data-fs-credit-card-row-icon-wrapper>
-                          <Icon name="CreditCard" width={24} height={24} />
-                        </span>
-                        <div data-fs-credit-card-name>
-                          {creditCard.cardLabel ?? creditCard.cardNumber}
-                        </div>
-                      </div>
-                      {creditCard.isDefault && (
-                        <div data-fs-credit-card-default-icon>
-                          <Icon name="Bookmark" width={20} height={20} />
-                        </div>
-                      )}
-                      <div data-fs-credit-card-row-action>
-                        <Toggle
-                          id="isContractActive"
-                          aria-label="is contract active"
-                          defaultChecked={creditCard.isActive}
-                          onChange={(event) => {
-                            creditCard.isActive = !creditCard.isActive;
-                            handleCardChangeStatus(
-                              event,
-                              creditCard.accountId,
-                              creditCard.isActive
-                            );
-                          }}
+            <Table layoutFixed>
+              <Table.Head columns={columns} />
+              <Table.Body>
+                {isLoading ? (
+                  <Table.Loading columns={columns.length} />
+                ) : (
+                  creditCards.map((creditCard) => (
+                    <Table.Row
+                      iconName="CreditCard"
+                      iconSize={24}
+                      title={creditCard.cardLabel ?? creditCard.cardNumber}
+                      actionIcons={renderRowActions(creditCard)}
+                      dropdownMenu={
+                        <CreditCardDropdownMenu
+                          currentCreditCard={creditCard}
+                          onUpdate={handleUpdateCreditCard}
                         />
-
-                        <Dropdown>
-                          <BasicDropdownMenu.Trigger />
-                          <CreditCardDropdownMenu
-                            currentCreditCard={creditCard}
-                            onUpdate={handleUpdateCreditCard}
-                          />
-                        </Dropdown>
-                      </div>
-                    </div>
-                  </li>
-                ))
-              )}
-            </ul>
+                      }
+                    />
+                  ))
+                )}
+              </Table.Body>
+            </Table>
           )}
           {isCreateCreditCardDrawerOpen && (
             <CreateCreditCardDrawer