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

package/package.json

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

package/src/features/custom-fields/layouts/CustomFieldsLayout/CustomFieldsLayout.tsx

@@ -43,6 +43,7 @@ export const CustomFieldsLayout = ({
     currentContract: contract,
     clientContext,
   } = useBuyerPortal();
+
   const searchParams = useSearchParams();
   const [currentSelectedContent, setCurrentSelectedContent] =
     useState<CustomFieldData>();

package/src/features/shared/clients/Auth.ts

@@ -0,0 +1,25 @@
+import { getApiUrl } from "../../shared/utils";
+
+import { Client } from "./Client";
+
+type AuthContextProps = {
+  cookie: string;
+};
+
+export default class AuthClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  validateAccess(context: AuthContextProps) {
+    return this.get<boolean>("granted", {
+      headers: {
+        Cookie: context.cookie,
+        "Content-Type": "text/plain",
+      },
+    });
+  }
+}
+
+const authClient = new AuthClient();
+export { authClient };

package/src/features/shared/clients/Client.ts

@@ -1,8 +1,8 @@
-import { toQueryParams } from "../utils";
 import {
   getAuthFromCookie,
   getCookieWithoutSessionObjects,
 } from "../utils/cookie";
+import { toQueryParams } from "../utils/toQueryParams";
 
 interface RequestConfig<Input = unknown> {
   url: string;
@@ -87,6 +87,7 @@ class Client {
           ? getCookieWithoutSessionObjects(headers.Cookie ?? "")
           : {}),
         ...(headers.Cookie ? getAuthFromCookie(headers.Cookie ?? "") : {}),
+        ...headers,
       },
       ...(cache ? { cache, next: { revalidate: 300 } } : {}),
     };
@@ -106,6 +107,15 @@ class Client {
         responseData = await response.json();
       }
 
