@vtex/faststore-plugin-buyer-portal 1.1.116-poc-1 → 1.1.116-poc-3

package/package.json

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

package/src/features/profile/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,3 +1,5 @@
+import { Skeleton } from "@faststore/ui";
+
 import { useContractDetails } from "../../../contracts/hooks";
 import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { HeaderInside } from "../../../shared/components";
@@ -88,6 +90,15 @@ export const ProfileLayout = ({
               <hr data-fs-bp-profile-divider />
             </div>
           )}
+
+          {loading && (
+            <Skeleton
+              size={{
+                width: "100%",
+                height: "8rem",
+              }}
+            />
+          )}
         </section>
       </ContractTabsLayout>
     </GlobalLayout>

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

@@ -3,8 +3,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 import { authClient } from "../clients/Auth";
-
-import { useBuyerPortal } from "./useBuyerPortal";
+import { ClientContext } from "../utils";
 
 export type UseAuthResult = {
   isAuthenticated: boolean | null;
@@ -17,8 +16,7 @@ export type UseAuthResult = {
  *
  * @returns Object containing authentication status and loading state
  */
-export const useAuth = (): UseAuthResult => {
-  const { clientContext } = useBuyerPortal();
+export const useAuth = (clientContext: ClientContext): UseAuthResult => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();

package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx

@@ -2,8 +2,9 @@ import type { ReactNode } from "react";
 
 import { DropdownItem } from "@faststore/ui";
 
+import { useContractDetails } from "../../../contracts/hooks";
+import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { Icon } from "../../components";
-import { useBuyerPortal } from "../../hooks";
 import { getContractSettingsLinks } from "../../utils";
 import { BaseTabsLayout } from "../BaseTabsLayout/BaseTabsLayout";
 
@@ -32,17 +33,19 @@ export const ContractTabsLayout = ({
   contractId,
   person,
 }: ContractTabsLayoutProps) => {
-  const { currentOrgUnit, currentContract } = useBuyerPortal();
+  const { orgUnit } = useOrgUnitBasicData(orgUnitId);
+
+  const { contract } = useContractDetails(contractId, orgUnitId);
 
   const verticalLinks = getContractSettingsLinks({
-    contractId: currentContract?.id ?? contractId ?? "",
-    orgUnitId: currentOrgUnit?.id ?? orgUnitId ?? "",
+    contractId: contractId,
+    orgUnitId: orgUnitId,
   });
 
   return (
     <BaseTabsLayout data-fs-bp-contract-tabs-layout>
       <BaseTabsLayout.Navbar
-        orgUnit={currentOrgUnit}
+        orgUnit={orgUnit}
         pageName={pageName}
         person={{
           name: person.name,
@@ -61,7 +64,7 @@ export const ContractTabsLayout = ({
             </DropdownItem>
           }
           verticalLinks={verticalLinks}
-          name={currentContract?.name ?? ""}
+          name={contract?.name ?? ""}
         />
         <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
       </BaseTabsLayout.Container>

package/src/pages/org-unit-details.tsx

@@ -36,6 +36,7 @@ const loaderFunction = async (
   const { orgUnitId } = data.query;
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
+  console.log(">>> Org Unit Loader", cookie);
 
   return {
     data: {
@@ -55,6 +56,7 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
 
 const OrgUnitDetailsPage = ({
   data,
+  context,
   hasError,
   error,
 }: OrgUnitDetailsPageData) => {
@@ -62,7 +64,8 @@ const OrgUnitDetailsPage = ({
     return <ErrorTabsLayout error={error} />;
   }
 
-  const { isAuthenticated, isLoading } = useAuth();
+  const { isAuthenticated, isLoading } = useAuth(context.clientContext);
+  console.log(">> Org Unit Details, auth", isAuthenticated, isLoading);
 
   if (isLoading || isAuthenticated === null) {
     return <PageLoader />;

package/src/pages/profile.tsx

@@ -57,12 +57,12 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
   redirectToError: true,
 });
 
-const ProfilePage = ({ data, hasError, error }: ProfilePageData) => {
+const ProfilePage = ({ data, context, hasError, error }: ProfilePageData) => {
   if (hasError) {
     return <ErrorTabsLayout error={error} />;
   }
 
-  const { isAuthenticated, isLoading } = useAuth();
+  const { isAuthenticated, isLoading } = useAuth(context.clientContext);
 
   if (isLoading || isAuthenticated === null) {
     return <PageLoader />;