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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.115",
+	"version": "1.1.116-poc",
 	"description": "A plugin for faststore with buyer portal",
 	"main": "index.js",
 	"scripts": {

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/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/useCookieMonitor.ts

@@ -12,7 +12,6 @@ import { AUT_COOKIE_KEY } from "../utils/constants";
  */
 export const useCookieMonitor = () => {
   const [hasCookie, setHasCookie] = useState(false);
-  const [timedOut, setTimedOut] = useState(false);
 
   useEffect(() => {
     const checkCookie = () => {
@@ -59,10 +58,7 @@ export const useCookieMonitor = () => {
 
       // Cleanup after 5 seconds max
       const timeout = setTimeout(() => {
-        console.log(
-          "[useCookieMonitor] Polling timeout reached (5s) - cookie never appeared"
-        );
-        setTimedOut(true);
+        console.log("[useCookieMonitor] Polling timeout reached (5s)");
         clearInterval(interval);
       }, 5000);
 
@@ -73,5 +69,5 @@ export const useCookieMonitor = () => {
     }
   }, []);
 
-  return { hasCookie, timedOut };
+  return hasCookie;
 };

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

@@ -18,6 +18,7 @@ export type ContractTabsLayoutProps = {
     image?: ReactNode;
     name: string;
     role?: string;
+    id: string;
   };
   loading?: boolean;
   children?: ReactNode;
@@ -29,8 +30,9 @@ export const ContractTabsLayout = ({
   children,
   orgUnitId,
   contractId,
+  person,
 }: ContractTabsLayoutProps) => {
-  const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
+  const { currentOrgUnit, currentContract } = useBuyerPortal();
 
   const verticalLinks = getContractSettingsLinks({
     contractId: currentContract?.id ?? contractId ?? "",
@@ -43,9 +45,9 @@ export const ContractTabsLayout = ({
         orgUnit={currentOrgUnit}
         pageName={pageName}
         person={{
-          name: currentUser?.name ?? "",
-          role: currentUser?.role ?? "",
-          id: currentUser?.id ?? "",
+          name: person.name,
+          role: person.role,
+          id: person.id,
         }}
         loading={loading}
       />

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

@@ -82,6 +82,7 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
             image: undefined,
             name: user?.name ?? "",
             role: user?.role ?? "",
+            id: user?.id ?? "",
           }}
         >
           <ErrorTabsLayoutContent title={pageTitle} error={error} />

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

@@ -78,6 +78,7 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
             image: undefined,
             name: "",
             role: "",
+            id: "",
           }}
           loading={true}
         >
@@ -100,33 +101,7 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
       );
 
     case "OrgUnitDetailsLayout":
-      return (
-        <OrgUnitsDetailsLayout
-          loading={true}
-          data={{
-            contracts: [],
-            orgUnit: {
-              contractMode: "Single",
-              customerGroup: { customerIds: [] },
-              id: routeParams.orgUnitId,
-              name: "",
-              path: {
-                ids: "",
-                names: "",
-              },
-            },
-            user: {
-              name: "",
-              roles: [],
-              id: "",
-              orgUnit: {
-                id: routeParams.orgUnitId,
-                name: "",
-              },
-            },
-          }}
-        />
-      );
+      return <OrgUnitsDetailsLayout loading={true} orgUnitId="" userId="" />;
 
     default:
       return <LoadingTabsLayoutContent />;

package/src/features/shared/types/AuthRouteProps.ts

@@ -1,11 +1,5 @@
 import { ClientContext } from "../utils";
 
 export type AuthRouteProps<T> =
-  | { authorized: true; data: T; clientContext: ClientContext; loading: false }
-  | { authorized: false; loading: false }
-  | {
-      authorized: false;
-      loading: true;
-      data?: Partial<T>;
-      clientContext?: ClientContext;
-    };
+  | { authorized: true; data: T; clientContext: ClientContext }
+  | { authorized: false };

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

@@ -1,83 +1,31 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { useCookieMonitor } from "../hooks/useCookieMonitor";
-
 import type { AuthRouteProps } from "../types";
 
 /**
- * HOC that checks only for authorization.
- * Now handles loading state for pre-fetch scenarios.
+ * HOC that checks only for authorization
  */
 export const withAuth = <T extends Record<string, unknown>>(
   Component: ComponentType<T>
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
-    const reloadAttemptedRef = useRef(false);
-
-    // Debug logging
-    useEffect(() => {
-      console.log("[withAuth] Props state:", {
-        authorized: props?.authorized,
-        loading: props?.loading,
-        hasCookie,
-        timedOut,
-        reloadAttempted: reloadAttemptedRef.current,
-      });
-    }, [props?.authorized, props?.loading, hasCookie, timedOut]);
-
-    useEffect(() => {
-      // If not authorized and not loading, reload the page
-      if (
-        !props?.authorized &&
-        !props?.loading &&
-        !reloadAttemptedRef.current
-      ) {
-        console.log("[withAuth] Reloading: not authorized and not loading");
-        reloadAttemptedRef.current = true;
-        // Use replace to bypass Next.js data cache
-        router.replace(router.asPath);
-      }
-    }, [props?.authorized, props?.loading, router]);
 
     useEffect(() => {
-      if (props?.loading && hasCookie && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuth] Cookie available, performing hard reload to bypass cache"
-        );
-        reloadAttemptedRef.current = true;
-        // Hard reload to completely bypass Next.js cache
-        if (typeof window !== "undefined") {
-          window.location.href = router.asPath;
-        }
+      // If not authorized, reload the page
+      if (!props?.authorized) {
+        router.reload();
       }
-    }, [props?.loading, hasCookie, router]);
+    }, [props?.authorized, router]);
 
-    useEffect(() => {
-      // If we're in loading state and timeout reached, redirect to home
-      if (props?.loading && timedOut && !reloadAttemptedRef.current) {
-        console.log("[withAuth] Cookie timeout - redirecting to home page");
-        reloadAttemptedRef.current = true;
-        router.push("/");
-      }
-    }, [props?.loading, timedOut, router]);
-
-    // Always render the component, but pass loading state
-    // This allows components to handle their own loading states
-    if (!props?.authorized && !props?.loading) {
-      // Not authorized and not loading = permanently denied
+    // If not authorized, render nothing
+    if (!props?.authorized) {
       return null;
     }
 
-    // Render with whatever data we have (might be empty/partial if loading)
-    const componentProps = {
-      ...(props?.data || ({} as T)),
-      loading: props?.loading || false,
-    } as T & { loading: boolean };
-
-    return <Component {...componentProps} />;
+    // If authorized, render the component with the data
+    return <Component {...(props.data as T)} />;
   };
 };

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

