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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.104",
+	"version": "1.1.107",
 	"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/components/withErrorBoundary/withErrorBoundary.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { ErrorBoundary } from "../ErrorBoundary/ErrorBoundary";
+// import { ErrorBoundary } from "../ErrorBoundary/ErrorBoundary";
 
 type WithErrorBoundaryOptions = {
   fallback?: React.ReactNode;
@@ -15,15 +15,16 @@ type WithErrorBoundaryOptions = {
 
 export function withErrorBoundary<P extends Record<string, unknown>>(
   WrappedComponent: React.ComponentType<P>,
-  options: WithErrorBoundaryOptions = {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _options: WithErrorBoundaryOptions = {}
 ) {
-  const { onError, tags } = options;
+  // const { onError, tags } = options;
 
   const ComponentWithErrorBoundary = (props: P) => {
     return (
-      <ErrorBoundary onError={onError} tags={tags}>
-        <WrappedComponent {...props} />
-      </ErrorBoundary>
+      // <ErrorBoundary onError={onError} tags={tags}>
+      <WrappedComponent {...props} />
+      // </ErrorBoundary>
     );
   };
 

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 {
@@ -8,39 +11,85 @@ interface WithLoaderErrorBoundaryOptions {
 
 export function withLoaderErrorBoundary<TQuery, TReturn>(
   loaderFn: (data: LoaderData<TQuery>) => Promise<TReturn>,
-  options: WithLoaderErrorBoundaryOptions = {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _options: WithLoaderErrorBoundaryOptions = {}
 ) {
-  const { componentName, onError, redirectToError = true } = options;
-
+  // Bypass: Just call the loader function and serialize the result
   return async (data: LoaderData<TQuery>): Promise<TReturn> => {
-    try {
-      return await loaderFn(data);
-    } catch (error) {
-      if (onError) {
-        onError(error as Error, data.query);
-      }
-
-      if (redirectToError) {
-        return {
-          error: {
-            error: {
-              message: (error as Error).message,
-              name: (error as Error).name,
-              stack: (error as Error).stack,
-            },
-            tags: {
-              component: componentName || "Unknown",
-              errorType: "loader_error",
-            },
-            extra: {
-              query: data.query,
-            },
-          },
-          hasError: true,
-        } as TReturn;
-      }
-
-      throw error;
-    }
+    const result = await loaderFn(data);
+    return serializeLoaderData(result);
   };
+
+  // Old error handling code - commented out for bypass
+  // const { componentName, onError, redirectToError = true } = options;
+  //
+  // return async (data: LoaderData<TQuery>): Promise<TReturn> => {
+  //   try {
+  //     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) {
+  //       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 || null,
+  //             query: serializedQuery,
+  //           },
+  //           tags: {
+  //             component: componentName || "Unknown",
+  //             errorType: "loader_error",
+  //           },
+  //           extra: {
+  //             query: serializedQuery,
+  //           },
+  //         },
+  //         hasError: true,
+  //         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({