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

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",
+  },
+});

package/src/pages/buying-policies.tsx

@@ -2,11 +2,17 @@ import { BuyingPoliciesLayout } from "../features/buying-policies/layouts";
 import { getBuyingPoliciesService } from "../features/buying-policies/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";
 
@@ -28,6 +34,8 @@ export type BuyingPoliciesPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type BuyingPoliciesPageQuery = GetAddressesServiceProps & {
@@ -37,9 +45,9 @@ export type BuyingPoliciesPageQuery = GetAddressesServiceProps & {
   page?: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<BuyingPoliciesPageQuery>
-): Promise<BuyingPoliciesPageData> {
+): Promise<BuyingPoliciesPageData> => {
   const { contractId, orgUnitId, search = "", page: pageString } = data.query;
 
   const page = getValidPage(pageString);
@@ -87,23 +95,39 @@ export async function loader(
       currentContract: contract,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "BuyingPoliciesPage",
+  redirectToError: true,
+});
 
-const AddressPage = ({
+const BuyingPoliciesPage = ({
   buyingPolicies,
   search,
   page,
   context,
   total,
+  hasError,
+  error,
 }: BuyingPoliciesPageData) => (
   <BuyerPortalProvider {...context}>
-    <BuyingPoliciesLayout
-      buyingPolicies={buyingPolicies}
-      search={search}
-      page={page}
-      total={total}
-    />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <BuyingPoliciesLayout
+        buyingPolicies={buyingPolicies}
+        search={search}
+        page={page}
+        total={total}
+      />
+    )}
   </BuyerPortalProvider>
 );
 
-export default AddressPage;
+export default withErrorBoundary(BuyingPoliciesPage, {
+  tags: {
+    component: "BuyingPoliciesPage",
+    errorType: "buying_policies_error",
+  },
+});

package/src/pages/buying-policy-details.tsx

@@ -2,8 +2,17 @@ import { BuyingPolicyDetailsLayout } from "../features/buying-policies/layouts/B
 import { getBuyingPolicyService } from "../features/buying-policies/services";
 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 { GetAddressesServiceProps } from "../features/addresses/services";
@@ -21,6 +30,8 @@ export type BuyingPolicyDetailsPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type BuyingPolicyDetailsPageQuery = GetAddressesServiceProps & {
@@ -29,9 +40,9 @@ export type BuyingPolicyDetailsPageQuery = GetAddressesServiceProps & {
   buyingPolicyId: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<BuyingPolicyDetailsPageQuery>
-): Promise<BuyingPolicyDetailsPageData> {
+): Promise<BuyingPolicyDetailsPageData> => {
   const { contractId, orgUnitId, buyingPolicyId } = 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: "BuyingPolicyDetailsPage",
+  redirectToError: true,
+});
 
-const AddressPage = ({ data, context }: BuyingPolicyDetailsPageData) => (
+const BuyingPolicyDetailsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: BuyingPolicyDetailsPageData) => (
   <BuyerPortalProvider {...context}>
-    <BuyingPolicyDetailsLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <BuyingPolicyDetailsLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default AddressPage;
+export default withErrorBoundary(BuyingPolicyDetailsPage, {
+  tags: {
+    component: "BuyingPolicyDetailsPage",
+    errorType: "buying_policy_details_error",
+  },
+});

package/src/pages/collections.tsx

@@ -5,11 +5,17 @@ import { ScopeCollection } from "../features/collections/types";
 import { getContractDetailsService } from "../features/contracts/services";
 import { ContractData } from "../features/contracts/types";
 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 type { OrgUnitBasicData } from "../features/org-units/types";
@@ -26,6 +32,8 @@ export type CollectionsData = {
     currentOrgUnit: OrgUnitBasicData;
     currentContract: ContractData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type CollectionsQuery = {
@@ -35,9 +43,9 @@ export type CollectionsQuery = {
   page: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<CollectionsQuery>
-): Promise<CollectionsData> {
+): Promise<CollectionsData> => {
   const { contractId, orgUnitId, search = "", page: pageString } = data.query;
 
   const page = getValidPage(pageString);
@@ -89,7 +97,12 @@ export async function loader(
       currentOrgUnit,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "CollectionsPage",
+  redirectToError: true,
+});
 
 const CollectionsPage = ({
   context,
@@ -98,16 +111,27 @@ const CollectionsPage = ({
   isContractEmpty,
   page,
   search,
+  hasError,
+  error,
 }: CollectionsData) => (
   <BuyerPortalProvider {...context}>
-    <CollectionsLayout
-      page={page}
-      search={search}
-      initialCollections={collections}
-      drawerCollections={drawerCollections}
-      isContractEmpty={isContractEmpty}
-    />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <CollectionsLayout
+        page={page}
+        search={search}
+        initialCollections={collections}
+        drawerCollections={drawerCollections}
+        isContractEmpty={isContractEmpty}
+      />
+    )}
   </BuyerPortalProvider>
 );
 
-export default CollectionsPage;
+export default withErrorBoundary(CollectionsPage, {
+  tags: {
+    component: "CollectionsPage",
+    errorType: "collections_error",
+  },
+});

package/src/pages/cost-centers.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 CostCentersPageData = {
     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<CostCentersPageData> {
+): Promise<CostCentersPageData> => {
   const { customerId, cookie, userId, ...clientContext } =
     await getClientContext(data);
 
@@ -51,14 +62,33 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "CostCentersPage",
+  redirectToError: true,
+});
 
-const CostCentersPage = ({ data, context }: CostCentersPageData) => {
+const CostCentersPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: CostCentersPageData) => {
   return (
     <BuyerPortalProvider {...context}>
-      <CustomFieldsLayout data={data} customFieldsLabel="Cost Center" />
+      {hasError ? (
+        <ErrorTabsLayout error={error} />
+      ) : (
+        <CustomFieldsLayout data={data} customFieldsLabel="Cost Center" />
+      )}
     </BuyerPortalProvider>
   );
 };
 
-export default CostCentersPage;
+export default withErrorBoundary(CostCentersPage, {
+  tags: {
+    component: "CostCentersPage",
+    errorType: "cost_centers_error",
+  },
+});

package/src/pages/credit-cards.tsx

@@ -3,8 +3,17 @@ import { CreditCardLayout } from "../features/credit-cards/layouts";
 import { getCreditCardsListService } from "../features/credit-cards/services";
 import { CreditCardData } from "../features/credit-cards/types";
 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 CreditCardPageData = {
     currentOrgUnit: OrgUnitBasicData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type CreditCardPageQuery = {
@@ -27,9 +38,9 @@ export type CreditCardPageQuery = {
   contractId: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<CreditCardPageQuery>
-): Promise<CreditCardPageData> {
+): Promise<CreditCardPageData> => {
   const { contractId, orgUnitId } = data.query;
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
@@ -61,12 +72,31 @@ export async function loader(
       currentContract: contract,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "CreditCardsPage",
+  redirectToError: true,
+});
 
-const CreditCardsPage = ({ data, context }: CreditCardPageData) => (
+const CreditCardsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: CreditCardPageData) => (
   <BuyerPortalProvider {...context}>
-    <CreditCardLayout data={data} />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <CreditCardLayout data={data} />
+    )}
   </BuyerPortalProvider>
 );
 
-export default CreditCardsPage;
+export default withErrorBoundary(CreditCardsPage, {
+  tags: {
+    component: "CreditCardsPage",
+    errorType: "credit_cards_error",
+  },
+});