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

package/CHANGELOG.md

@@ -7,56 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.3.53] - 2026-01-06
-
-### Fixed
-
-- Solved typo on import of add menu dropdown
-
-## [1.3.52] - 2026-01-06
-
-### Fixed
-
-- Removed settings object from LoadingTabs
-
-## [1.3.51] - 2026-01-05
-
-### Added
-
-- Add Settings Drawers for Credit Cards, Payment Methods and Collections
-  - Implement `CreditCardSettingsDrawer` component for credit cards scope configuration
-  - Implement `PaymentMethodSettingsDrawer` component for payment methods scope configuration
-  - Implement `CollectionsSettingsDrawer` component for product assortment scope configuration
-  - Integrate settings drawers with respective layout pages
-
-## [1.3.50] - 2025-12-19
-
-### Changed
-
-- Introduces several improvements and refactorings to the budget notification drawer, focusing on user experience.
-
-## [1.3.49] - 2025-12-19
+## [1.3.55] - 2026-01-08
 
 ### Added
 
-- Add component of Criteria Selection of Custom Fields on Buying Policies
-
-## [1.3.48] - 2025-12-19
-
-- Adjustment from merge to Collections to Products Assortment
-- Change Products Assortment to client side
-
-## [1.3.47] - 2025-12-19
-
-- Alternative Login Keys:
-  - Add auth setup drawer
-  - Update AddUserDrawer to support username
-
-## [1.3.46] - 2025-12-19
-
-### Fixed
-
-- Organizational unit deletion now redirects to parent org unit instead of staying on deleted entity's page
+- Enable Bulk Ops agent in the storefront via /b2b-agent route
+  - Add src/pages/b2b-agent.tsx protected by withAuthLoader and withLoaderErrorBoundary
+  - Render external agent app inside an iframe (B2BAgentLayout)
+  - Implement secure postMessage handshake (B2B_AGENT_READY / AUTH_TOKEN_UPDATE) sending VTEX auth token and customer/user context
+  - Add origin/source validation, targetOrigin enforcement, and fallback resend logic for resilience
+  - Add full-height layout styles for the agent iframe
 
 ## [1.3.45] - 2025-12-17
 
@@ -451,7 +411,9 @@ 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.55...HEAD
+[1.3.55]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.54...v1.3.55
+[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.55",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/plugin.config.js

@@ -88,6 +88,10 @@ module.exports = {
       path: "/pvt/organization-account/org-unit/[orgUnitId]",
       appLayout: false,
     },
+    "b2b-agent": {
+      path: "/pvt/organization-account/b2b-agent",
+      appLayout: false,
+    },
   },
 
   apis: {

package/src/features/b2b-agent/layouts/B2BAgentLayout/B2BAgentLayout.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useMemo, useRef } from "react";
+
+import { isDevelopment } from "../../../shared/utils/environment";
+
+const B2B_AGENT_URL = isDevelopment()
+  ? "http://localhost:3001/app/buyer-bulk-ops-agent"
+  : "https://buyer-bulk-ops-agent.vercel.app/app/buyer-bulk-ops-agent";
+
+interface B2BAgentLayoutProps {
+  vtexIdclientAutCookie: string;
+  account: string;
+  locale?: string;
+  customerId?: string;
+  userId?: string;
+}
+
+export const B2BAgentLayout = ({
+  vtexIdclientAutCookie,
+  account,
+  locale,
+  customerId,
+  userId,
+}: B2BAgentLayoutProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const agentOrigin = useMemo(() => new URL(B2B_AGENT_URL).origin, []);
+
+  useEffect(() => {
+    function postAuthToIframe() {
+      const targetWindow = iframeRef.current?.contentWindow;
+      if (!targetWindow) return;
+
+      // We send only the token (not the full Cookie header) to reduce exposure.
+      targetWindow.postMessage(
+        {
+          type: "AUTH_TOKEN_UPDATE",
+          vtexIdclientAutCookie: vtexIdclientAutCookie,
+          account,
+          locale,
+          customerId: customerId,
+          userId: userId,
+        },
+        agentOrigin
+      );
+    }
+
+    function onMessage(event: MessageEvent) {
+      // Only accept messages coming from the iframe's origin.
+      if (event.origin !== agentOrigin) return;
+
+      // Ensure the message is from the iframe window we embedded.
+      if (event.source !== iframeRef.current?.contentWindow) return;
+
+      // Handshake: child tells it is ready; parent responds by sending auth.
+      if (event.data?.type === "B2B_AGENT_READY") {
+        postAuthToIframe();
+      }
+    }
+
+    window.addEventListener("message", onMessage);
+
+    // Fallback: try once after iframe load in case READY was missed.
+    const iframe = iframeRef.current;
+    const onLoad = () => {
+      // Small delay to allow the iframe app to attach its message listener.
+      setTimeout(() => {
+        postAuthToIframe();
+      }, 150);
+    };
+
+    if (iframe) iframe.addEventListener("load", onLoad);
+
+    // If token changes while iframe is already up, proactively resend.
+    // This is safe because we still constrain by agentOrigin.
+    if (iframeRef.current?.contentWindow && vtexIdclientAutCookie) {
+      // Delay to avoid racing the initial mount.
+      setTimeout(() => {
+        postAuthToIframe();
+      }, 1);
+    }
+
+    return () => {
+      window.removeEventListener("message", onMessage);
+      if (iframe) iframe.removeEventListener("load", onLoad);
+    };
+  }, [vtexIdclientAutCookie, customerId, userId, agentOrigin]);
+
+  return (
+    <section data-fs-bp-b2b-agent>
+      <iframe
+        ref={iframeRef}
+        data-fs-bp-b2b-agent-iframe
+        src={B2B_AGENT_URL}
+        title="B2B Agent"
+        allow="clipboard-read; clipboard-write"
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
+      />
+    </section>
+  );
+};

