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

package/src/features/budgets/components/BudgetsTable/budgets-table.scss

@@ -1,128 +1,130 @@
-@import "../BudgetProgressBar/budget-progress-bar.scss";
 [data-fs-bp-budgets-table] {
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-  width: 100%;
-
-  [data-fs-table] {
-    overflow-x: visible;
-  }
-  [data-fs-bp-table-row] {
-    cursor: pointer;
-  }
-
-  [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-table-cell-content] {
-    width: 99%;
-    height: 1.875rem;
-  }
-
-  [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-table-row] {
-    height: var(--fs-spacing-8);
-    cursor: pointer;
-    padding: 0 var(--fs-spacing-4);
-
-    &:hover {
-      background-color: var(--fs-color-neutral-bkg);
-    }
-
-    [data-fs-table-cell="header"] {
-      display: flex;
-      height: var(--fs-spacing-8);
-      cursor: pointer;
-      align-items: center;
-    }
-
-    @include media("<tablet") {
-      [data-fs-table-cell] {
-        display: none;
-
-        &:first-child {
-          display: flex;
-        }
-
-        &:last-child {
-          display: table-cell;
-          padding-right: 0;
-        }
-      }
-    }
-
-    @include media("<notebook") {
-      [data-fs-table-cell="data"]:not(:first-of-type) {
-        text-align: right;
-      }
-
-      [data-fs-bp-cell-remaining] {
-        opacity: 0;
-      }
-
-      [data-fs-bp-cell-currency] {
-        display: none;
-      }
-    }
-  }
-  [data-fs-table-cell-width] {
-    width: 13.75rem;
-  }
-
-  [data-fs-bp-text-medium] {
-    font-weight: var(--fs-text-weight-medium);
-    font-size: var(--fs-text-size-1);
-    line-height: 20px;
-    letter-spacing: -1%;
-  }
-
-  [data-fs-bp-budgets-dropdown-trigger] [data-fs-icon] {
-    margin-right: 0;
-  }
-
-  [data-fs-bp-table-row-options] {
-    width: var(--fs-spacing-8);
-  }
-
-  [data-fs-bp-icon-cell] {
-    display: flex;
-    align-items: center;
-    height: inherit;
-
-    &[data-fs-table-cell] {
-      [data-fs-icon] {
-        width: var(--fs-spacing-4);
-        height: var(--fs-spacing-4);
-      }
-    }
-  }
+	@import "../BudgetProgressBar/budget-progress-bar.scss";
+	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+	@import "../../../shared/components/Table/table.scss";
+
+	width: 100%;
+
+	[data-fs-table] {
+		overflow-x: visible;
+	}
+	[data-fs-bp-table-row] {
+		cursor: pointer;
+	}
+
+	[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-table-cell-content] {
+		width: 99%;
+		height: 1.875rem;
+	}
+
+	[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-table-row] {
+		height: var(--fs-spacing-8);
+		cursor: pointer;
+		padding: 0 var(--fs-spacing-4);
+
+		&:hover {
+			background-color: var(--fs-color-neutral-bkg);
+		}
+
+		[data-fs-table-cell="header"] {
+			display: flex;
+			height: var(--fs-spacing-8);
+			cursor: pointer;
+			align-items: center;
+		}
+
+		@include media("<tablet") {
+			[data-fs-table-cell] {
+				display: none;
+
+				&:first-child {
+					display: flex;
+				}
+
+				&:last-child {
+					display: table-cell;
+					padding-right: 0;
+				}
+			}
+		}
+
+		@include media("<notebook") {
+			[data-fs-table-cell="data"]:not(:first-of-type) {
+				text-align: right;
+			}
+
+			[data-fs-bp-cell-remaining] {
+				opacity: 0;
+			}
+
+			[data-fs-bp-cell-currency] {
+				display: none;
+			}
+		}
+	}
+	[data-fs-table-cell-width] {
+		width: 13.75rem;
+	}
+
+	[data-fs-bp-text-medium] {
+		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%;
+	}
+
+	[data-fs-bp-budgets-dropdown-trigger] [data-fs-icon] {
+		margin-right: 0;
+	}
+
+	[data-fs-bp-table-row-options] {
+		width: var(--fs-spacing-8);
+	}
+
+	[data-fs-bp-icon-cell] {
+		display: flex;
+		align-items: center;
+		height: inherit;
+
+		&[data-fs-table-cell] {
+			[data-fs-icon] {
+				width: var(--fs-spacing-4);
+				height: var(--fs-spacing-4);
+			}
+		}
+	}
 }

