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

package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss

@@ -2,241 +2,140 @@
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 
 [data-fs-bp-budget-allocation-table] {
-  @import "../../../shared/components/Pagination/pagination.scss";
-  @import "@faststore/ui/src/components/molecules/Table/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/molecules/Tooltip/styles.scss";
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/Tag/tag.scss";
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-
-  [data-fs-bp-custom-fields-empty-state] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--fs-spacing-1);
-    height: 18.75rem;
-    padding: 0rem 20rem;
-    color: #858585;
-    font-weight: var(--fs-text-weight-semibold);
-
-    [data-fs-icon] {
-      width: var(--fs-spacing-6);
-      height: var(--fs-spacing-6);
-      margin: 0;
-    }
-  }
-
-  [data-fs-bp-pagination-tag] {
-    width: 100%;
-    height: var(--fs-spacing-6);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    [data-fs-bp-pagination-tag-wrapper] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 0.625rem;
-
-      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));
-
-      [data-fs-bp-pagination-tag-uncheck-button] {
-        cursor: pointer;
-      }
-    }
-  }
-
-  [data-fs-bp-budget-allocation-row-name] {
-    width: fit-content;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--fs-spacing-3);
-  }
-  [data-fs-bp-budget-allocation-row-name-td] {
-    width: 19.375rem;
-  }
-  [data-fs-bp-budget-allocation-wrapper] {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: var(--fs-spacing-4);
-    align-items: baseline;
-    gap: var(--fs-spacing-1);
-  }
-
-  [data-fs-button] {
-    [data-fs-button-wrapper] {
-      padding-left: 0rem;
-      & > span {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        font-size: var(--fs-text-size-2);
-        gap: var(--fs-spacing-2);
-
-        font-weight: var(--fs-text-weight-semibold);
-        color: #000000 !important;
-      }
-    }
-
-    [data-fs-bp-budget-allocation-select-current-icon] {
-      color: #000000;
-      transform: rotate(90deg);
-    }
-  }
-  [data-fs-bp-budget-allocation-row-checked] {
-    width: 1.125rem;
-    height: 1.125rem;
-    margin-top: 0.1875rem;
-  }
-
-  [data-fs-buyer-portal-budget-allocation-filter] {
-    display: flex;
-    gap: var(--fs-spacing-1);
-    margin-bottom: var(--fs-spacing-4);
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  [data-fs-bp-pagination-span] {
-    color: #707070;
-    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));
-  }
-
-  [data-fs-table-head="true"] {
-    [data-fs-table-row="true"] {
-      [data-fs-table-cell="header"] {
-        height: var(--fs-spacing-6);
-        padding: 0 var(--fs-spacing-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"] {
-      &:first-child {
-        border-top: var(--fs-border-width) solid #d6d6d6;
-      }
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:hover {
-        background-color: #f5f5f5;
-      }
-      [data-fs-table-cell] {
-        height: var(--fs-spacing-8);
-        font-weight: var(--fs-text-weight-medium);
-        color: #1f1f1f;
-        font-size: var(--fs-text-size-1);
-        padding: var(--fs-spacing-1);
-
-        &:nth-child(1) {
-          width: var(--fs-spacing-6);
-        }
-        &:nth-child(2) {
-          width: 17rem;
-        }
-
-        [data-fs-icon] {
-          display: inline-block;
-          color: #0366dd;
-          width: var(--fs-spacing-4);
-          height: var(--fs-spacing-4);
-          margin: 0;
-        }
-
-        [data-fs-button] {
-          width: 3rem;
-          height: 3rem;
-
-          &[data-fs-bp-budget-allocation-dropdown-button] {
-            cursor: pointer;
-          }
-
-          [data-fs-button-wrapper] {
-            border-radius: var(--fs-border-radius-pill);
-            padding: 0;
-          }
-        }
-
-        &:first-child {
-          width: var(--fs-spacing-6);
-          text-align: center;
-
-          > svg {
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    [data-fs-bp-budget-allocation-row-selection="true"] {
-      background-color: #f1f8fd;
-    }
-
-    [data-fs-bp-budget-allocation-dropdown-trigger] {
-      &[data-fs-bp-basic-dropdown-menu-trigger] {
-        [data-fs-icon] {
-          color: #1f1f1f;
-        }
-      }
-    }
-  }
-
-  [data-fs-skeleton] {
-    display: inline-block;
-  }
-
-  [data-fs-tooltip] {
-    --fs-tooltip-background: #1f1f1f;
-
-    [data-fs-tooltip-wrapper] {
-      position: absolute;
-    }
-  }
+	@import "../../../shared/components/Pagination/pagination.scss";
+	@import "@faststore/ui/src/components/atoms/Button/styles.scss";
+	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/Tag/tag.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+
+	[data-fs-table] {
+		overflow-x: visible;
+	}
+
+	[data-fs-bp-custom-fields-empty-state] {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: var(--fs-spacing-1);
+		height: 18.75rem;
+		padding: 0rem 20rem;
+		color: #858585;
+		font-weight: var(--fs-text-weight-semibold);
+
+		[data-fs-icon] {
+			width: var(--fs-spacing-6);
+			height: var(--fs-spacing-6);
+			margin: 0;
+		}
+	}
+
+	[data-fs-bp-pagination-tag] {
+		width: 100%;
+		height: var(--fs-spacing-6);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		[data-fs-bp-pagination-tag-wrapper] {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 0.625rem;
+
+			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));
+
+			[data-fs-bp-pagination-tag-uncheck-button] {
+				cursor: pointer;
+			}
+		}
+	}
+	[data-fs-bp-budget-allocation-wrapper] {
+		display: flex;
+		flex-direction: row;
+		margin-bottom: var(--fs-spacing-4);
+		align-items: baseline;
+		gap: var(--fs-spacing-1);
+	}
+
+	[data-fs-button] {
+		[data-fs-button-wrapper] {
+			padding-left: 0rem;
+			& > span {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				font-size: var(--fs-text-size-2);
+				gap: var(--fs-spacing-2);
+
+				font-weight: var(--fs-text-weight-semibold);
+				color: #000000 !important;
+			}
+		}
+
+		[data-fs-bp-budget-allocation-select-current-icon] {
+			color: #000000;
+			transform: rotate(90deg);
+		}
+	}
+	[data-fs-bp-budget-allocation-row-checked] {
+		margin: 0 auto;
+	}
+
+	[data-fs-buyer-portal-budget-allocation-filter] {
+		display: flex;
+		gap: var(--fs-spacing-1);
+		margin-bottom: var(--fs-spacing-4);
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	[data-fs-bp-pagination-span] {
+		color: #707070;
+		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));
+	}
+
+	[data-fs-tooltip] {
+		--fs-tooltip-background: #1f1f1f;
+
+		[data-fs-tooltip-wrapper] {
+			position: absolute;
+		}
+	}
 }
 
 [data-fs-dropdown-menu] {
-  width: auto;
-  background-color: #ffffff !important;
-  padding: var(--fs-spacing-1) 0;
-  min-width: 16.5rem;
-
-  [data-fs-dropdown-item] {
-    display: flex;
-    padding: var(--fs-spacing-1) calc(var(--fs-spacing-4) + var(--fs-spacing-0));
-
-    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));
-    color: #1f1f1f;
-  }
+	width: auto;
+	background-color: #ffffff !important;
+	padding: var(--fs-spacing-1) 0;
+	min-width: 16.5rem;
+
+	[data-fs-dropdown-item] {
+		display: flex;
+		padding: var(--fs-spacing-1) calc(var(--fs-spacing-4) + var(--fs-spacing-0));
+
+		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));
+		color: #1f1f1f;
+	}
 }
 [data-fs-bp-budget-allocation-select-item] {
-  padding: 16px;
-
-  &[data-fs-bp-budget-allocation-selected="true"] {
-    color: #0366dd !important;
-  }
-  [data-fs-bp-budget-allocation-selected-wrapper] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
+	padding: var(--fs-spacing-3);
+
+	&[data-fs-bp-budget-allocation-selected="true"] {
+		color: #0366dd !important;
+	}
+	[data-fs-bp-budget-allocation-selected-wrapper] {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+	}
 }

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

