@vtex/faststore-plugin-buyer-portal 1.1.116-poc-9 → 1.2.1

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

@@ -2,9 +2,8 @@ import type { ReactNode } from "react";
 
 import { DropdownItem } from "@faststore/ui";
 
-import { useContractDetails } from "../../../contracts/hooks";
-import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { Icon } from "../../components";
+import { useBuyerPortal } from "../../hooks";
 import { getContractSettingsLinks } from "../../utils";
 import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
 
@@ -19,7 +18,6 @@ export type ContractTabsLayoutProps = {
     image?: ReactNode;
     name: string;
     role?: string;
-    id: string;
   };
   loading?: boolean;
   children?: ReactNode;
@@ -31,26 +29,23 @@ export const ContractTabsLayout = ({
   children,
   orgUnitId,
   contractId,
-  person,
 }: ContractTabsLayoutProps) => {
-  const { orgUnit } = useOrgUnitBasicData(orgUnitId);
-
-  const { contract } = useContractDetails(contractId, orgUnitId);
+  const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
 
   const verticalLinks = getContractSettingsLinks({
-    contractId: contractId,
-    orgUnitId: orgUnitId,
+    contractId: currentContract?.id ?? contractId ?? "",
+    orgUnitId: currentOrgUnit?.id ?? orgUnitId ?? "",
   });
 
   return (
     <BaseTabsLayout data-fs-bp-contract-tabs-layout>
       <BaseTabsLayout.Navbar
-        orgUnit={orgUnit}
+        orgUnit={currentOrgUnit}
         pageName={pageName}
         person={{
-          name: person.name,
-          role: person.role,
-          id: person.id,
+          name: currentUser?.name ?? "",
+          role: currentUser?.role ?? "",
+          id: currentUser?.id ?? "",
         }}
         loading={loading}
       />
@@ -64,7 +59,7 @@ export const ContractTabsLayout = ({
             </DropdownItem>
           }
           verticalLinks={verticalLinks}
-          name={contract?.name ?? ""}
+          name={currentContract?.name ?? ""}
         />
         <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
       </BaseTabsLayout.Container>

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

@@ -82,7 +82,6 @@ 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

@@ -33,8 +33,6 @@ export const LoadingTabsLayoutContent = ({
 );
 
 export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
-  console.log("Enter loading layout");
-
   const { routerLoading, nextRoute } = useRouterLoading();
   const [shouldShowLoading, setShouldShowLoading] = useState(false);
   const wasLoadingRef = useRef(false);
@@ -67,8 +65,6 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
 
   const pageTitle = layoutConfig.pageTitle;
 
-  console.log(">>>TabsLayout", layoutConfig.layout);
-
   switch (layoutConfig.layout) {
     case "ContractTabsLayout":
       return (
@@ -82,7 +78,6 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
             image: undefined,
             name: "",
             role: "",
-            id: "",
           }}
           loading={true}
         >
@@ -105,7 +100,33 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
       );
 
     case "OrgUnitDetailsLayout":
-      return <OrgUnitsDetailsLayout loading={true} orgUnitId="" userId="" />;
+      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: "",
+              },
+            },
+          }}
+        />
+      );
 
     default:
       return <LoadingTabsLayoutContent />;

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

