@vtex/faststore-plugin-buyer-portal 1.1.115 → 1.1.116-poc-1

package/package.json

@@ -1,44 +1,44 @@
 {
-	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.115",
-	"description": "A plugin for faststore with buyer portal",
-	"main": "index.js",
-	"scripts": {
-		"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-		"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
-		"prepare": "husky"
-	},
-	"lint-staged": {
-		"*.{js,jsx,ts,tsx}": [
-			"eslint --fix"
-		]
-	},
-	"dependencies": {
-		"@types/react-dom": "^19.0.3",
-		"react-dom": "^19.0.0"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.29.0",
-		"@faststore/core": "^3.41.5",
-		"@faststore/ui": "^3.41.5",
-		"@types/react": "^18.2.42",
-		"cypress": "13",
-		"eslint": "^9.29.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-prettier": "^5.5.1",
-		"eslint-plugin-react": "^7.37.5",
-		"globals": "^16.2.0",
-		"husky": "^9.1.7",
-		"lint-staged": "^16.1.2",
-		"next": "13.5.7",
-		"typescript": "4.7.3",
-		"typescript-eslint": "^8.35.0"
-	},
-	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"license": "MIT",
-	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "name": "@vtex/faststore-plugin-buyer-portal",
+  "version": "1.1.116-poc-1",
+  "description": "A plugin for faststore with buyer portal",
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "dependencies": {
+    "@types/react-dom": "^19.0.3",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "@faststore/core": "^3.41.5",
+    "@faststore/ui": "^3.41.5",
+    "@types/react": "^18.2.42",
+    "cypress": "13",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.2.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "next": "13.5.7",
+    "typescript": "4.7.3",
+    "typescript-eslint": "^8.35.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "license": "MIT",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -124,6 +124,7 @@ export const AddressDetailsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-address-details-section>

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -114,6 +114,7 @@ export const AddressLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-addresses-section>

package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx

@@ -151,6 +151,7 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <div data-fs-bp-budgets-details-layout>

package/src/features/collections/layouts/CollectionsLayout/CollectionsLayout.tsx

@@ -72,6 +72,7 @@ export const CollectionsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-collections-container>

package/src/features/contracts/hooks/index.ts

@@ -1 +1,3 @@
 export { useUpdateContractStatus } from "./useUpdateContractStatus";
+export { useContractsByOrgUnitId } from "./useContractsByOrgUnitId";
+export { useContractDetails } from "./useContractDetails";

package/src/features/contracts/hooks/useContractDetails.ts

@@ -0,0 +1,22 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getContractDetailsService } from "../services";
+
+export const useContractDetails = (
+  contractId: string,
+  unitId: string,
+  options?: QueryOptions<AwaitedType<typeof getContractDetailsService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/contract-details/${unitId}`,
+    ({ cookie }) =>
+      getContractDetailsService({ contractId, cookie, unitId: unitId }),
+    options
+  );
+
+  return {
+    contract: data,
+    hasContractError: error,
+    isContractLoading: isLoading,
+    refetchContract: refetch,
+  };
+};

package/src/features/contracts/hooks/useContractsByOrgUnitId.ts

@@ -0,0 +1,20 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getContractsByOrgUnitIdService } from "../services";
+
+export const useContractsByOrgUnitId = (
+  orgUnitId: string,
+  options?: QueryOptions<AwaitedType<typeof getContractsByOrgUnitIdService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/contracts-by-org-unit-id/${orgUnitId}`,
+    ({ cookie }) => getContractsByOrgUnitIdService({ orgUnitId, cookie }),
+    options
+  );
+
+  return {
+    contracts: data ?? [],
+    hasContractsError: error,
+    isContractsLoading: isLoading,
+    refetchContracts: refetch,
+  };
+};

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -126,6 +126,7 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-credit-card-section>

package/src/features/custom-fields/layouts/CustomFieldsLayout/CustomFieldsLayout.tsx

@@ -214,6 +214,7 @@ export const CustomFieldsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-custom-field-container>

package/src/features/org-units/hooks/index.ts

@@ -5,3 +5,4 @@ export { useUpdateOrgUnit } from "./useUpdateOrgUnit";
 export { useChildrenOrgUnits } from "./useChildrenOrgUnits";
 export { useOrgUnitByUser } from "./useOrgUnitByUser";
 export { useSearchOrgUnits } from "./useSearchOrgUnits";
+export { useOrgUnitBasicData } from "./useOrgUnitBasicData";

package/src/features/org-units/hooks/useOrgUnitBasicData.ts

