@vtex/faststore-plugin-buyer-portal 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {},

package/src/components/BuyerPortalProvider/BuyerPortalProvider.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import { ClientContext } from "../../utils/getClientContext";
+
+export type BuyerPortalContextType = {
+  clientContext: ClientContext;
+};
+
+export const BuyerPortalContext = createContext<
+  BuyerPortalContextType | undefined
+>(undefined);
+
+export type BuyerPortalProviderProps = {
+  clientContext: ClientContext;
+  children: ReactNode;
+};
+
+export const BuyerPortalProvider = ({
+  clientContext,
+  children,
+}: BuyerPortalProviderProps) => {
+  return (
+    <BuyerPortalContext.Provider value={{ clientContext }}>
+      {children}
+    </BuyerPortalContext.Provider>
+  );
+};

package/src/components/CreateOrgUnitDrawer/CreateOrgUnitDrawer.tsx

@@ -0,0 +1,7 @@
+export const CreateOrgUnitDrawer = () => {
+  return (
+    <div>
+      <h1>CreateOrgUnitDrawer</h1>
+    </div>
+  );
+};

package/src/hooks/useBuyerPortal.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import {
+  BuyerPortalContext,
+  BuyerPortalContextType,
+} from "../components/BuyerPortalProvider/BuyerPortalProvider";
+
+export const useBuyerPortal = (): BuyerPortalContextType["clientContext"] => {
+  const context = useContext(BuyerPortalContext);
+  if (!context) {
+    throw new Error("useBuyerPortal must be used within a BuyerPortalProvider");
+  }
+  return context?.clientContext;
+};

package/src/pages/address-details.tsx

@@ -1,19 +1,18 @@
 import { AddressData } from "../types/AddressData";
 import { AddressDetailsLayout } from "../layouts/AddressDetailsLayout/AddressDetailsLayout";
 import { getAddressDetailsService } from "../services/get-address-details.service";
+import { LoaderData } from "../types/LoaderData";
 
