@vtex/faststore-plugin-buyer-portal 1.3.46 → 1.3.48

package/src/features/users/components/CreateUserDrawerWithUsername/create-user-drawer-with-username.scss

@@ -0,0 +1,116 @@
+[data-fs-bp-create-user-drawer] {
+  @import "../CreateUserDrawer/create-user-drawer.scss";
+
+  [data-fs-bp-create-user-2fa-disclaimer] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--fs-spacing-2);
+    padding: var(--fs-spacing-2) var(--fs-spacing-3);
+    background-color: #cbe9ff;
+    border-radius: var(--fs-border-radius);
+    margin-bottom: var(--fs-spacing-3);
+
+    p {
+      font-size: var(--fs-text-size-1);
+      color: #000;
+    }
+  }
+
+  [data-fs-bp-create-user-userName-suggestions] {
+    margin-top: var(--fs-spacing-2);
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--fs-spacing-0);
+
+      li {
+        button {
+          background-color: #f5f5f5;
+          border-radius: var(--fs-border-radius-pill);
+          padding: var(--fs-spacing-0) var(--fs-spacing-2);
+          font-size: var(--fs-text-size-1);
+          font-weight: var(--fs-text-weight-semibold);
+          color: #000000;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  [data-fs-bp-create-user-userName-wrapper] {
+    margin-top: var(--fs-spacing-2);
+  }
+
+  [data-fs-bp-create-user-username-suggestions-wrapper] {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+
+    [data-fs-bp-create-user-username-suggestions-icon] {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+
+      [data-fs-button-icon] {
+        color: #000000;
+      }
+    }
+
+    [data-fs-button-variant="tertiary"]:hover [data-fs-button-wrapper] {
+      background-color: transparent;
+    }
+  }
+
+  [data-fs-bp-create-user-access-token-body] {
+    display: flex;
+
+    [data-fs-bp-basic-drawer-body-wrapper] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-4);
+    }
+
+    [data-fs-bp-create-user-access-token-success] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-2);
+
+      h3 {
+        font-size: var(--fs-bp-text-size-3);
+        font-weight: var(--fs-bp-weight-semibold);
+        color: #000000;
+        letter-spacing: var(--fs-bp-letter-spacing-3);
+      }
+    }
+
+    [data-fs-bp-create-user-access-token-description] {
+      font-size: var(--fs-bp-text-size-1);
+      color: #000000;
+      font-weight: var(--fs-bp-weight-regular);
+      letter-spacing: var(--fs-bp-letter-spacing-2);
+    }
+
+    [data-fs-bp-create-user-access-token-value] {
+      background-color: #f5f5f5;
+      border-radius: var(--fs-border-radius);
+      padding: var(--fs-spacing-2);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        font-size: var(--fs-text-size-2);
+        font-weight: var(--fs-text-weight-semibold);
+        color: #000000;
+      }
+    }
+  }
+}

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

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

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

@@ -3,7 +3,7 @@ import { Dropdown, DropdownButton } from "@faststore/ui";
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicCard, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
-import { CreateUserDrawer } from "../CreateUserDrawer/CreateUserDrawer";
+import { CreateUserDrawerSelector } from "../CreateUserDrawerSelector/CreateUserDrawerSelector";
 import { UserDropdownMenu } from "../UserDropdownMenu/UserDropdownMenu";
 
 import type { UserSummary } from "../../types";
