@vtex/faststore-plugin-buyer-portal 1.1.109 → 1.1.111

package/package.json

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

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx

@@ -38,6 +38,7 @@ export const OrgUnitBreadcrumbLink = ({
           ref={linkRef as React.RefObject<HTMLAnchorElement>}
           data-fs-bp-breadcrumb-text
           href={item}
+          data-fs-bp-breadcrumb-link
         >
           {name}
         </Link>

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

@@ -0,0 +1,22 @@
+import { Skeleton } from "@faststore/ui";
+
+/**
+ * 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 = () => {
+  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>
+
+      <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>
+  );
+};

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

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

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

@@ -0,0 +1,22 @@
+@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/components/index.ts

@@ -76,3 +76,4 @@ export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
 export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";
 export { default as Error } from "./Error/Error";
 export { IconBookmarked } from "./IconBookmarked/IconBookmarked";
+export { PageLoader } from "./PageLoader";

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

@@ -1,4 +1,5 @@
 export { useBuyerPortal } from "./useBuyerPortal";
+export { useCookieMonitor } from "./useCookieMonitor";
 export { useDrawerProps, type DrawerProps } from "./useDrawerProps";
 export {
   useMutation,

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

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+
+import storeConfig from "discovery.config";
+
+import { AUT_COOKIE_KEY } from "../utils/constants";
+
+/**
+ * Hook to monitor when authentication cookie becomes available.
+ * Used to detect when cookies load after pre-fetch scenarios.
+ *
+ * @returns boolean indicating if auth cookie is present
+ */
+export const useCookieMonitor = () => {
+  const [hasCookie, setHasCookie] = useState(false);
+
+  useEffect(() => {
+    const checkCookie = () => {
+      if (typeof document === "undefined") return false;
+
+      const cookieName = `${AUT_COOKIE_KEY}_${storeConfig?.api.storeId}`;
+      const cookies = document.cookie.split(";");
+
+      const authCookie = cookies.find((cookie) =>
+        cookie.trim().startsWith(`${cookieName}=`)
+      );
+
+      return !!authCookie && authCookie.split("=")[1]?.trim() !== "";
+    };
+
+    // Check immediately
+    const initialCheck = checkCookie();
+    setHasCookie(initialCheck);
+
+    // If no cookie yet, poll for it
+    if (!initialCheck) {
+      const interval = setInterval(() => {
+        const hasAuthCookie = checkCookie();
+
+        if (hasAuthCookie) {
+          setHasCookie(true);
+          clearInterval(interval);
+        }
+      }, 100); // Check every 100ms
+
+      // Cleanup after 5 seconds max
+      const timeout = setTimeout(() => {
+        clearInterval(interval);
+      }, 5000);
+
+      return () => {
+        clearInterval(interval);
+        clearTimeout(timeout);
+      };
+    }
+  }, []);
+
+  return hasCookie;
+};

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

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

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

@@ -2,25 +2,41 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
+import { PageLoader } from "../components";
+import { useCookieMonitor } from "../hooks/useCookieMonitor";
+
 import type { AuthRouteProps } from "../types";
 
 /**
- * HOC that checks only for authorization
+ * HOC that checks only for authorization.
+ * Now handles loading state for pre-fetch scenarios.
  */
 export const withAuth = <T extends Record<string, unknown>>(
   Component: ComponentType<T>
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
+    const hasCookie = useCookieMonitor();
 
     useEffect(() => {
-      // If not authorized, reload the page
-      if (!props?.authorized) {
+      // If not authorized and not loading, reload the page
+      if (!props?.authorized && !props?.loading) {
         router.reload();
       }
-    }, [props?.authorized, router]);
+    }, [props?.authorized, props?.loading, router]);
+
+    useEffect(() => {
+      if (props?.loading && hasCookie) {
+        router.reload();
+      }
+    }, [props?.loading, hasCookie, router]);
+
+    // If loading (cookie not yet available), show skeleton
+    if (props?.loading) {
+      return <PageLoader />;
+    }
 
-    // If not authorized, render nothing
+    // If not authorized and not loading, render nothing
     if (!props?.authorized) {
       return null;
     }

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

@@ -1,5 +1,6 @@
 import { validateAccessService } from "../services";
 
+import { getAuthCookie } from "./cookie";
 import { ClientContext, getClientContext } from "./getClientContext";
 
 import type { AuthRouteProps } from "../types";
@@ -8,12 +9,24 @@ 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);
+
+    if (!authCookie || authCookie === "") {
+      return {
+        authorized: false,
+        loading: true,
+      };
+    }
+
     const { cookie, userId, ...clientContext } = await getClientContext(data);
 
     const hasAccess = await validateAccessService({ cookie });
@@ -24,6 +37,7 @@ export const withAuthLoader = async <T>(
 
       return {
         authorized: false,
+        loading: false,
       };
     }
 
@@ -33,6 +47,7 @@ export const withAuthLoader = async <T>(
       authorized: true,
       data: pageData,
       clientContext: { cookie, userId, ...clientContext },
+      loading: false,
     };
   } catch (error) {
     console.error("Auth validation failed:", error);
@@ -42,6 +57,7 @@ export const withAuthLoader = async <T>(
 
     return {
       authorized: false,
+      loading: false,
     };
   }
 };

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

@@ -2,28 +2,44 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { BuyerPortalProvider } from "../components";
+import { BuyerPortalProvider, PageLoader } 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
+ * 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.
  */
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
 ) => {
   return function WrappedPage(props: AuthRouteProps<T>) {
     const router = useRouter();
+    const hasCookie = useCookieMonitor();
 
     useEffect(() => {
-      // Se não está autorizado, recarrega a página
-      if (!props?.authorized) {
+      // Se não está autorizado e não está carregando, recarrega a página
+      if (!props?.authorized && !props?.loading) {
         router.reload();
       }
-    }, [props?.authorized, router]);
+    }, [props?.authorized, props?.loading, router]);
 
-    // Se não está autorizado, não renderiza nada
+    useEffect(() => {
+      // If we're in loading state and cookie becomes available, reload to fetch data
+      if (props?.loading && hasCookie) {
+        router.reload();
+      }
+    }, [props?.loading, hasCookie, router]);
+
+    // Se está carregando (cookie ainda não disponível), mostra skeleton
+    if (props?.loading) {
+      return <PageLoader />;
+    }
+
+    // Se não está autorizado e não está carregando, não renderiza nada
     if (!props?.authorized) {
       return null;
     }

package/src/themes/index.scss

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