@vtex/faststore-plugin-buyer-portal 1.1.92 → 1.1.93

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

@@ -27,12 +27,14 @@ export const ContractTabsLayout = ({
   pageName,
   loading = false,
   children,
+  orgUnitId,
+  contractId,
 }: ContractTabsLayoutProps) => {
   const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
 
   const verticalLinks = getContractSettingsLinks({
-    contractId: currentContract?.id ?? "",
-    orgUnitId: currentOrgUnit?.id ?? "",
+    contractId: currentContract?.id ?? contractId ?? "",
+    orgUnitId: currentOrgUnit?.id ?? orgUnitId ?? "",
   });
 
   return (

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

@@ -0,0 +1,119 @@
+import { type ReactNode } from "react";
+
+import { useRouter } from "next/router";
+
+import { OrgUnitDetailsNavbar } from "../../../org-units/components";
+import { HeaderInside } from "../../components";
+import Error from "../../components/Error/Error";
+import { useBuyerPortal } from "../../hooks";
+import { getTabsLayoutConfigFromRoute } from "../../utils/routeLayoutMapping";
+import { ContractTabsLayout } from "../ContractTabsLayout/ContractTabsLayout";
+import { FinanceTabsLayout } from "../FinanceTabsLayout/FinanceTabsLayout";
+import { OrgUnitTabsLayout } from "../OrgUnitTabsLayout/OrgUnitTabLayout";
+
+export type ErrorTabsLayoutContentProps = {
+  title?: string;
+  error?: {
+    error: Error;
+    tags: {
+      component: string;
+      errorType: string;
+    };
+  };
+};
+
+export type ErrorTabsLayoutProps = {
+  children?: ReactNode;
+  error?: {
+    error: Error;
+    tags: {
+      component: string;
+      errorType: string;
+    };
+  };
+};
+
+export const ErrorTabsLayoutContent = ({
+  title,
+  error,
+}: ErrorTabsLayoutContentProps) => (
+  <div>
+    <section data-fs-bp-profile>
+      <HeaderInside title={title} />
+      <Error error={error?.error} tags={error?.tags} />
+    </section>
+  </div>
+);
+
+export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
+  const router = useRouter();
+
+  const {
+    currentOrgUnit: orgUnit,
+    currentUser: user,
+    currentContract: contract,
+  } = useBuyerPortal();
+
+  const orgUnitId = router.query.orgUnitId as string;
+  const customerId = router.query.contractId as string;
+
+  const layoutConfig = getTabsLayoutConfigFromRoute(router.route);
+
+  if (!layoutConfig) {
+    return <>{children}</>;
+  }
+
+  const pageTitle = layoutConfig.pageTitle;
+
+  switch (layoutConfig.layout) {
+    case "ContractTabsLayout":
+      return (
+        <ContractTabsLayout
+          orgUnitName={orgUnit?.name ?? ""}
+          orgUnitId={orgUnitId}
+          contractId={customerId}
+          contractName={contract?.name ?? ""}
+          pageName="Contract"
+          person={{
+            image: undefined,
+            name: user?.name ?? "",
+            role: user?.role ?? "",
+          }}
+        >
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </ContractTabsLayout>
+      );
+
+    case "FinanceTabsLayout":
+      return (
+        <FinanceTabsLayout pageName={layoutConfig.pageName}>
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </FinanceTabsLayout>
+      );
+
+    case "OrgUnitTabsLayout":
+      return (
+        <OrgUnitTabsLayout pageName={layoutConfig.pageName}>
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </OrgUnitTabsLayout>
+      );
+
+    case "OrgUnitDetailsLayout":
+      return (
+        <div data-fs-bp-create-user-error-state>
+          <OrgUnitDetailsNavbar
+            orgName={orgUnit?.name ?? ""}
+            person={{
+              name: user?.name ?? "",
+              role: user?.role ?? "",
+            }}
+            loading={false}
+          />
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </div>
+      );
+
+    default:
+      return <ErrorTabsLayoutContent error={error} />;
+  }
+};

package/src/features/shared/layouts/ErrorTabsLayout/error-tabs-layout.scss

@@ -0,0 +1 @@
+@import "../../components//Error/error.scss";

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

@@ -0,0 +1,41 @@
+/**
+ * Utility functions for environment detection
+ */
+
+/**
+ * Checks if the application is running on localhost
+ * @returns {boolean} True if running on localhost, false otherwise
+ */
+export const isLocalhost = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const hostname = window.location.hostname;
+
+  return (
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "0.0.0.0" ||
+    hostname.startsWith("192.168.") ||
+    hostname.startsWith("10.") ||
+    hostname.startsWith("172.") ||
+    hostname.endsWith(".local")
+  );
+};
+
+/**
+ * Checks if the application is running in development mode
+ * @returns {boolean} True if in development mode, false otherwise
+ */
+export const isDevelopment = (): boolean => {
+  return process.env.NODE_ENV === "development";
+};
+
+/**
+ * Checks if detailed error information should be shown
+ * @returns {boolean} True if error details should be shown, false otherwise
+ */
+export const shouldShowErrorDetails = (): boolean => {
+  return isLocalhost() && isDevelopment();
+};

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

