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

package/CHANGELOG.md

@@ -7,63 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.3.54] - 2026-01-07
+## [1.3.55] - 2026-01-08
 
 ### Added
 
-- Alternative Login Keys:
-  - Edit User to support username
-  
-## [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
-
-### 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
 
@@ -458,7 +411,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.54...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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.54",
+  "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.54";
+export const CURRENT_VERSION = "1.3.55";

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