@@ -2,20 +2,14 @@ import { useState } from "react";
 
 import { useSearchParams } from "next/navigation";
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@faststore/ui";
-
-import { Icon, InternalSearch } from "../../../shared/components";
+import { IconButton } from "@faststore/ui";
+
+import { Icon, InternalSearch, Table } from "../../../shared/components";
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { Pagination } from "../../../shared/components/Pagination/Pagination";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import { useDrawerProps, useQueryParams } from "../../../shared/hooks";
 import { IPagination } from "../../../shared/types";
-import BudgetSkeleton from "../BudgetSkeleton/BudgetSkeleton";
 import { CreateBudgetAllocationDrawer } from "../CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
 import { DeleteBudgetAllocationDrawer } from "../DeleteBudgetAllocationDrawer/DeleteBudgetAllocationDrawer";
 
@@ -64,6 +58,105 @@ export const BudgetAllocationsTable = ({
     ...allocationDrawerProps
   } = useDrawerProps();
 
+  const columns = getTableColumns({
+    nameColumnSize: "14rem",
+    actionsLength: 1,
+    extraColumns: [
+      {
+        label: "Type",
+        key: "type",
+        size: "8.25rem",
+        align: "left",
+        hideOnScreenSize: "tablet",
+      },
+      {
+        label: "Contract",
+        key: "contract",
+        size: "100%",
+        align: "left",
+        hideOnScreenSize: "phonemid",
+      },
+    ],
+  });
+
+  const renderPagination = () => (
+    <span data-fs-bp-pagination-span>
+      <Pagination
+        currentCount={pagination.current}
+        total={pagination.total}
+        loading={pagination.loading || loading}
+        showMore={pagination.loadMore}
+        variant={data.length < pagination.total ? "default" : "onlyText"}
+      />
+    </span>
+  );
+
+  const renderLoading = () => (
+    <>
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
+          <Table.Loading columns={columns.length} />
+        </Table.Body>
+      </Table>
+      {renderPagination()}
+    </>
+  );
+
+  const renderEmptyState = () => (
+    <EmptyState
+      title="No allocations yet"
+      description="Add at least one allocation so that this budget can be used at checkout."
+    />
+  );
+
+  function renderContent() {
+    if (loading) {
+      return renderLoading();
+    }
+
+    if (!data || data.length === 0) {
+      return renderEmptyState();
+    }
+
+    return (
+      <>
+        <Table layoutFixed>
+          <Table.Head columns={columns} />
+          <Table.Body>
+            {data.map((option) => (
+              <Table.Row
+                key={option.id}
+                title={option.name}
+                iconName="TableEdit"
+                iconSize={24}
+                actionIcons={
+                  <IconButton
+                    data-fs-bp-budget-allocation-table-trash-icon
+                    aria-label="remove-allocation"
+                    icon={<Icon name="Trash" width={20} height={20} />}
+                    onClick={() => {
+                      setSelectedAllocation(option);
+                      openAllocationDeleteDrawerProps();
+                    }}
+                  />
+                }
+              >
+                <Table.Cell align="left" hideOnScreenSize="tablet">
+                  {option.type}
+                </Table.Cell>
+                <Table.Cell align="left" hideOnScreenSize="phonemid">
+                  {option.contract}
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        {renderPagination()}
+      </>
+    );
+  }
+
   return (
     <div data-fs-bp-budget-details-allocation-table>
       <div data-fs-budget-details-allocation-table-edit-line>
@@ -92,87 +185,7 @@ export const BudgetAllocationsTable = ({
         />
       </div>
 
-      {data && !data.length && !loading ? (
-        <EmptyState
-          title="No allocations yet"
-          description="Add at least one allocation so that this budget can be used at checkout."
-        />
-      ) : (
-        <>
-          <Table variant="bordered">
-            <TableHead>
-              <TableRow>
-                <TableCell scope="col" variant="header" align="left">
-                  Name
-                </TableCell>
-                <TableCell scope="col" variant="header" align="left">
-                  Type
-                </TableCell>
-                <TableCell scope="col" variant="header" align="left">
-                  Contract
-                </TableCell>
-                <TableCell scope="col" variant="header" align="left" />
-                <TableCell scope="col" variant="header" align="right" />
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {loading ? (
-                <BudgetSkeleton fullWidth={true} />
-              ) : (
-                <>
-                  {data.map((option) => (
-                    <TableRow key={option.id}>
-                      <TableCell
-                        align="center"
-                        data-fs-bp-budget-allocation-table-row-name-td
-                      >
-                        <div data-fs-bp-budget-allocation-table-row-name>
-                          <Icon
-                            name="TableEdit"
-                            width={24}
-                            height={24}
-                            data-fs-bp-budget-allocation-table-icon
-                          />
-                          {option.name}
-                        </div>
-                      </TableCell>
-                      <TableCell align="left" style={{ width: "7rem" }}>
-                        {option.type}
-                      </TableCell>
-                      <TableCell align="left" style={{ width: "7rem" }}>
-                        {option.contract}
-                      </TableCell>
-
-                      <TableCell align="right">
-                        <Icon
-                          onClick={() => {
-                            setSelectedAllocation(option);
-                            openAllocationDeleteDrawerProps();
-                          }}
-                          name="Trash"
-                          width={20}
-                          height={20}
-                          data-fs-bp-budget-allocation-table-trash-icon
-                        />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </>
-              )}
-            </TableBody>
-          </Table>
-
-          <span data-fs-bp-pagination-span>
-            <Pagination
-              currentCount={pagination.current}
-              total={pagination.total}
-              loading={pagination.loading || loading}
-              showMore={pagination.loadMore}
-              variant={data.length < pagination.total ? "default" : "onlyText"}
-            />
-          </span>
-        </>
-      )}
+      {renderContent()}
 
       {isAddAllocationDrawerOpen && (
         <CreateBudgetAllocationDrawer