-type AddressDetailsPageLoaderContext = {
-  query: {
-    id: string;
-  };
+type AddressDetailsPageQuery = {
+  id: string;
 };
 
 export type AddressDetailsPageData = { data: AddressData };
 
 export async function loader(
-  data: AddressDetailsPageLoaderContext
+  data: LoaderData<AddressDetailsPageQuery>
 ): Promise<AddressDetailsPageData> {
-  return { data: await getAddressDetailsService(data.query.id) };
+  return { data: await getAddressDetailsService(data.query?.id) };
 }
 
 const AddressDetailsPage = ({ data }: AddressDetailsPageData) => (

package/src/pages/addresses.tsx

@@ -1,25 +1,26 @@
 import { AddressLayout } from "../layouts/AddressesLayout/AddressesLayout";
 import {
   getAddressesService,
+  GetAddressesServiceProps,
 } from "../services/get-addresses.service";
 import { AddressSummaryData } from "../types/AddressData";
-import { getCookieAsString, getCustomerIdFromCookieServerSide } from "../utils/cookie";
-
+import {
+  getCookieAsString,
+  getCustomerIdFromCookieServerSide,
+} from "../utils/cookie";
+import { LoaderData } from "../types/LoaderData";
 
 export type AddressesPageData = { data: AddressSummaryData[] };
 
-export type AddressesPageContext = {
-  req: {
-    cookies: Record<string, string>
-  };
-};
-
-export async function loader(data: AddressesPageContext): Promise<AddressesPageData> {
+export async function loader(
+  data: LoaderData<GetAddressesServiceProps>
+): Promise<AddressesPageData> {
   return {
     data: await getAddressesService({
-      customerId: getCustomerIdFromCookieServerSide(data), cookie: getCookieAsString(data?.req?.cookies)
-    })
-  }
+      customerId: getCustomerIdFromCookieServerSide(data),
+      cookie: getCookieAsString(data?.req?.cookies),
+    }),
+  };
 }
 
 const AddressPage = ({ data }: AddressesPageData) => (

package/src/pages/contracts.tsx

@@ -1,22 +1,21 @@
 import { ContractsLayout } from "../layouts/ContractsLayout/ContractsLayout";
-import {
-  getContractsService,
-  GetContractsServiceProps,
-} from "../services/get-contracts.service";
+import { getContractsService } from "../services/get-contracts.service";
 import { ContractData } from "../types/ContractData";
-import { getCookieAsString, getCustomerIdFromCookieServerSide } from "../utils/cookie";
-
+import {
+  getCookieAsString,
+  getCustomerIdFromCookieServerSide,
+} from "../utils/cookie";
+import { LoaderData } from "../types/LoaderData";
 
 export type ContractsPageData = { data: ContractData[] };
 
-export type ContractsPageContext = {
-  req: {
-    cookies: Record<string, string>
+export async function loader(data: LoaderData): Promise<ContractsPageData> {
+  return {
+    data: await getContractsService({
+      customerId: getCustomerIdFromCookieServerSide(data),
+      cookie: getCookieAsString(data?.req?.cookies),
+    }),
   };
-};
-
-export async function loader(data: ContractsPageContext): Promise<ContractsPageData> {
-  return { data: await getContractsService({ customerId: getCustomerIdFromCookieServerSide(data), cookie: getCookieAsString(data?.req?.cookies) }) };
 }
 
 const ContractsPage = ({ data }: ContractsPageData) => (

package/src/pages/home.tsx

@@ -1,17 +1,22 @@
 import { HomeLayout } from "../layouts/HomeLayout/HomeLayout";
 import { getOrganizationService } from "../services/get-organization.service";
+import { LoaderData } from "../types/LoaderData";
 import { OrganizationData } from "../types/OrganizationData";
 
 export type HomePageData = { data: OrganizationData };
 
-type HomePageLoaderContext = {
-  query: {
-    contractMode?: string[]
-  }
-}
+type HomePageQuery = {
+  contractMode?: string[];
+};
 
-export async function loader(data: HomePageLoaderContext): Promise<HomePageData> {
-  return { data: await getOrganizationService(data.query.contractMode ? data.query.contractMode[0] : '') };
+export async function loader(
+  data: LoaderData<HomePageQuery>
+): Promise<HomePageData> {
+  return {
+    data: await getOrganizationService(
+      data.query.contractMode ? data.query.contractMode[0] : ""
+    ),
+  };
 }
 
 const HomePage = ({ data }: HomePageData) => {

package/src/pages/org-units.tsx

@@ -1,15 +1,26 @@
+import { BuyerPortalProvider } from "../components/BuyerPortalProvider/BuyerPortalProvider";
 import { OrgUnitsLayout } from "../layouts/OrgUnitsLayout/OrgUnitsLayout";
 import { getOrgUnitsHierarchyService } from "../services/get-org-units-hierarchy.service";
+import { LoaderData } from "../types/LoaderData";
 import { OrgUnitHierarchyData } from "../types/OrgUnitsData";
+import { ClientContext, getClientContext } from "../utils/getClientContext";
 
-export type OrgUnitsPageData = { data: OrgUnitHierarchyData };
+export type OrgUnitsPageData = {
+  data: OrgUnitHierarchyData;
+  clientContext: ClientContext;
+};
 
-export async function loader(): Promise<OrgUnitsPageData> {
-  return { data: await getOrgUnitsHierarchyService() };
+export async function loader(data: LoaderData): Promise<OrgUnitsPageData> {
+  return {
+    data: await getOrgUnitsHierarchyService(),
+    clientContext: getClientContext(data),
+  };
 }
 
-const OrgUnitsPage = ({ data }: OrgUnitsPageData) => (
-  <OrgUnitsLayout data={data} />
+const OrgUnitsPage = ({ data, clientContext }: OrgUnitsPageData) => (
+  <BuyerPortalProvider clientContext={clientContext}>
+    <OrgUnitsLayout data={data} />
+  </BuyerPortalProvider>
 );
 
 export default OrgUnitsPage;

package/src/pages/profile.tsx

@@ -1,16 +1,16 @@
 import { ProfileLayout } from "../layouts/ProfileLayout/ProfileLayout";
-import {
-  getContractsService,
-  GetContractsServiceProps,
-} from "../services/get-contracts.service";
+import { getContractsService } from "../services/get-contracts.service";
 import { ContractData } from "../types/ContractData";
+import { LoaderData } from "../types/LoaderData";
 import { getCustomerIdFromCookieServerSide } from "../utils/cookie";
-import type { ContractsPageContext } from "./contracts";
 
 export type ContractsPageData = { data: ContractData | null };
 
-export async function loader(data: ContractsPageContext): Promise<ContractsPageData> {
-  const contracts = await getContractsService({ customerId: getCustomerIdFromCookieServerSide(data), cookie: JSON.stringify(data?.req?.cookies).replace(/[{}]/g, '') })
+export async function loader(data: LoaderData): Promise<ContractsPageData> {
+  const contracts = await getContractsService({
+    customerId: getCustomerIdFromCookieServerSide(data),
+    cookie: JSON.stringify(data?.req?.cookies).replace(/[{}]/g, ""),
+  });
 
   // We should deal with a better error boundary here later, this is just so an empty array doesn't break the render
   return { data: contracts && contracts.length ? contracts[0] : null };

package/src/pages/user-details.tsx

@@ -4,11 +4,10 @@ import { UserDetailsLayout } from "../layouts/UserDetailsLayout/UserDetailsLayou
 import { UserData } from "../types/UserData";
 import { getUserDetailsService } from "../services/get-user-details.service";
 import { getUsersService } from "../services/get-users.service";
+import { LoaderData } from "../types/LoaderData";
 
-type UserDetailsPageLoaderContext = {
-  query: {
-    id: string;
-  };
+type UserDetailsPageQuery = {
+  id: string;
 };
 
 export type UserDetailsPageData = {
@@ -17,7 +16,7 @@ export type UserDetailsPageData = {
 
 export async function loader({
   query,
-}: UserDetailsPageLoaderContext): Promise<UserDetailsPageData> {
+}: LoaderData<UserDetailsPageQuery>): Promise<UserDetailsPageData> {
   return {
     data: {
       user: await getUserDetailsService(query.id),

package/src/pages/users.tsx

@@ -9,6 +9,7 @@ import {
 import { Structure } from "../components/HierarchyTree/HierarchyTree";
 import { OrgUnitData } from "../types/OrgUnitsData";
 import { getOrgUnitsHierarchyService } from "../services/get-org-units-hierarchy.service";
+import { LoaderData } from "../types/LoaderData";
 
 export type UsersPageData = {
   data: {
@@ -17,13 +18,9 @@ export type UsersPageData = {
   };
 };
 
-export type UsersPageContext = {
-  query: GetUsersServiceProps;
-};
-
 export async function loader({
   query,
-}: UsersPageContext): Promise<UsersPageData> {
+}: LoaderData<GetUsersServiceProps>): Promise<UsersPageData> {
   return {
     data: {
       users: await getUsersService(query),

package/src/types/LoaderData.ts

@@ -0,0 +1,5 @@
+export type LoaderData<QueryType = any> = {
+  req: {
+    cookies: Record<string, string>;
+  };
+} & (QueryType extends undefined ? { query?: never } : { query: QueryType });

package/src/utils/api.ts

@@ -1,6 +1,6 @@
 import { API_URL } from "./constants"
-
+import storeConfig from 'discovery.config'
 
 export function getApiUrl(operation: string, customerId: string) {
-  return `${API_URL(`https://b2bfaststore.myvtex.com/` ?? '', operation)}${customerId ? `/${customerId}` : ''}`
+  return `${API_URL(`${storeConfig?.secureSubdomain}` ?? '', operation)}${customerId ? `/${customerId}` : ''}`
 }

package/src/utils/cookie.ts

@@ -1,35 +1,30 @@
-import { AUT_COOKIE_KEY } from "./constants"
-import storeConfig from '../../../../discovery.config'
-
-
-type LoaderData = {
-  req: {
-    cookies: Record<string, string>
-  }
-}
+import { AUT_COOKIE_KEY } from "./constants";
+import storeConfig from "discovery.config";
+import { LoaderData } from "../types/LoaderData";
 
 export function getAuthCookie(data: LoaderData) {
-  const authCookie = data?.req?.cookies[`${AUT_COOKIE_KEY}_${storeConfig?.api.storeId}`] ?? ''
+  const authCookie =
+    data?.req?.cookies[`${AUT_COOKIE_KEY}_${storeConfig?.api.storeId}`] ?? "";
 
-  return authCookie
+  return authCookie;
 }
 
 export function getCustomerIdFromCookieServerSide(data: LoaderData) {
-  const authCookie = getAuthCookie(data)
+  const authCookie = getAuthCookie(data);
 
-  if (!authCookie || authCookie === '') {
-    return 'TempCustomerId'
+  if (!authCookie || authCookie === "") {
+    return "";
   }
 
-  const parsedCookie = parseJwt(authCookie)
+  const parsedCookie = parseJwt(authCookie);
 
-  return parsedCookie.customerId
+  return parsedCookie.customerId;
 }
 
 export function getCookieAsString(cookie: Record<string, string>) {
-  return JSON.stringify(cookie).replace(/[{}]/g, '') ?? ''
+  return JSON.stringify(cookie).replace(/[{}]/g, "") ?? "";
 }
 
 function parseJwt(token: string) {
-  return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
+  return JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
 }

package/src/utils/getClientContext.ts

@@ -0,0 +1,14 @@
+import { LoaderData } from "../types/LoaderData";
+import { getAuthCookie } from "./cookie";
+
+export type ClientContext = {
+  vtexIdclientAutCookie: string;
+};
+
+export const getClientContext = ({ req }: LoaderData): ClientContext => {
+  return {
+    vtexIdclientAutCookie: getAuthCookie({
+      req,
+    }),
+  };
+};