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

package/src/features/users/layouts/UsersLayout/UsersLayout.tsx

@@ -10,6 +10,7 @@ import {
   Paginator,
 } from "../../../shared/components";
 import { Table } from "../../../shared/components/Table/Table";
+import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
 import {
   useBuyerPortal,
   useDrawerProps,
@@ -21,7 +22,6 @@ import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { CreateUserDrawer } from "../../components";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 
-import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 import type { UserData } from "../../types";
 
 export type UsersLayoutProps = {
@@ -53,20 +53,19 @@ export const UsersLayout = ({
     ...createUserDrawerProps
   } = useDrawerProps();
 
-  const configTable: Array<TableColumn> = [
-    {
-      key: "name",
-      label: "Name",
-      align: "left",
-      colspan: 2,
-    },
-    {
-      key: "role",
-      label: "Role",
-      align: "left",
-      colspan: 3,
-    },
-  ];
+  const columns = getTableColumns({
+    actionsLength: 1,
+    nameColumnSize: "13.5rem",
+    extraColumns: [
+      {
+        key: "role",
+        label: "Role",
+        size: "100%",
+        align: "left",
+        hideOnScreenSize: "phonemid",
+      },
+    ],
+  });
 
   const rolesCellLayout = (roles?: string[]) => {
     if (!roles || roles?.length === 0) {
@@ -112,18 +111,11 @@ export const UsersLayout = ({
                 itemsLength={users.length}
               />
             </div>
-            <Table>
-              <colgroup>
-                <col style={{ width: "40px" }} />
-                <col style={{ width: "175px" }} />
-                <col style={{ width: "100%" }} />
-                <col style={{ width: "40px" }} />
-                <col style={{ width: "0" }} />
-              </colgroup>
-              <Table.Head columns={configTable} />
+            <Table layoutFixed>
+              <Table.Head columns={columns} />
               <Table.Body>
                 {isLoading ? (
-                  <Table.Loading />
+                  <Table.Loading columns={columns.length} />
                 ) : (
                   items.map((user) => (
                     <Table.Row
@@ -141,9 +133,10 @@ export const UsersLayout = ({
                           rolesOptions={rolesOptions}
                         />
                       }
-                      data-fs-bp-users-item
                     >
-                      <Table.Cell>{rolesCellLayout(user.roles)}</Table.Cell>
+                      <Table.Cell hideOnScreenSize="phonemid">
+                        {rolesCellLayout(user.roles)}
+                      </Table.Cell>
                     </Table.Row>
                   ))
                 )}

package/src/pages/budgets.tsx

@@ -1,6 +1,5 @@
 import { BudgetsLayout } from "../features/budgets/layouts";
 import { listBudgetsService } from "../features/budgets/services";
-import { BudgetListResponse } from "../features/budgets/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import {
@@ -16,6 +15,7 @@ import {
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
+import type { BudgetListResponse } from "../features/budgets/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
 import type { LoaderData } from "../features/shared/types";

package/src/pages/buying-policies.tsx

@@ -1,3 +1,4 @@
+import { listBudgetsService } from "../features/budgets/services";
 import { BuyingPoliciesLayout } from "../features/buying-policies/layouts";
 import { getBuyingPoliciesService } from "../features/buying-policies/services";
 import { getContractDetailsService } from "../features/contracts/services";
@@ -17,6 +18,7 @@ import {
 import { getUserByIdService } from "../features/users/services";
 
 import type { GetAddressesServiceProps } from "../features/addresses/services";
+import type { BudgetListResponse } from "../features/budgets/types";
 import type { BuyingPolicy } from "../features/buying-policies/types";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
@@ -34,6 +36,7 @@ export type BuyingPoliciesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  budgetData?: BudgetListResponse;
   hasError?: boolean;
   error?: ErrorBoundaryProps;
 };
@@ -54,7 +57,7 @@ const loaderFunction = async (
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
-  const [currentOrgUnit, user, contract, buyingPoliciesResponse] =
+  const [currentOrgUnit, user, contract, budgetData, buyingPoliciesResponse] =
     await Promise.all([
       getOrgUnitBasicDataService({
         id: orgUnitId,
@@ -66,6 +69,13 @@ const loaderFunction = async (
         cookie,
         unitId: orgUnitId,
       }),
+
+      listBudgetsService({
+        customerId: clientContext.customerId,
+        cookie,
+        unitId: orgUnitId,
+      }),
+
       getBuyingPoliciesService({
         orgUnitId,
         contractId,
@@ -94,6 +104,7 @@ const loaderFunction = async (
       currentUser: user,
       currentContract: contract,
     },
+    budgetData: budgetData ?? { data: [], total: 0 },
   };
 };
 
@@ -110,6 +121,7 @@ const BuyingPoliciesPage = ({
   total,
   hasError,
   error,
+  budgetData = { data: [], total: 0 },
 }: BuyingPoliciesPageData) => (
   <BuyerPortalProvider {...context}>
     {hasError ? (
@@ -120,6 +132,7 @@ const BuyingPoliciesPage = ({
         search={search}
         page={page}
         total={total}
+        budgetData={budgetData}
       />
     )}
   </BuyerPortalProvider>

package/src/themes/layouts.scss

@@ -40,3 +40,4 @@
 @import "../features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss";
 // Roles
 @import "../features/roles/layout/RolesLayout/roles-layout.scss";
+@import "../features/roles/layout/RoleDetailsLayout/role-details-layout.scss";