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

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/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";