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

package/package.json

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

package/src/features/contracts/services/get-contract-details.service.ts

@@ -15,6 +15,10 @@ const getContractDetailsFunction = async ({
   cookie,
   unitId,
 }: GetContractDetailsServiceProps) => {
+  if (!unitId || !contractId) {
+    return null;
+  }
+
   const { contract } = await contractsClient.getContractDetails(
     unitId,
     contractId,

package/src/features/org-units/clients/OrgUnitClient.ts

@@ -6,6 +6,7 @@ import type {
   OrgUnitSummaryData,
   OrgUnitSearchParams,
   OrgUnitSearchResponse,
+  OrgUnitUserData,
 } from "../types";
 
 export class OrgUnitClient extends Client {
@@ -30,21 +31,7 @@ export class OrgUnitClient extends Client {
   }
 
   getOrgUnitByUserId(userId: string, cookie: string) {
-    return this.get<{
-      orgUnit: {
-        createdAt: string;
-        updatedAt: string;
-        name: string;
-        path: {
-          ids: string;
-          names: string;
-        };
-        id: string;
-        customerGroup: {
-          customerIds: string[];
-        };
-      };
-    }>(`users/${userId}/units`, {
+    return this.get<OrgUnitUserData>(`users/${userId}/units`, {
       headers: {
         Cookie: cookie,
       },

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -57,7 +57,7 @@ export const OrgUnitsDetailsLayout = ({
   loading = isOrgUnitLoading || isContractsLoading || isUserLoading;
   const isMobile = useMediaQuery(QUERY_TABLET);
 
-  const isSingleContract = contracts.length <= 1;
+  const isSingleContract = !contracts ? true : contracts.length <= 1;
 
   const { orgUnit: userUnit } = useOrgUnitByUser(userId);
 

package/src/features/org-units/services/get-org-unit-basic-data.service.ts

@@ -7,5 +7,9 @@ export const getOrgUnitBasicDataService = async ({
   id: string;
   cookie: string;
 }) => {
+  if (!id) {
+    return null;
+  }
+
   return orgUnitClient.getOrgUnitBasicData(id, cookie);
 };

package/src/features/org-units/services/get-org-unit-by-user-id.service.ts

@@ -8,6 +8,10 @@ export const getOrgUnitByUserIdService = async ({
   cookie: string;
 }) => {
   try {
+    if (!userId) {
+      return null;
+    }
+
     const { orgUnit } = await orgUnitClient.getOrgUnitByUserId(userId, cookie);
     return orgUnit;
   } catch {

package/src/features/org-units/types/OrgUnitSummaryData.ts

@@ -25,3 +25,21 @@ export type OrgUnitBasicData = Pick<OrgUnitSummaryData, "id" | "name"> & {
     ids: string;
   };
 };
+
+export type UserOrgUnit = {
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  path: {
+    ids: string;
+    names: string;
+  };
+  id: string;
+  customerGroup: {
+    customerIds: string[];
+  };
+};
+
+export type OrgUnitUserData = {
+  orgUnit: UserOrgUnit;
+};

package/src/features/org-units/types/index.ts

@@ -1,6 +1,8 @@
 export type {
   OrgUnitBasicData,
   OrgUnitSummaryData,
+  OrgUnitUserData,
+  UserOrgUnit,
 } from "./OrgUnitSummaryData";
 export type { OrgUnitData, OrgUnitHierarchyData } from "./OrgUnitsData";
 export type { OrganizationData } from "./OrganizationData";

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

@@ -10,12 +10,14 @@ export type ProfileLayoutProps = {
   orgUnitId: string;
   contractId: string;
   userId: string;
+  loading?: boolean;
 };
 
 export const ProfileLayout = ({
   orgUnitId,
   contractId,
   userId,
+  loading = true,
 }: ProfileLayoutProps) => {
   const { orgUnit, isOrgUnitLoading } = useOrgUnitBasicData(orgUnitId);
 
@@ -26,7 +28,7 @@ export const ProfileLayout = ({
 
   const { user, isUserLoading } = useGetUserById({ orgUnitId, userId });
 
-  const loading = isContractLoading || isOrgUnitLoading || isUserLoading;
+  loading = isContractLoading || isOrgUnitLoading || isUserLoading;
 
   const creationDate = contract
     ? new Date(contract.creationDate).toLocaleDateString("en-US", {
@@ -55,6 +57,15 @@ export const ProfileLayout = ({
         <section data-fs-bp-profile>
           <HeaderInside title="Profile" />
 
+          {loading && !contract && (
+            <Skeleton
+              size={{
+                width: "100%",
+                height: "8rem",
+              }}
+            />
+          )}
+
           {contract && (
             <div data-fs-bp-profile-details>
               <span data-fs-bp-profile-details-title>Details</span>
@@ -90,15 +101,6 @@ 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,6 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 import { authClient } from "../clients/Auth";
-import { ClientContext } from "../utils";
-
 export type UseAuthResult = {
   isAuthenticated: boolean | null;
   isLoading: boolean;
@@ -16,7 +14,7 @@ export type UseAuthResult = {
  *
  * @returns Object containing authentication status and loading state
  */
-export const useAuth = (clientContext: ClientContext): UseAuthResult => {
+export const useAuth = (cookie: string): UseAuthResult => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
@@ -26,7 +24,7 @@ export const useAuth = (clientContext: ClientContext): UseAuthResult => {
       setIsLoading(true);
 
       try {
-        const hasAccess = await authClient.validateAccess(clientContext);
+        const hasAccess = await authClient.validateAccess({ cookie });
 
         if (!hasAccess) {
           router.push("/");

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

@@ -33,6 +33,8 @@ export const LoadingTabsLayoutContent = ({
 );
 
 export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
+  console.log("Enter loading layout");
+
   const { routerLoading, nextRoute } = useRouterLoading();
   const [shouldShowLoading, setShouldShowLoading] = useState(false);
   const wasLoadingRef = useRef(false);
@@ -65,6 +67,8 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
 
   const pageTitle = layoutConfig.pageTitle;
 
+  console.log(">>>TabsLayout", layoutConfig.layout);
+
   switch (layoutConfig.layout) {
     case "ContractTabsLayout":
       return (

package/src/features/users/services/get-user-by-id.service.ts

@@ -12,6 +12,10 @@ export const getUserByIdService = async ({
   cookie: string;
 }): Promise<UserData | null> => {
   try {
+    if (!userId || orgUnitId) {
+      return {} as UserData;
+    }
+
     const { email, name, orgUnit, role } = await usersClient.getUserById(
       orgUnitId,
       userId,

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

@@ -1,5 +1,5 @@
 import { OrgUnitsDetailsLayout } from "../features/org-units/layouts";
-import { PageLoader, withErrorBoundary } from "../features/shared/components";
+import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import { useAuth } from "../features/shared/hooks";
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
@@ -18,6 +18,7 @@ export type OrgUnitDetailsPageData = {
   data: {
     orgUnitId: string;
     userId: string;
+    cookie: string;
   };
   context: {
     clientContext: ClientContext;
@@ -36,12 +37,12 @@ const loaderFunction = async (
   const { orgUnitId } = data.query;
 
   const { cookie, userId, ...clientContext } = await getClientContext(data);
-  console.log(">>> Org Unit Loader", cookie);
 
   return {
     data: {
       orgUnitId,
       userId,
+      cookie,
     },
     context: {
       clientContext: { cookie, userId, ...clientContext },
@@ -56,7 +57,6 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
 
 const OrgUnitDetailsPage = ({
   data,
-  context,
   hasError,
   error,
 }: OrgUnitDetailsPageData) => {
@@ -64,11 +64,11 @@ const OrgUnitDetailsPage = ({
     return <ErrorTabsLayout error={error} />;
   }
 
-  const { isAuthenticated, isLoading } = useAuth(context.clientContext);
-  console.log(">> Org Unit Details, auth", isAuthenticated, isLoading);
+  const { isAuthenticated, isLoading } = useAuth(data.cookie);
+  console.log(">> Context", data.cookie);
 
   if (isLoading || isAuthenticated === null) {
-    return <PageLoader />;
+    return <OrgUnitsDetailsLayout loading={true} orgUnitId="" userId="" />;
   }
 
   return (

package/src/pages/profile.tsx

@@ -17,6 +17,7 @@ export type ProfilePageData = {
     contractId: string;
     orgUnitId: string;
     userId: string;
+    cookie: string;
   };
   context: {
     clientContext: ClientContext;
@@ -43,6 +44,7 @@ const loaderFunction = async (
       contractId,
       orgUnitId,
       userId,
+      cookie,
     },
     context: {
       clientContext: { cookie, userId, ...clientContext },
@@ -57,12 +59,12 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
   redirectToError: true,
 });
 
-const ProfilePage = ({ data, context, hasError, error }: ProfilePageData) => {
+const ProfilePage = ({ data, hasError, error }: ProfilePageData) => {
   if (hasError) {
     return <ErrorTabsLayout error={error} />;
   }
 
-  const { isAuthenticated, isLoading } = useAuth(context.clientContext);
+  const { isAuthenticated, isLoading } = useAuth(data.cookie);
 
   if (isLoading || isAuthenticated === null) {
     return <PageLoader />;