@vtex/faststore-plugin-buyer-portal 1.3.53 → 1.3.54

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.54] - 2026-01-07
+
+### Added
+
+- Alternative Login Keys:
+  - Edit User to support username
+  
 ## [1.3.53] - 2026-01-06
 
 ### Fixed
@@ -451,7 +458,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.53...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.54...HEAD
+[1.3.54]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.53...v1.3.54
 [1.3.53]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.52...v1.3.53
 [1.3.52]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.51...v1.3.52
 [1.3.51]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.50...v1.3.51

package/package.json

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

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

@@ -22,4 +22,4 @@ export const SCOPE_KEYS = {
   CREDIT_CARDS: "creditCards",
 } as const;
 
-export const CURRENT_VERSION = "1.3.53";
+export const CURRENT_VERSION = "1.3.54";

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

@@ -194,7 +194,9 @@ class UsersClient extends Client {
       userId: string;
       phone?: string;
       name?: string;
+      email?: string;
       role?: string;
+      userName?: string;
     },
     cookie: string
   ) {
@@ -204,8 +206,10 @@ class UsersClient extends Client {
       unknown,
       {
         name?: string;
+        email?: string;
         phone?: string;
         role?: string;
+        userName?: string;
       }
     >(
       `units/${orgUnitId}/users/${userId}`,

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

@@ -299,6 +299,8 @@ export const CreateUserDrawerWithUsername = ({
   const isFormValid = () => {
     if (!userName?.trim()) return false;
 
+    if (!email?.trim()) return false;
+
     if (roles.length === 0) return false;
 
     if (isUsernameValid === false) return false;
@@ -457,13 +459,18 @@ export const CreateUserDrawerWithUsername = ({
                 <InputText
                   // TODO[2FA]: Uncomment when 2FA settings are ready
                   // label={is2FAEnabled ? "Email" : "Email (optional)"}
-                  // hasError={is2FAEnabled && isTouched && !email?.trim() && !phone?.trim()}
-                  label="Email (optional)"
+                  hasError={isTouched && !email?.trim()}
+                  label="Email"
                   value={email}
                   wrapperProps={{ style: { marginTop: 16 } }}
                   onChange={(event) => updateField("email", event.target.value)}
                 />
 
+                <ErrorMessage
+                  show={isTouched && !email?.trim()}
+                  message="Email is required"
+                />
+
                 <InputText
                   // TODO[2FA]: Uncomment when 2FA settings are ready
                   // label={is2FAEnabled ? "Phone number" : "Phone number (optional)"}

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

@@ -0,0 +1,20 @@
+import { useBuyerPortal } from "../../../shared/hooks";
+import {
+  UpdateUserDrawer,
+  type UpdateUserDrawerProps,
+} from "../UpdateUserDrawer/UpdateUserDrawer";
+import { UpdateUserDrawerWithUsername } from "../UpdateUserDrawerWithUsername/UpdateUserDrawerWithUsername";
+
+export type UpdateUserDrawerSelectorProps = UpdateUserDrawerProps;
+
+export const UpdateUserDrawerSelector = (
+  props: UpdateUserDrawerSelectorProps
+) => {
+  const { featureFlags } = useBuyerPortal();
+
+  if (featureFlags?.enableUsernameCreation) {
+    return <UpdateUserDrawerWithUsername {...props} />;
+  }
+
+  return <UpdateUserDrawer {...props} />;
+};

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

@@ -0,0 +1,342 @@
+import { useRef, useState } from "react";
+
+import { Skeleton, useUI } from "@faststore/ui";
+
+import { useUpdateRoles } from "../../../roles/hooks";
+import { RoleData, UserRoles } from "../../../roles/types";
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  ErrorMessage,
+  InputText,
+} from "../../../shared/components";
+import { useAnalytics } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../shared/utils/phoneNumber";
+import { useGetUserById, useUpdateUser } from "../../hooks";
+
+export type UpdateUserDrawerWithUsernameProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  onUpdate?: () => void;
+  orgUnitId: string;
+  userId: string;
+  rolesOptions: RoleData[] | null;
+};
+
+export const UpdateUserDrawerWithUsername = ({
+  close,
+  onUpdate,
+  userId,
+  orgUnitId,
+  rolesOptions,
+  ...props
+}: UpdateUserDrawerWithUsernameProps) => {
+  const { pushToast } = useUI();
+  const { trackEntityEdited, trackEntityEditError } = useAnalytics({
+    entityType: "user",
+    entityId: userId,
+    defaultTimerName: "user_edit",
+    shouldTrackDefaultTimer: true,
+  });
+  const initialRolesRef = useRef<string[]>([]);
+  const initialUsernameRef = useRef<string>("");
+
+  const { isUserLoading } = useGetUserById(
+    { orgUnitId, userId },
+    {
+      onSuccess: (data) => {
+        const userRoles = data?.roles ? data.roles : [];
+        initialRolesRef.current = userRoles;
+        initialUsernameRef.current = data?.userName ?? "";
+        setForm({
+          name: data?.name ?? "",
+          email: data?.email ?? "",
+          phone: data?.phone ?? "",
+          roles: userRoles,
+          username: data?.userName ?? "",
+        });
+      },
+      onError: () => {
+        pushToast({
+          message: "Failed to fetch user details",
+          status: "ERROR",
+        });
+      },
+    }
+  );
+
+  const [form, setForm] = useState<{
+    name: string;
+    email: string;
+    phone: string;
+    roles: string[];
+    username: string;
+  }>({
+    name: "",
+    email: "",
+    phone: "",
+    roles: [],
+    username: "",
+  });
+
+  const [isTouched, setIsTouched] = useState(false);
+
+  const { name, email, roles, phone, username } = form;
+
+  const updateField = (field: keyof typeof form, value: string | string[]) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleUpdateUserSuccess = () => {
+    trackEntityEdited(ANALYTICS_EVENTS.USER_EDITED, {
+      user_id: userId,
+      user_name: name,
+      user_phone: phone,
+      old_roles: initialRolesRef.current,
+      new_roles: roles,
+      roles_count: roles.length,
+      org_unit_id: orgUnitId,
+    });
+
+    pushToast({
+      message: "User successfully updated",
+      status: "INFO",
+    });
+    onUpdate?.();
+    close();
+  };
+
+  const { updateUser, isUpdateUserLoading } = useUpdateUser({
+    onSuccess: handleUpdateUserSuccess,
+    onError: (error) => {
+      trackEntityEditError(
+        ANALYTICS_EVENTS.USER_EDIT_ERROR,
+        "user",
+        userId,
+        error,
+        {
+          org_unit_id: orgUnitId,
+        }
+      );
+
+      pushToast({
+        message: "Failed to update user",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const { updateRoles, isUpdateRolesLoading } = useUpdateRoles({
+    onSuccess: handleUpdateUserSuccess,
+    onError: (error) => {
+      trackEntityEditError(
+        ANALYTICS_EVENTS.USER_EDIT_ERROR,
+        "user",
+        userId,
+        error,
+        {
+          org_unit_id: orgUnitId,
+        }
+      );
+
+      pushToast({
+        message: "Failed to update user",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const isAllFieldsFilled = Object.keys(form).every((key) => {
+    if (key === "roles" || key === "phone") {
+      return true; // allow empty roles
+    }
+
+    return (form[key as keyof typeof form] as string)?.trim();
+  });
+
+  const handleConfirmClick = () => {
+    setIsTouched(true);
+
+    if (!isAllFieldsFilled) {
+      return;
+    }
+
+    const updatedRoles = rolesOptions?.map((option) => ({
+      roleName: option.roleName,
+      isActive: roles.includes(option.roleName),
+    }));
+
+    updateRoles({
+      data: {
+        userId,
+        roles: updatedRoles ? updatedRoles : ([] as UserRoles[]),
+      },
+      orgUnitId,
+    });
+
+    updateUser({
+      userId,
+      name,
+      email,
+      phone: phone ?? "",
+      roles,
+      orgUnitId,
+      userName: username,
+    });
+  };
+
+  const isLoading = isUpdateUserLoading || isUpdateRolesLoading;
+
+  const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
+
+  return (
+    <BasicDrawer
+      data-fs-bp-update-user-drawer-with-username
+      close={close}
+      {...props}
+    >
+      <BasicDrawer.Heading title="Edit user details" onClose={close} />
+
+      <BasicDrawer.Body>
+        {isUserLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <InputText
+            label="Username"
+            value={username}
+            hasError={isTouched && !username?.trim()}
+            onChange={(event) => updateField("username", event.target.value)}
+            readOnly={!!initialUsernameRef.current}
+            disabled={!!initialUsernameRef.current}
+          />
+        )}
+
+        <ErrorMessage
+          show={isTouched && !username?.trim()}
+          message="Username is required"
+        />
+
+        {isUserLoading ? (
+          <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+        ) : (
+          <InputText
+            label="Full Name"
+            wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+            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: { marginBottom: 16 } }}
+            hasError={isTouched && !email?.trim()}
+            onChange={(event) => updateField("email", event.target.value)}
+          />
+        )}
+
+        <ErrorMessage
+          show={isTouched && !email?.trim()}
+          message="Email is required"
+        />
+
+        {isUserLoading ? (
+          <Skeleton
+            size={{ width: "100%", height: "3.5rem" }}
+            style={{
+              marginTop: "1rem",
+              marginBottom: "1rem",
+              width: "100%",
+              height: "3.5rem",
+            }}
+          />
+        ) : (
+          <InputText
+            label="Phone number (optional)"
+            value={maskPhoneNumber(phone, "USA")}
+            onChange={(event) =>
+              // TODO: Update this when implementing i18n
+              updateField("phone", normalizePhoneNumber(event.target.value))
+            }
+          />
+        )}
+
+        <div data-fs-bp-update-user-roles>
+          <span data-fs-bp-update-user-roles-label>Roles</span>
+          {rolesOptions &&
+            rolesOptions.map((role) => {
+              if (isUserLoading) {
+                return (
+                  <Skeleton
+                    key={role.roleId}
+                    size={{ width: "100%", height: "1.25rem" }}
+                  />
+                );
+              }
+
+              const id = `role-${role.roleName
+                .toLowerCase()
+                .replace(" ", "-")}`;
+              return (
+                <span data-fs-bp-update-user-role-wrapper key={role.roleName}>
+                  <input
+                    type="checkbox"
+                    key={role.roleId}
+                    value={role.roleId}
+                    id={id}
+                    checked={roles?.includes(role.roleName)}
+                    onChange={(event) => {
+                      const newRoles = event.target.checked
+                        ? [...(roles ?? []), role.roleName]
+                        : roles?.filter((r) => r !== role.roleName) ?? [];
+                      updateField("roles", newRoles);
+                    }}
+                  />
+                  <label htmlFor={id}>{role.roleName}</label>
+                </span>
+              );
+            })}
+        </div>
+      </BasicDrawer.Body>
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isConfirmButtonEnabled}
+          onClick={handleConfirmClick}
+          isLoading={isLoading}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/users/components/UpdateUserDrawerWithUsername/update-user-drawer-with-username.scss

@@ -0,0 +1,31 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+
+[data-fs-bp-update-user-drawer-with-username] {
+  @import "../UpdateUserDrawer/update-user-drawer.scss";
+
+  [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

@@ -7,7 +7,7 @@ import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { DeleteUserDrawer } from "../DeleteUserDrawer/DeleteUserDrawer";
 import { ReassignOrgUnitDrawer } from "../ReassignOrgUnitDrawer/ReassignOrgUnitDrawer";
-import { UpdateUserDrawer } from "../UpdateUserDrawer/UpdateUserDrawer";
+import { UpdateUserDrawerSelector } from "../UpdateUserDrawerSelector/UpdateUserDrawerSelector";
 
 import type { RoleData } from "../../../roles/types";
 
@@ -99,7 +99,7 @@ export const UserDropdownMenu = ({
         />
       )}
       {isUpdateUserDrawerOpen && (
-        <UpdateUserDrawer
+        <UpdateUserDrawerSelector
           rolesOptions={rolesOptions}
           userId={user.id}
           orgUnitId={currentOrgUnit?.id ?? ""}

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

@@ -4,3 +4,4 @@
 @import "../CreateUserDrawer/create-user-drawer.scss";
 @import "../CreateUserDrawerWithUsername/create-user-drawer-with-username.scss";
 @import "../UpdateUserDrawer/update-user-drawer.scss";
+@import "../UpdateUserDrawerWithUsername/update-user-drawer-with-username.scss";

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

@@ -16,3 +16,8 @@ export {
   UpdateUserDrawer,
   type UpdateUserDrawerProps,
 } from "./UpdateUserDrawer/UpdateUserDrawer";
+export { UpdateUserDrawerWithUsername } from "./UpdateUserDrawerWithUsername/UpdateUserDrawerWithUsername";
+export {
+  UpdateUserDrawerSelector,
+  type UpdateUserDrawerSelectorProps,
+} from "./UpdateUserDrawerSelector/UpdateUserDrawerSelector";

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

@@ -10,7 +10,8 @@ import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
-import { ReassignOrgUnitDrawer, UpdateUserDrawer } from "../../components";
+import { ReassignOrgUnitDrawer } from "../../components";
+import { UpdateUserDrawerSelector } from "../../components/UpdateUserDrawerSelector/UpdateUserDrawerSelector";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 
 import type { RoleData } from "../../../roles/types";
@@ -148,7 +149,7 @@ export const UserDetailsLayout = ({
           />
         )}
         {isUpdateUserDrawerOpen && (
-          <UpdateUserDrawer
+          <UpdateUserDrawerSelector
             rolesOptions={rolesOptions ?? []}
             userId={user?.id ?? ""}
             orgUnitId={currentOrgUnit?.id ?? ""}

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

@@ -1,6 +1,7 @@
 @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/UpdateUserDrawerWithUsername/update-user-drawer-with-username.scss";
 @import "../../components/DeleteUserDrawer/delete-user-drawer.scss";
 @import "../../components/UserDropdownMenu/user-dropdown-menu.scss";
 

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

@@ -13,14 +13,12 @@ export const getUserByIdService = async ({
   cookie: string;
 }): Promise<UserData | null> => {
   try {
-    const { email, name, phone, orgUnit, role } = await usersClient.getUserById(
-      orgUnitId,
-      userId,
-      cookie
-    );
+    const { email, name, phone, orgUnit, role, userName } =
+      await usersClient.getUserById(orgUnitId, userId, cookie);
 
     return {
       name,
+      userName: userName ?? "",
       roles: role ? role : [],
       id: userId,
       email: email ?? "",

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

@@ -4,8 +4,10 @@ export type UpdateUserServiceProps = {
   orgUnitId: string;
   userId: string;
   name?: string;
+  email?: string;
   phone?: string;
   roles?: string[];
+  userName?: string;
   cookie: string;
 };
 
@@ -14,16 +16,20 @@ export const updateUserService = async ({
   userId,
   cookie,
   name,
+  email,
   phone = "",
   roles,
+  userName,
 }: UpdateUserServiceProps) => {
   return usersClient.updateUser(
     {
       orgUnitId,
       userId,
       name,
+      email,
       phone,
       role: roles?.join(",") || undefined,
+      userName,
     },
     cookie
   );