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

package/package.json

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

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/types/AuthRouteProps.ts

@@ -3,9 +3,4 @@ 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: false; loading: true };

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
+import { PageLoader } from "../components";
 import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
@@ -15,7 +16,7 @@ export const withAuth = <T extends Record<string, unknown>>(
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
+    const hasCookie = useCookieMonitor();
     const reloadAttemptedRef = useRef(false);
 
     // Debug logging
@@ -24,10 +25,9 @@ export const withAuth = <T extends Record<string, unknown>>(
         authorized: props?.authorized,
         loading: props?.loading,
         hasCookie,
-        timedOut,
         reloadAttempted: reloadAttemptedRef.current,
       });
-    }, [props?.authorized, props?.loading, hasCookie, timedOut]);
+    }, [props?.authorized, props?.loading, hasCookie]);
 
     useEffect(() => {
       // If not authorized and not loading, reload the page
@@ -56,28 +56,14 @@ export const withAuth = <T extends Record<string, unknown>>(
       }
     }, [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("[withAuth] Cookie timeout - redirecting to home page");
-        reloadAttemptedRef.current = true;
-        router.push("/");
+    if (!props?.authorized) {
+      if (props?.loading) {
+        return <PageLoader />;
       }
-    }, [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
       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/withAuthProvider.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, 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";
@@ -18,7 +18,7 @@ export const withAuthProvider = <T,>(
 ) => {
   return function WrappedPage(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
+    const hasCookie = useCookieMonitor();
     const reloadAttemptedRef = useRef(false);
     const isProduction = process.env.NODE_ENV === "production";
 
@@ -29,7 +29,6 @@ export const withAuthProvider = <T,>(
           authorized: props?.authorized,
           loading: props?.loading,
           hasCookie,
-          timedOut,
           reloadAttempted: reloadAttemptedRef.current,
           routerPath: router.asPath,
         });
@@ -38,7 +37,6 @@ export const withAuthProvider = <T,>(
       props?.authorized,
       props?.loading,
       hasCookie,
-      timedOut,
       router.asPath,
       isProduction,
     ]);
@@ -73,35 +71,17 @@ export const withAuthProvider = <T,>(
       }
     }, [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("/");
+    if (!props?.authorized) {
+      if (props?.loading) {
+        console.log("[withAuthProvider] Loading state");
+        return <PageLoader />;
       }
-    }, [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
       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);
-
     return (
-      <BuyerPortalProvider clientContext={clientContext}>
-        <Component {...componentProps} clientContext={clientContext} />
+      <BuyerPortalProvider clientContext={props?.clientContext}>
+        <Component {...props.data} clientContext={props?.clientContext} />
       </BuyerPortalProvider>
     );
   };