@@ -1,6 +1,5 @@
 import { validateAccessService } from "../services";
 
-import { getAuthCookie } from "./cookie";
 import { ClientContext, getClientContext } from "./getClientContext";
 
 import type { AuthRouteProps } from "../types";
@@ -9,57 +8,31 @@ import type { LoaderData } from "../types";
 /**
  * Utility function to encapsulate access validation in loaders.
  * Similar to withAuthProvider but for server-side usage.
- *
- * Now supports a loading state for when cookies are not yet available during pre-fetch.
  */
 export const withAuthLoader = async <T>(
   data: LoaderData,
   dataLoader: (clientContext: ClientContext) => Promise<T>
 ): Promise<AuthRouteProps<T>> => {
   try {
-    // Check if auth cookie exists before proceeding
-    const authCookie = getAuthCookie(data);
-
-    console.log("[withAuthLoader] Cookie check:", {
-      hasCookie: !!authCookie,
-      cookieLength: authCookie?.length,
-    });
-
-    if (!authCookie || authCookie === "") {
-      console.log("[withAuthLoader] Returning loading state (no cookie)");
-      return {
-        authorized: false,
-        loading: true,
-      };
-    }
-
     const { cookie, userId, ...clientContext } = await getClientContext(data);
 
     const hasAccess = await validateAccessService({ cookie });
 
-    console.log("[withAuthLoader] Access validation result:", hasAccess);
-
     if (!hasAccess) {
-      console.log("[withAuthLoader] Access denied, redirecting to /");
       data.res?.writeHead(302, { Location: "/" });
       data.res?.end();
 
       return {
         authorized: false,
-        loading: false,
       };
     }
 
     const pageData = await dataLoader({ cookie, userId, ...clientContext });
 
-    console.log(
-      "[withAuthLoader] Successfully loaded data, returning authorized"
-    );
     return {
       authorized: true,
       data: pageData,
       clientContext: { cookie, userId, ...clientContext },
-      loading: false,
     };
   } catch (error) {
     console.error("[withAuthLoader] Auth validation failed:", error);
@@ -69,7 +42,6 @@ export const withAuthLoader = async <T>(
 
     return {
       authorized: false,
-      loading: false,
     };
   }
 };

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

@@ -1,107 +1,37 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
 import { BuyerPortalProvider } from "../components";
-import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
 import type { ClientContext } from "./getClientContext";
 
 /**
- * HOC que encapsula lógica de autenticação e provider.
- * Now handles loading state for pre-fetch scenarios.
- * Monitors cookie availability and reloads when cookie becomes available.
+ * HOC que encapsula lógica de autenticação e provider
  */
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
 ) => {
   return function WrappedPage(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
-    const reloadAttemptedRef = useRef(false);
-    const isProduction = process.env.NODE_ENV === "production";
 
-    // Debug logging (only in development or when needed)
     useEffect(() => {
-      if (!isProduction) {
-        console.log("[withAuthProvider] Props state:", {
-          authorized: props?.authorized,
-          loading: props?.loading,
-          hasCookie,
-          timedOut,
-          reloadAttempted: reloadAttemptedRef.current,
-          routerPath: router.asPath,
-        });
+      // Se não está autorizado, recarrega a página
+      if (!props?.authorized) {
+        router.reload();
       }
-    }, [
-      props?.authorized,
-      props?.loading,
-      hasCookie,
-      timedOut,
-      router.asPath,
-      isProduction,
-    ]);
+    }, [props?.authorized, router]);
 
-    useEffect(() => {
-      // Se não está autorizado e não está carregando, recarrega a página
-      if (
-        !props?.authorized &&
-        !props?.loading &&
-        !reloadAttemptedRef.current
-      ) {
-        console.log(
-          "[withAuthProvider] Reloading: not authorized and not loading"
-        );
-        reloadAttemptedRef.current = true;
-        // Use replace to bypass Next.js data cache
-        router.replace(router.asPath);
-      }
-    }, [props?.authorized, props?.loading, router]);
-
-    useEffect(() => {
-      // If we're in loading state and cookie becomes available, do hard reload
-      if (props?.loading && hasCookie && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuthProvider] Cookie available, performing hard reload to bypass cache"
-        );
-        reloadAttemptedRef.current = true;
-        // Hard reload to completely bypass Next.js cache
-        if (typeof window !== "undefined") {
-          window.location.href = router.asPath;
-        }
-      }
-    }, [props?.loading, hasCookie, router]);
-
-    useEffect(() => {
-      // If we're in loading state and timeout reached, redirect to home
-      if (props?.loading && timedOut && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuthProvider] Cookie timeout - redirecting to home page"
-        );
-        reloadAttemptedRef.current = true;
-        router.push("/");
-      }
-    }, [props?.loading, timedOut, router]);
-
-    // Always render the component, but pass loading state
-    // This allows components to handle their own loading states
-    if (!props?.authorized && !props?.loading) {
-      // Not authorized and not loading = permanently denied
+    // Se não está autorizado, não renderiza nada
+    if (!props?.authorized) {
       return null;
     }
 
-    // Render with whatever data we have (might be empty/partial if loading)
-    const componentProps = {
-      ...(props?.data || ({} as T)),
-      loading: props?.loading || false,
-    } as T & { loading: boolean };
-
-    const clientContext = props?.clientContext || ({} as ClientContext);
-
+    // Se autorizado, renderiza o componente envolvido no provider
     return (
-      <BuyerPortalProvider clientContext={clientContext}>
-        <Component {...componentProps} clientContext={clientContext} />
+      <BuyerPortalProvider clientContext={props?.clientContext}>
+        <Component {...props.data} clientContext={props?.clientContext} />
       </BuyerPortalProvider>
     );
   };