+      if (contentType?.includes("text/plain")) {
+        const text = await response.text();
+        try {
+          responseData = JSON.parse(text);
+        } catch {
+          responseData = text as unknown as Return;
+        }
+      }
+
       if (!response.ok) {
         console.error(`Request to ${url} failed:`, responseData);
         console.error(response.status, response.statusText);

package/src/features/shared/services/index.ts

@@ -6,3 +6,7 @@ export {
   removeFromScopeService,
   type RemoveFromScopeServiceProps,
 } from "./remove-from-scope.service";
+export {
+  validateAccessService,
+  type ValidateAccessServiceProps,
+} from "./validate-access.service";

package/src/features/shared/services/validate-access.service.ts

@@ -0,0 +1,11 @@
+import { authClient } from "../clients/Auth";
+
+export type ValidateAccessServiceProps = {
+  cookie: string;
+};
+
+export const validateAccessService = async ({
+  cookie,
+}: ValidateAccessServiceProps) => {
+  return authClient.validateAccess({ cookie });
+};

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

@@ -0,0 +1,5 @@
+import { ClientContext } from "../utils";
+
+export type AuthRouteProps<T> =
+  | { authorized: true; data: T; clientContext: ClientContext }
+  | { authorized: false };

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

@@ -7,3 +7,4 @@ export type {
   PaymentMethodResponse,
   PaymentMethodsReqCommonParams,
 } from "./PaymentMethodsClientTypes";
+export { type AuthRouteProps } from "./AuthRouteProps";

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://everton--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/index.ts

@@ -37,3 +37,8 @@ export { isPluginError } from "./isPluginError";
 export { serializeLoaderData } from "./serializeLoaderData";
 export { withLoaderErrorBoundary } from "./withLoaderErrorBoundary";
 export { withClientErrorBoundary } from "./withClientErrorBoundary";
+export { withAuthProvider } from "./withAuthProvider";
+export { withAuth } from "./withAuth";
+export { withBuyerPortal } from "./withBuyerPortal";
+export { withProviders } from "./withProviders";
+export { withAuthLoader } from "./withAuthLoader";

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

@@ -0,0 +1,31 @@
+import { useEffect, type ComponentType } from "react";
+
+import { useRouter } from "next/router";
+
+import type { AuthRouteProps } from "../types";
+
+/**
+ * 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();
+
+    useEffect(() => {
+      // If not authorized, reload the page
+      if (!props?.authorized) {
+        router.reload();
+      }
+    }, [props?.authorized, router]);
+
+    // If not authorized, render nothing
+    if (!props?.authorized) {
+      return null;
+    }
+
+    // If authorized, render the component with the data
+    return <Component {...(props.data as T)} />;
+  };
+};

package/src/features/shared/utils/withAuthLoader.ts

@@ -0,0 +1,47 @@
+import { validateAccessService } from "../services";
+
+import { ClientContext, getClientContext } from "./getClientContext";
+
+import type { AuthRouteProps } from "../types";
+import type { LoaderData } from "../types";
+
+/**
+ * Utility function to encapsulate access validation in loaders.
+ * Similar to withAuthProvider but for server-side usage.
+ */
+export const withAuthLoader = async <T>(
+  data: LoaderData,
+  dataLoader: (clientContext: ClientContext) => Promise<T>
+): Promise<AuthRouteProps<T>> => {
+  try {
+    const { cookie, userId, ...clientContext } = await getClientContext(data);
+
+    const hasAccess = await validateAccessService({ cookie });
+
+    if (!hasAccess) {
+      data.res?.writeHead(302, { Location: "/" });
+      data.res?.end();
+
+      return {
+        authorized: false,
+      };
+    }
+
+    const pageData = await dataLoader({ cookie, userId, ...clientContext });
+
+    return {
+      authorized: true,
+      data: pageData,
+      clientContext: { cookie, userId, ...clientContext },
+    };
+  } catch (error) {
+    console.error("Auth validation failed:", error);
+
+    data.res?.writeHead(302, { Location: "/" });
+    data.res?.end();
+
+    return {
+      authorized: false,
+    };
+  }
+};

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

@@ -0,0 +1,38 @@
+import { useEffect, type ComponentType } from "react";
+
+import { useRouter } from "next/router";
+
+import { BuyerPortalProvider } from "../components";
+
+import type { AuthRouteProps } from "../types";
+import type { ClientContext } from "./getClientContext";
+
+/**
+ * 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();
+
+    useEffect(() => {
+      // Se não está autorizado, recarrega a página
+      if (!props?.authorized) {
+        router.reload();
+      }
+    }, [props?.authorized, router]);
+
+    // Se não está autorizado, não renderiza nada
+    if (!props?.authorized) {
+      return null;
+    }
+
+    // Se autorizado, renderiza o componente envolvido no provider
+    return (
+      <BuyerPortalProvider clientContext={props?.clientContext}>
+        <Component {...props.data} clientContext={props?.clientContext} />
+      </BuyerPortalProvider>
+    );
+  };
+};

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

@@ -0,0 +1,24 @@
+import { type ComponentType } from "react";
+
+import { BuyerPortalProvider } from "../components";
+
+import type { ClientContext } from "./getClientContext";
+
+/**
+ * HOC que adiciona BuyerPortalProvider e context
+ */
+export const withBuyerPortal = <T extends Record<string, unknown>>(
+  Component: ComponentType<T>
+) => {
+  return function WrappedWithProvider(
+    props: T & { context: { clientContext: ClientContext } }
+  ) {
+    const { context, ...componentProps } = props;
+
+    return (
+      <BuyerPortalProvider {...context}>
+        <Component {...(componentProps as unknown as T)} />
+      </BuyerPortalProvider>
+    );
+  };
+};

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

@@ -0,0 +1,35 @@
+import { type ComponentType } from "react";
+
+import { withAuth } from "./withAuth";
+import { withBuyerPortal } from "./withBuyerPortal";
+
+/**
+ * Type for HOCs that can be applied in sequence
+ * Using any for flexibility in HOC composition
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ProviderHOC = (Component: ComponentType<any>) => ComponentType<any>;
+
+/**
+ * Default project providers applied to all pages.
+ * Order: right to left (like pipe/compose)
+ */
+const projectProviders: ProviderHOC[] = [withAuth, withBuyerPortal];
+
+/**
+ * HOC that applies all default project providers.
+ * To add new providers, just include them in the projectProviders array.
+ *
+ * @example
+ * export default withProviders(MyComponent);
+ */
+export const withProviders = <T extends Record<string, unknown>>(
+  Component: ComponentType<T>
+): ComponentType<T> => {
+  // Apply providers in sequence (right to left)
+  return projectProviders.reduceRight(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (WrappedComponent, provider) => provider(WrappedComponent) as any,
+    Component
+  ) as ComponentType<T>;
+};

package/src/pages/address-details.tsx

@@ -4,10 +4,7 @@ import { getAddressLocationService } from "../features/addresses/services/locati
 import { getAddressRecipientsService } from "../features/addresses/services/recipients/get-address-recipients.service";
 import { getContractDetailsService } from "../features/contracts/services";
 import { getOrgUnitBasicDataService } from "../features/org-units/services";
-import {
-  BuyerPortalProvider,
-  withErrorBoundary,
-} from "../features/shared/components";
+import { withErrorBoundary } from "../features/shared/components";
 import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import {
   PAGE_PARAMS,
@@ -16,9 +13,10 @@ import {
 import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
-  getClientContext,
   getValidPage,
   withLoaderErrorBoundary,
+  withAuthLoader,
+  withProviders,
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
@@ -29,7 +27,7 @@ import type {
 } from "../features/addresses/types/AddressData";
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
-import type { LoaderData } from "../features/shared/types";
+import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
 const DEFAULT_ADDRESS_PAGINATED_DATA = {
@@ -69,7 +67,7 @@ export type AddressDetailsPageData = {
 
 const loaderFunction = async (
   data: LoaderData<AddressDetailsPageQuery>
-): Promise<AddressDetailsPageData> => {
+): Promise<AuthRouteProps<AddressDetailsPageData>> => {
   const {
     contractId,
     orgUnitId,
@@ -82,83 +80,88 @@ const loaderFunction = async (
   const pageRecipients = getValidPage(pageRecipientsString);
   const pageLocation = getValidPage(pageLocationString);
 
-  const { customerId, cookie, userId, ...clientContext } =
-    await getClientContext(data);
-
-  if (!contractId || !orgUnitId) {
-    return {
-      data: {
-        addressDetails: null,
-        recipientsData: null,
-        locationsData: null,
-      },
-      context: {
-        clientContext: { customerId, cookie, userId, ...clientContext },
-        currentOrgUnit: null,
-        currentContract: null,
-        currentUser: null,
-      },
-    };
-  }
-
-  const orgUnit = await getOrgUnitBasicDataService({ cookie, id: orgUnitId });
-
-  const contract = await getContractDetailsService({
-    contractId,
-    cookie,
-    unitId: orgUnitId,
-  });
-
-  const user = await getUserByIdService({ orgUnitId, userId, cookie });
-
-  const { data: recipients = [], total = 0 } =
-    await getAddressRecipientsService({
-      unitId: orgUnitId,
-      customerId: contractId,
-      addressId,
-      cookie,
-      search: searchRecipients,
-      page: pageRecipients,
-    });
-
-  const { data: locations, total: totalLocations } =
-    await getAddressLocationService({
-      contractId,
-      addressId,
-      cookie,
-      unitId: orgUnitId,
-      search: searchLocations,
-      page: pageLocation,
-    });
-
-  return {
-    data: {
-      addressDetails: await getAddressDetailsService(
-        addressId,
+  return withAuthLoader(
+    data,
+    async ({ customerId, cookie, userId, ...clientContext }) => {
+      if (!contractId || !orgUnitId) {
+        return {
+          data: {
+            addressDetails: null,
+            recipientsData: null,
+            locationsData: null,
+          },
+          context: {
+            clientContext: { customerId, cookie, userId, ...clientContext },
+            currentOrgUnit: null,
+            currentContract: null,
+            currentUser: null,
+          },
+        };
+      }
+
+      const orgUnit = await getOrgUnitBasicDataService({
         cookie,
+        id: orgUnitId,
+      });
+
+      const contract = await getContractDetailsService({
         contractId,
-        orgUnitId
-      ),
-      recipientsData: {
-        data: recipients,
-        total,
-        search: searchRecipients ?? "",
-        page: pageRecipients ?? 1,
-      },
-      locationsData: {
-        data: locations,
-        total: totalLocations,
-        search: searchLocations ?? "",
-        page: pageLocation ?? 1,
-      },
-    },
-    context: {
-      clientContext: { customerId, cookie, userId, ...clientContext },
-      currentOrgUnit: orgUnit,
-      currentContract: contract,
-      currentUser: user,
-    },
-  };
+        cookie,
+        unitId: orgUnitId,
+      });
+
+      const user = await getUserByIdService({ orgUnitId, userId, cookie });
+
+      const { data: recipients = [], total = 0 } =
+        await getAddressRecipientsService({
+          unitId: orgUnitId,
+          customerId: contractId,
+          addressId,
+          cookie,
+          search: searchRecipients,
+          page: pageRecipients,
+        });
+
+      const { data: locations, total: totalLocations } =
+        await getAddressLocationService({
+          contractId,
+          addressId,
+          cookie,
+          unitId: orgUnitId,
+          search: searchLocations,
+          page: pageLocation,
+        });
+
+      return {
+        data: {
+          addressDetails: await getAddressDetailsService(
+            addressId,
+            cookie,
+            contractId,
+            orgUnitId
+          ),
+          recipientsData: {
+            data: recipients,
+            total,
+            search: searchRecipients ?? "",
+            page: pageRecipients ?? 1,
+          },
+          locationsData: {
+            data: locations,
+            total: totalLocations,
+            search: searchLocations ?? "",
+            page: pageLocation ?? 1,
+          },
+        },
+        context: {
+          clientContext: { customerId, cookie, userId, ...clientContext },
+          currentOrgUnit: orgUnit,
+          currentContract: contract,
+          currentUser: user,
+        },
+      };
+    }
+  );
 };
 
 export const loader = withLoaderErrorBoundary(loaderFunction, {
@@ -168,11 +171,10 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
 
 const AddressDetailsPage = ({
   data,
-  context,
   hasError,
   error,
 }: AddressDetailsPageData) => (
-  <BuyerPortalProvider {...context}>
+  <>
     {hasError ? (
       <ErrorTabsLayout error={error} />
     ) : (
@@ -182,12 +184,14 @@ const AddressDetailsPage = ({
         locationsData={data.locationsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
       />
     )}
-  </BuyerPortalProvider>
+  </>
 );
 
-export default withErrorBoundary(AddressDetailsPage, {
-  tags: {
-    component: "AddressDetailsPage",
-    errorType: "address_details_error",
-  },
-});
+export default withProviders(
+  withErrorBoundary(AddressDetailsPage, {
+    tags: {
+      component: "AddressDetailsPage",
+      errorType: "address_details_error",
+    },
+  })
+);