package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx

@@ -1,7 +1,5 @@
 import { useCallback, useState } from "react";
 
-import { useRouter } from "next/router";
-
 import { IconButton } from "@faststore/ui";
 
 import { HeaderInside, Icon, InternalSearch } from "../../../shared/components";
@@ -13,7 +11,6 @@ import {
   useQueryParams,
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
 import { BudgetsTable } from "../../components/BudgetsTable/BudgetsTable";
 import { CreateBudgetAllocationDrawer } from "../../components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer";
@@ -41,7 +38,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     currentOrgUnit: orgUnit,
     currentContract: contract,
   } = useBuyerPortal();
-  const route = useRouter();
   const [paginationLoading, setPaginationLoading] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [page, setPage] = useState<number>(1);
@@ -54,16 +50,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     useState<BudgetAllocationListResponse>();
   const [budgetsToEdit, setBudgetToEdit] = useState<Budget>();
 
-  const handleEditPage = (budgetId: string) => {
-    route.push(
-      buyerPortalRoutes.budgetsDetails({
-        orgUnitId: orgUnit?.id ?? "",
-        contractId: contract?.id ?? "",
-        budgetId,
-      })
-    );
-  };
-
   const {
     open: openDeleteDrawer,
     close: closeDeleteDrawer,
@@ -186,7 +172,6 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
                   total={Number(total ?? 0)}
                   onClickAllocationPage={handleAddAllocation}
                   onClickEditBudget={handleBudgetEditPage}
-                  onClickDetailsPage={handleEditPage}
                   openDeleteDrawer={(budgetId) => {
                     setSelectedBudgetId(budgetId);
                     openDeleteDrawer();

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -82,6 +82,66 @@ export const BuyingPoliciesLayout = ({
     ...addBuyingPolicyDrawerProps
   } = useDrawerProps();
 
+  const columns = getTableColumns({
+    actionsLength: 1,
+  });
+
+  const renderLoading = () => (
+    <Table layoutFixed>
+      <Table.Head columns={columns} />
+      <Table.Body>
+        <Table.Loading columns={columns.length} />
+      </Table.Body>
+    </Table>
+  );
+
+  const renderEmptyState = () => (
+    <EmptyState
+      title="No buying policies yet"
+      iconName="Rebase"
+      iconSize={40}
+    />
+  );
+
+  function renderContent() {
+    if (isLoading) {
+      return renderLoading();
+    }
+
+    if (buyingPolicies.length > 0) {
+      return renderEmptyState();
+    }
+
+    return (
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
+        <Table.Body>
+          {buyingPolicies.map((buyingPolicy) => (
+            <Table.Row
+              key={buyingPolicy.id}
+              title={buyingPolicy.name}
+              iconName="Rebase"
+              iconSize={24}
+              href={buyerPortalRoutes.buyingPolicyDetails({
+                contractId: currentContract?.id ?? "",
+                orgUnitId: currentOrgUnit?.id ?? "",
+                buyingPolicyId: buyingPolicy.id,
+              })}
+              dropdownMenu={
+                <BuyingPolicyDropdownMenu
+                  id={buyingPolicy.id}
+                  name={buyingPolicy.name}
+                  onUpdate={handleRefetchBuyingPolicies}
+                  onDelete={handleRefetchBuyingPolicies}
+                />
+              }
+            />
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  }
+
   return (
     <GlobalLayout>
       <FinanceTabsLayout pageName="Finance and Compliance">
@@ -101,52 +161,7 @@ export const BuyingPoliciesLayout = ({
             />
           </div>
 
-          {isLoading ? (
-            <Table>
-              <Table.Head
-                columns={getTableColumns({
-                  withType: false,
-                  withActions: false,
-                })}
-              />{" "}
-              <Table.Body>
-                <Table.Loading />
-              </Table.Body>
-            </Table>
-          ) : buyingPolicies.length === 0 ? (
-            <EmptyState
-              title="No buying policies yet"
-              iconName="Rebase"
-              iconSize={40}
-            />
-          ) : (
-            <Table>
-              <Table.Head columns={getTableColumns({ withType: false })} />
-              <Table.Body>
-                {buyingPolicies.map((buyingPolicy) => (
-                  <Table.Row
-                    key={buyingPolicy.id}
-                    title={buyingPolicy.name}
-                    iconName="Rebase"
-                    iconSize={24}
-                    href={buyerPortalRoutes.buyingPolicyDetails({
-                      contractId: currentContract?.id ?? "",
-                      orgUnitId: currentOrgUnit?.id ?? "",
-                      buyingPolicyId: buyingPolicy.id,
-                    })}
-                    dropdownMenu={
-                      <BuyingPolicyDropdownMenu
-                        id={buyingPolicy.id}
-                        name={buyingPolicy.name}
-                        onUpdate={handleRefetchBuyingPolicies}
-                        onDelete={handleRefetchBuyingPolicies}
-                      />
-                    }
-                  />
-                ))}
-              </Table.Body>
-            </Table>
-          )}
+          {renderContent()}
 
           <div data-fs-bp-buying-policies-paginator>
             {totalBuyingPolicies > buyingPolicies.length ? (

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -4,83 +4,77 @@
 @import "../../components/AddBuyingPolicyDrawer/add-buying-policy-drawer.scss";
 
 [data-fs-buying-policies-section] {
-  @import "../../../shared/components/HeaderInside/header-inside.scss";
-  @import "../../../shared/components/InternalSearch/internal-search.scss";
-  @import "../../../shared/components/Table/table.scss";
-  @import "../../../shared/components/LevelDivider/level-divider.scss";
-  @import "../../../shared/components/Paginator/paginator.scss";
-  @import "../../../shared/components/EmptyState/empty-state.scss";
+	@import "../../../shared/components/HeaderInside/header-inside.scss";
+	@import "../../../shared/components/InternalSearch/internal-search.scss";
+	@import "../../../shared/components/Table/table.scss";
+	@import "../../../shared/components/LevelDivider/level-divider.scss";
+	@import "../../../shared/components/Paginator/paginator.scss";
+	@import "../../../shared/components/EmptyState/empty-state.scss";
 
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
 
-  @include media("<=tablet") {
-    padding-bottom: 3rem;
+	@include media("<=tablet") {
+		padding-bottom: var(--fs-spacing-7);
 
-    [data-fs-bp-header-inside] {
-      [data-fs-header-inside-button] {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        padding: 12px;
-        cursor: pointer;
-        z-index: 10;
-      }
-    }
-  }
+		[data-fs-bp-header-inside] {
+			[data-fs-header-inside-button] {
+				position: fixed;
+				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				padding: var(--fs-spacing-2);
+				cursor: pointer;
+				z-index: 10;
+			}
+		}
+	}
 
-  [data-fs-empty-state-section] {
-    flex: 1;
-    color: #858585;
-  }
+	[data-fs-empty-state-section] {
+		flex: 1;
+		color: #858585;
+	}
 
-  [data-fs-buying-policies-filter] {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 0 var(--fs-spacing-4);
-    [data-fs-bp-paginator-counter] {
-      font-size: var(--fs-text-size-1);
-      color: #5c5c5c;
-      display: block;
-    }
+	[data-fs-buying-policies-filter] {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 0 var(--fs-spacing-4);
+		[data-fs-bp-paginator-counter] {
+			font-size: var(--fs-text-size-1);
+			color: #5c5c5c;
+			display: block;
+		}
 
-    @include media("<=tablet") {
-      [data-fs-buyer-portal-internal-search] {
-        width: 100%;
-      }
+		@include media("<=tablet") {
+			[data-fs-buyer-portal-internal-search] {
+				width: 100%;
+			}
 
-      [data-fs-bp-paginator-counter] {
-        display: none;
-      }
-    }
-  }
+			[data-fs-bp-paginator-counter] {
+				display: none;
+			}
+		}
+	}
 
-  [data-fs-buying-policies-heading] {
-    display: flex;
-    font-weight: var(--fs-text-weight-regular);
-    font-size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-    color: #5c5c5c;
-    margin-bottom: var(--fs-spacing-1);
-  }
+	[data-fs-buying-policies-heading] {
+		display: flex;
+		font-weight: var(--fs-text-weight-regular);
+		font-size: var(--fs-text-size-1);
+		line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+		color: #5c5c5c;
+		margin-bottom: var(--fs-spacing-1);
+	}
 
-  [data-fs-bp-buying-policies-paginator] {
-    display: none;
-    @include media("<=tablet") {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: var(--fs-spacing-0);
-      padding: var(--fs-spacing-2) 0;
-      font-size: var(--fs-text-size-1);
-      color: #5c5c5c;
-    }
-  }
-
-  [data-fs-bp-table] {
-    td {
-      padding: var(--fs-spacing-1) 0;
-    }
-  }
+	[data-fs-bp-buying-policies-paginator] {
+		display: none;
+		@include media("<=tablet") {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: var(--fs-spacing-0);
+			padding: var(--fs-spacing-2) 0;
+			font-size: var(--fs-text-size-1);
+			color: #5c5c5c;
+		}
+	}
 }

package/src/features/collections/components/CollectionsTable/CollectionsTable.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { useSearchParams } from "next/navigation";
 
-import { Tooltip } from "@faststore/ui";
+import { IconButton, Tooltip } from "@faststore/ui";
 
 import { Icon, Table } from "../../../shared/components";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
@@ -45,10 +45,12 @@ export function CollectionsTable({
     openRemoveCollectionDrawer();
   }
 
+  const columns = getTableColumns({ actionsLength: 1 });
+
   return (
     <div data-fs-bp-collection-table>
-      <Table>
-        <Table.Head columns={getTableColumns()} />
+      <Table layoutFixed>
+        <Table.Head columns={columns} />
         <Table.Body>
           {collections.map((item) => (
             <Table.Row
@@ -57,34 +59,26 @@ export function CollectionsTable({
               key={item.id}
               iconSize={24}
               searchTerm={searchTerm ?? undefined}
-            >
-              <Table.Cell data-fs-bp-table-row-options align="right">
+              actionIcons={
                 <Tooltip
                   content={removeTooltipContent}
                   placement={"left-center"}
                 >
-                  <button
+                  <IconButton
                     data-fs-collections-row-action-button
-                    disabled={removeDisabled}
+                    icon={<Icon name={"MinusCircle"} width={20} height={20} />}
                     aria-label="Remove collections"
-                    type="button"
+                    disabled={removeDisabled}
                     onClick={() =>
                       handleRemoveSelectedCollection({
                         id: item.id,
                         name: item.name,
                       })
                     }
-                  >
-                    <Icon
-                      data-fs-icon
-                      name={"MinusCircle"}
-                      width={20}
-                      height={20}
-                    />
-                  </button>
+                  />
                 </Tooltip>
-              </Table.Cell>
-            </Table.Row>
+              }
+            />
           ))}
         </Table.Body>
       </Table>