@@ -0,0 +1,22 @@
+export const extractErrorMessage = (
+  response: Response,
+  responseData: unknown
+): string => {
+  if (
+    responseData &&
+    typeof responseData === "object" &&
+    "message" in responseData
+  ) {
+    return String((responseData as { message: unknown }).message);
+  }
+
+  if (responseData) {
+    try {
+      return JSON.stringify(responseData);
+    } catch {
+      return String(responseData);
+    }
+  }
+
+  return `HTTP ${response.status}: ${response.statusText}`;
+};

package/src/features/shared/utils/getHome.tsx

@@ -0,0 +1,5 @@
+import storeConfig from "discovery.config";
+
+export const goHome = () => {
+  window.location.assign(storeConfig.storeUrl);
+};

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

@@ -33,3 +33,5 @@ export {
 } from "./search";
 export { toQueryParams } from "./toQueryParams";
 export { getValidPage } from "./getValidPage";
+export { withLoaderErrorBoundary } from "./withLoaderErrorBoundary";
+export { withClientErrorBoundary } from "./withClientErrorBoundary";

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

@@ -0,0 +1,61 @@
+import { goHome } from "./getHome";
+
+import type { ClientError } from "../clients/Client";
+
+interface WithClientErrorBoundaryOptions {
+  componentName?: string;
+  onError?: (
+    error: ClientError,
+    requestInfo: {
+      url: string;
+      method: string;
+      data?: unknown;
+    }
+  ) => void;
+}
+
+export const handleUnauthorizedRedirect = (error: ClientError) => {
+  if (error.status === 401) {
+    if (typeof window !== "undefined") {
+      goHome();
+    }
+  }
+};
+
+export function withClientErrorBoundary<TArgs extends unknown[], TReturn>(
+  clientFunction: (...args: TArgs) => Promise<TReturn>,
+  options: WithClientErrorBoundaryOptions = {}
+) {
+  const { componentName, onError } = options;
+
+  return async (...args: TArgs): Promise<TReturn> => {
+    try {
+      return await clientFunction(...args);
+    } catch (error) {
+      if (onError && error instanceof Error) {
+        const clientError = error as Partial<ClientError>;
+        const requestInfo = {
+          url:
+            typeof clientError.url === "string" ? clientError.url : "unknown",
+          method:
+            typeof clientError.method === "string"
+              ? clientError.method
+              : "unknown",
+          data:
+            clientError.responseData !== undefined
+              ? clientError.responseData
+              : undefined,
+        };
+
+        onError(error as ClientError, requestInfo);
+      }
+
+      if (error instanceof Error && (error as ClientError).status === 401) {
+        return null as TReturn;
+      }
+
+      console.error(`Error in ${componentName || "client function"}:`, error);
+      throw error;
+    }
+  };
+}

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

@@ -0,0 +1,46 @@
+import type { LoaderData } from "../types";
+
+interface WithLoaderErrorBoundaryOptions {
+  componentName?: string;
+  onError?: (error: Error, query: unknown) => void;
+  redirectToError?: boolean;
+}
+
+export function withLoaderErrorBoundary<TQuery, TReturn>(
+  loaderFn: (data: LoaderData<TQuery>) => Promise<TReturn>,
+  options: WithLoaderErrorBoundaryOptions = {}
+) {
+  const { componentName, onError, redirectToError = true } = options;
+
+  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;
+    }
+  };
+}

package/src/features/users/clients/UsersClient.ts

@@ -48,7 +48,6 @@ class UsersClient extends Client {
       });
     } catch (err) {
       console.error(err);
-      console.error(`Error listing ${page} Users page(s)`);
     }
 
     return { users, total };

package/src/pages/address-details.tsx

@@ -4,15 +4,21 @@ import { getAddressLocationService } from "../features/addresses/services/locati
 import { getAddressRecipientsService } from "../features/addresses/services/recipients/get-address-recipients.service";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
+import {
+  BuyerPortalProvider,
+  withErrorBoundary,
+} from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import {
   PAGE_PARAMS,
   SEARCH_PARAMS,
 } from "../features/shared/hooks/usePageItems";
+import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
   getClientContext,
   getValidPage,
+  withLoaderErrorBoundary,
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
@@ -57,11 +63,13 @@ export type AddressDetailsPageData = {
     currentContract: ContractData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<AddressDetailsPageQuery>
-): Promise<AddressDetailsPageData> {
+): Promise<AddressDetailsPageData> => {
   const {
     contractId,
     orgUnitId,
@@ -135,16 +143,35 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "AddressDetailsPage",
+  redirectToError: true,
+});
 
