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

package/src/features/budgets/components/BudgetAllocationsTable/budget-allocations-table.scss

@@ -2,186 +2,84 @@
 @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
 
 [data-fs-bp-budget-details-allocation-table] {
-  @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";
-  @import "../../../budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss";
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-
-  [data-fs-budget-details-allocation-table-edit-line] {
-    padding: calc(var(--fs-spacing-4) - var(--fs-spacing-0)) 0;
-    border-top: var(--fs-border-width) solid #e0e0e0;
-    display: flex;
-    align-items: center;
-
-    &:first-of-type {
-      border-top: none;
-    }
-
-    [data-fs-budget-details-allocation-table-edit-title] {
-      font-weight: var(--fs-text-weight-semibold);
-      font-size: var(--fs-text-size-2);
-      line-height: var(--fs-spacing-4);
-      margin-right: auto;
-    }
-
-    [data-fs-budget-details-allocation-table-edit-button] {
-      border: var(--fs-border-width) solid #e0e0e0;
-      border-radius: var(--fs-border-radius-pill);
-      padding: var(--fs-spacing-1)
-        calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-      font-weight: var(--fs-text-weight-semibold);
-      font-size: var(--fs-text-size-1);
-      line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-      text-align: center;
-      color: #0366dd;
-      cursor: pointer;
-    }
-  }
-
-  [data-fs-bp-budget-allocation-table-row-name] {
-    width: fit-content;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--fs-spacing-3);
-  }
-
-  [data-fs-bp-budget-allocation-table-row-name-td] {
-    width: 14rem;
-  }
-
-  [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-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;
-
-    @include media("<tablet") {
-      [data-fs-buyer-portal-internal-search] {
-        width: 100%;
-      }
-    }
-  }
-
-  [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;
-
-        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: 0;
-
-        @include media("<tablet") {
-          padding: 0 var(--fs-spacing-1);
-        }
-
-        [data-fs-icon] {
-          display: inline-block;
-
-          margin: 0;
-          &[data-fs-bp-budget-allocation-table-trash-icon] {
-            color: #000000;
-          }
-          &[data-fs-bp-budget-allocation-table-icon] {
-            color: #0366dd;
-            width: var(--fs-spacing-4);
-            height: var(--fs-spacing-4);
-          }
-        }
-
-        [data-fs-button] {
-          width: var(--fs-spacing-7);
-          height: var(--fs-spacing-7);
-
-          [data-fs-button-wrapper] {
-            border-radius: var(--fs-border-radius-pill);
-            padding: 0;
-          }
-        }
-
-        &:first-child {
-          text-align: center;
-          > svg {
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-
-  [data-fs-table-cell] {
-    @include media("<tablet") {
-      display: none;
-
-      &:first-child {
-        display: flex;
-      }
-
-      &:last-child {
-        display: table-cell;
-      }
-    }
-  }
-
-  [data-fs-skeleton] {
-    display: inline-block;
-  }
-
-  [data-fs-empty-state-section] {
-    padding: var(--fs-spacing-13);
-    width: 32rem;
-    text-align: center;
-    margin: 0 auto;
-
-    @include media("<tablet") {
-      width: 100%;
-      padding: var(--fs-spacing-4);
-    }
-  }
+	@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";
+	@import "../../../budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	[data-fs-budget-details-allocation-table-edit-line] {
+		padding: calc(var(--fs-spacing-4) - var(--fs-spacing-0)) 0;
+		border-top: var(--fs-border-width) solid #e0e0e0;
+		display: flex;
+		align-items: center;
+
+		&:first-of-type {
+			border-top: none;
+		}
+
+		[data-fs-budget-details-allocation-table-edit-title] {
+			font-weight: var(--fs-text-weight-semibold);
+			font-size: var(--fs-text-size-2);
+			line-height: var(--fs-spacing-4);
+			margin-right: auto;
+		}
+
+		[data-fs-budget-details-allocation-table-edit-button] {
+			border: var(--fs-border-width) solid #e0e0e0;
+			border-radius: var(--fs-border-radius-pill);
+			padding: var(--fs-spacing-1) calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			font-weight: var(--fs-text-weight-semibold);
+			font-size: var(--fs-text-size-1);
+			line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+			text-align: center;
+			color: #0366dd;
+			cursor: pointer;
+		}
+	}
+
+	[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;
+
+		@include media("<tablet") {
+			[data-fs-buyer-portal-internal-search] {
+				width: 100%;
+			}
+		}
+	}
+
+	[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-empty-state-section] {
+		padding: var(--fs-spacing-13);
+		width: 32rem;
+		text-align: center;
+		margin: 0 auto;
+
+		@include media("<tablet") {
+			width: 100%;
+			padding: var(--fs-spacing-4);
+		}
+	}
+
+	[data-fs-bp-budget-allocation-table-trash-icon] {
+		--fs-button-height: var(--fs-spacing-6);
+		--fs-button-border-radius: 50%;
+
+		[data-fs-button-icon] {
+			cursor: pointer;
+			color: #1f1f1f;
+		}
+	}
 }

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

@@ -1,19 +1,14 @@
-import {
-  Dropdown,
-  DropdownItem,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@faststore/ui";
+import { useRouter } from "next/router";
 
-import { Icon } from "../../../shared/components";
+import { DropdownItem } from "@faststore/ui";
+
+import { Icon, Table } from "../../../shared/components";
 import { BasicDropdownMenu } from "../../../shared/components/BasicDropdownMenu/BasicDropdownMenu";
-import { BasicDropdownMenuTrigger } from "../../../shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
+import { useBuyerPortal } from "../../../shared/hooks";
 import { formatCurrency } from "../../../shared/utils";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetProgressBar } from "../BudgetProgressBar/BudgetProgressBar";
-import BudgetSkeleton from "../BudgetSkeleton/BudgetSkeleton";
 
 import type { BudgetList } from "../../types";
 
@@ -23,131 +18,119 @@ interface IBudgetsTable {
   openDeleteDrawer(budgetId: string): void;
   onClickAllocationPage(budgetId: string): void;
   onClickEditBudget(budgetId: string): void;
-  onClickDetailsPage: (budgetId: string) => void;
   openDeleteDrawer(budgetId: string): void;
   loading: boolean;
 }
 
 export function BudgetsTable({
   data,
-  onClickDetailsPage,
   onClickAllocationPage,
   onClickEditBudget,
   openDeleteDrawer,
   loading,
 }: IBudgetsTable) {
   const budgets = data;
+  const route = useRouter();
+  const { currentOrgUnit: orgUnit, currentContract: contract } =
+    useBuyerPortal();
+
+  const detailsRoute = (budgetId: string) =>
+    buyerPortalRoutes.budgetsDetails({
+      orgUnitId: orgUnit?.id ?? "",
+      contractId: contract?.id ?? "",
+      budgetId,
+    });
+
+  const columns = getTableColumns({
+    nameColumnSize: "18.625rem",
+    actionsLength: 1.75,
+    extraColumns: [
+      {
+        label: "Remaining",
+        key: "remaining",
+        size: "100%",
+        hideOnScreenSize: "phonemid",
+        align: "left",
+      },
+      {
+        label: "Expiration date",
+        key: "date",
+        size: "8.75rem",
+        hideOnScreenSize: "phonemid",
+        align: "right",
+      },
+      {
+        label: "Total (USD)",
+        key: "total",
+        size: "8.75rem",
+        hideOnScreenSize: "tablet",
+        align: "right",
+      },
+    ],
+  });
 
   return (
     <div data-fs-bp-budgets-table>
-      <Table variant="bordered">
-        <TableHead>
-          <TableRow data-fs-bp-head-row data-fs-bp-text-regular>
-            <TableCell scope="col" variant="data" align="left">
-              Name
-            </TableCell>
-            <TableCell
-              data-fs-table-cell-width
-              data-fs-bp-cell-remaining
-              scope="col"
-              variant="data"
-              align="left"
-            >
-              Remaining
-            </TableCell>
-            <TableCell scope="col" variant="data" align="center">
-              Expiration date
-            </TableCell>
-            <TableCell
-              scope="col"
-              variant="data"
-              align="center"
-              data-fs-bp-cell-currency
-            >
-              Total (USD)
-            </TableCell>
-            <TableCell scope="col" variant="data" align="right" />
-          </TableRow>
-        </TableHead>
-        <TableBody>
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
           {loading ? (
-            <BudgetSkeleton />
+            <Table.Loading columns={columns.length} />
           ) : (
             budgets.map((item) => (
-              <TableRow
+              <Table.Row
                 key={item.id}
-                onClick={() => onClickDetailsPage(item.id)}
+                title={item.name}
+                iconName="Paid"
+                iconSize={24}
+                href={detailsRoute(item.id)}
+                dropdownMenu={
+                  <BasicDropdownMenu>
+                    <DropdownItem
+                      onClick={() => route.push(detailsRoute(item.id))}
+                    >
+                      <Icon name="OpenInNew" width={20} height={20} />
+                      <span>Open</span>
+                    </DropdownItem>
+                    <DropdownItem onClick={() => onClickEditBudget(item.id)}>
+                      <Icon name="Edit" width={20} height={20} />
+                      <span>Edit settings</span>
+                    </DropdownItem>
+                    <DropdownItem
+                      onClick={() => onClickAllocationPage(item.id)}
+                    >
+                      <Icon name="Add" width={20} height={20} />
+                      <span>Add allocations</span>
+                    </DropdownItem>
+                    <BasicDropdownMenu.Separator />
+                    <DropdownItem
+                      data-fs-bp-dropdown-menu-item-mode="danger"
+                      onClick={() => openDeleteDrawer(item.id)}
+                    >
+                      <Icon name="Delete" width={20} height={20} />
+                      <span>Delete</span>
+                    </DropdownItem>
+                  </BasicDropdownMenu>
+                }
               >
-                <TableCell
-                  align="left"
-                  data-fs-bp-icon-cell
-                  data-fs-bp-text-medium
-                >
-                  <Icon color="#0366DD" name="Paid" />
-                  {item.name}
-                </TableCell>
-                <TableCell
-                  align="left"
-                  data-fs-bp-text-medium
-                  data-fs-table-cell-width
-                >
+                <Table.Cell hideOnScreenSize="phonemid" align="left">
                   <BudgetProgressBar
                     remaining={item.remaining}
                     total={item.total}
                   />
-                </TableCell>
-                <TableCell align="center" data-fs-bp-text-medium>
+                </Table.Cell>
+                <Table.Cell hideOnScreenSize="phonemid" align="right">
                   {new Intl.DateTimeFormat("pt-BR").format(
                     new Date(item.expirationDate)
                   )}
-                </TableCell>
-                <TableCell
-                  align="center"
-                  data-fs-bp-text-medium
-                  data-fs-bp-cell-currency
-                >
+                </Table.Cell>
+                <Table.Cell hideOnScreenSize="tablet" align="right">
                   {formatCurrency(item.total)}
-                </TableCell>
-                <TableCell
-                  data-fs-bp-table-row-options
-                  align="right"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Dropdown>
-                    <BasicDropdownMenuTrigger
-                      data-fs-bp-budgets-dropdown-trigger
-                      iconName="MoreVert"
-                    />
-                    <BasicDropdownMenu>
-                      <DropdownItem onClick={() => onClickDetailsPage(item.id)}>
-                        <Icon name="OpenInNew" width={20} height={20} />
-                        <span>Open</span>
-                      </DropdownItem>
-                      <DropdownItem onClick={() => onClickEditBudget(item.id)}>
-                        <Icon name="Edit" width={20} height={20} />
-                        <span>Edit settings</span>
-                      </DropdownItem>
-                      <DropdownItem
-                        onClick={() => onClickAllocationPage(item.id)}
-                      >
-                        <Icon name="Add" width={20} height={20} />
-                        <span>Add allocations</span>
-                      </DropdownItem>
-                      <BasicDropdownMenu.Separator />
-                      <DropdownItem
-                        data-fs-bp-dropdown-menu-item-mode="danger"
-                        onClick={() => openDeleteDrawer(item.id)}
-                      >
-                        <Icon name="Delete" width={20} height={20} />
-                        <span>Delete</span>
-                      </DropdownItem>
-                    </BasicDropdownMenu>
-                  </Dropdown>
-                </TableCell>
-              </TableRow>
+                </Table.Cell>
+              </Table.Row>
             ))
           )}
-        </TableBody>
+        </Table.Body>
       </Table>
     </div>
   );