@@ -68,7 +68,7 @@ export default function UsersCard({ users = [], orgUnitData }: UsersCardProps) {
           })}
       </BasicCard>
       {isCreateUserDrawerOpen && (
-        <CreateUserDrawer
+        <CreateUserDrawerSelector
           orgUnit={{ id: orgUnitData?.id ?? "", name: orgUnitData?.name ?? "" }}
           rolesOptions={rolesOptions}
           isOpen={isCreateUserDrawerOpen}

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

@@ -3,6 +3,11 @@ export {
   CreateUserDrawer,
   type CreateUserDrawerProps,
 } from "./CreateUserDrawer/CreateUserDrawer";
+export { CreateUserDrawerWithUsername } from "./CreateUserDrawerWithUsername/CreateUserDrawerWithUsername";
+export {
+  CreateUserDrawerSelector,
+  type CreateUserDrawerSelectorProps,
+} from "./CreateUserDrawerSelector/CreateUserDrawerSelector";
 export {
   ReassignOrgUnitDrawer,
   type ReassignOrgUnitDrawerProps,

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

@@ -4,3 +4,5 @@ export { useReassignUser } from "./useReassignUser";
 export { useDebouncedSearchOrgUnit } from "./useDebouncedSearchOrgUnit";
 export { useUpdateUser } from "./useUpdateUser";
 export { useGetUserById } from "./useGetUserById";
+export { useValidateUsername } from "./useValidateUsername";
+export { useResetPassword } from "./useResetPassword";

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

@@ -4,19 +4,26 @@ import {
   type AddUserToOrgUnitServiceProps,
 } from "../services";
 
-export const useAddUserToOrgUnit = (
-  options?: MutationOptions<AwaitedType<typeof addUserToOrgUnitService>>
-) => {
+type UseAddUserToOrgUnitOptions = MutationOptions<
+  AwaitedType<typeof addUserToOrgUnitService>
+> & {
+  enableUsernameCreation?: boolean;
+};
+
+export const useAddUserToOrgUnit = (options?: UseAddUserToOrgUnitOptions) => {
+  const { enableUsernameCreation, ...mutationOptions } = options ?? {};
+
   const { mutate, isLoading, error } = useMutation<
     AwaitedType<typeof addUserToOrgUnitService>,
-    Omit<AddUserToOrgUnitServiceProps, "cookie">
+    Omit<AddUserToOrgUnitServiceProps, "cookie" | "enableUsernameCreation">
   >(
     (variables, clientContext) =>
       addUserToOrgUnitService({
         ...variables,
         cookie: clientContext.cookie,
+        enableUsernameCreation,
       }),
-    options
+    mutationOptions
   );
   return {
     addUserToOrgUnit: mutate,

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

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+  resetPasswordService,
+  type ResetPasswordServiceProps,
+  type ResetPasswordResponse,
+} from "../services";
+
+import type { ClientContext } from "../../shared/utils";
+
+export const useResetPassword = (
+  options?: MutationOptions<ResetPasswordResponse>
+) => {
+  const mutationFn = useCallback(
+    (
+      variables: Omit<ResetPasswordServiceProps, "cookie">,
+      clientContext: ClientContext
+    ) => {
+      return resetPasswordService({
+        ...variables,
+        cookie: clientContext.cookie,
+      });
+    },
+    []
+  );
+
+  const { mutate, isLoading, error, data } = useMutation<
+    AwaitedType<typeof resetPasswordService>,
+    Omit<ResetPasswordServiceProps, "cookie">
+  >(mutationFn, options);
+
+  return {
+    resetPassword: mutate,
+    isResetPasswordLoading: isLoading,
+    hasResetPasswordError: error,
+    accessCode: data?.accessCode,
+  };
+};

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

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+  validateUsernameService,
+  type ValidateUsernameServiceProps,
+} from "../services";
+
+import type { ClientContext } from "../../shared/utils";
+
+export const useValidateUsername = (
+  options?: MutationOptions<AwaitedType<typeof validateUsernameService>>
+) => {
+  const mutationFn = useCallback(
+    (
+      variables: Omit<ValidateUsernameServiceProps, "cookie">,
+      clientContext: ClientContext
+    ) => {
+      return validateUsernameService({
+        ...variables,
+        cookie: clientContext.cookie,
+      });
+    },
+    []
+  );
+
+  const { mutate, isLoading, error, data } = useMutation<
+    AwaitedType<typeof validateUsernameService>,
+    Omit<ValidateUsernameServiceProps, "cookie">
+  >(mutationFn, options);
+
+  return {
+    validateUsername: mutate,
+    isValidateUsernameLoading: isLoading,
+    hasValidateUsernameError: error,
+    userNameSuggestions: data?.userNameSuggestions ?? [],
+  };
+};

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

@@ -79,6 +79,16 @@ export const UserDetailsLayout = ({
               <span data-fs-user-details-row-value>{user?.name}</span>
             </div>
 
+            {user?.userName && (
+              <>
+                <hr data-fs-user-details-divider />
+                <div data-fs-user-details-row>
+                  <span data-fs-user-details-row-label>Username</span>
+                  <span data-fs-user-details-row-value>{user?.userName}</span>
+                </div>
+              </>
+            )}
+
             <hr data-fs-user-details-divider />
 
             <div data-fs-user-details-row>

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

@@ -19,7 +19,7 @@ import {
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { CreateUserDrawer } from "../../components";
+import { CreateUserDrawerSelector } from "../../components";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 
 import type { UserData } from "../../types";
@@ -55,11 +55,34 @@ export const UsersLayout = ({
 
   const columns = getTableColumns({
     actionsLength: 1,
-    nameColumnSize: "13.5rem",
+    nameColumnLabel: "Username",
+    nameColumnKey: "userName",
+    nameColumnSize: "12rem",
     extraColumns: [
       {
-        key: "role",
-        label: "Role",
+        key: "fullname",
+        label: "Full Name",
+        size: "10rem",
+        align: "left",
+        hideOnScreenSize: "phonemid",
+      },
+      {
+        key: "email",
+        label: "Email",
+        size: "8rem",
+        align: "left",
+        hideOnScreenSize: "phonemid",
+      },
+      {
+        key: "phone",
+        label: "Phone",
+        size: "8rem",
+        align: "left",
+        hideOnScreenSize: "tablet",
+      },
+      {
+        key: "roles",
+        label: "Roles",
         size: "100%",
         align: "left",
         hideOnScreenSize: "phonemid",
@@ -69,7 +92,7 @@ export const UsersLayout = ({
 
   const rolesCellLayout = (roles?: string[]) => {
     if (!roles || roles?.length === 0) {
-      return null;
+      return "-";
     }
 
     const tooltipRoles = roles.slice(1);
@@ -120,9 +143,7 @@ export const UsersLayout = ({
                   items.map((user) => (
                     <Table.Row
                       key={user.id}
-                      title={user.name}
-                      iconName="Profile"
-                      iconSize={24}
+                      title={user.userName || "-"}
                       href={buyerPortalRoutes.userDetails({
                         orgUnitId: currentOrgUnit?.id ?? "",
                         userId: user.id,
@@ -135,7 +156,30 @@ export const UsersLayout = ({
                       }
                     >
                       <Table.Cell hideOnScreenSize="phonemid">
-                        {rolesCellLayout(user.roles)}
+                        <div data-fs-bp-table-row-title-content>
+                          <p data-fs-bp-table-row-title-text>
+                            {user.name || "-"}
+                          </p>
+                        </div>
+                      </Table.Cell>
+                      <Table.Cell hideOnScreenSize="phonemid">
+                        <div data-fs-bp-table-row-title-content>
+                          <p data-fs-bp-table-row-title-text>
+                            {user.email || "-"}
+                          </p>
+                        </div>
+                      </Table.Cell>
+                      <Table.Cell hideOnScreenSize="tablet">
+                        <div data-fs-bp-table-row-title-content>
+                          <p data-fs-bp-table-row-title-text>
+                            {user.phone || "-"}
+                          </p>
+                        </div>
+                      </Table.Cell>
+                      <Table.Cell hideOnScreenSize="phonemid">
+                        <div data-fs-bp-table-row-title-content>
+                          {rolesCellLayout(user.roles)}
+                        </div>
                       </Table.Cell>
                     </Table.Row>
                   ))
@@ -160,13 +204,14 @@ export const UsersLayout = ({
           </div>
 
           {isCreateUserDrawerOpen && (
-            <CreateUserDrawer
+            <CreateUserDrawerSelector
               rolesOptions={rolesOptions}
               orgUnit={{
                 id: currentOrgUnit?.id ?? "",
                 name: currentOrgUnit?.name ?? "",
               }}
               isOpen={isCreateUserDrawerOpen}
+              onCreate={() => location.reload()}
               {...createUserDrawerProps}
             />
           )}

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

@@ -15,6 +15,7 @@
   @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
 
   @import "../../../shared/components/Table/table.scss";
+  @import "../../../shared/components/Table/TableCell/table-cell.scss";
   @import "../../../shared/components/Paginator/paginator.scss";
 
   --data-fs-users-table-width: 11.875rem;
@@ -198,6 +199,24 @@
     [data-fs-bp-table-row] {
       --fs-spacing-7: 40px;
 
+      [data-fs-bp-table-row-title-content] {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: var(--fs-spacing-0);
+      }
+
+      [data-fs-bp-table-row-title-text] {
+        font-size: var(--fs-text-size-1);
+        font-weight: var(--fs-text-weight-medium);
+        line-height: var(--fs-text-size-3);
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: var(--fs-spacing-1);
+      }
+
       [data-fs-bp-table-user-roles] {
         display: flex;
         flex-wrap: wrap;

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

@@ -3,21 +3,23 @@ import { usersClient } from "../clients/UsersClient";
 export type AddUserToOrgUnitServiceProps = {
   orgUnitId: string;
   roles: number[];
-  email: string;
-  name: string;
+  email?: string;
+  name?: string;
   phone?: string;
+  userName: string;
   cookie: string;
+  enableUsernameCreation?: boolean;
 };
 
 export const addUserToOrgUnitService = async ({
   cookie,
   roles,
+  enableUsernameCreation,
   ...data
 }: AddUserToOrgUnitServiceProps) => {
-  const response = await usersClient.addUserToOrgUnit(
-    { ...data, role: roles },
-    cookie
-  );
+  const response = enableUsernameCreation
+    ? await usersClient.addUserToOrgUnitV2({ ...data, role: roles }, cookie)
+    : await usersClient.addUserToOrgUnit({ ...data, role: roles }, 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-users-by-org-unit-id.service.ts

@@ -17,6 +17,7 @@ export const getUsersByOrgUnitIdService = async (
       roles: user.role ? user.role : [],
       email: user.email,
       orgUnit: { name: user.orgUnit },
+      userName: user.userName,
     })),
     total,
   };

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

@@ -16,3 +16,13 @@ export {
   type UpdateUserServiceProps,
 } from "./update-user.service";
 export { getUserByIdService } from "./get-user-by-id.service";
+export {
+  validateUsernameService,
+  type ValidateUsernameServiceProps,
+  type ValidateUsernameResponse,
+} from "./validate-username.service";
+export {
+  resetPasswordService,
+  type ResetPasswordServiceProps,
+  type ResetPasswordResponse,
+} from "./reset-password.service";

package/src/features/users/services/reset-password.service.ts

@@ -0,0 +1,24 @@
+import { usersClient } from "../clients/UsersClient";
+
+export type ResetPasswordServiceProps = {
+  orgUnitId: string;
+  userId: string;
+  cookie: string;
+};
+
+export type ResetPasswordResponse = {
+  accessCode: string;
+};
+
+export const resetPasswordService = async ({
+  orgUnitId,
+  userId,
+  cookie,
+}: ResetPasswordServiceProps): Promise<ResetPasswordResponse> => {
+  const response = await usersClient.resetPassword(
+    { orgUnitId, userId },
+    cookie
+  );
+
+  return response;
+};

package/src/features/users/services/validate-username.service.ts

@@ -0,0 +1,25 @@
+import { usersClient } from "../clients/UsersClient";
+
+export type ValidateUsernameServiceProps = {
+  orgUnitId: string;
+  userName: string;
+  cookie: string;
+};
+
+export type ValidateUsernameResponse = {
+  valid: boolean;
+  userNameSuggestions?: string[];
+};
+
+export const validateUsernameService = async ({
+  orgUnitId,
+  userName,
+  cookie,
+}: ValidateUsernameServiceProps): Promise<ValidateUsernameResponse> => {
+  const response = await usersClient.validateUsername(
+    { orgUnitId, userName: userName },
+    cookie
+  );
+
+  return response;
+};

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

@@ -1,5 +1,6 @@
 export type UserData = {
   name: string;
+  userName?: string;
   phone?: string;
   isActive?: boolean;
   id: string;

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

@@ -5,6 +5,7 @@ export type UserDataService = {
   phone?: string;
   role: string[];
   orgUnit: string;
+  userName?: string;
 };
 
 export type GetUsersByOrgUnitIdServiceProps = {

package/src/pages/org-unit-details.tsx

@@ -1,6 +1,10 @@
 import { getContractsByOrgUnitIdService } from "../features/contracts/services";
 import { OrgUnitsDetailsLayout } from "../features/org-units/layouts";
-import { getOrgUnitBasicDataService } from "../features/org-units/services";
+import {
+  getOrgUnitBasicDataService,
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // getOrgUnitSettingsService,
+} from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
@@ -12,7 +16,11 @@ import {
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
-import type { OrgUnitBasicData } from "../features/org-units/types";
+import type {
+  OrgUnitBasicData,
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // OrgUnitSettings,
+} from "../features/org-units/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
@@ -21,6 +29,8 @@ export type OrgUnitDetailsPageData = {
     orgUnit: OrgUnitBasicData;
     contracts: ContractData[];
     user: UserData | null;
+    // TODO[2FA]: Uncomment when Authentication settings are ready
+    // settings: OrgUnitSettings;
   };
   context: {
     clientContext: ClientContext;
@@ -65,11 +75,19 @@ const loaderFunction = async (
       cookie,
     });
 
+    // TODO[2FA]: Uncomment when Authentication settings are ready
+    // const settings = await getOrgUnitSettingsService({
+    //   unitId: orgUnitId,
+    //   cookie,
+    // });
+
     return {
       data: {
         contracts,
         orgUnit,
         user,
+        // TODO[2FA]: Uncomment when Authentication settings are ready
+        // settings,
       },
       context: {
         clientContext: { cookie, userId, ...clientContext },