@vtex/faststore-plugin-buyer-portal 1.1.103 → 1.1.104-experimental.4

package/package.json

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

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

@@ -2,14 +2,18 @@
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
-  error?: Error;
-  tags?: {
-    component: string;
-    errorType: string;
+  error?: {
+    error: Error;
+    query?: unknown;
+    rawData?: 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 +22,19 @@ 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>
+        <p data-fs-bp-error-details-raw-data>
+          Raw Data: {JSON.stringify(error?.rawData)}
+        </p>
       </div>
     </div>
   );

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

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

package/src/features/shared/layouts/BaseTabsLayout/SidebarMenu.tsx

@@ -26,8 +26,8 @@ export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
 
   const router = useRouter();
 
-  const orgUnitId = router.query.orgUnitId as string;
-  const customerId = router.query.contractId as string;
+  const orgUnitId = (router.query.orgUnitId as string) || "";
+  const customerId = (router.query.contractId as string) || "";
 
   const idContract =
     (currentContract?.id
@@ -38,8 +38,8 @@ export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
     <aside data-fs-bp-sidebar-menu {...otherProps}>
       <VerticalNav.Menu title="Contract">
         {getContractSettingsLinks({
-          orgUnitId: orgUnitId ?? currentOrgUnit?.id ?? "",
-          contractId: customerId ?? idContract,
+          orgUnitId: orgUnitId || currentOrgUnit?.id || "",
+          contractId: customerId || idContract,
         }).map((option) => (
           <VerticalNav.Link key={option.name} link={option.link}>
             {option.name}

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>
 );
@@ -54,8 +58,8 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
     currentContract: contract,
   } = useBuyerPortal();
 
-  const orgUnitId = router.query.orgUnitId as string;
-  const customerId = router.query.contractId as string;
+  const orgUnitId = (router.query.orgUnitId as string) || "";
+  const customerId = (router.query.contractId as string) || "";
 
   const layoutConfig = getTabsLayoutConfigFromRoute(router.route);
 

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

@@ -1,9 +1,13 @@
 const base = "/pvt/organization-account";
 
 function replaceParams(template: string, params: Record<string, string>) {
-  return Object.entries(params).reduce((url, [key, value]) => {
-    return url.replace(`[${key}]`, value);
-  }, template);
+  return Object.entries(params)
+    .reduce((url, [key, value]) => {
+      // Handle empty or undefined values by replacing with empty string
+      const cleanValue = value || "";
+      return url.replace(`[${key}]`, cleanValue);
+    }, template)
+    .replace(/\/+/g, "/"); // Remove consecutive slashes
 }
 
 export const buyerPortalRoutes = {

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

@@ -27,6 +27,8 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
               message: (error as Error).message,
               name: (error as Error).name,
               stack: (error as Error).stack,
+              query: data.query,
+              rawData: data,
             },
             tags: {
               component: componentName || "Unknown",

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,13 @@ 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) {
+    throw new Error(
+      `Missing required query params: contractId=${contractId}, orgUnitId=${orgUnitId}`
+    );
+  }
 
   const [orgUnit, contract, user] = await Promise.all([
     getOrgUnitBasicDataService({