-const AddressDetailsPage = ({ data, context }: AddressDetailsPageData) => (
+const AddressDetailsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: AddressDetailsPageData) => (
   <BuyerPortalProvider {...context}>
-    <AddressDetailsLayout
-      addressDetails={data.addressDetails}
-      recipientsData={data.recipientsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
-      locationsData={data.locationsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
-    />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <AddressDetailsLayout
+        addressDetails={data.addressDetails}
+        recipientsData={data.recipientsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
+        locationsData={data.locationsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
+      />
+    )}
   </BuyerPortalProvider>
 );
 
-export default AddressDetailsPage;
+export default withErrorBoundary(AddressDetailsPage, {
+  tags: {
+    component: "AddressDetailsPage",
+    errorType: "address_details_error",
+  },
+});

package/src/pages/addresses.tsx

@@ -5,11 +5,17 @@ import {
 } from "../features/addresses/services";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
+import {
+  BuyerPortalProvider,
+  withErrorBoundary,
+} from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
+import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
   getClientContext,
   getValidPage,
+  withLoaderErrorBoundary,
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
@@ -30,6 +36,8 @@ export type AddressesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type AddressesPageQuery = GetAddressesServiceProps & {
@@ -38,9 +46,9 @@ export type AddressesPageQuery = GetAddressesServiceProps & {
   page?: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<AddressesPageQuery>
-): Promise<AddressesPageData> {
+): Promise<AddressesPageData> => {
   const { contractId, orgUnitId, search, page: pageString } = data.query;
 
   const page = getValidPage(pageString);
@@ -81,7 +89,12 @@ export async function loader(
       currentContract: contract,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "AddressesPage",
+  redirectToError: true,
+});
 
 const AddressPage = ({
   data,
@@ -89,10 +102,26 @@ const AddressPage = ({
   page,
   total,
   context,
+  hasError,
+  error,
 }: AddressesPageData) => (
   <BuyerPortalProvider {...context}>
-    <AddressLayout addresses={data} search={search} page={page} total={total} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <AddressLayout
+        addresses={data}
+        search={search}
+        page={page}
+        total={total}
+      />
+    )}
   </BuyerPortalProvider>
 );
 
-export default AddressPage;
+export default withErrorBoundary(AddressPage, {
+  tags: {
+    component: "AddressesPage",
+    errorType: "addresses_error",
+  },
+});

package/src/pages/budgets-details.tsx

@@ -3,8 +3,17 @@ import { getBudgetByIdService } from "../features/budgets/services";
 import { Budget } from "../features/budgets/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
-import { type ClientContext, getClientContext } from "../features/shared/utils";
+import {
+  BuyerPortalProvider,
+  withErrorBoundary,
+} from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
+import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import {
+  type ClientContext,
+  getClientContext,
+  withLoaderErrorBoundary,
+} from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
@@ -20,6 +29,8 @@ export type BudgetsDetailsData = {
     currentContract: ContractData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type BudgetsDetailsQuery = {
@@ -28,9 +39,9 @@ export type BudgetsDetailsQuery = {
   budgetId: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<BudgetsDetailsQuery>
-): Promise<BudgetsDetailsData> {
+): Promise<BudgetsDetailsData> => {
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
@@ -61,12 +72,31 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "BudgetsDetailsPage",
+  redirectToError: true,
+});
 
-const ContractsPage = ({ budget, context }: BudgetsDetailsData) => (
+const BudgetsDetailsPage = ({
+  budget,
+  context,
+  hasError,
+  error,
+}: BudgetsDetailsData) => (
   <BuyerPortalProvider {...context}>
-    <BudgetsDetailsLayout budget={budget} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <BudgetsDetailsLayout budget={budget} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default ContractsPage;
+export default withErrorBoundary(BudgetsDetailsPage, {
+  tags: {
+    component: "BudgetsDetailsPage",
+    errorType: "budgets_details_error",
+  },
+});

package/src/pages/budgets.tsx

@@ -3,8 +3,17 @@ import { listBudgetsService } from "../features/budgets/services";
 import { BudgetListResponse } from "../features/budgets/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
-import { type ClientContext, getClientContext } from "../features/shared/utils";
+import {
+  BuyerPortalProvider,
+  withErrorBoundary,
+} from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
+import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
+import {
+  type ClientContext,
+  getClientContext,
+  withLoaderErrorBoundary,
+} from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
@@ -20,6 +29,8 @@ export type BudgetPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type BudgetPageQuery = {
@@ -27,9 +38,9 @@ export type BudgetPageQuery = {
   orgUnitId: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<BudgetPageQuery>
-): Promise<BudgetPageData> {
+): Promise<BudgetPageData> => {
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
@@ -62,12 +73,26 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "BudgetsPage",
+  redirectToError: true,
+});
 
-const ContractsPage = ({ data, context }: BudgetPageData) => (
+const ContractsPage = ({ data, context, hasError, error }: BudgetPageData) => (
   <BuyerPortalProvider {...context}>
-    <BudgetsLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <BudgetsLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default ContractsPage;
+export default withErrorBoundary(ContractsPage, {
+  tags: {
+    component: "BudgetsPage",
+    errorType: "budgets_error",
+  },
+});