package/src/pages/org-unit-details.tsx

@@ -1,49 +1,25 @@
-import { getContractsByOrgUnitIdService } from "../features/contracts/services";
 import { OrgUnitsDetailsLayout } from "../features/org-units/layouts";
-import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { withErrorBoundary } from "../features/shared/components";
-import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
-import {
-  type ClientContext,
-  withLoaderErrorBoundary,
-  withAuthLoader,
-  withProviders,
-} from "../features/shared/utils";
-import { getUserByIdService } from "../features/users/services";
+import { withAuthLoader, withProviders } from "../features/shared/utils";
+import { ClientContext } from "../features/shared/utils/getClientContext";
 
-import type { ContractData } from "../features/contracts/types";
-import type { OrgUnitBasicData } from "../features/org-units/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
-import type { UserData } from "../features/users/types";
 
 export type OrgUnitDetailsPageData = {
   data: {
-    orgUnit: OrgUnitBasicData;
-    contracts: ContractData[];
-    user: UserData | null;
+    orgUnitId: string;
+    userId: string;
   };
   context: {
     clientContext: ClientContext;
   };
-  hasError?: boolean;
-  error?: {
-    error: {
-      message: string;
-      name: string;
-      stack?: string;
-    };
-    tags: {
-      component: string;
-      errorType: string;
-    };
-  };
 };
 
 type OrgUnitDetailsPageQuery = {
   orgUnitId: string;
 };
 