@@ -0,0 +1,20 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getOrgUnitBasicDataService } from "../services";
+
+export const useOrgUnitBasicData = (
+  id: string,
+  options?: QueryOptions<AwaitedType<typeof getOrgUnitBasicDataService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/org-unit-basic-data/${id}`,
+    ({ cookie }) => getOrgUnitBasicDataService({ id, cookie }),
+    options
+  );
+
+  return {
+    orgUnit: data,
+    hasOrgUnitError: error,
+    isOrgUnitLoading: isLoading,
+    refetchOrgUnit: refetch,
+  };
+};

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -5,6 +5,7 @@ import {
   Skeleton,
 } from "@faststore/ui";
 
+import { useContractsByOrgUnitId } from "../../../contracts/hooks";
 import {
   BasicCard,
   BasicDropdownMenu,
@@ -21,13 +22,14 @@ import {
   getOrganizationSettingsLinks,
 } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { useGetUserById } from "../../../users/hooks";
 import {
   AddAllToOrgUnitDropdown,
   OrgUnitBreadcrumb,
   OrgUnitDetailsNavbar,
   OrgUnitsDropdownMenu,
 } from "../../components";
-import { useOrgUnitByUser } from "../../hooks";
+import { useOrgUnitBasicData, useOrgUnitByUser } from "../../hooks";
 
 import {
   MAX_DESKTOP_BREADCRUMB_ITEMS,
@@ -35,28 +37,29 @@ import {
   QUERY_TABLET,
 } from "./utils";
 
-import type { ContractData } from "../../../contracts/types";
-import type { UserData } from "../../../users/types";
-import type { OrgUnitBasicData } from "../../types";
-
 export type OrgUnitsDetailsLayoutProps = {
-  data: {
-    orgUnit: OrgUnitBasicData;
-    contracts: ContractData[];
-    user: UserData | null;
-  };
+  orgUnitId: string;
+  userId: string;
   loading?: boolean;
 };
 
 export const OrgUnitsDetailsLayout = ({
-  data: { orgUnit, contracts, user },
-  loading = false,
+  orgUnitId,
+  userId,
+  loading = true,
 }: OrgUnitsDetailsLayoutProps) => {
+  const { orgUnit, isOrgUnitLoading } = useOrgUnitBasicData(orgUnitId);
+
+  const { contracts, isContractsLoading } = useContractsByOrgUnitId(orgUnitId);
+
+  const { user, isUserLoading } = useGetUserById({ orgUnitId, userId });
+
+  loading = isOrgUnitLoading || isContractsLoading || isUserLoading;
   const isMobile = useMediaQuery(QUERY_TABLET);
 
   const isSingleContract = contracts.length <= 1;
 
-  const { orgUnit: userUnit } = useOrgUnitByUser(user?.id ?? "");
+  const { orgUnit: userUnit } = useOrgUnitByUser(userId);
 
   const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
 
@@ -67,7 +70,7 @@ export const OrgUnitsDetailsLayout = ({
   const breadcrumbList = orgUnitList.map((orgUnitId, index) => ({
     unitId: orgUnitId,
     item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
-    name: orgUnit.path.names.split("/")[index],
+    name: orgUnit?.path.names.split("/")[index] ?? "",
     position: index + 1,
     enabled: index >= userUnitIndex,
   }));
@@ -76,7 +79,7 @@ export const OrgUnitsDetailsLayout = ({
     <GlobalLayout>
       {/* TODO: Add person here */}
       <OrgUnitDetailsNavbar
-        orgName={orgUnit.name}
+        orgName={orgUnit?.name ?? ""}
         person={{
           name: user?.name ?? "",
           role: user?.roles?.[0] ?? "",
@@ -107,8 +110,8 @@ export const OrgUnitsDetailsLayout = ({
             <BasicDropdownMenu.Trigger />
             <OrgUnitsDropdownMenu
               isComplete={false}
-              id={orgUnit.id}
-              name={orgUnit.name}
+              id={orgUnitId}
+              name={orgUnit?.name ?? ""}
             />
           </Dropdown>
           <Dropdown>
@@ -118,8 +121,8 @@ export const OrgUnitsDetailsLayout = ({
             <AddAllToOrgUnitDropdown
               isSingleContract={isSingleContract}
               contractId={contracts[0]?.id}
-              unitId={orgUnit?.id}
-              unitName={orgUnit?.name}
+              unitId={orgUnitId}
+              unitName={orgUnit?.name ?? ""}
             />
           </Dropdown>
         </HeaderInside>
@@ -129,13 +132,13 @@ export const OrgUnitsDetailsLayout = ({
               data-fs-bp-contracts-settings-card
               footerMessage="Manage contract settings"
               footerLink={buyerPortalRoutes.profileDetails({
-                orgUnitId: orgUnit.id,
+                orgUnitId: orgUnitId,
                 contractId: contracts[0]?.id ?? "",
               })}
               enableFooter
             >
-              <LetterHighlight letter={orgUnit.name[0]} />
-              <VerticalNav.Menu title={orgUnit.name} loading={loading}>
+              <LetterHighlight letter={orgUnit?.name?.[0] ?? ""} />
+              <VerticalNav.Menu title={orgUnit?.name ?? ""} loading={loading}>
                 {loading
                   ? Array(8)
                       .fill(null)
@@ -150,7 +153,7 @@ export const OrgUnitsDetailsLayout = ({
                         </li>
                       ))
                   : getContractSettingsLinks({
-                      orgUnitId: orgUnit.id,
+                      orgUnitId: orgUnitId,
                       contractId: contracts[0]?.id ?? "",
                     }).map(({ name, link }) => (
                       <VerticalNav.Link key={name} link={link}>
@@ -177,7 +180,7 @@ export const OrgUnitsDetailsLayout = ({
                     />
                   }
                   href={buyerPortalRoutes.profileDetails({
-                    orgUnitId: orgUnit.id,
+                    orgUnitId: orgUnitId,
                     contractId: contract.id,
                   })}
                   menu={
@@ -196,12 +199,12 @@ export const OrgUnitsDetailsLayout = ({
             data-fs-bp-organizations-settings-card
             footerMessage="Manage organization settings"
             footerLink={buyerPortalRoutes.users({
-              orgUnitId: orgUnit.id,
+              orgUnitId: orgUnitId,
             })}
             enableFooter
           >
             <VerticalNav.Menu title="Organization">
-              {getOrganizationSettingsLinks(orgUnit.id).map((option) => (
+              {getOrganizationSettingsLinks(orgUnitId).map((option) => (
                 <VerticalNav.Link key={option.name} link={option.link}>
                   {option.name}
                 </VerticalNav.Link>
@@ -212,14 +215,14 @@ export const OrgUnitsDetailsLayout = ({
             data-fs-bp-compliance-settings-card
             footerMessage="Manage finance and compliance settings"
             footerLink={buyerPortalRoutes.buyingPolicies({
-              orgUnitId: orgUnit.id,
+              orgUnitId: orgUnitId,
               contractId: contracts[0]?.id,
             })}
             enableFooter
           >
             <VerticalNav.Menu title="Finance and Compliance">
               {getFinanceSettingsLinks({
-                orgUnitId: orgUnit.id,
+                orgUnitId: orgUnitId,
                 contractId: contracts[0]?.id ?? "",
               }).map((option) => (
                 <VerticalNav.Link key={option.name} link={option.link}>

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -168,6 +168,7 @@ export const PaymentMethodsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
+          id: user?.id ?? "",
         }}
       >
         <section data-fs-payment-methods-section>

package/src/features/profile/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,18 +1,33 @@
+import { useContractDetails } from "../../../contracts/hooks";
+import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { HeaderInside } from "../../../shared/components";
-import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout, ContractTabsLayout } from "../../../shared/layouts";
-
-import type { ContractData } from "../../../contracts/types";
+import { useGetUserById } from "../../../users/hooks";
 
 export type ProfileLayoutProps = {
-  data: ContractData | null;
+  orgUnitId: string;
+  contractId: string;
+  userId: string;
 };
 
-export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
-  const { currentOrgUnit: orgUnit, currentUser: user } = useBuyerPortal();
+export const ProfileLayout = ({
+  orgUnitId,
+  contractId,
+  userId,
+}: ProfileLayoutProps) => {
+  const { orgUnit, isOrgUnitLoading } = useOrgUnitBasicData(orgUnitId);
+
+  const { contract, isContractLoading } = useContractDetails(
+    contractId,
+    orgUnitId
+  );
+
+  const { user, isUserLoading } = useGetUserById({ orgUnitId, userId });
+
+  const loading = isContractLoading || isOrgUnitLoading || isUserLoading;
 
-  const creationDate = data
-    ? new Date(data.creationDate).toLocaleDateString("en-US", {
+  const creationDate = contract
+    ? new Date(contract.creationDate).toLocaleDateString("en-US", {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -23,30 +38,32 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
     <GlobalLayout>
       <ContractTabsLayout
         orgUnitName={orgUnit?.name ?? ""}
-        orgUnitId={orgUnit?.id ?? ""}
-        contractName={data?.name ?? ""}
-        contractId={data?.id ?? ""}
+        orgUnitId={orgUnitId}
+        contractName={contract?.name ?? ""}
+        contractId={contract?.id ?? ""}
         pageName="Contract"
         person={{
           image: undefined,
           name: user?.name ?? "",
-          role: user?.role ?? "",
+          role: user?.roles?.[0] ?? "",
+          id: userId,
         }}
+        loading={loading}
       >
         <section data-fs-bp-profile>
           <HeaderInside title="Profile" />
 
-          {data && (
+          {contract && (
             <div data-fs-bp-profile-details>
               <span data-fs-bp-profile-details-title>Details</span>
 
-              {!!data.name && (
+              {!!contract.name && (
                 <>
                   <hr data-fs-bp-profile-divider />
                   <div data-fs-bp-profile-details-row>
                     <span data-fs-bp-profile-details-row-label>Name</span>
                     <span data-fs-bp-profile-details-row-value>
-                      {data.name}
+                      {contract.name}
                     </span>
                   </div>
                 </>
@@ -57,7 +74,7 @@ export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
               <div data-fs-bp-profile-details-row>
                 <span data-fs-bp-profile-details-row-label>Email</span>
                 <span data-fs-bp-profile-details-row-value>
-                  <a href={`mailto:${data.email}`}>{data.email}</a>
+                  <a href={`mailto:${contract.email}`}>{contract.email}</a>
                 </span>
               </div>
 

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

@@ -1,4 +1,4 @@
-// import { isDevelopment } from "../../utils/environment";
+import { isDevelopment } from "../../utils/environment";
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
@@ -20,18 +20,17 @@ export default function Error({ error }: ErrorProps) {
       <button data-fs-bp-error-button onClick={() => window.location.reload()}>
         Try again
       </button>
-      <div data-fs-bp-error-details>
-        <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?.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>
+      {isDevelopment() ? (
+        <div data-fs-bp-error-details>
+          <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?.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>
+        </div>
+      ) : null}
     </div>
   );
 }

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

@@ -1,22 +1,47 @@
 import { Skeleton } from "@faststore/ui";
 
+import { useBuyerPortal } from "../../hooks";
+import { BaseTabsLayout } from "../../layouts";
+
 /**
  * PageLoader component displays skeleton loaders while page data is being fetched.
  * Used when cookies are not yet available during pre-fetch scenarios.
  */
 export const PageLoader = () => {
+  const { currentOrgUnit, currentUser } = useBuyerPortal();
   return (
-    <div data-fs-bp-page-loader>
-      <div data-fs-bp-page-loader-header>
-        <Skeleton size={{ width: "12rem", height: "2rem" }} />
-        <Skeleton size={{ width: "8rem", height: "1.5rem" }} />
-      </div>
+    <BaseTabsLayout data-fs-bp-page-loader>
+      <BaseTabsLayout.Navbar
+        orgUnit={currentOrgUnit}
+        pageName="Loading"
+        person={{
+          name: currentUser?.name ?? "",
+          role: currentUser?.role ?? "",
+          id: currentUser?.id ?? "",
+        }}
+        loading={true}
+      />
+      <BaseTabsLayout.Container>
+        <BaseTabsLayout.SidebarMenu
+          verticalLinks={[]}
+          showLetterHighlight={false}
+          loading={true}
+        />
+        <BaseTabsLayout.Content>
+          <div data-fs-bp-page-loader>
+            <div data-fs-bp-page-loader-header>
+              <Skeleton size={{ width: "12rem", height: "2rem" }} />
+              <Skeleton size={{ width: "8rem", height: "1.5rem" }} />
+            </div>
 
-      <div data-fs-bp-page-loader-content>
-        <Skeleton size={{ width: "100%", height: "4rem" }} />
-        <Skeleton size={{ width: "100%", height: "8rem" }} />
-        <Skeleton size={{ width: "100%", height: "8rem" }} />
-      </div>
-    </div>
+            <div data-fs-bp-page-loader-content>
+              <Skeleton size={{ width: "100%", height: "4rem" }} />
+              <Skeleton size={{ width: "100%", height: "8rem" }} />
+              <Skeleton size={{ width: "100%", height: "8rem" }} />
+            </div>
+          </div>
+        </BaseTabsLayout.Content>
+      </BaseTabsLayout.Container>
+    </BaseTabsLayout>
   );
 };

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,16 +15,15 @@ type WithErrorBoundaryOptions = {
 
 export function withErrorBoundary<P extends Record<string, unknown>>(
   WrappedComponent: React.ComponentType<P>,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _options: WithErrorBoundaryOptions = {}
+  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/hooks/index.ts

@@ -13,3 +13,4 @@ export { useAddToScope } from "./useAddToScope";
 export { useRemoveFromScope } from "./useRemoveFromScope";
 export { usePageItems, type UsePageItemsProps } from "./usePageItems";
 export { useRouterLoading } from "./useRouterLoading";
+export { useAuth, type UseAuthResult } from "./useAuth";