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

package/package.json

@@ -1,44 +1,44 @@
 {
-	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.116-poc",
-	"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-2",
+  "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/profile/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,3 +1,5 @@
+import { Skeleton } from "@faststore/ui";
+
 import { useContractDetails } from "../../../contracts/hooks";
 import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { HeaderInside } from "../../../shared/components";
@@ -88,6 +90,15 @@ export const ProfileLayout = ({
               <hr data-fs-bp-profile-divider />
             </div>
           )}
+
+          {loading && (
+            <Skeleton
+              size={{
+                width: "100%",
+                height: "8rem",
+              }}
+            />
+          )}
         </section>
       </ContractTabsLayout>
     </GlobalLayout>

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/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";

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

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { authClient } from "../clients/Auth";
+
+import { useBuyerPortal } from "./useBuyerPortal";
+
+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 = (): UseAuthResult => {
+  const { clientContext } = useBuyerPortal();
+  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(clientContext);
+
+        if (!hasAccess) {
+          router.push("/");
+          setIsAuthenticated(false);
+        } else {
+          setIsAuthenticated(true);
+        }
+      } catch {
+        router.push("/");
+        setIsAuthenticated(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    validateAccess();
+  }, [router]);
+
+  return {
+    isAuthenticated,
+    isLoading,
+  };
+};

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

@@ -2,8 +2,9 @@ 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";
 
