@vtex/faststore-plugin-buyer-portal 1.1.116-poc-9 → 1.2.1

package/package.json

@@ -1,44 +1,44 @@
 {
-  "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.1.116-poc-9",
-  "description": "A plugin for faststore with buyer portal",
-  "main": "index.js",
-  "scripts": {
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
-    "prepare": "husky"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
-    ]
-  },
-  "dependencies": {
-    "@types/react-dom": "^19.0.3",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.29.0",
-    "@faststore/core": "^3.41.5",
-    "@faststore/ui": "^3.41.5",
-    "@types/react": "^18.2.42",
-    "cypress": "13",
-    "eslint": "^9.29.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.2.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "next": "13.5.7",
-    "typescript": "4.7.3",
-    "typescript-eslint": "^8.35.0"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "license": "MIT",
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+	"name": "@vtex/faststore-plugin-buyer-portal",
+	"version": "1.2.1",
+	"description": "A plugin for faststore with buyer portal",
+	"main": "index.js",
+	"scripts": {
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+		"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+		"prepare": "husky"
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx}": [
+			"eslint --fix"
+		]
+	},
+	"dependencies": {
+		"@types/react-dom": "^19.0.3",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.29.0",
+		"@faststore/core": "^3.41.5",
+		"@faststore/ui": "^3.41.5",
+		"@types/react": "^18.2.42",
+		"cypress": "13",
+		"eslint": "^9.29.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-prettier": "^5.5.1",
+		"eslint-plugin-react": "^7.37.5",
+		"globals": "^16.2.0",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.1.2",
+		"next": "13.5.7",
+		"typescript": "4.7.3",
+		"typescript-eslint": "^8.35.0"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"license": "MIT",
+	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -124,7 +124,6 @@ export const AddressDetailsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-address-details-section>

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -114,7 +114,6 @@ export const AddressLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-addresses-section>

package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx

@@ -151,7 +151,6 @@ export const BudgetsDetailsLayout = ({ budget }: BudgetsDetailsLayoutProps) => {
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <div data-fs-bp-budgets-details-layout>

package/src/features/collections/layouts/CollectionsLayout/CollectionsLayout.tsx

@@ -72,7 +72,6 @@ export const CollectionsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-collections-container>

package/src/features/contracts/hooks/index.ts

@@ -1,3 +1 @@
 export { useUpdateContractStatus } from "./useUpdateContractStatus";
-export { useContractsByOrgUnitId } from "./useContractsByOrgUnitId";
-export { useContractDetails } from "./useContractDetails";

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

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

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -126,7 +126,6 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-credit-card-section>

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

@@ -214,7 +214,6 @@ export const CustomFieldsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-bp-custom-field-container>

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

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

package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumbLink.tsx

@@ -38,7 +38,6 @@ export const OrgUnitBreadcrumbLink = ({
           ref={linkRef as React.RefObject<HTMLAnchorElement>}
           data-fs-bp-breadcrumb-text
           href={item}
-          data-fs-bp-breadcrumb-link
         >
           {name}
         </Link>

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

@@ -5,4 +5,3 @@ export { useUpdateOrgUnit } from "./useUpdateOrgUnit";
 export { useChildrenOrgUnits } from "./useChildrenOrgUnits";
 export { useOrgUnitByUser } from "./useOrgUnitByUser";
 export { useSearchOrgUnits } from "./useSearchOrgUnits";
-export { useOrgUnitBasicData } from "./useOrgUnitBasicData";

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

@@ -5,7 +5,6 @@ import {
   Skeleton,
 } from "@faststore/ui";
 
-import { useContractsByOrgUnitId } from "../../../contracts/hooks";
 import {
   BasicCard,
   BasicDropdownMenu,
@@ -22,14 +21,13 @@ import {
   getOrganizationSettingsLinks,
 } from "../../../shared/utils";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { useGetUserById } from "../../../users/hooks";
 import {
   AddAllToOrgUnitDropdown,
   OrgUnitBreadcrumb,
   OrgUnitDetailsNavbar,
   OrgUnitsDropdownMenu,
 } from "../../components";
-import { useOrgUnitBasicData, useOrgUnitByUser } from "../../hooks";
+import { useOrgUnitByUser } from "../../hooks";
 
 import {
   MAX_DESKTOP_BREADCRUMB_ITEMS,
@@ -37,29 +35,28 @@ import {
   QUERY_TABLET,
 } from "./utils";
 
+import type { ContractData } from "../../../contracts/types";
+import type { UserData } from "../../../users/types";
+import type { OrgUnitBasicData } from "../../types";
+
 export type OrgUnitsDetailsLayoutProps = {
-  orgUnitId: string;
-  userId: string;
+  data: {
+    orgUnit: OrgUnitBasicData;
+    contracts: ContractData[];
+    user: UserData | null;
+  };
   loading?: boolean;
 };
 
 export const OrgUnitsDetailsLayout = ({
-  orgUnitId,
-  userId,
-  loading = true,
+  data: { orgUnit, contracts, user },
+  loading = false,
 }: OrgUnitsDetailsLayoutProps) => {
-  const { orgUnit, isOrgUnitLoading } = useOrgUnitBasicData(orgUnitId);
-
-  const { contracts, isContractsLoading } = useContractsByOrgUnitId(orgUnitId);
-
-  const { user, isUserLoading } = useGetUserById({ orgUnitId, userId });
-
-  loading = isOrgUnitLoading || isContractsLoading || isUserLoading;
   const isMobile = useMediaQuery(QUERY_TABLET);
 
-  const isSingleContract = !contracts ? true : contracts.length <= 1;
+  const isSingleContract = contracts.length <= 1;
 
-  const { orgUnit: userUnit } = useOrgUnitByUser(userId);
+  const { orgUnit: userUnit } = useOrgUnitByUser(user?.id ?? "");
 
   const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
 
@@ -70,7 +67,7 @@ export const OrgUnitsDetailsLayout = ({
   const breadcrumbList = orgUnitList.map((orgUnitId, index) => ({
     unitId: orgUnitId,
     item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
-    name: orgUnit?.path.names.split("/")[index] ?? "",
+    name: orgUnit.path.names.split("/")[index],
     position: index + 1,
     enabled: index >= userUnitIndex,
   }));
@@ -79,7 +76,7 @@ export const OrgUnitsDetailsLayout = ({
     <GlobalLayout>
       {/* TODO: Add person here */}
       <OrgUnitDetailsNavbar
-        orgName={orgUnit?.name ?? ""}
+        orgName={orgUnit.name}
         person={{
           name: user?.name ?? "",
           role: user?.roles?.[0] ?? "",
@@ -110,8 +107,8 @@ export const OrgUnitsDetailsLayout = ({
             <BasicDropdownMenu.Trigger />
             <OrgUnitsDropdownMenu
               isComplete={false}
-              id={orgUnitId}
-              name={orgUnit?.name ?? ""}
+              id={orgUnit.id}
+              name={orgUnit.name}
             />
           </Dropdown>
           <Dropdown>
@@ -121,8 +118,8 @@ export const OrgUnitsDetailsLayout = ({
             <AddAllToOrgUnitDropdown
               isSingleContract={isSingleContract}
               contractId={contracts[0]?.id}
-              unitId={orgUnitId}
-              unitName={orgUnit?.name ?? ""}
+              unitId={orgUnit?.id}
+              unitName={orgUnit?.name}
             />
           </Dropdown>
         </HeaderInside>
@@ -132,13 +129,13 @@ export const OrgUnitsDetailsLayout = ({
               data-fs-bp-contracts-settings-card
               footerMessage="Manage contract settings"
               footerLink={buyerPortalRoutes.profileDetails({
-                orgUnitId: orgUnitId,
+                orgUnitId: orgUnit.id,
                 contractId: contracts[0]?.id ?? "",
               })}
               enableFooter
             >
-              <LetterHighlight letter={orgUnit?.name?.[0] ?? ""} />
-              <VerticalNav.Menu title={orgUnit?.name ?? ""} loading={loading}>
+              <LetterHighlight letter={orgUnit.name[0]} />
+              <VerticalNav.Menu title={orgUnit.name} loading={loading}>
                 {loading
                   ? Array(8)
                       .fill(null)
@@ -153,7 +150,7 @@ export const OrgUnitsDetailsLayout = ({
                         </li>
                       ))
                   : getContractSettingsLinks({
-                      orgUnitId: orgUnitId,
+                      orgUnitId: orgUnit.id,
                       contractId: contracts[0]?.id ?? "",
                     }).map(({ name, link }) => (
                       <VerticalNav.Link key={name} link={link}>
@@ -180,7 +177,7 @@ export const OrgUnitsDetailsLayout = ({
                     />
                   }
                   href={buyerPortalRoutes.profileDetails({
-                    orgUnitId: orgUnitId,
+                    orgUnitId: orgUnit.id,
                     contractId: contract.id,
                   })}
                   menu={
@@ -199,12 +196,12 @@ export const OrgUnitsDetailsLayout = ({
             data-fs-bp-organizations-settings-card
             footerMessage="Manage organization settings"
             footerLink={buyerPortalRoutes.users({
-              orgUnitId: orgUnitId,
+              orgUnitId: orgUnit.id,
             })}
             enableFooter
           >
             <VerticalNav.Menu title="Organization">
-              {getOrganizationSettingsLinks(orgUnitId).map((option) => (
+              {getOrganizationSettingsLinks(orgUnit.id).map((option) => (
                 <VerticalNav.Link key={option.name} link={option.link}>
                   {option.name}
                 </VerticalNav.Link>
@@ -215,14 +212,14 @@ export const OrgUnitsDetailsLayout = ({
             data-fs-bp-compliance-settings-card
             footerMessage="Manage finance and compliance settings"
             footerLink={buyerPortalRoutes.buyingPolicies({
-              orgUnitId: orgUnitId,
+              orgUnitId: orgUnit.id,
               contractId: contracts[0]?.id,
             })}
             enableFooter
           >
             <VerticalNav.Menu title="Finance and Compliance">
               {getFinanceSettingsLinks({
-                orgUnitId: orgUnitId,
+                orgUnitId: orgUnit.id,
                 contractId: contracts[0]?.id ?? "",
               }).map((option) => (
                 <VerticalNav.Link key={option.name} link={option.link}>

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

@@ -7,9 +7,5 @@ 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,10 +8,6 @@ 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,21 +25,3 @@ 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,8 +1,6 @@
 export type {
   OrgUnitBasicData,
   OrgUnitSummaryData,
-  OrgUnitUserData,
-  UserOrgUnit,
 } from "./OrgUnitSummaryData";
 export type { OrgUnitData, OrgUnitHierarchyData } from "./OrgUnitsData";
 export type { OrganizationData } from "./OrganizationData";

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -168,7 +168,6 @@ export const PaymentMethodsLayout = ({
           image: undefined,
           name: user?.name ?? "",
           role: user?.role ?? "",
-          id: user?.id ?? "",
         }}
       >
         <section data-fs-payment-methods-section>

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

@@ -1,37 +1,18 @@
-import { Skeleton } from "@faststore/ui";
-
-import { useContractDetails } from "../../../contracts/hooks";
-import { useOrgUnitBasicData } from "../../../org-units/hooks";
 import { HeaderInside } from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
 import { GlobalLayout, ContractTabsLayout } from "../../../shared/layouts";
-import { useGetUserById } from "../../../users/hooks";
+
+import type { ContractData } from "../../../contracts/types";
 
 export type ProfileLayoutProps = {
-  orgUnitId: string;
-  contractId: string;
-  userId: string;
-  loading?: boolean;
+  data: ContractData | null;
 };
 
-export const ProfileLayout = ({
-  orgUnitId,
-  contractId,
-  userId,
-  loading = true,
-}: ProfileLayoutProps) => {
-  const { orgUnit, isOrgUnitLoading } = useOrgUnitBasicData(orgUnitId);
-
-  const { contract, isContractLoading } = useContractDetails(
-    contractId,
-    orgUnitId
-  );
-
-  const { user, isUserLoading } = useGetUserById({ orgUnitId, userId });
-
-  loading = isContractLoading || isOrgUnitLoading || isUserLoading;
+export const ProfileLayout = ({ data }: ProfileLayoutProps) => {
+  const { currentOrgUnit: orgUnit, currentUser: user } = useBuyerPortal();
 
-  const creationDate = contract
-    ? new Date(contract.creationDate).toLocaleDateString("en-US", {
+  const creationDate = data
+    ? new Date(data.creationDate).toLocaleDateString("en-US", {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -42,41 +23,30 @@ export const ProfileLayout = ({
     <GlobalLayout>
       <ContractTabsLayout
         orgUnitName={orgUnit?.name ?? ""}
-        orgUnitId={orgUnitId}
-        contractName={contract?.name ?? ""}
-        contractId={contract?.id ?? ""}
+        orgUnitId={orgUnit?.id ?? ""}
+        contractName={data?.name ?? ""}
+        contractId={data?.id ?? ""}
         pageName="Contract"
         person={{
           image: undefined,
           name: user?.name ?? "",
-          role: user?.roles?.[0] ?? "",
-          id: userId,
+          role: user?.role ?? "",
         }}
-        loading={loading}
       >
         <section data-fs-bp-profile>
           <HeaderInside title="Profile" />
 
-          {loading && !contract && (
-            <Skeleton
-              size={{
-                width: "100%",
-                height: "8rem",
-              }}
-            />
-          )}
-
-          {contract && (
+          {data && (
             <div data-fs-bp-profile-details>
               <span data-fs-bp-profile-details-title>Details</span>
 
-              {!!contract.name && (
+              {!!data.name && (
                 <>
                   <hr data-fs-bp-profile-divider />
                   <div data-fs-bp-profile-details-row>
                     <span data-fs-bp-profile-details-row-label>Name</span>
                     <span data-fs-bp-profile-details-row-value>
-                      {contract.name}
+                      {data.name}
                     </span>
                   </div>
                 </>
@@ -87,7 +57,7 @@ export const ProfileLayout = ({
               <div data-fs-bp-profile-details-row>
                 <span data-fs-bp-profile-details-row-label>Email</span>
                 <span data-fs-bp-profile-details-row-value>
-                  <a href={`mailto:${contract.email}`}>{contract.email}</a>
+                  <a href={`mailto:${data.email}`}>{data.email}</a>
                 </span>
               </div>
 

package/src/features/shared/components/Error/Error.tsx

@@ -1,4 +1,4 @@
-import { isDevelopment } from "../../utils/environment";
+// import { isDevelopment } from "../../utils/environment";
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
@@ -20,17 +20,18 @@ export default function Error({ error }: ErrorProps) {
       <button data-fs-bp-error-button onClick={() => window.location.reload()}>
         Try again
       </button>
-      {isDevelopment() ? (
-        <div data-fs-bp-error-details>
-          <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
-          <h2 data-fs-bp-error-details-title>Error Details</h2>
-          <p data-fs-bp-error-details-message>{error?.error.message}</p>
-          <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
-          <p data-fs-bp-error-details-component>
-            Component: {error?.tags?.component}
-          </p>
-        </div>
-      ) : null}
+      <div data-fs-bp-error-details>
+        <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
+        <h2 data-fs-bp-error-details-title>Error Details</h2>
+        <p data-fs-bp-error-details-message>{error?.error.message}</p>
+        <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
+        <p data-fs-bp-error-details-component>
+          Component: {error?.tags?.component}
+        </p>
+        <p data-fs-bp-error-details-query>
+          Query: {JSON.stringify(error?.query)}
+        </p>
+      </div>
     </div>
   );
 }

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

@@ -76,4 +76,3 @@ 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/components/withErrorBoundary/withErrorBoundary.tsx

@@ -15,6 +15,7 @@ type WithErrorBoundaryOptions = {
 
 export function withErrorBoundary<P extends Record<string, unknown>>(
   WrappedComponent: React.ComponentType<P>,
+
   options: WithErrorBoundaryOptions = {}
 ) {
   const { onError, tags } = options;

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

@@ -1,5 +1,4 @@
 export { useBuyerPortal } from "./useBuyerPortal";
-export { useCookieMonitor } from "./useCookieMonitor";
 export { useDrawerProps, type DrawerProps } from "./useDrawerProps";
 export {
   useMutation,
@@ -13,4 +12,3 @@ export { useAddToScope } from "./useAddToScope";
 export { useRemoveFromScope } from "./useRemoveFromScope";
 export { usePageItems, type UsePageItemsProps } from "./usePageItems";
 export { useRouterLoading } from "./useRouterLoading";
-export { useAuth, type UseAuthResult } from "./useAuth";