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

package/package.json

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

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

@@ -38,7 +38,6 @@ 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/index.ts

@@ -76,4 +76,3 @@ 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/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,16 @@ 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/index.ts

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

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

@@ -1,6 +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 };
+  | { authorized: true; data: T; clientContext: ClientContext }
+  | { authorized: false };

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

@@ -1,65 +1,27 @@
-import { useEffect, useRef, type ComponentType } from "react";
+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.
- * 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 = useCookieMonitor();
-    const reloadAttemptedRef = useRef(false);
-
-    // Debug logging
-    useEffect(() => {
-      console.log("[withAuth] Props state:", {
-        authorized: props?.authorized,
-        loading: props?.loading,
-        hasCookie,
-        reloadAttempted: reloadAttemptedRef.current,
-      });
-    }, [props?.authorized, props?.loading, hasCookie]);
 
     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);
+      // If not authorized, reload the page
+      if (!props?.authorized) {
+        router.reload();
       }
-    }, [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;
-        }
-      }
-    }, [props?.loading, hasCookie, router]);
+    }, [props?.authorized, router]);
 
+    // If not authorized, render nothing
     if (!props?.authorized) {
-      if (props?.loading) {
-        return <PageLoader />;
-      }
       return null;
     }
 

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,67 +8,40 @@ 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);
+    console.error("Auth validation failed:", error);
 
     data.res?.writeHead(302, { Location: "/" });
     data.res?.end();
 
     return {
       authorized: false,
-      loading: false,
     };
   }
 };

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

@@ -1,81 +1,30 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { BuyerPortalProvider, PageLoader } from "../components";
-import { useCookieMonitor } from "../hooks/useCookieMonitor";
+import { BuyerPortalProvider } from "../components";
 
 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 = 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,
-          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,
-      router.asPath,
-      isProduction,
-    ]);
-
-    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]);
+    }, [props?.authorized, router]);
 
+    // Se não está autorizado, não renderiza nada
     if (!props?.authorized) {
-      if (props?.loading) {
-        console.log("[withAuthProvider] Loading state");
-        return <PageLoader />;
-      }
       return null;
     }
 

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/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/shared/components/PageLoader/PageLoader.tsx

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

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

@@ -1,73 +0,0 @@
-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}=`)
-      );
-
-      const hasCookieValue =
-        !!authCookie && authCookie.split("=")[1]?.trim() !== "";
-
-      console.log("[useCookieMonitor] Checking cookie:", {
-        cookieName,
-        hasCookie: hasCookieValue,
-        cookieValue: authCookie
-          ? authCookie.split("=")[1]?.substring(0, 10) + "..."
-          : "none",
-      });
-
-      return hasCookieValue;
-    };
-
-    // Check immediately
-    const initialCheck = checkCookie();
-    console.log("[useCookieMonitor] Initial check:", initialCheck);
-    setHasCookie(initialCheck);
-
-    // If no cookie yet, poll for it
-    if (!initialCheck) {
-      console.log("[useCookieMonitor] Starting cookie polling...");
-      const interval = setInterval(() => {
-        const hasAuthCookie = checkCookie();
-
-        if (hasAuthCookie) {
-          console.log("[useCookieMonitor] Cookie found! Stopping poll.");
-          setHasCookie(true);
-          clearInterval(interval);
-        }
-      }, 100); // Check every 100ms
-
-      // Cleanup after 5 seconds max
-      const timeout = setTimeout(() => {
-        console.log("[useCookieMonitor] Polling timeout reached (5s)");
-        clearInterval(interval);
-      }, 5000);
-
-      return () => {
-        clearInterval(interval);
-        clearTimeout(timeout);
-      };
-    }
-  }, []);
-
-  return hasCookie;
-};