@vtex/faststore-plugin-buyer-portal 1.1.110 → 1.1.112

package/package.json

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

package/src/features/addresses/components/AddressLine/AddressLine.tsx

@@ -1,4 +1,4 @@
-// import Link from "next/link";
+import Link from "next/link";
 
 import { Dropdown } from "@faststore/ui";
 
@@ -23,7 +23,7 @@ export const AddressLine = ({
   currentAddress,
 }: AddressLineProps) => (
   <li data-fs-addresses-line>
-    <a href={href} data-fs-addresses-line-link>
+    <Link href={href} data-fs-addresses-line-link>
       <Icon
         name="LocalPostOffice"
         width={20}
@@ -37,7 +37,7 @@ export const AddressLine = ({
       {types.map((type) => (
         <Tag key={type}>{type}</Tag>
       ))}
-    </a>
+    </Link>
 
     <Dropdown>
       <BasicDropdownMenu.Trigger />

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { Tooltip } from "@faststore/ui";
 
@@ -34,14 +34,14 @@ export const OrgUnitBreadcrumbLink = ({
           {name}
         </p>
       ) : (
-        <a
+        <Link
           ref={linkRef as React.RefObject<HTMLAnchorElement>}
           data-fs-bp-breadcrumb-text
           href={item}
           data-fs-bp-breadcrumb-link
         >
           {name}
-        </a>
+        </Link>
       )}
     </div>
   );

package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx

@@ -1,6 +1,6 @@
 import storeConfig from "discovery.config";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import {
   Dropdown,
@@ -30,13 +30,13 @@ export const OrgUnitDetailsNavbar = ({
 }: OrgUnitDetailsNavbarProps) => {
   return (
     <header data-fs-bp-org-unit-details-navbar>
-      <a href="/" data-fs-bp-org-unit-details-navbar-link>
+      <Link href="/" data-fs-bp-org-unit-details-navbar-link>
         {storeConfig.seo.title}
-      </a>
+      </Link>
       <div data-fs-bp-org-unit-details-navbar-actions>
-        <a href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
+        <Link href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
           Start shopping
-        </a>
+        </Link>
         {loading ? (
           <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
         ) : (

package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { Button } from "@faststore/ui";
 
@@ -35,9 +35,9 @@ export const ProfileSummary = ({
       <div data-fs-self-profile-summary-header>
         <h2 data-fs-self-profile-summary-org-name>{orgName}</h2>
         {showManageLink && (
-          <a data-fs-self-profile-summary-org-link href="/buyer-portal">
+          <Link data-fs-self-profile-summary-org-link href="/buyer-portal">
             Manage Organization <Icon name="OpenInNew" width={23} height={23} />
-          </a>
+          </Link>
         )}
       </div>
       <div data-fs-self-profile-summary-person-actions>

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { Icon as UIIcon, IconButton } from "@faststore/ui";
@@ -58,9 +58,9 @@ export const BasicCard = ({
       <CardBody>{children}</CardBody>
       {enableFooter && (
         <CardFooter>
-          <a href={footerLink} data-fs-card-footer-link>
+          <Link href={footerLink} data-fs-card-footer-link>
             <span>{footerMessage}</span>
-          </a>
+          </Link>
           <IconButton
             onClick={() => {
               push(footerLink);

package/src/features/shared/components/BasicCard/BasicCardLine.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { Dropdown } from "@faststore/ui";
 
@@ -21,7 +21,7 @@ export const BasicCardLine = ({
 }: BasicCardLineProps) => {
   return (
     <span data-fs-basic-card-line title={title}>
-      {href && <a data-fs-basic-card-line-link href={href} />}
+      {href && <Link data-fs-basic-card-line-link href={href} />}
       {!!icon && <span data-fs-basic-card-line-icon>{icon}</span>}
       <span data-fs-basic-card-line-title>{title}</span>
       {!!menu && (

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { Icon } from "../Icon";
 
@@ -21,9 +21,9 @@ export const HeaderInside = ({
   return (
     <header data-fs-bp-header-inside {...otherProps}>
       {!!backLink && (
-        <a href={backLink} data-fs-bp-back-link>
+        <Link href={backLink} data-fs-bp-back-link>
           <Icon name="Back" />
-        </a>
+        </Link>
       )}
       {title && <h1 data-fs-bp-header-inside-title>{title}</h1>}
       {children}

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { HTMLAttributes } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { IconButton, Dropdown, DropdownButton } from "@faststore/ui";
 
@@ -32,7 +32,7 @@ export const InternalTopBar = ({
   return (
     <header data-fs-buyer-portal-topbar>
       <div data-fs-buyer-portal-topbar-navigation>
-        <a href={href}>
+        <Link href={href}>
           <IconButton
             size="small"
             icon={
@@ -45,7 +45,7 @@ export const InternalTopBar = ({
             }
             aria-label={"topbar goback"}
           />
-        </a>
+        </Link>
         <div data-fs-internal-topbar-icon-wrapper>
           <Icon name="StarFolder" height={24} width={24} />
         </div>

package/src/features/shared/components/VerticalNav/VerticalNavLink.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// import Link from "next/link";
+import Link from "next/link";
 import { useRouter } from "next/router";
 
 export type VerticalNavLinkProps = {
@@ -24,13 +24,13 @@ export const VerticalNavLink = ({ link, children }: VerticalNavLinkProps) => {
 
   return (
     <li key={link} data-fs-vertical-nav-menu-item>
-      <a
+      <Link
         href={link}
         data-fs-vertical-nav-menu-link
         data-fs-vertical-nav-menu-link-is-active={isActive}
       >
         {children}
-      </a>
+      </Link>
     </li>
   );
 };

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/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx

@@ -1,6 +1,6 @@
 import storeConfig from "discovery.config";
 
-// import Link from "next/link";
+import Link from "next/link";
 
 import { BasicDrawer, type BasicDrawerProps } from "../../../components";
 import { SidebarMenu } from "../SidebarMenu";
@@ -26,9 +26,9 @@ export const SidebarDrawer = ({
     >
       <BasicDrawer.Heading
         title={
-          <a href="/" data-fs-bp-org-unit-details-navbar-link>
+          <Link href="/" data-fs-bp-org-unit-details-navbar-link>
             {storeConfig.seo.title}
-          </a>
+          </Link>
         }
         onClose={close}
       />

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

@@ -3,6 +3,7 @@ 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";
 
@@ -15,6 +16,7 @@ export const withAuth = <T extends Record<string, unknown>>(
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
+    const hasCookie = useCookieMonitor();
 
     useEffect(() => {
       // If not authorized and not loading, reload the page
@@ -23,13 +25,16 @@ export const withAuth = <T extends Record<string, unknown>>(
       }
     }, [props?.authorized, props?.loading, router]);
 
-    // If loading (cookie not yet available), show skeleton
-    if (props?.loading) {
-      return <PageLoader />;
-    }
+    useEffect(() => {
+      if (props?.loading && hasCookie) {
+        router.reload();
+      }
+    }, [props?.loading, hasCookie, router]);
 
-    // If not authorized and not loading, render nothing
     if (!props?.authorized) {
+      if (props?.loading) {
+        return <PageLoader />;
+      }
       return null;
     }
 

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

@@ -3,6 +3,7 @@ import { useEffect, type ComponentType } from "react";
 import { useRouter } from "next/router";
 
 import { BuyerPortalProvider, PageLoader } from "../components";
+import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
 import type { ClientContext } from "./getClientContext";
@@ -10,12 +11,14 @@ 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.
  */
 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 e não está carregando, recarrega a página
@@ -24,17 +27,20 @@ export const withAuthProvider = <T,>(
       }
     }, [props?.authorized, props?.loading, router]);
 
-    // Se está carregando (cookie ainda não disponível), mostra skeleton
-    if (props?.loading) {
-      return <PageLoader />;
-    }
+    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 não está autorizado e não está carregando, não renderiza nada
     if (!props?.authorized) {
+      if (props?.loading) {
+        return <PageLoader />;
+      }
       return null;
     }
 
-    // Se autorizado, renderiza o componente envolvido no provider
     return (
       <BuyerPortalProvider clientContext={props?.clientContext}>
         <Component {...props.data} clientContext={props?.clientContext} />