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

package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss

@@ -8,155 +8,148 @@
 @import "../../components/DeleteAddressLocationDrawer/delete-address-location-drawer.scss";
 
 [data-fs-addresses-section] {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-  @import "../../components/AddressLine/address-line.scss";
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
-  @import "../../../shared/components/Tag/tag.scss";
-  @import "../../../shared/components/SortFilter/sort-filter.scss";
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
-  @import "../../../shared/components/Table/table.scss";
-  @import "../../../shared/components/EmptyState/empty-state.scss";
-  @import "../../../shared/components/Paginator/paginator.scss";
-
-  padding-top: 0;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  @include media("<=tablet") {
-    padding: 0;
-  }
-
-  [data-fs-bp-header-inside] {
-    [data-fs-bp-header-buttons] > button {
-      display: flex;
-    }
-    @include media("<=tablet") {
-      [data-fs-header-inside-button]:nth-child(3) {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        cursor: pointer;
-        z-index: 1000;
-      }
-    }
-  }
-
-  [data-fs-bp-table-row-default-icon] {
-    display: flex;
-    justify-content: flex-end;
-    padding-right: var(--fs-spacing-1);
-    color: #0366dd;
-  }
-
-  [data-fs-bp-address-tabs-paginator-last] {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    margin-top: var(--fs-spacing-0);
-    padding: var(--fs-spacing-2) 0;
-
-    @include media(">=tablet") {
-      display: none;
-    }
-  }
-
-  [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-buyer-portal-address-filter] {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 0 var(--fs-spacing-4);
-
-    @include media("<=tablet") {
-      [data-fs-buyer-portal-internal-search] {
-        width: 100%;
-      }
-
-      [data-fs-bp-paginator-counter] {
-        display: none;
-      }
-    }
-  }
-
-  [data-fs-addresses-table] {
-    padding-bottom: var(--fs-spacing-9);
-
-    [data-fs-bp-addresses-paginator-last] {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      margin-top: var(--fs-spacing-0);
-      padding: var(--fs-spacing-2) 0;
-
-      @include media(">=tablet") {
-        display: none;
-      }
-    }
-  }
-
-  [data-fs-bp-table-head] {
-    [data-fs-bp-table-head-column-action] {
-      &:empty {
-        width: var(--fs-spacing-6);
-      }
-    }
-  }
-
-  [data-fs-bp-addresses-paginator] {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: var(--fs-spacing-2);
-    padding: var(--fs-spacing-2) 0;
-
-    @include media("<=phonemid") {
-      padding: var(--fs-spacing-3) 0;
-      margin-bottom: 5rem;
-    }
-  }
+	@import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+	@import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+	@import "../../components/AddressLine/address-line.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
+	@import "../../../shared/components/Tag/tag.scss";
+	@import "../../../shared/components/SortFilter/sort-filter.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/EmptyState/empty-state.scss";
+	@import "../../../shared/components/Paginator/paginator.scss";
+	@import "../../../shared/components/IconBookmarked/icon-bookmarked.scss";
+
+	padding-top: 0;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	@include media("<=tablet") {
+		padding: 0;
+	}
+
+	[data-fs-bp-header-inside] {
+		[data-fs-bp-header-buttons] > button {
+			display: flex;
+		}
+		@include media("<=tablet") {
+			[data-fs-header-inside-button]:nth-child(3) {
+				position: fixed;
+				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				cursor: pointer;
+				z-index: 1000;
+			}
+		}
+	}
+
+	[data-fs-bp-address-tabs-paginator-last] {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+
+		margin-top: var(--fs-spacing-0);
+		padding: var(--fs-spacing-2) 0;
+
+		@include media(">=tablet") {
+			display: none;
+		}
+	}
+
+	[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-buyer-portal-address-filter] {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 0 var(--fs-spacing-4);
+
+		@include media("<=tablet") {
+			[data-fs-buyer-portal-internal-search] {
+				width: 100%;
+			}
+
+			[data-fs-bp-paginator-counter] {
+				display: none;
+			}
+		}
+	}
+
+	[data-fs-addresses-table] {
+		padding-bottom: var(--fs-spacing-9);
+
+		[data-fs-bp-addresses-paginator-last] {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+
+			margin-top: var(--fs-spacing-0);
+			padding: var(--fs-spacing-2) 0;
+
+			@include media(">=tablet") {
+				display: none;
+			}
+		}
+	}
+
+	[data-fs-bp-table-head] {
+		[data-fs-bp-table-head-column-action] {
+			&:empty {
+				width: var(--fs-spacing-6);
+			}
+		}
+	}
+
+	[data-fs-bp-addresses-paginator] {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-top: var(--fs-spacing-2);
+		padding: var(--fs-spacing-2) 0;
+
+		@include media("<=phonemid") {
+			padding: var(--fs-spacing-3) 0;
+			margin-bottom: var(--fs-spacing-11);
+		}
+	}
 }