@@ -32,17 +33,19 @@ export const ContractTabsLayout = ({
   contractId,
   person,
 }: ContractTabsLayoutProps) => {
-  const { currentOrgUnit, currentContract } = useBuyerPortal();
+  const { orgUnit } = useOrgUnitBasicData(orgUnitId);
+
+  const { contract } = useContractDetails(contractId, orgUnitId);
 
   const verticalLinks = getContractSettingsLinks({
-    contractId: currentContract?.id ?? contractId ?? "",
-    orgUnitId: currentOrgUnit?.id ?? orgUnitId ?? "",
+    contractId: contractId,
+    orgUnitId: orgUnitId,
   });
 
   return (
     <BaseTabsLayout data-fs-bp-contract-tabs-layout>
       <BaseTabsLayout.Navbar
-        orgUnit={currentOrgUnit}
+        orgUnit={orgUnit}
         pageName={pageName}
         person={{
           name: person.name,
@@ -61,7 +64,7 @@ export const ContractTabsLayout = ({
             </DropdownItem>
           }
           verticalLinks={verticalLinks}
-          name={currentContract?.name ?? ""}
+          name={contract?.name ?? ""}
         />
         <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
       </BaseTabsLayout.Container>

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

@@ -1,4 +1,4 @@
-// import { getClientContext } from "./getClientContext";
+import { getClientContext } from "./getClientContext";
 import { serializeLoaderData } from "./serializeLoaderData";
 
 import type { LoaderData } from "../types";
@@ -11,85 +11,77 @@ interface WithLoaderErrorBoundaryOptions {
 
 export function withLoaderErrorBoundary<TQuery, TReturn>(
   loaderFn: (data: LoaderData<TQuery>) => Promise<TReturn>,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _options: WithLoaderErrorBoundaryOptions = {}
+  options: WithLoaderErrorBoundaryOptions = {}
 ) {
-  // Bypass: Just call the loader function and serialize the result
+  const { componentName, onError, redirectToError = true } = options;
+
   return async (data: LoaderData<TQuery>): Promise<TReturn> => {
-    const result = await loaderFn(data);
-    return serializeLoaderData(result);
-  };
+    try {
+      const result = await loaderFn(data);
+      return serializeLoaderData(result);
+    } catch (error) {
+      console.error(`[${componentName || "Loader"}] Error:`, {
+        message: (error as Error).message,
+        query: data.query,
+      });
+
+      if (onError) {
+        onError(error as Error, data.query);
+      }
+
+      if (redirectToError) {
+        let clientContext;
+        try {
+          clientContext = await getClientContext(data);
+        } catch (contextError) {
+          console.error(
+            `[${componentName || "Loader"}] Failed to get client context:`,
+            contextError
+          );
+          clientContext = {
+            cookie: "",
+            customerId: "",
+            userId: "",
+            vtexIdclientAutCookie: "",
+          };
+        }
 
-  // Old error handling code - commented out for bypass
-  // const { componentName, onError, redirectToError = true } = options;
-  //
-  // return async (data: LoaderData<TQuery>): Promise<TReturn> => {
-  //   try {
-  //     const result = await loaderFn(data);
-  //     return serializeLoaderData(result);
-  //   } catch (error) {
-  //     console.error(`[${componentName || "Loader"}] Error:`, {
-  //       message: (error as Error).message,
-  //       query: data.query,
-  //     });
-  //
-  //     if (onError) {
-  //       onError(error as Error, data.query);
-  //     }
-  //
-  //     if (redirectToError) {
-  //       let clientContext;
-  //       try {
-  //         clientContext = await getClientContext(data);
-  //       } catch (contextError) {
-  //         console.error(
-  //           `[${componentName || "Loader"}] Failed to get client context:`,
-  //           contextError
-  //         );
-  //         clientContext = {
-  //           cookie: "",
-  //           customerId: "",
-  //           userId: "",
-  //           vtexIdclientAutCookie: "",
-  //         };
-  //       }
-  //
-  //       // Serialize query to ensure it's JSON-safe (use null instead of undefined)
-  //       const serializedQuery = data.query
-  //         ? JSON.parse(JSON.stringify(data.query))
-  //         : null;
-  //
-  //       const errorResponse = {
-  //         error: {
-  //           error: {
-  //             message: (error as Error).message,
-  //             name: (error as Error).name,
-  //             stack: (error as Error).stack || null,
-  //             query: serializedQuery,
-  //           },
-  //           tags: {
-  //             component: componentName || "Unknown",
-  //             errorType: "loader_error",
-  //           },
-  //           extra: {
-  //             query: serializedQuery,
-  //           },
-  //         },
-  //         hasError: true,
-  //         context: {
-  //           clientContext,
-  //           currentOrgUnit: null,
-  //           currentContract: null,
-  //           currentUser: null,
-  //         },
-  //         data: null,
-  //       };
-  //
-  //       // Ensure error response is also JSON-serializable
-  //       return serializeLoaderData(errorResponse) as TReturn;
-  //     }
-  //
-  //     throw error;
-  //   }
-  // };
+        // Serialize query to ensure it's JSON-safe (use null instead of undefined)
+        const serializedQuery = data.query
+          ? JSON.parse(JSON.stringify(data.query))
+          : null;
+
+        const errorResponse = {
+          error: {
+            error: {
+              message: (error as Error).message,
+              name: (error as Error).name,
+              stack: (error as Error).stack || null,
+              query: serializedQuery,
+            },
+            tags: {
+              component: componentName || "Unknown",
+              errorType: "loader_error",
+            },
+            extra: {
+              query: serializedQuery,
+            },
+          },
+          hasError: true,
+          context: {
+            clientContext,
+            currentOrgUnit: null,
+            currentContract: null,
+            currentUser: null,
+          },
+          data: null,
+        };
+
+        // Ensure error response is also JSON-serializable
+        return serializeLoaderData(errorResponse) as TReturn;
+      }
+
+      throw error;
+    }
+  };
 }

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

@@ -1,6 +1,5 @@
 import { type ComponentType } from "react";
 
-import { withAuth } from "./withAuth";
 import { withBuyerPortal } from "./withBuyerPortal";
 
 /**
@@ -14,7 +13,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[] = [withAuth, withBuyerPortal];
+const projectProviders: ProviderHOC[] = [withBuyerPortal];
 
 /**
  * HOC that applies all default project providers.

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

@@ -1,9 +1,18 @@
 import { OrgUnitsDetailsLayout } from "../features/org-units/layouts";
-import { withErrorBoundary } from "../features/shared/components";
-import { withAuthLoader, withProviders } from "../features/shared/utils";
-import { ClientContext } from "../features/shared/utils/getClientContext";
+import { PageLoader, 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 {
+  withLoaderErrorBoundary,
+  withProviders,
+} from "../features/shared/utils";
+import {
+  ClientContext,
+  getClientContext,
+} from "../features/shared/utils/getClientContext";
 
-import type { AuthRouteProps, LoaderData } from "../features/shared/types";
+import type { LoaderData } from "../features/shared/types";
 
 export type OrgUnitDetailsPageData = {
   data: {
@@ -13,35 +22,52 @@ export type OrgUnitDetailsPageData = {
   context: {
     clientContext: ClientContext;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 type OrgUnitDetailsPageQuery = {
   orgUnitId: string;
 };
 
-export const loader = async (
+const loaderFunction = async (
   data: LoaderData<OrgUnitDetailsPageQuery>
-): Promise<AuthRouteProps<OrgUnitDetailsPageData>> => {
+): Promise<OrgUnitDetailsPageData> => {
   const { orgUnitId } = data.query;
 
-  if (!orgUnitId) {
-    throw new Error(`Missing required query param: orgUnitId=${orgUnitId}`);
-  }
+  const { cookie, userId, ...clientContext } = await getClientContext(data);
 
-  return withAuthLoader(data, async ({ cookie, userId, ...clientContext }) => {
-    return {
-      data: {
-        orgUnitId,
-        userId,
-      },
-      context: {
-        clientContext: { cookie, userId, ...clientContext },
-      },
-    };
-  });
+  return {
+    data: {
+      orgUnitId,
+      userId,
+    },
+    context: {
+      clientContext: { cookie, userId, ...clientContext },
+    },
+  };
 };
 
-const OrgUnitDetailsPage = ({ data }: OrgUnitDetailsPageData) => {
+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();
+
+  if (isLoading || isAuthenticated === null) {
+    return <PageLoader />;
+  }
+
   return (
     <OrgUnitsDetailsLayout orgUnitId={data.orgUnitId} userId={data.userId} />
   );

package/src/pages/profile.tsx

@@ -1,12 +1,16 @@
 import { ProfileLayout } from "../features/profile/layouts";
-import { withErrorBoundary } from "../features/shared/components";
+import { PageLoader, 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,
-  withAuthLoader,
+  getClientContext,
+  withLoaderErrorBoundary,
 } from "../features/shared/utils";
 
-import type { AuthRouteProps, LoaderData } from "../features/shared/types";
+import type { LoaderData } from "../features/shared/types";
 
 export type ProfilePageData = {
   data: {
@@ -17,6 +21,8 @@ export type ProfilePageData = {
   context: {
     clientContext: ClientContext;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
 export type ProfilePageQuery = {
@@ -25,32 +31,51 @@ export type ProfilePageQuery = {
   userId: string;
 };
 
-export const loader = async (
+const loaderFunction = async (
   data: LoaderData<ProfilePageQuery>
-): Promise<AuthRouteProps<ProfilePageData>> => {
+): Promise<ProfilePageData> => {
   const { contractId, orgUnitId } = data.query;
 
-  return withAuthLoader(data, async ({ cookie, userId, ...clientContext }) => {
-    return {
-      data: {
-        contractId,
-        orgUnitId,
-        userId,
-      },
-      context: {
-        clientContext: { cookie, userId, ...clientContext },
-      },
-    };
-  });
+  const { cookie, userId, ...clientContext } = await getClientContext(data);
+
+  return {
+    data: {
+      contractId,
+      orgUnitId,
+      userId,
+    },
+    context: {
+      clientContext: { cookie, userId, ...clientContext },
+    },
+    hasError: false,
+    error: undefined,
+  };
 };
 
-const ProfilePage = ({ data }: ProfilePageData) => (
-  <ProfileLayout
-    orgUnitId={data.orgUnitId}
-    contractId={data.contractId}
-    userId={data.userId}
-  />
-);
+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();
+
+  if (isLoading || isAuthenticated === null) {
+    return <PageLoader />;
+  }
+
+  return (
+    <ProfileLayout
+      orgUnitId={data.orgUnitId}
+      contractId={data.contractId}
+      userId={data.userId}
+    />
+  );
+};
 
 export default withProviders(
   withErrorBoundary(ProfilePage, {