-const loaderFunction = async (
+export const loader = async (
   data: LoaderData<OrgUnitDetailsPageQuery>
 ): Promise<AuthRouteProps<OrgUnitDetailsPageData>> => {
   const { orgUnitId } = data.query;
@@ -53,23 +29,10 @@ const loaderFunction = async (
   }
 
   return withAuthLoader(data, async ({ cookie, userId, ...clientContext }) => {
-    const orgUnit = await getOrgUnitBasicDataService({
-      id: orgUnitId,
-      cookie,
-    });
-
-    const user = await getUserByIdService({ orgUnitId, userId, cookie });
-
-    const contracts = await getContractsByOrgUnitIdService({
-      orgUnitId,
-      cookie,
-    });
-
     return {
       data: {
-        contracts,
-        orgUnit,
-        user,
+        orgUnitId,
+        userId,
       },
       context: {
         clientContext: { cookie, userId, ...clientContext },
@@ -78,24 +41,9 @@ const loaderFunction = async (
   });
 };
 
-export const loader = withLoaderErrorBoundary(loaderFunction, {
-  componentName: "OrgUnitDetailsPage",
-  redirectToError: true,
-});
-
-const OrgUnitDetailsPage = ({
-  data,
-  hasError,
-  error,
-}: OrgUnitDetailsPageData) => {
+const OrgUnitDetailsPage = ({ data }: OrgUnitDetailsPageData) => {
   return (
-    <>
-      {hasError ? (
-        <ErrorTabsLayout error={error} />
-      ) : (
-        <OrgUnitsDetailsLayout data={data} />
-      )}
-    </>
+    <OrgUnitsDetailsLayout orgUnitId={data.orgUnitId} userId={data.userId} />
   );
 };
 

package/src/pages/profile.tsx

@@ -1,98 +1,55 @@
-import { getContractDetailsService } from "../features/contracts/services";
-import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { ProfileLayout } from "../features/profile/layouts";
 import { withErrorBoundary } from "../features/shared/components";
-import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
-import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
-  withLoaderErrorBoundary,
-  withAuthLoader,
   withProviders,
+  withAuthLoader,
 } from "../features/shared/utils";
-import { getUserByIdService } from "../features/users/services";
 
-import type { ContractData } from "../features/contracts/types";
-import type { OrgUnitBasicData } from "../features/org-units/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
-import type { UserData } from "../features/users/types";
 
 export type ProfilePageData = {
-  data: ContractData | null;
+  data: {
+    contractId: string;
+    orgUnitId: string;
+    userId: string;
+  };
   context: {
     clientContext: ClientContext;
-    currentOrgUnit: OrgUnitBasicData | null;
-    currentContract: ContractData | null;
-    currentUser: UserData | null;
   };
-  hasError?: boolean;
-  error?: ErrorBoundaryProps;
 };
 
 export type ProfilePageQuery = {
   contractId: string;
   orgUnitId: string;
+  userId: string;
 };
 
-export async function loaderFunction(
+export const loader = async (
   data: LoaderData<ProfilePageQuery>
-): Promise<AuthRouteProps<ProfilePageData>> {
+): Promise<AuthRouteProps<ProfilePageData>> => {
   const { contractId, orgUnitId } = data.query;
 
-  return withAuthLoader(
-    data,
-    async ({ customerId, cookie, userId, ...clientContext }) => {
-      if (!contractId || !orgUnitId) {
-        return {
-          data: null,
-          context: {
-            clientContext: { customerId, cookie, userId, ...clientContext },
-            currentOrgUnit: null,
-            currentContract: null,
-            currentUser: null,
-          },
-        };
-      }
-
-      const [orgUnit, contract, user] = await Promise.all([
-        getOrgUnitBasicDataService({
-          cookie,
-          id: orgUnitId,
-        }),
-        getContractDetailsService({
-          contractId,
-          cookie,
-          unitId: orgUnitId,
-        }),
-        getUserByIdService({ orgUnitId, userId, cookie }),
-      ]);
-
-      return {
-        data: contract,
-        context: {
-          clientContext: { customerId, cookie, userId, ...clientContext },
-          currentOrgUnit: orgUnit,
-          currentContract: contract,
-          currentUser: user,
-        },
-      };
-    }
-  );
-}
-
-export const loader = withLoaderErrorBoundary(loaderFunction, {
-  componentName: "ProfilePage",
-  redirectToError: true,
-});
+  return withAuthLoader(data, async ({ cookie, userId, ...clientContext }) => {
+    return {
+      data: {
+        contractId,
+        orgUnitId,
+        userId,
+      },
+      context: {
+        clientContext: { cookie, userId, ...clientContext },
+      },
+    };
+  });
+};
 
-const ProfilePage = ({ data, hasError, error }: ProfilePageData) => (
-  <>
-    {hasError ? (
-      <ErrorTabsLayout error={error} />
-    ) : (
-      <ProfileLayout data={data} />
-    )}
-  </>
+const ProfilePage = ({ data }: ProfilePageData) => (
+  <ProfileLayout
+    orgUnitId={data.orgUnitId}
+    contractId={data.contractId}
+    userId={data.userId}
+  />
 );
 
 export default withProviders(