@vtex/faststore-plugin-buyer-portal 1.1.104 → 1.1.106

package/package.json

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

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

@@ -2,14 +2,17 @@
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
-  error?: Error;
-  tags?: {
-    component: string;
-    errorType: string;
+  error?: {
+    error: Error;
+    query?: unknown;
+    tags?: {
+      component: string;
+      errorType: string;
+    };
   };
 };
 
-export default function Error({ error, tags }: ErrorProps) {
+export default function Error({ error }: ErrorProps) {
   return (
     <div data-fs-bp-error>
       <Icon name="Warning" width={48} height={48} data-fs-icon-loading="true" />
@@ -18,11 +21,16 @@ export default function Error({ error, tags }: ErrorProps) {
         Try again
       </button>
       <div data-fs-bp-error-details>
-        <span data-fs-bp-error-details-type>{tags?.errorType}</span>
+        <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
         <h2 data-fs-bp-error-details-title>Error Details</h2>
-        <p data-fs-bp-error-details-message>{error?.message}</p>
-        <p data-fs-bp-error-details-stack>Stack: {error?.stack}</p>
-        <p data-fs-bp-error-details-component>Component: {tags?.component}</p>
+        <p data-fs-bp-error-details-message>{error?.error.message}</p>
+        <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
+        <p data-fs-bp-error-details-component>
+          Component: {error?.tags?.component}
+        </p>
+        <p data-fs-bp-error-details-query>
+          Query: {JSON.stringify(error?.query)}
+        </p>
       </div>
     </div>
   );

package/src/features/shared/components/ErrorBoundary/types.ts

@@ -3,6 +3,7 @@ export type ErrorBoundaryProps = {
     message: string;
     name: string;
     stack?: string;
+    query?: unknown;
   };
   tags: {
     component: string;

package/src/features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout.tsx

@@ -15,6 +15,8 @@ export type ErrorTabsLayoutContentProps = {
   title?: string;
   error?: {
     error: Error;
+    query?: unknown;
+    rawData?: unknown;
     tags: {
       component: string;
       errorType: string;
@@ -26,6 +28,8 @@ export type ErrorTabsLayoutProps = {
   children?: ReactNode;
   error?: {
     error: Error;
+    query?: unknown;
+    rawData?: unknown;
     tags: {
       component: string;
       errorType: string;
@@ -40,7 +44,7 @@ export const ErrorTabsLayoutContent = ({
   <div>
     <section data-fs-bp-profile>
       <HeaderInside title={title} />
-      <Error error={error?.error} tags={error?.tags} />
+      <Error error={error} />
     </section>
   </div>
 );

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

@@ -34,5 +34,6 @@ export {
 export { toQueryParams } from "./toQueryParams";
 export { getValidPage } from "./getValidPage";
 export { isPluginError } from "./isPluginError";
+export { serializeLoaderData } from "./serializeLoaderData";
 export { withLoaderErrorBoundary } from "./withLoaderErrorBoundary";
 export { withClientErrorBoundary } from "./withClientErrorBoundary";

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

@@ -0,0 +1,10 @@
+export function serializeLoaderData<T>(data: T): T {
+  return JSON.parse(
+    JSON.stringify(data, (key, value) => {
+      if (value === undefined) {
+        return null;
+      }
+      return value;
+    })
+  );
+}

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

@@ -1,3 +1,6 @@
+import { getClientContext } from "./getClientContext";
+import { serializeLoaderData } from "./serializeLoaderData";
+
 import type { LoaderData } from "../types";
 
 interface WithLoaderErrorBoundaryOptions {
@@ -14,30 +17,68 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
 
   return async (data: LoaderData<TQuery>): Promise<TReturn> => {
     try {
-      return await loaderFn(data);
+      const result = await loaderFn(data);
+      return serializeLoaderData(result);
     } catch (error) {
+      console.error(`[${componentName || "Loader"}] Error:`, {
+        message: (error as Error).message,
+        query: data.query,
+      });
+
       if (onError) {
         onError(error as Error, data.query);
       }
 
       if (redirectToError) {
-        return {
+        let clientContext;
+        try {
+          clientContext = await getClientContext(data);
+        } catch (contextError) {
+          console.error(
+            `[${componentName || "Loader"}] Failed to get client context:`,
+            contextError
+          );
+          clientContext = {
+            cookie: "",
+            customerId: "",
+            userId: "",
+            vtexIdclientAutCookie: "",
+          };
+        }
+
+        // Serialize query to ensure it's JSON-safe (use null instead of undefined)
+        const serializedQuery = data.query
+          ? JSON.parse(JSON.stringify(data.query))
+          : null;
+
+        const errorResponse = {
           error: {
             error: {
               message: (error as Error).message,
               name: (error as Error).name,
-              stack: (error as Error).stack,
+              stack: (error as Error).stack || null,
+              query: serializedQuery,
             },
             tags: {
               component: componentName || "Unknown",
               errorType: "loader_error",
             },
             extra: {
-              query: data.query,
+              query: serializedQuery,
             },
           },
           hasError: true,
-        } as TReturn;
+          context: {
+            clientContext,
+            currentOrgUnit: null,
+            currentContract: null,
+            currentUser: null,
+          },
+          data: null,
+        };
+
+        // Ensure error response is also JSON-serializable
+        return serializeLoaderData(errorResponse) as TReturn;
       }
 
       throw error;

package/src/pages/address-details.tsx

@@ -85,6 +85,22 @@ const loaderFunction = async (
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
+  if (!contractId || !orgUnitId) {
+    return {
+      data: {
+        addressDetails: null,
+        recipientsData: null,
+        locationsData: null,
+      },
+      context: {
+        clientContext: { customerId, cookie, userId, ...clientContext },
+        currentOrgUnit: null,
+        currentContract: null,
+        currentUser: null,
+      },
+    };
+  }
+
   const orgUnit = await getOrgUnitBasicDataService({ cookie, id: orgUnitId });
 
   const contract = await getContractDetailsService({

package/src/pages/addresses.tsx

@@ -56,6 +56,21 @@ const loaderFunction = async (
   const { cookie, userId, customerId, ...clientContext } =
     await getClientContext(data);
 
+  if (!contractId || !orgUnitId) {
+    return {
+      data: [],
+      search: search ?? "",
+      total: 0,
+      page: page ?? 1,
+      context: {
+        clientContext: { customerId, cookie, userId, ...clientContext },
+        currentOrgUnit: null,
+        currentContract: null,
+        currentUser: null,
+      },
+    };
+  }
+
   const [currentOrgUnit, user, contract, addressesResponse] = await Promise.all(
     [
       getOrgUnitBasicDataService({

package/src/pages/budgets.tsx

@@ -46,6 +46,18 @@ const loaderFunction = async (
 
   const { contractId, orgUnitId } = data.query;
 
+  if (!contractId || !orgUnitId) {
+    return {
+      data: { data: [], total: 0 },
+      context: {
+        clientContext: { cookie, userId, customerId, ...clientContext },
+        currentOrgUnit: null,
+        currentContract: null,
+        currentUser: null,
+      },
+    };
+  }
+
   const [orgUnit, contract, user, budgetsData] = await Promise.all([
     getOrgUnitBasicDataService({
       cookie,

package/src/pages/buying-policies.tsx

@@ -57,6 +57,21 @@ const loaderFunction = async (
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
+  if (!contractId || !orgUnitId) {
+    return {
+      buyingPolicies: [],
+      total: 0,
+      search: search ?? "",
+      page: page ?? 1,
+      context: {
+        clientContext: { cookie, userId, ...clientContext },
+        currentOrgUnit: null,
+        currentContract: null,
+        currentUser: null,
+      },
+    };
+  }
+
   const [currentOrgUnit, user, contract, budgetData, buyingPoliciesResponse] =
     await Promise.all([
       getOrgUnitBasicDataService({

package/src/pages/cost-centers.tsx

@@ -23,7 +23,7 @@ export type CostCentersPageData = {
   data: ContractData | null;
   context: {
     clientContext: ClientContext;
-    currentOrgUnit: OrgUnitBasicData;
+    currentOrgUnit: OrgUnitBasicData | null;
     currentContract: ContractData | null;
     currentUser: UserData | null;
     search: string;
@@ -46,6 +46,19 @@ const loaderFunction = async (
 
   const { contractId, orgUnitId, search } = data.query;
 
+  if (!contractId || !orgUnitId) {
+    return {
+      data: null,
+      context: {
+        clientContext: { cookie, userId, customerId, ...clientContext },
+        currentContract: null,
+        currentUser: null,
+        currentOrgUnit: null,
+        search: "",
+      },
+    };
+  }
+
   const [orgUnit, contract, user] = await Promise.all([
     getOrgUnitBasicDataService({ id: orgUnitId, cookie }),
     getContractDetailsService({ contractId, unitId: orgUnitId, cookie }),

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

@@ -46,7 +46,11 @@ type OrgUnitDetailsPageQuery = {
 const loaderFunction = async (
   data: LoaderData<OrgUnitDetailsPageQuery>
 ): Promise<OrgUnitDetailsPageData> => {
-  const { orgUnitId } = data.query;
+  const { orgUnitId } = data.query ?? {};
+
+  if (!orgUnitId) {
+    throw new Error(`Missing required query param: orgUnitId=${orgUnitId}`);
+  }
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 

package/src/pages/profile.tsx

@@ -42,7 +42,19 @@ export async function loaderFunction(
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
-  const { contractId, orgUnitId } = data.query;
+  const { contractId, orgUnitId } = data.query ?? {};
+
+  if (!contractId || !orgUnitId) {
+    return {
+      data: null,
+      context: {
+        clientContext: { customerId, cookie, userId, ...clientContext },
+        currentOrgUnit: null,
+        currentContract: null,
+        currentUser: null,
+      },
+    };
+  }
 
   const [orgUnit, contract, user] = await Promise.all([
     getOrgUnitBasicDataService({

package/src/pages/users.tsx

@@ -58,6 +58,24 @@ const loaderFunction = async (
   const { orgUnitId, search = "", page = "1" } = data.query;
   const validPage = getValidPage(page);
 
+  if (!orgUnitId) {
+    return {
+      data: {
+        users: [],
+        total: 0,
+        search: "",
+        page: 1,
+        rolesOptions: [],
+      },
+      context: {
+        clientContext: { cookie, userId, ...clientContext },
+        currentUser: null,
+        currentOrgUnit: null,
+        rolesOptions: [],
+      },
+    };
+  }
+
   const [currentOrgUnit, usersResponse, user, rolesOptions] = await Promise.all(
     [
       getOrgUnitBasicDataService({