@@ -35,7 +35,7 @@ export const withAuthLoader = async <T>(
       clientContext: { cookie, userId, ...clientContext },
     };
   } catch (error) {
-    console.error("[withAuthLoader] Auth validation failed:", error);
+    console.error("Auth validation failed:", error);
 
     data.res?.writeHead(302, { Location: "/" });
     data.res?.end();

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

@@ -28,7 +28,6 @@ export const withAuthProvider = <T,>(
       return null;
     }
 
-    // Se autorizado, renderiza o componente envolvido no provider
     return (
       <BuyerPortalProvider clientContext={props?.clientContext}>
         <Component {...props.data} clientContext={props?.clientContext} />

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

@@ -1,5 +1,6 @@
 import { type ComponentType } from "react";
 
+import { withAuth } from "./withAuth";
 import { withBuyerPortal } from "./withBuyerPortal";
 
 /**
@@ -13,7 +14,7 @@ type ProviderHOC = (Component: ComponentType<any>) => ComponentType<any>;
  * Default project providers applied to all pages.
  * Order: right to left (like pipe/compose)
  */
-const projectProviders: ProviderHOC[] = [withBuyerPortal];
+const projectProviders: ProviderHOC[] = [withAuth, withBuyerPortal];
 
 /**
  * HOC that applies all default project providers.

package/src/features/users/services/get-user-by-id.service.ts

@@ -12,10 +12,6 @@ export const getUserByIdService = async ({
   cookie: string;
 }): Promise<UserData | null> => {
   try {
-    if (!userId || orgUnitId) {
-      return {} as UserData;
-    }
-
     const { email, name, orgUnit, role } = await usersClient.getUserById(
       orgUnitId,
       userId,

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

@@ -1,81 +1,101 @@
+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 { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
-import { useAuth } from "../features/shared/hooks";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
+  type ClientContext,
   withLoaderErrorBoundary,
+  withAuthLoader,
   withProviders,
 } from "../features/shared/utils";
-import {
-  ClientContext,
-  getClientContext,
-} from "../features/shared/utils/getClientContext";
+import { getUserByIdService } from "../features/users/services";
 
-import type { LoaderData } from "../features/shared/types";
+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: {
-    orgUnitId: string;
-    userId: string;
-    cookie: string;
-    curPayload: any;
+    orgUnit: OrgUnitBasicData;
+    contracts: ContractData[];
+    user: UserData | null;
   };
   context: {
     clientContext: ClientContext;
   };
   hasError?: boolean;
-  error?: ErrorBoundaryProps;
+  error?: {
+    error: {
+      message: string;
+      name: string;
+      stack?: string;
+    };
+    tags: {
+      component: string;
+      errorType: string;
+    };
+  };
 };
 
 type OrgUnitDetailsPageQuery = {
   orgUnitId: string;
-  cookie: string;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<OrgUnitDetailsPageQuery>
-): Promise<OrgUnitDetailsPageData> {
+): Promise<AuthRouteProps<OrgUnitDetailsPageData>> => {
   const { orgUnitId } = data.query;
 
-  const { cookie, userId, ...clientContext } = await getClientContext(data);
+  if (!orgUnitId) {
+    throw new Error(`Missing required query param: orgUnitId=${orgUnitId}`);
+  }
 
-  return {
-    data: {
+  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,
-      userId,
       cookie,
-      curPayload: data.req.cookies,
-    },
-    context: {
-      clientContext: { cookie, userId, ...clientContext },
-    },
-  };
-}
+    });
+
+    return {
+      data: {
+        contracts,
+        orgUnit,
+        user,
+      },
+      context: {
+        clientContext: { cookie, userId, ...clientContext },
+      },
+    };
+  });
+};
 
-// export const loader = withLoaderErrorBoundary(loaderFunction, {
-//   componentName: "OrgUnitDetailsPage",
-//   redirectToError: true,
-// });
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "OrgUnitDetailsPage",
+  redirectToError: true,
+});
 
 const OrgUnitDetailsPage = ({
   data,
   hasError,
   error,
 }: OrgUnitDetailsPageData) => {
-  if (hasError) {
-    return <ErrorTabsLayout error={error} />;
-  }
-
-  const { isAuthenticated, isLoading } = useAuth(data.cookie);
-  console.log(">> Context", data.cookie);
-
-  if (isLoading || isAuthenticated === null) {
-    return <OrgUnitsDetailsLayout loading={true} orgUnitId="" userId="" />;
-  }
-
   return (
-    <OrgUnitsDetailsLayout orgUnitId={data.orgUnitId} userId={data.userId} />
+    <>
+      {hasError ? (
+        <ErrorTabsLayout error={error} />
+      ) : (
+        <OrgUnitsDetailsLayout data={data} />
+      )}
+    </>
   );
 };
 

package/src/pages/profile.tsx

@@ -1,26 +1,29 @@
+import { getContractDetailsService } from "../features/contracts/services";
+import { getOrgUnitBasicDataService } from "../features/org-units/services";
 import { ProfileLayout } from "../features/profile/layouts";
-import { PageLoader, withErrorBoundary } from "../features/shared/components";
+import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
-import { useAuth } from "../features/shared/hooks";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
-  withProviders,
-  getClientContext,
   withLoaderErrorBoundary,
+  withAuthLoader,
+  withProviders,
 } from "../features/shared/utils";
+import { getUserByIdService } from "../features/users/services";
 
-import type { LoaderData } from "../features/shared/types";
+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: {
-    contractId: string;
-    orgUnitId: string;
-    userId: string;
-    cookie: string;
-  };
+  data: ContractData | null;
   context: {
     clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData | null;
+    currentContract: ContractData | null;
+    currentUser: UserData | null;
   };
   hasError?: boolean;
   error?: ErrorBoundaryProps;
@@ -29,55 +32,68 @@ export type ProfilePageData = {
 export type ProfilePageQuery = {
   contractId: string;
   orgUnitId: string;
-  userId: string;
 };
 
-const loaderFunction = async (
+export async function loaderFunction(
   data: LoaderData<ProfilePageQuery>
-): Promise<ProfilePageData> => {
+): Promise<AuthRouteProps<ProfilePageData>> {
   const { contractId, orgUnitId } = data.query;
 
-  const { cookie, userId, ...clientContext } = await getClientContext(data);
+  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,
+          },
+        };
+      }
 
-  return {
-    data: {
-      contractId,
-      orgUnitId,
-      userId,
-      cookie,
-    },
-    context: {
-      clientContext: { cookie, userId, ...clientContext },
-    },
-    hasError: false,
-    error: undefined,
-  };
-};
+      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,
 });
 
-const ProfilePage = ({ data, hasError, error }: ProfilePageData) => {
-  if (hasError) {
-    return <ErrorTabsLayout error={error} />;
-  }
-
-  const { isAuthenticated, isLoading } = useAuth(data.cookie);
-
-  if (isLoading || isAuthenticated === null) {
-    return <PageLoader />;
-  }
-
-  return (
-    <ProfileLayout
-      orgUnitId={data.orgUnitId}
-      contractId={data.contractId}
-      userId={data.userId}
-    />
-  );
-};
+const ProfilePage = ({ data, hasError, error }: ProfilePageData) => (
+  <>
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <ProfileLayout data={data} />
+    )}
+  </>
+);
 
 export default withProviders(
   withErrorBoundary(ProfilePage, {

package/src/themes/index.scss

@@ -1,5 +1,4 @@
 @import "../features/profile/components/ProfileSummary/profile-summary.scss";
-@import "../features/shared/components/PageLoader/page-loader.scss";
 @import "./layouts";
 
 // ----------------------------------------------------------

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

@@ -1,22 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/org-units/hooks/useOrgUnitBasicData.ts

@@ -1,20 +0,0 @@
-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/shared/components/PageLoader/PageLoader.tsx

@@ -1,47 +0,0 @@
-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 (
-    <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>
-        </BaseTabsLayout.Content>
-      </BaseTabsLayout.Container>
-    </BaseTabsLayout>
-  );
-};

package/src/features/shared/components/PageLoader/index.ts

@@ -1 +0,0 @@
-export { PageLoader } from "./PageLoader";

package/src/features/shared/components/PageLoader/page-loader.scss

@@ -1,22 +0,0 @@
-@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
-
-[data-fs-bp-page-loader] {
-  padding: var(--fs-spacing-3);
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  gap: var(--fs-spacing-4);
-}
-
-[data-fs-bp-page-loader-header] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fs-spacing-2);
-}
-
-[data-fs-bp-page-loader-content] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fs-spacing-3);
-}

package/src/features/shared/hooks/useAuth.ts

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { authClient } from "../clients/Auth";
-export type UseAuthResult = {
-  isAuthenticated: boolean | null;
-  isLoading: boolean;
-};
-
-/**
- * Client-side hook to validate user authentication.
- * Checks access with the server and redirects to home if unauthorized.
- *
- * @returns Object containing authentication status and loading state
- */
-export const useAuth = (cookie: string): UseAuthResult => {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const router = useRouter();
-
-  useEffect(() => {
-    const validateAccess = async () => {
-      setIsLoading(true);
-
-      try {
-        const hasAccess = await authClient.validateAccess({ cookie });
-
-        if (!hasAccess) {
-          router.push("/");
-          setIsAuthenticated(false);
-        } else {
-          setIsAuthenticated(true);
-        }
-      } catch {
-        router.push("/");
-        setIsAuthenticated(false);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    validateAccess();
-  }, [router]);
-
-  return {
-    isAuthenticated,
-    isLoading,
-  };
-};