@vtex/faststore-plugin-buyer-portal 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer.tsx

@@ -82,7 +82,7 @@ export const BasicBuyingPolicyDrawer = ({
     }));
   };
 
-  const isAllFeldsFilled = Object.keys(form).every((key) => {
+  const isAllFieldsFilled = Object.keys(form).every((key) => {
     const value = form[key as keyof typeof form];
 
     if (key === "action") {
@@ -110,7 +110,7 @@ export const BasicBuyingPolicyDrawer = ({
   const handleConfirmClick = () => {
     setIsTouched(true);
 
-    if (!isAllFeldsFilled) {
+    if (!isAllFieldsFilled) {
       return;
     }
 
@@ -160,7 +160,7 @@ export const BasicBuyingPolicyDrawer = ({
     });
   };
 
-  const isConfirmButtonEnabled = isAllFeldsFilled && !isLoading;
+  const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
     <BasicDrawer data-fs-bp-basic-buying-policy-drawer close={close} {...props}>

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -40,7 +40,7 @@ export const OrgUnitsDetailsLayout = ({
       {/* TODO: Add person here */}
       <OrgUnitDetailsNavbar
         orgName={orgUnit.name}
-        person={{ name: user?.name ?? "", role: user?.role }}
+        person={{ name: user?.name ?? "", role: user?.roles?.[0] }}
       />
       <section data-fs-org-units-details-section>
         <HeaderInside title={orgUnit.name}>
@@ -67,7 +67,7 @@ export const OrgUnitsDetailsLayout = ({
                 footerMessage="Manage contract settings"
                 footerLink={buyerPortalRoutes.profileDetails({
                   orgUnitId: orgUnit.id,
-                  contractId: contracts[0].id,
+                  contractId: contracts[0]?.id ?? "",
                 })}
                 enableFooter
               >
@@ -75,7 +75,7 @@ export const OrgUnitsDetailsLayout = ({
                 <VerticalNav.Menu title={orgUnit.name}>
                   {getContractSettingsLinks({
                     orgUnitId: orgUnit.id,
-                    contractId: contracts[0].id,
+                    contractId: contracts[0]?.id ?? "",
                   }).map(({ name, link }) => (
                     <VerticalNav.Link key={name} link={link}>
                       {name}
@@ -139,14 +139,14 @@ export const OrgUnitsDetailsLayout = ({
               footerMessage="Manage finance and compliance settings"
               footerLink={buyerPortalRoutes.buyingPolicies({
                 orgUnitId: orgUnit.id,
-                contractId: contracts[0].id,
+                contractId: contracts[0]?.id,
               })}
               enableFooter
             >
               <VerticalNav.Menu title="Finance and Compliance">
                 {getFinanceSettingsLinks({
                   orgUnitId: orgUnit.id,
-                  contractId: contracts[0].id,
+                  contractId: contracts[0]?.id ?? "",
                 }).map((option) => (
                   <VerticalNav.Link key={option.name} link={option.link}>
                     {option.name}

package/src/features/shared/components/Table/Table.tsx

@@ -2,6 +2,7 @@ import { TableRow } from "./TableRow/TableRow";
 import { TableBody } from "./TableBody/TableBody";
 import TableHead from "./TableHead/TableHead";
 import { TableLoading } from "./TableLoading/TableLoading";
+import { TableCell } from "./TableCell/TableCell";
 
 export type TableProps = {
   children: React.ReactNode;
@@ -15,3 +16,4 @@ Table.Head = TableHead;
 Table.Body = TableBody;
 Table.Row = TableRow;
 Table.Loading = TableLoading;
+Table.Cell = TableCell;

package/src/features/shared/components/Table/TableCell/TableCell.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+
+export type TableCellProps = ComponentProps<"td">;
+
+export const TableCell = ({ ...otherProps }) => (
+  <td data-fs-bp-table-cell {...otherProps} />
+);

package/src/features/shared/components/Table/TableHead/TableHead.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export type TableColumn<T extends string = string> = {
   key: T;

package/src/features/shared/components/Table/TableRow/TableRow.tsx

@@ -47,7 +47,7 @@ export const TableRow = ({
           <SearchHighlight text={title} highlight={searchTerm} />
         </span>
       </td>
-      <td>{children}</td>
+      {children}
       <td data-fs-bp-table-row-dropdown>
         {dropdownMenu && (
           <Dropdown>

package/src/features/shared/utils/api.ts

@@ -1,10 +1,11 @@
 import { API_URL } from "./constants";
 import storeConfig from "discovery.config";
 
-export function getApiUrl(operation: string = "", customerId: string = "") {
-  return `${API_URL(`${storeConfig?.secureSubdomain ?? ""}`, operation)}${
-    customerId ? `/${customerId}` : ""
-  }`;
+export function getApiUrl(operation = "", customerId = "") {
+  return `${API_URL(
+    `https://${storeConfig?.api.storeId}.myvtex.com`,
+    operation
+  )}${customerId ? `/${customerId}` : ""}`;
 }
 
 export function getPostalCodeApiUrl() {

package/src/features/users/clients/UsersClient.ts

@@ -121,6 +121,36 @@ class UsersClient extends Client {
       },
     });
   }
+
+  updateUser(
+    props: {
+      orgUnitId: string;
+      userId: string;
+      name?: string;
+      role?: string;
+    },
+    cookie: string
+  ) {
+    const { orgUnitId, userId, ...data } = props;
+
+    return this.patch<
+      unknown,
+      {
+        name?: string;
+        role?: string;
+      }
+    >(
+      `units/${orgUnitId}/users/${userId}`,
+      {
+        ...data,
+      },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
 }
 
 const usersClient = new UsersClient();

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -4,14 +4,14 @@ import { useUI } from "@faststore/ui";
 import { useRouter } from "next/router";
 import {
   type BasicDrawerProps,
-  AutocompleteDropdown,
   BasicDrawer,
   ErrorMessage,
   Icon,
   InputText,
 } from "../../../shared/components";
-import { roles, type Role } from "../../../shared/utils/roles";
 import { useAddUserToOrgUnit } from "../../hooks";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { rolesOptions } from "../../utils";
 
 export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
   onCreate?: () => void;
@@ -45,25 +45,25 @@ export const CreateUserDrawer = ({
   const [form, setForm] = useState<{
     name: string;
     email: string;
-    role: Role;
+    roles: string[];
   }>({
     name: "",
     email: "",
-    role: "Buyer",
+    roles: [],
   });
 
   const [isTouched, setIsTouched] = useState(false);
 
-  const { name, email, role } = form;
+  const { name, email, roles } = form;
 
-  const updateField = (field: keyof typeof form, value: string) => {
+  const updateField = (field: keyof typeof form, value: string | string[]) => {
     setForm((prev) => ({
       ...prev,
       [field]: value,
     }));
   };
 
-  const handleAddUserSuccess = (data: unknown) => {
+  const handleAddUserSuccess = ({ user }: { user: { id: string } }) => {
     pushToast({
       message: "User successfully added",
       status: "INFO",
@@ -72,8 +72,12 @@ export const CreateUserDrawer = ({
           data-fs-bp-toast-view-button
           type="button"
           onClick={() => {
-            //TODO: Redirect to the user page
-            router.push(`/user/${"user.id"}`);
+            router.push(
+              buyerPortalRoutes.userDetails({
+                userId: user.id,
+                orgUnitId: orgUnitId,
+              })
+            );
           }}
         >
           View
@@ -108,14 +112,18 @@ export const CreateUserDrawer = ({
     },
   });
 
-  const isAllFeldsFilled = Object.keys(form).every((key) =>
-    form[key as keyof typeof form]?.trim()
-  );
+  const isAllFieldsFilled = Object.keys(form).every((key) => {
+    if (key === "roles") {
+      return form[key as keyof typeof form]?.length > 0;
+    }
+
+    return (form[key as keyof typeof form] as string)?.trim();
+  });
 
   const handleConfirmClick = () => {
     setIsTouched(true);
 
-    if (!isAllFeldsFilled) {
+    if (!isAllFieldsFilled) {
       return;
     }
 
@@ -123,12 +131,13 @@ export const CreateUserDrawer = ({
     addUserToOrgUnit({
       name,
       email,
-      role,
+      roles,
       orgUnitId,
     });
   };
 
-  const isConfirmButtonEnabled = isAllFeldsFilled && !isAddUserToOrgUnitLoading;
+  const isConfirmButtonEnabled =
+    isAllFieldsFilled && !isAddUserToOrgUnitLoading;
 
   const backToCreateUser = () => {
     setDrawerState("CREATE_USER");
@@ -136,7 +145,7 @@ export const CreateUserDrawer = ({
     setForm({
       name: "",
       email: "",
-      role: "Buyer",
+      roles: [],
     });
   };
 
@@ -190,30 +199,33 @@ export const CreateUserDrawer = ({
               message="Email is required"
             />
 
-            <AutocompleteDropdown
-              label="Role"
-              value={role}
-              options={[...roles]}
-              onConfirmKeyPress={(option) => updateField("role", option)}
-              hasError={isTouched && !role?.trim()}
-              renderOption={(optionRole, index) => (
-                <AutocompleteDropdown.Item
-                  key={optionRole}
-                  closeOnClick
-                  index={index}
-                  isSelected={role === optionRole}
-                  onClick={() => updateField("role", optionRole)}
-                >
-                  {optionRole}
-                  {role === optionRole && (
-                    <Icon name="Check" width={12} height={12} />
-                  )}
-                </AutocompleteDropdown.Item>
-              )}
-            />
+            <div data-fs-bp-create-user-roles>
+              <span data-fs-bp-create-user-roles-label>Roles</span>
+              {rolesOptions.map((role) => {
+                const id = `role-${role.value.toLowerCase().replace(" ", "-")}`;
+                return (
+                  <span data-fs-bp-create-user-role-wrapper key={role.value}>
+                    <input
+                      type="checkbox"
+                      key={role.value}
+                      value={role.value}
+                      id={id}
+                      checked={roles?.includes(role.value)}
+                      onChange={(event) => {
+                        const newRoles = event.target.checked
+                          ? [...(roles ?? []), role.value]
+                          : roles?.filter((r) => r !== role.value) ?? [];
+                        updateField("roles", newRoles);
+                      }}
+                    />
+                    <label htmlFor={id}>{role.label}</label>
+                  </span>
+                );
+              })}
+            </div>
 
             <ErrorMessage
-              show={isTouched && !role?.trim()}
+              show={isTouched && !roles?.length}
               message="Role is required"
             />
           </BasicDrawer.Body>

package/src/features/users/components/CreateUserDrawer/create-user-drawer.scss

@@ -3,6 +3,7 @@
 [data-fs-bp-create-user-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
+  @import "@faststore/ui/src/components/molecules/CheckboxField/styles.scss";
 
   [data-fs-bp-create-user-drawer-back-icon] {
     vertical-align: middle;
@@ -10,4 +11,30 @@
     margin-right: 0.75rem;
     cursor: pointer;
   }
+
+  [data-fs-bp-create-user-roles] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-2);
+    margin-bottom: var(--fs-spacing-6);
+    margin-top: var(--fs-spacing-5);
+
+    [data-fs-bp-create-user-roles-label] {
+      font-weight: var(--fs-text-weight-regular);
+      font-size: var(--fs-text-size-1);
+      line-height: var(--fs-text-size-3);
+    }
+
+    [data-fs-bp-create-user-role-wrapper] {
+      input {
+        margin-right: var(--fs-spacing-1);
+      }
+
+      label {
+        font-weight: var(--fs-text-weight-regular);
+        font-size: var(--fs-text-size-1);
+        line-height: var(--fs-text-size-3);
+      }
+    }
+  }
 }

package/src/features/users/components/UpdateUserDrawer/UpdateUserDrawer.tsx

@@ -0,0 +1,214 @@
+import { useState } from "react";
+
+import { Checkbox, CheckboxField, Skeleton, useUI } from "@faststore/ui";
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  ErrorMessage,
+  InputText,
+} from "../../../shared/components";
+import { useGetUserById, useUpdateUser } from "../../hooks";
+import { rolesOptions } from "../../utils";
+
+export type UpdateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  onCreate?: () => void;
+  orgUnitId: string;
+  userId: string;
+};
+
+export const UpdateUserDrawer = ({
+  close,
+  onCreate,
+  userId,
+  orgUnitId,
+  ...props
+}: UpdateUserDrawerProps) => {
+  const { pushToast } = useUI();
+
+  const { isUserLoading, user } = useGetUserById(
+    { orgUnitId, userId },
+    {
+      onSuccess: (data) => {
+        setForm({
+          name: data?.name ?? "",
+          email: data?.email ?? "",
+          roles: data?.roles ? data.roles : [],
+        });
+      },
+      onError: () => {
+        pushToast({
+          message: "Failed to fetch user details",
+          status: "ERROR",
+        });
+      },
+    }
+  );
+
+  const [form, setForm] = useState<{
+    name: string;
+    email: string;
+    roles: string[];
+  }>({
+    name: "",
+    email: "",
+    roles: [],
+  });
+
+  const [isTouched, setIsTouched] = useState(false);
+
+  const { name, email, roles } = form;
+
+  const updateField = (field: keyof typeof form, value: string | string[]) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleAddUserSuccess = () => {
+    pushToast({
+      message: "User successfully updated",
+      status: "INFO",
+    });
+    onCreate?.();
+    close();
+  };
+
+  const { updateUser, isUpdateUserLoading } = useUpdateUser({
+    onSuccess: handleAddUserSuccess,
+    onError: () => {
+      pushToast({
+        message: "Failed to update user",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const isAllFieldsFilled = Object.keys(form).every((key) => {
+    if (key === "roles") {
+      return form[key as keyof typeof form]?.length > 0;
+    }
+
+    return (form[key as keyof typeof form] as string)?.trim();
+  });
+
+  const handleConfirmClick = () => {
+    setIsTouched(true);
+
+    if (!isAllFieldsFilled) {
+      return;
+    }
+
+    updateUser({
+      userId,
+      name,
+      roles,
+      orgUnitId,
+    });
+  };
+
+  const isConfirmButtonEnabled = isAllFieldsFilled && !isUpdateUserLoading;
+
+  return (
+    <BasicDrawer data-fs-bp-update-user-drawer close={close} {...props}>
+      <BasicDrawer.Heading title="Edit user details" onClose={close} />
+
+      <BasicDrawer.Body>
+        {isUserLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <InputText
+            label="Full Name"
+            value={name}
+            hasError={isTouched && !name?.trim()}
+            onChange={(event) => updateField("name", event.target.value)}
+          />
+        )}
+
+        <ErrorMessage
+          show={isTouched && !name?.trim()}
+          message="Full name is required"
+        />
+
+        {isUserLoading ? (
+          <Skeleton
+            size={{ width: "100%", height: "3.5rem" }}
+            style={{
+              marginTop: "1rem",
+              marginBottom: "1rem",
+              width: "100%",
+              height: "3.5rem",
+            }}
+          />
+        ) : (
+          <InputText
+            label="Email"
+            value={email}
+            wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+            hasError={isTouched && !email?.trim()}
+            onChange={(event) => updateField("email", event.target.value)}
+            readOnly
+            disabled
+          />
+        )}
+
+        <ErrorMessage
+          show={isTouched && !email?.trim()}
+          message="Email is required"
+        />
+
+        <div data-fs-bp-update-user-roles>
+          <span data-fs-bp-update-user-roles-label>Roles</span>
+          {rolesOptions.map((role) => {
+            if (isUserLoading) {
+              return (
+                <Skeleton
+                  key={role.value}
+                  size={{ width: "100%", height: "1.25rem" }}
+                />
+              );
+            }
+
+            const id = `role-${role.value.toLowerCase().replace(" ", "-")}`;
+            return (
+              <span data-fs-bp-update-user-role-wrapper key={role.value}>
+                <input
+                  type="checkbox"
+                  key={role.value}
+                  value={role.value}
+                  id={id}
+                  checked={roles?.includes(role.value)}
+                  onChange={(event) => {
+                    const newRoles = event.target.checked
+                      ? [...(roles ?? []), role.value]
+                      : roles?.filter((r) => r !== role.value) ?? [];
+                    updateField("roles", newRoles);
+                  }}
+                />
+                <label htmlFor={id}>{role.label}</label>
+              </span>
+            );
+          })}
+        </div>
+
+        <ErrorMessage
+          show={isTouched && !roles?.length}
+          message="Role is required"
+        />
+      </BasicDrawer.Body>
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isConfirmButtonEnabled}
+          onClick={handleConfirmClick}
+          isLoading={isUpdateUserLoading}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/users/components/UpdateUserDrawer/update-user-drawer.scss

@@ -0,0 +1,40 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+
+[data-fs-bp-update-user-drawer] {
+  @import "../../../shared/components/InputText/input-text.scss";
+  @import "../../../shared/components/ErrorMessage/error-message.scss";
+  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+
+  [data-fs-bp-update-user-drawer-back-icon] {
+    vertical-align: middle;
+    margin-left: -3.125rem;
+    margin-right: 0.75rem;
+    cursor: pointer;
+  }
+
+  [data-fs-bp-update-user-roles] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-2);
+    margin-bottom: var(--fs-spacing-6);
+    margin-top: var(--fs-spacing-5);
+
+    [data-fs-bp-update-user-roles-label] {
+      font-weight: var(--fs-text-weight-regular);
+      font-size: var(--fs-text-size-1);
+      line-height: var(--fs-text-size-3);
+    }
+
+    [data-fs-bp-update-user-role-wrapper] {
+      input {
+        margin-right: var(--fs-spacing-1);
+      }
+
+      label {
+        font-weight: var(--fs-text-weight-regular);
+        font-size: var(--fs-text-size-1);
+        line-height: var(--fs-text-size-3);
+      }
+    }
+  }
+}

package/src/features/users/components/UserDropdownMenu/UserDropdownMenu.tsx

@@ -5,6 +5,7 @@ import { ReassignOrgUnitDrawer } from "../ReassignOrgUnitDrawer/ReassignOrgUnitD
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { DeleteUserDrawer } from "../DeleteUserDrawer/DeleteUserDrawer";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { UpdateUserDrawer } from "../UpdateUserDrawer/UpdateUserDrawer";
 
 export type UserDropdownMenuProps = {
   user: {
@@ -32,6 +33,12 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
     ...deleteUserDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openUpdateUser,
+    isOpen: isUpdateUserDrawerOpen,
+    ...updateUserDrawerProps
+  } = useDrawerProps();
+
   return (
     <>
       <BasicDropdownMenu>
@@ -48,9 +55,9 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
           <Icon name="OpenInNew" {...sizeProps} />
           Open
         </DropdownItem>
-        <DropdownItem>
-          <Icon name="FormatSize" {...sizeProps} />
-          Rename
+        <DropdownItem onClick={openUpdateUser}>
+          <Icon name="Edit" {...sizeProps} />
+          Edit details
         </DropdownItem>
         <DropdownItem onClick={openReassignOrgUnitDrawer}>
           <Icon name="DriveFileMove" {...sizeProps} />
@@ -79,6 +86,14 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
           {...reassignOrgUnitDrawerProps}
         />
       )}
+      {isUpdateUserDrawerOpen && (
+        <UpdateUserDrawer
+          userId={user.id}
+          orgUnitId={currentOrgUnit?.id ?? ""}
+          isOpen={isUpdateUserDrawerOpen}
+          {...updateUserDrawerProps}
+        />
+      )}
     </>
   );
 };

package/src/features/users/components/UserDropdownMenu/user-dropdown-menu.scss

@@ -2,3 +2,4 @@
 @import "../ReassignOrgUnitDrawer/reassign-org-unit-drawer.scss";
 @import "../DeleteUserDrawer/delete-user-drawer.scss";
 @import "../CreateUserDrawer/create-user-drawer.scss";
+@import "../UpdateUserDrawer/update-user-drawer.scss";

package/src/features/users/components/index.ts

@@ -7,3 +7,7 @@ export {
   ReassignOrgUnitDrawer,
   type ReassignOrgUnitDrawerProps,
 } from "./ReassignOrgUnitDrawer/ReassignOrgUnitDrawer";
+export {
+  UpdateUserDrawer,
+  type UpdateUserDrawerProps,
+} from "./UpdateUserDrawer/UpdateUserDrawer";

package/src/features/users/hooks/index.ts

@@ -3,3 +3,5 @@ export { useRemoveUserFromOrgUnit } from "./useRemoveUserFromOrgUnit";
 export { useAddUserToOrgUnit } from "./useAddUserToOrgUnit";
 export { useReassignUser } from "./useReassignUser";
 export { useDebouncedSearchOrgUnit } from "./useDebouncedSearchOrgUnit";
+export { useUpdateUser } from "./useUpdateUser";
+export { useGetUserById } from "./useGetUserById";

package/src/features/users/hooks/useGetUserById.ts

@@ -0,0 +1,20 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getUserByIdService } from "../services";
+
+export const useGetUserById = (
+  { orgUnitId, userId }: { orgUnitId: string; userId: string },
+  options?: QueryOptions<AwaitedType<typeof getUserByIdService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `org-unit/user/${orgUnitId}`,
+    ({ cookie }) => getUserByIdService({ orgUnitId, userId, cookie }),
+    options
+  );
+
+  return {
+    user: data,
+    hasUserError: error,
+    isUserLoading: isLoading,
+    refetchUser: refetch,
+  };
+};

package/src/features/users/hooks/useUpdateUser.ts

@@ -0,0 +1,23 @@
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import { updateUserService, type UpdateUserServiceProps } from "../services";
+
+export const useUpdateUser = (
+  options?: MutationOptions<AwaitedType<typeof updateUserService>>
+) => {
+  const { mutate, isLoading, error } = useMutation<
+    AwaitedType<typeof updateUserService>,
+    Omit<UpdateUserServiceProps, "cookie">
+  >(
+    (variables, clientContext) =>
+      updateUserService({
+        ...variables,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+  return {
+    updateUser: mutate,
+    isUpdateUserLoading: isLoading,
+    hasUpdateUserError: error,
+  };
+};

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

@@ -7,7 +7,7 @@ import {
   Tag,
 } from "../../../shared/components";
 import { GlobalLayout } from "../../../shared/layouts";
-import { ReassignOrgUnitDrawer } from "../../components";
+import { ReassignOrgUnitDrawer, UpdateUserDrawer } from "../../components";
 import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
@@ -31,6 +31,12 @@ export const UserDetailsLayout = ({
     ...reassignDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openUpdateUser,
+    isOpen: isUpdateUserDrawerOpen,
+    ...updateUserDrawerProps
+  } = useDrawerProps();
+
   return (
     <GlobalLayout>
       {/* // TODO: Add org unit name and id */}
@@ -49,12 +55,15 @@ export const UserDetailsLayout = ({
                 user={{ name: user?.name ?? "", id: user?.id ?? "" }}
               />
             </Dropdown>
-            <HeaderInside.Button />
           </HeaderInside>
           <div data-fs-user-details>
             <div data-fs-buyer-portal-user-details-title>
               <span data-fs-buyer-portal-user-details-title-label>Details</span>
-              <button type="button" data-fs-buyer-portal-user-details-edit>
+              <button
+                type="button"
+                data-fs-buyer-portal-user-details-edit
+                onClick={openUpdateUser}
+              >
                 Edit
               </button>
             </div>
@@ -77,7 +86,11 @@ export const UserDetailsLayout = ({
             <div data-fs-user-details-row>
               <span data-fs-user-details-row-label>Role</span>
               <span data-fs-user-details-row-value>
-                <Tag>{user?.userType}</Tag>
+                {user?.roles?.map((role) => (
+                  <Tag key={role} data-fs-user-details-row-value-tag>
+                    {role}
+                  </Tag>
+                ))}
               </span>
             </div>
 
@@ -105,6 +118,14 @@ export const UserDetailsLayout = ({
             {...reassignDrawerProps}
           />
         )}
+        {isUpdateUserDrawerOpen && (
+          <UpdateUserDrawer
+            userId={user?.id ?? ""}
+            orgUnitId={currentOrgUnit?.id ?? ""}
+            isOpen={isUpdateUserDrawerOpen}
+            {...updateUserDrawerProps}
+          />
+        )}
       </OrgUnitTabsLayout>
     </GlobalLayout>
   );

package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss

@@ -1,5 +1,6 @@
 @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
 @import "../../components/ReassignOrgUnitDrawer/reassign-org-unit-drawer.scss";
+@import "../../components/UpdateUserDrawer/update-user-drawer.scss";
 @import "../../components/DeleteUserDrawer/delete-user-drawer.scss";
 @import "../../components/UserDropdownMenu/user-dropdown-menu.scss";
 

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

@@ -1,7 +1,5 @@
-import { Dropdown, DropdownButton, Link } from "@faststore/ui";
-
 import type { UserData } from "../../types";
-import { InternalSearch, Icon, HeaderInside } from "../../../shared/components";
+import { InternalSearch, HeaderInside, Tag } from "../../../shared/components";
 import {
   useBuyerPortal,
   useDrawerProps,
@@ -9,10 +7,11 @@ import {
 } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { CreateUserDrawer } from "../../components";
-import { Fragment } from "react";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { Table } from "../../../shared/components/Table/Table";
+import type { TableColumn } from "../../../shared/components/Table/TableHead/TableHead";
 
 export type UsersLayoutProps = {
   data: {
@@ -35,6 +34,28 @@ export const UsersLayout = ({
     ...createUserDrawerProps
   } = useDrawerProps();
 
+  const configTable: Array<TableColumn> = [
+    {
+      key: "name",
+      label: "Name",
+      align: "left",
+      colspan: 2,
+      size: "large",
+    },
+    {
+      key: "role",
+      label: "Role",
+      align: "left",
+      size: "large",
+    },
+    {
+      key: "actions",
+      label: "",
+      align: "right",
+      size: "large",
+    },
+  ];
+
   return (
     <GlobalLayout>
       <OrgUnitTabsLayout pageName="Organization">
@@ -57,40 +78,35 @@ export const UsersLayout = ({
               </div>
             </div>
 
-            <div data-fs-user-table-heading>
+            {/* <div data-fs-user-table-heading>
               <span data-fs-user-table-title>Name</span>
               <span data-fs-user-table-title>Role</span>
             </div>
-            <hr data-fs-user-divider />
-            {users.map((user) => (
-              <Fragment key={user.id}>
-                <div data-fs-user-row>
-                  <Link
-                    data-fs-user-row-link
+            <hr data-fs-user-divider /> */}
+            <Table>
+              <Table.Head columns={configTable} />
+              <Table.Body>
+                {users.map((user) => (
+                  <Table.Row
+                    key={user.id}
+                    title={user.name}
+                    iconName="Profile"
+                    iconSize={20}
                     href={buyerPortalRoutes.userDetails({
                       orgUnitId: currentOrgUnit?.id ?? "",
                       userId: user.id,
                     })}
-                    data-fs-user-row-information
+                    dropdownMenu={<UserDropdownMenu user={user} />}
                   >
-                    <span data-fs-user-row-icon-wrapper>
-                      <Icon name="Profile" width={16} height={16} />
-                    </span>
-                    <div data-fs-user-name>{user.name}</div>
-                    <span data-fs-user-usertype>{user.userType}</span>
-                  </Link>
-                  <div data-fs-user-row-action>
-                    <Dropdown>
-                      <DropdownButton data-fs-user-row-dropdown-button>
-                        <Icon name="MoreVert" data-fs-menu-action-button />
-                      </DropdownButton>
-                      <UserDropdownMenu user={user} />
-                    </Dropdown>
-                  </div>
-                </div>
-                <hr data-fs-user-divider />
-              </Fragment>
-            ))}
+                    <Table.Cell>
+                      {user.roles?.map((role) => (
+                        <Tag key={role}>{role}</Tag>
+                      ))}
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
           </div>
 
           {isCreateUserDrawerOpen && (

package/src/features/users/layouts/UsersLayout/users-layout.scss

@@ -11,8 +11,11 @@
   @import "../../../shared/components/InternalSearch/internal-search.scss";
   @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
   @import "../../../shared/components/SortFilter/sort-filter.scss";
+  @import "../../../shared/components/Tag/tag.scss";
   @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
+  @import "../../../shared/components/Table/table.scss";
+
   --data-fs-users-table-width: 11.875rem;
 
   padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
@@ -128,7 +131,7 @@
         color: #5c5c5c;
       }
 
-      [data-fs-user-userType] {
+      [data-fs-user-role] {
         width: 15.625rem;
         font-size: var(--fs-text-size-1);
         font-weight: var(--fs-text-weight-regular);

package/src/features/users/mocks/users-data.ts

@@ -3,7 +3,7 @@ import type { UserData } from "../types";
 export const usersData: UserData[] = [
   {
     name: "Everton Ataide",
-    userType: "Admin",
+    roles: ["Admin"],
     isActive: true,
     id: "1234",
     email: "everton@vtex.com",
@@ -14,7 +14,7 @@ export const usersData: UserData[] = [
   },
   {
     name: "Arthur Andrade",
-    userType: "Buyer",
+    roles: ["Buyer"],
     isActive: false,
     id: "32141",
     email: "arthur@vtex.com",

package/src/features/users/services/add-user-to-org-unit.service.ts

@@ -2,7 +2,7 @@ import { usersClient } from "../clients/UsersClient";
 
 export type AddUserToOrgUnitServiceProps = {
   orgUnitId: string;
-  role: string;
+  roles: string[];
   email: string;
   name: string;
   cookie: string;
@@ -10,9 +10,13 @@ export type AddUserToOrgUnitServiceProps = {
 
 export const addUserToOrgUnitService = async ({
   cookie,
+  roles,
   ...data
 }: AddUserToOrgUnitServiceProps) => {
-  const response = await usersClient.addUserToOrgUnit(data, cookie);
+  const response = await usersClient.addUserToOrgUnit(
+    { ...data, role: roles.join(",") },
+    cookie
+  );
 
   if (response.message === "User already exists and is attached to a unit") {
     throw new Error(JSON.stringify(response));

package/src/features/users/services/get-user-by-id.service.ts

@@ -18,8 +18,8 @@ export const getUserByIdService = async ({
     );
 
     return {
-      name: `${name}`,
-      userType: role,
+      name,
+      roles: role.split(","),
       id: userId,
       email: email ?? "",
       orgUnit: {

package/src/features/users/services/get-users-by-org-unit-id.service.ts

@@ -1,4 +1,5 @@
 import { usersClient } from "../clients/UsersClient";
+import type { UserData } from "../types";
 
 export type GetUsersByOrgUnitIdServiceProps = {
   orgUnitId: string;
@@ -8,7 +9,10 @@ export type GetUsersByOrgUnitIdServiceProps = {
 export const getUsersByOrgUnitIdService = async ({
   orgUnitId,
   cookie,
-}: GetUsersByOrgUnitIdServiceProps) => {
+}: GetUsersByOrgUnitIdServiceProps): Promise<{
+  users: UserData[];
+  total: number;
+}> => {
   const { users, total } = await usersClient.getUsersByOrgUnitId(
     orgUnitId,
     cookie
@@ -16,9 +20,9 @@ export const getUsersByOrgUnitIdService = async ({
 
   return {
     users: users.map((user) => ({
+      id: user.userId,
       name: user.name,
-      userType: user.role,
-      userId: user.userId,
+      roles: user.role ? user.role.split(",") : [],
       email: user.email,
       orgUnit: { name: user.orgUnit },
     })),

package/src/features/users/services/index.ts

@@ -1,4 +1,3 @@
-export { getUserDetailsService } from "./get-user-details.service";
 export {
   getUsersByOrgUnitIdService,
   type GetUsersByOrgUnitIdServiceProps,
@@ -15,4 +14,8 @@ export {
   reassignUserService,
   type ReassignUserServiceProps,
 } from "./reassign-user.service";
+export {
+  updateUserService,
+  UpdateUserServiceProps,
+} from "./update-user.service";
 export { getUserByIdService } from "./get-user-by-id.service";

package/src/features/users/services/update-user.service.ts

@@ -0,0 +1,27 @@
+import { usersClient } from "../clients/UsersClient";
+
+export type UpdateUserServiceProps = {
+  orgUnitId: string;
+  userId: string;
+  name?: string;
+  roles?: string[];
+  cookie: string;
+};
+
+export const updateUserService = async ({
+  orgUnitId,
+  userId,
+  cookie,
+  name,
+  roles,
+}: UpdateUserServiceProps) => {
+  return usersClient.updateUser(
+    {
+      orgUnitId,
+      userId,
+      name,
+      role: roles?.join(",") || undefined,
+    },
+    cookie
+  );
+};

package/src/features/users/types/UserData.ts

@@ -1,10 +1,9 @@
 export type UserData = {
   name: string;
-  userType: string;
   isActive?: boolean;
   id: string;
   email?: string;
-  role?: string;
+  roles?: string[];
   orgUnit: {
     id?: string;
     name: string;

package/src/features/users/utils/index.ts

@@ -0,0 +1 @@
+export { rolesOptions } from "./roles";

package/src/features/users/utils/roles.ts

@@ -0,0 +1,26 @@
+export const rolesOptions = [
+  {
+    label: "Organizational Unit Admin",
+    value: "Admin",
+  },
+  {
+    label: "Order Approver",
+    value: "Approver",
+  },
+  {
+    label: "Contract Manager",
+    value: "Contract Manager",
+  },
+  {
+    label: "Organizational Unit Manager",
+    value: "Organizational Unit Manager",
+  },
+  {
+    label: "Contract Viewer",
+    value: "Contract Viewer",
+  },
+  {
+    label: "Address Manager",
+    value: "Manager",
+  },
+];

package/src/pages/users.tsx

@@ -13,8 +13,6 @@ import { BuyerPortalProvider } from "../features/shared/components";
 import type { LoaderData } from "../features/shared/types";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import type { OrgUnitBasicData } from "../features/org-units/types";
-import { ContractData } from "../features/contracts/types";
-import { getContractDetailsService } from "../features/contracts/services";
 
 export type UsersPageData = {
   data: {
@@ -55,7 +53,8 @@ export async function loader(
 
   const mappedUsers = users.map((user) => ({
     ...user,
-    id: user.userId,
+    id: user.id,
+    name: user.name || user.email,
   }));
 
   return {

package/src/features/users/services/get-user-details.service.ts

@@ -1,6 +0,0 @@
-import { usersData } from "../mocks";
-
-export const getUserDetailsService = async (id: string) => {
-  const userData = usersData.find((user) => user.id === id);
-  return userData;
-};