package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx

@@ -6,20 +6,16 @@ import {
   DropdownButton,
   DropdownItem,
   DropdownMenu,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
   Tooltip,
 } from "@faststore/ui";
 
-import { Icon, InternalSearch, Tag } from "../../../shared/components";
+import { Icon, InternalSearch, Table, Tag } from "../../../shared/components";
 import { Pagination } from "../../../shared/components/Pagination/Pagination";
+import { type TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { IPagination } from "../../../shared/types";
 import { Dictionary } from "../../../shared/utils";
-import BudgetSkeleton from "../BudgetSkeleton/BudgetSkeleton";
 
 import type { BudgetAllocationsSelectionDataType } from "../../types";
 
@@ -123,6 +119,39 @@ export const BudgetAllocationsSelection = ({
     );
   };
 
+  const columns: TableColumn[] = [
+    {
+      key: "check",
+      size: "2.5rem",
+      align: "center",
+      label: (
+        <Checkbox
+          data-fs-bp-budget-allocation-row-checked
+          ref={selectAllRef}
+          onChange={handleChangeCheckboxAll}
+          checked={
+            selected.length > 0 &&
+            selected.filter((selectedItem) =>
+              data.find((item) => item.id === selectedItem.id)
+            ).length === data.length
+          }
+        />
+      ),
+    },
+    ...getTableColumns({
+      nameColumnSize: "14rem",
+      extraColumns: [
+        {
+          key: "contract",
+          label: "Contract",
+          align: "left",
+          size: "100%",
+          hideOnScreenSize: "phonemid",
+        },
+      ],
+    }),
+  ];
+
   return (
     <div data-fs-bp-budget-allocation-table>
       <div data-fs-bp-budget-allocation-wrapper>
@@ -190,68 +219,43 @@ export const BudgetAllocationsSelection = ({
         )}
       </div>
 
-      <Table variant="bordered">
-        <TableHead>
-          <TableRow>
-            <TableCell scope="col" variant="header" align="center">
-              <Checkbox
-                ref={selectAllRef}
-                checked={
-                  selected.length > 0 &&
-                  selected.filter((selectedItem) =>
-                    data.find((item) => item.id === selectedItem.id)
-                  ).length === data.length
-                }
-                onChange={handleChangeCheckboxAll}
-                data-fs-bp-budget-allocation-row-checked
-                data-fs-bp-budget-allocation-row-select-all
-              />
-            </TableCell>
-            <TableCell scope="col" variant="header" align="left">
-              Name
-            </TableCell>
-            <TableCell scope="col" variant="header" align="left">
-              Contract
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
           {loading ? (
-            <BudgetSkeleton />
+            <Table.Loading columns={columns.length} />
           ) : (
             data.map((option) => {
               const isChecked = !!selected.find(
                 (item) => item.id === option.id
               );
-
               return (
-                <TableRow
+                <Table.Row
                   key={option.id}
-                  data-fs-bp-budget-allocation-row-selection={isChecked}
+                  iconName="TableEdit"
+                  iconSize={24}
+                  title={option.value}
+                  selected={isChecked || option.isAllocation}
+                  enabled={!option.isAllocation}
+                  prependColumns={
+                    <Table.Cell align="center">
+                      <Checkbox
+                        checked={isChecked || option.isAllocation}
+                        disabled={option.isAllocation}
+                        data-fs-bp-budget-allocation-row-checked
+                        onChange={() => toggleChecked(option, isChecked)}
+                      />
+                    </Table.Cell>
+                  }
                 >
-                  <TableCell align="center">
-                    <Checkbox
-                      checked={isChecked || option.isAllocation}
-                      disabled={option.isAllocation}
-                      data-fs-bp-budget-allocation-row-checked
-                      onChange={() => toggleChecked(option, isChecked)}
-                    />
-                  </TableCell>
-                  <TableCell
-                    align="center"
-                    data-fs-bp-budget-allocation-row-name-td
-                  >
-                    <div data-fs-bp-budget-allocation-row-name>
-                      <Icon name="TableEdit" width={24} height={24} />
-                      {option.value}
-                    </div>
-                  </TableCell>
-                  <TableCell align="left">{contract?.name}</TableCell>
-                </TableRow>
+                  <Table.Cell align="left" hideOnScreenSize="phonemid">
+                    {contract?.name}
+                  </Table.Cell>
+                </Table.Row>
               );
             })
           )}
-        </TableBody>
+        </Table.Body>
       </Table>
 
       <Pagination