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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.108",
+	"version": "1.1.110",
 	"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>
-    <Link href={href} data-fs-addresses-line-link>
+    <a 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>
       ))}
-    </Link>
+    </a>
 
     <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,13 +34,14 @@ export const OrgUnitBreadcrumbLink = ({
           {name}
         </p>
       ) : (
-        <Link
+        <a
           ref={linkRef as React.RefObject<HTMLAnchorElement>}
           data-fs-bp-breadcrumb-text
           href={item}
+          data-fs-bp-breadcrumb-link
         >
           {name}
-        </Link>
+        </a>
       )}
     </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>
-      <Link href="/" data-fs-bp-org-unit-details-navbar-link>
+      <a href="/" data-fs-bp-org-unit-details-navbar-link>
         {storeConfig.seo.title}
-      </Link>
+      </a>
       <div data-fs-bp-org-unit-details-navbar-actions>
-        <Link href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
+        <a href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
           Start shopping
-        </Link>
+        </a>
         {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 && (
-          <Link data-fs-self-profile-summary-org-link href="/buyer-portal">
+          <a data-fs-self-profile-summary-org-link href="/buyer-portal">
             Manage Organization <Icon name="OpenInNew" width={23} height={23} />
-          </Link>
+          </a>
         )}
       </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>
-          <Link href={footerLink} data-fs-card-footer-link>
+          <a href={footerLink} data-fs-card-footer-link>
             <span>{footerMessage}</span>
-          </Link>
+          </a>
           <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 && <Link data-fs-basic-card-line-link href={href} />}
+      {href && <a 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 && (
-        <Link href={backLink} data-fs-bp-back-link>
+        <a href={backLink} data-fs-bp-back-link>
           <Icon name="Back" />
-        </Link>
+        </a>
       )}
       {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>
-        <Link href={href}>
+        <a href={href}>
           <IconButton
             size="small"
             icon={
@@ -45,7 +45,7 @@ export const InternalTopBar = ({
             }
             aria-label={"topbar goback"}
           />
-        </Link>
+        </a>
         <div data-fs-internal-topbar-icon-wrapper>
           <Icon name="StarFolder" height={24} width={24} />
         </div>

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/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>
-      <Link
+      <a
         href={link}
         data-fs-vertical-nav-menu-link
         data-fs-vertical-nav-menu-link-is-active={isActive}
       >
         {children}
-      </Link>
+      </a>
     </li>
   );
 };

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/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={
-          <Link href="/" data-fs-bp-org-unit-details-navbar-link>
+          <a href="/" data-fs-bp-org-unit-details-navbar-link>
             {storeConfig.seo.title}
-          </Link>
+          </a>
         }
         onClose={close}
       />

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/constants.ts

@@ -1,10 +1,10 @@
 export const AUT_COOKIE_KEY = "VtexIdclientAutCookie";
 // PROD URL
-// export const API_URL = (checkoutUrl: string, operation?: string) =>
-//   `${checkoutUrl}/_v/store-front/${operation}`;
+export const API_URL = (checkoutUrl: string, operation?: string) =>
+  `${checkoutUrl}/_v/store-front/${operation}`;
 // DEV URL - CHANGE BEFORE MERGE
-export const API_URL = (checkoutUrl?: string, operation?: string) =>
-  `https://permission--b2bfaststoredev.myvtex.com/_v/store-front/${operation}`;
+// export const API_URL = (checkoutUrl?: string, operation?: string) =>
+//   `https://permission--b2bfaststoredev.myvtex.com/_v/store-front/${operation}`;
 
 export const DEBOUNCE_TIMEOUT = 500;
 

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

@@ -2,10 +2,13 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
+import { PageLoader } from "../components";
+
 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>
@@ -14,13 +17,18 @@ export const withAuth = <T extends Record<string, unknown>>(
     const router = useRouter();
 
     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]);
+
+    // 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,13 +2,14 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { BuyerPortalProvider } from "../components";
+import { BuyerPortalProvider, PageLoader } from "../components";
 
 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.
  */
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
@@ -17,13 +18,18 @@ export const withAuthProvider = <T,>(
     const router = useRouter();
 
     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
+    // 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";
 
 // ----------------------------------------------------------