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

package/src/pages/payment-methods.tsx

@@ -5,8 +5,17 @@ import {
   getPaymentMethodsByUnitIdService,
   GetPaymentMethodsByUnitIdServiceProps,
 } from "../features/payment-methods/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";
@@ -24,6 +33,8 @@ export type PaymentMethodsPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type PaymentMethodsPageQuery = GetPaymentMethodsByUnitIdServiceProps & {
@@ -31,9 +42,9 @@ export type PaymentMethodsPageQuery = GetPaymentMethodsByUnitIdServiceProps & {
   contractId: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<PaymentMethodsPageQuery>
-): Promise<PaymentMethodsPageData> {
+): Promise<PaymentMethodsPageData> => {
   const { contractId, orgUnitId, search } = data.query;
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
@@ -67,12 +78,31 @@ export async function loader(
       currentContract: contract,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "PaymentMethodsPage",
+  redirectToError: true,
+});
 
-const PaymentMethodsPage = ({ data, context }: PaymentMethodsPageData) => (
+const PaymentMethodsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: PaymentMethodsPageData) => (
   <BuyerPortalProvider {...context}>
-    <PaymentMethodsLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <PaymentMethodsLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default PaymentMethodsPage;
+export default withErrorBoundary(PaymentMethodsPage, {
+  tags: {
+    component: "PaymentMethodsPage",
+    errorType: "payment_methods_error",
+  },
+});

package/src/pages/po-numbers.tsx

@@ -1,8 +1,17 @@
 import { getContractDetailsService } from "../features/contracts/services";
 import { CustomFieldsLayout } from "../features/custom-fields/layouts";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
-import { 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 {
+  ClientContext,
+  getClientContext,
+  withLoaderErrorBoundary,
+} from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
@@ -19,6 +28,8 @@ export type PONumbersPageData = {
     currentUser: UserData | null;
     search: string;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 type OrgUnitsPageQuery = {
@@ -27,9 +38,9 @@ type OrgUnitsPageQuery = {
   search?: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<OrgUnitsPageQuery>
-): Promise<PONumbersPageData> {
+): Promise<PONumbersPageData> => {
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
@@ -58,14 +69,33 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "PONumbersPage",
+  redirectToError: true,
+});
 
-const PONumbersPage = ({ data, context }: PONumbersPageData) => {
+const PONumbersPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: PONumbersPageData) => {
   return (
     <BuyerPortalProvider {...context}>
-      <CustomFieldsLayout data={data} customFieldsLabel="PO Number" />
+      {hasError ? (
+        <ErrorTabsLayout error={error} />
+      ) : (
+        <CustomFieldsLayout data={data} customFieldsLabel="PO Number" />
+      )}
     </BuyerPortalProvider>
   );
 };
 
-export default PONumbersPage;
+export default withErrorBoundary(PONumbersPage, {
+  tags: {
+    component: "PONumbersPage",
+    errorType: "po_numbers_error",
+  },
+});

package/src/pages/profile.tsx

@@ -1,8 +1,17 @@
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { ProfileLayout } from "../features/profile/layouts";
-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";
@@ -18,6 +27,8 @@ export type ProfilePageData = {
     currentContract: ContractData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type ProfilePageQuery = {
@@ -25,7 +36,7 @@ export type ProfilePageQuery = {
   orgUnitId: string;
 };
 
-export async function loader(
+export async function loaderFunction(
   data: LoaderData<ProfilePageQuery>
 ): Promise<ProfilePageData> {
   const { customerId, cookie, userId, ...clientContext } =
@@ -57,10 +68,24 @@ export async function loader(
   };
 }
 
-const ContractsPage = ({ data, context }: ProfilePageData) => (
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "ProfilePage",
+  redirectToError: true,
+});
+
+const ProfilePage = ({ data, context, hasError, error }: ProfilePageData) => (
   <BuyerPortalProvider {...context}>
-    <ProfileLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <ProfileLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default ContractsPage;
+export default withErrorBoundary(ProfilePage, {
+  tags: {
+    component: "ProfilePage",
+    errorType: "profile_error",
+  },
+});

package/src/pages/releases.tsx

@@ -1,8 +1,17 @@
 import { getContractDetailsService } from "../features/contracts/services";
 import { CustomFieldsLayout } from "../features/custom-fields/layouts";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import { BuyerPortalProvider } from "../features/shared/components";
-import { 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 {
+  ClientContext,
+  getClientContext,
+  withLoaderErrorBoundary,
+} from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
@@ -19,6 +28,8 @@ export type ReleasesPageData = {
     currentUser: UserData | null;
     search: string;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 type OrgUnitsPageQuery = {
@@ -27,9 +38,9 @@ type OrgUnitsPageQuery = {
   search?: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<OrgUnitsPageQuery>
-): Promise<ReleasesPageData> {
+): Promise<ReleasesPageData> => {
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
@@ -58,14 +69,28 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "ReleasesPage",
+  redirectToError: true,
+});
 
-const ReleasesPage = ({ data, context }: ReleasesPageData) => {
+const ReleasesPage = ({ data, context, hasError, error }: ReleasesPageData) => {
   return (
     <BuyerPortalProvider {...context}>
-      <CustomFieldsLayout data={data} customFieldsLabel="Release" />
+      {hasError ? (
+        <ErrorTabsLayout error={error} />
+      ) : (
+        <CustomFieldsLayout data={data} customFieldsLabel="Release" />
+      )}
     </BuyerPortalProvider>
   );
 };
 
-export default ReleasesPage;
+export default withErrorBoundary(ReleasesPage, {
+  tags: {
+    component: "ReleasesPage",
+    errorType: "releases_error",
+  },
+});

package/src/pages/role-details.tsx

@@ -2,8 +2,17 @@ import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { RoleDetailsLayout } from "../features/roles/layout";
 import { getRolesAndPermissionsService } from "../features/roles/services";
 import { RolePermission } from "../features/roles/types";
-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 { OrgUnitBasicData } from "../features/org-units/types";
@@ -20,9 +29,13 @@ export type RoleDetailsPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
-export async function loader(data: LoaderData): Promise<RoleDetailsPageData> {
+const loaderFunction = async (
+  data: LoaderData
+): Promise<RoleDetailsPageData> => {
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
   const { orgUnitId, roleName } = data.query;
@@ -74,12 +87,31 @@ export async function loader(data: LoaderData): Promise<RoleDetailsPageData> {
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "RoleDetailsPage",
+  redirectToError: true,
+});
 
-const UsersPage = ({ data, context }: RoleDetailsPageData) => (
+const RoleDetailsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: RoleDetailsPageData) => (
   <BuyerPortalProvider {...context}>
-    <RoleDetailsLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <RoleDetailsLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default UsersPage;
+export default withErrorBoundary(RoleDetailsPage, {
+  tags: {
+    component: "RoleDetailsPage",
+    errorType: "role_details_error",
+  },
+});

package/src/pages/roles.tsx

@@ -2,8 +2,17 @@ import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { RolesLayout } from "../features/roles/layout";
 import { getRolesAndPermissionsService } from "../features/roles/services";
 import { RolePermission } from "../features/roles/types";
-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 { OrgUnitBasicData } from "../features/org-units/types";
@@ -19,9 +28,11 @@ export type RolesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
-export async function loader(data: LoaderData): Promise<RolesPageData> {
+const loaderFunction = async (data: LoaderData): Promise<RolesPageData> => {
   const { cookie, userId, ...clientContext } = await getClientContext(data);
   const { orgUnitId } = data.query;
 
@@ -48,12 +59,22 @@ export async function loader(data: LoaderData): Promise<RolesPageData> {
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "RolesPage",
+  redirectToError: true,
+});
 
-const UsersPage = ({ data, context }: RolesPageData) => (
+const RolesPage = ({ data, context, hasError, error }: RolesPageData) => (
   <BuyerPortalProvider {...context}>
-    <RolesLayout data={data} />
+    {hasError ? <ErrorTabsLayout error={error} /> : <RolesLayout data={data} />}
   </BuyerPortalProvider>
 );
 
-export default UsersPage;
+export default withErrorBoundary(RolesPage, {
+  tags: {
+    component: "RolesPage",
+    errorType: "roles_error",
+  },
+});

package/src/pages/user-details.tsx

@@ -3,8 +3,17 @@ import {
   getOrgUnitByUserIdService,
 } from "../features/org-units/services";
 import { getRolesIdsService } from "../features/roles/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 { UserDetailsLayout } from "../features/users/layouts";
 import { getUserByIdService } from "../features/users/services/get-user-by-id.service";
 
@@ -29,11 +38,13 @@ export type UserDetailsPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<UserDetailsPageQuery>
-): Promise<UserDetailsPageData> {
+): Promise<UserDetailsPageData> => {
   const { cookie, customerId, ...clientContext } = await getClientContext(data);
 
   const { userId, orgUnitId } = data.query;
@@ -76,11 +87,31 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
 
-const UserDetailsPage = ({ data, context }: UserDetailsPageData) => (
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "UserDetailsPage",
+  redirectToError: true,
+});
+
+const UserDetailsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: UserDetailsPageData) => (
   <BuyerPortalProvider {...context}>
-    <UserDetailsLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <UserDetailsLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
-export default UserDetailsPage;
+
+export default withErrorBoundary(UserDetailsPage, {
+  tags: {
+    component: "UserDetailsPage",
+    errorType: "user_details_error",
+  },
+});

package/src/pages/users.tsx

@@ -1,11 +1,17 @@
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { getRolesIdsService } from "../features/roles/services";
 import { RoleData } from "../features/roles/types";
-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 { UsersLayout } from "../features/users/layouts";
 import {
@@ -34,6 +40,8 @@ export type UsersPageData = {
     currentUser: UserData | null;
     rolesOptions: RoleData[];
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type UsersPageQuery = GetUsersByOrgUnitIdServiceProps & {
@@ -42,9 +50,9 @@ export type UsersPageQuery = GetUsersByOrgUnitIdServiceProps & {
   page?: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<UsersPageQuery>
-): Promise<UsersPageData> {
+): Promise<UsersPageData> => {
   const { cookie, userId, ...clientContext } = await getClientContext(data);
 
   const { orgUnitId, search = "", page = "1" } = data.query;
@@ -97,12 +105,22 @@ export async function loader(
       rolesOptions,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "UsersPage",
+  redirectToError: true,
+});
 
-const UsersPage = ({ data, context }: UsersPageData) => (
+const UsersPage = ({ data, context, hasError, error }: UsersPageData) => (
   <BuyerPortalProvider {...context}>
-    <UsersLayout data={data} />
+    {hasError ? <ErrorTabsLayout error={error} /> : <UsersLayout data={data} />}
   </BuyerPortalProvider>
 );
 
-export default UsersPage;
+export default withErrorBoundary(UsersPage, {
+  tags: {
+    component: "UsersPage",
+    errorType: "users_error",
+  },
+});