package/src/features/b2b-agent/layouts/B2BAgentLayout/b2b-agent-layout.scss

@@ -0,0 +1,15 @@
+[data-fs-bp-b2b-agent] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+
+  [data-fs-bp-b2b-agent-iframe] {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+

package/src/features/b2b-agent/layouts/index.ts

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

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

@@ -15,6 +15,8 @@ export const buyerPortalRoutes = {
   profileDetails: (params: { orgUnitId: string; contractId: string }) =>
     replaceParams(`${base}/profile/[orgUnitId]/[contractId]`, params),
 
+  b2bAgent: `${base}/b2b-agent`,
+
   addresses: (params: { orgUnitId: string; contractId: string }) =>
     replaceParams(`${base}/addresses/[orgUnitId]/[contractId]`, params),
   budgets: (params: { orgUnitId: string; contractId: string }) =>

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.55";

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
   );

package/src/pages/b2b-agent.tsx

@@ -0,0 +1,94 @@
+import storeConfig from "discovery.config";
+
+import { B2BAgentLayout } from "../features/b2b-agent/layouts";
+import { withErrorBoundary } from "../features/shared/components";
+import {
+  withAuthLoader,
+  withLoaderErrorBoundary,
+} from "../features/shared/utils";
+
+import type { AuthRouteProps, LoaderData } from "../features/shared/types";
+
+/**
+ * Extracts the VTEX auth token value from a Cookie header string.
+ * Returns only the cookie VALUE (JWT), never "CookieName=value".
+ */
+const getAuthCookieInfo = (
+  cookieHeader: string
+): { token: string; accountFromCookie?: string } => {
+  if (!cookieHeader) return { token: "" };
+
+  // VtexIdclientAutCookie_<account>=<value>
+  const m = cookieHeader.match(/VtexIdclientAutCookie_([a-zA-Z0-9-]+)=([^;]+)/);
+  if (m?.[2]) return { accountFromCookie: m[1], token: m[2] };
+
+  // fallback: VtexIdclientAutCookie=<value>
+  const g = cookieHeader.match(/VtexIdclientAutCookie=([^;]+)/);
+  if (g?.[1]) return { token: g[1] };
+
+  return { token: "" };
+};
+
+type B2BAgentPageQuery = Record<string, never>;
+
+const loaderFunction = async (
+  data: LoaderData<B2BAgentPageQuery>
+): Promise<AuthRouteProps<undefined>> => {
+  return withAuthLoader(data, async () => {
+    // No business data is returned.
+    // The authenticated client context is enough for this page.
+    return undefined;
+  });
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "B2BAgentPage",
+  redirectToError: true,
+});
+
+const B2BAgentPage = (props: AuthRouteProps<undefined>) => {
+  if (!props.authorized) return null;
+
+  const cookieHeader = props.clientContext?.cookie ?? "";
+  const tokenFromContext = props.clientContext?.vtexIdclientAutCookie ?? "";
+
+  const { token: tokenFromCookie, accountFromCookie } =
+    getAuthCookieInfo(cookieHeader);
+
+  // Prefer a token-like value if available; otherwise extract from cookie header.
+  const vtexIdclientAutCookie =
+    tokenFromContext && !tokenFromContext.includes("=")
+      ? tokenFromContext
+      : tokenFromCookie;
+
+  if (!vtexIdclientAutCookie) {
+    throw new Error("Missing VTEX auth token for B2B Agent iframe");
+  }
+
+  // account/locale via discovery.config (recomendado)
+  const account = storeConfig?.api?.storeId ?? accountFromCookie ?? "";
+  const locale = storeConfig?.session?.locale ?? "en-US";
+
+  const customerId = props.clientContext?.customerId;
+  const userId = props.clientContext?.userId;
+
+  return (
+    <B2BAgentLayout
+      vtexIdclientAutCookie={vtexIdclientAutCookie}
+      account={account}
+      locale={locale}
+      customerId={customerId}
+      userId={userId}
+    />
+  );
+};
+
+export default withErrorBoundary(B2BAgentPage, {
+  onError: (error) => {
+    console.error("onError", error);
+  },
+  tags: {
+    component: "B2BAgentPage",
+    errorType: "b2b_agent_error",
+  },
+});

package/src/themes/layouts.scss

@@ -42,6 +42,10 @@
 
 // Payment Methods
 @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";
+
+// B2B Agent
+@import "../features/b2b-agent/layouts/B2BAgentLayout/b2b-agent-layout.scss";