@vtex/faststore-plugin-buyer-portal 1.1.92 → 1.1.93

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -537,4 +537,4 @@
       fill="currentColor"
     />
   </symbol>
-</svg>
+</svg>

package/src/features/addresses/services/get-addresses-by-unit-id.service.ts

@@ -1,4 +1,8 @@
 import { compareItems, statusFilters } from "../../shared/utils";
+import {
+  handleUnauthorizedRedirect,
+  withClientErrorBoundary,
+} from "../../shared/utils/withClientErrorBoundary";
 import { addressesClient } from "../clients/AddressesClient";
 
 export type GetAddressesByUnitIdServiceProps = Partial<{
@@ -13,7 +17,7 @@ export type GetAddressesByUnitIdServiceProps = Partial<{
   cookie: string;
 };
 
-export const getAddressesByUnitIdService = async ({
+export const getAddressesByUnitIdServiceFn = async ({
   orgUnitId,
   status,
   type,
@@ -46,3 +50,11 @@ export const getAddressesByUnitIdService = async ({
 
   return { data: formattedAddress, total };
 };
+
+export const getAddressesByUnitIdService = withClientErrorBoundary(
+  getAddressesByUnitIdServiceFn,
+  {
+    componentName: "AddressesByUnitId",
+    onError: handleUnauthorizedRedirect,
+  }
+);

package/src/features/addresses/services/get-addresses.service.ts

@@ -1,4 +1,9 @@
-import { compareItems, statusFilters } from "../../shared/utils";
+import {
+  compareItems,
+  statusFilters,
+  withClientErrorBoundary,
+} from "../../shared/utils";
+import { handleUnauthorizedRedirect } from "../../shared/utils/withClientErrorBoundary";
 import { addressesClient } from "../clients/AddressesClient";
 
 import type { AddressData } from "../types/AddressData";
@@ -15,7 +20,7 @@ export type GetAddressesServiceProps = Partial<{
 };
 
 //TODO: Check if deprecated so we can remove this
-export const getAddressesService = async ({
+export const getAddressesServiceFn = async ({
   search = "",
   customerId,
   unitId,
@@ -54,3 +59,11 @@ export const getAddressesService = async ({
     })
     .sort((a, b) => compareItems(a, b, sort));
 };
+
+export const getAddressesService = withClientErrorBoundary(
+  getAddressesServiceFn,
+  {
+    componentName: "AddressesService",
+    onError: handleUnauthorizedRedirect,
+  }
+);

package/src/features/buying-policies/services/get-buying-policies.service.ts

@@ -1,3 +1,7 @@
+import {
+  withClientErrorBoundary,
+  handleUnauthorizedRedirect,
+} from "../../shared/utils/withClientErrorBoundary";
 import { buyingPoliciesClient } from "../clients/BuyingPoliciesClient";
 import { BuyingPolicy } from "../types";
 
@@ -9,7 +13,7 @@ export type GetBuyingPoliciesServiceProps = {
   page?: number;
 };
 
-export const getBuyingPoliciesService = async ({
+const getBuyingPoliciesFunction = async ({
   search,
   page = 1,
   contractId,
@@ -19,25 +23,19 @@ export const getBuyingPoliciesService = async ({
   data: BuyingPolicy[];
   total: number;
 }> => {
-  try {
-    return await buyingPoliciesClient.getBuyingPoliciesByOrgUnitId(
-      contractId,
-      orgUnitId,
-      cookie,
-      search,
-      page
-    );
-  } catch (error) {
-    console.error("Error in getBuyingPoliciesService:", {
-      error,
-      orgUnitId,
-      contractId,
-      errorMessage: (error as { message?: string })?.message,
-    });
+  return await buyingPoliciesClient.getBuyingPoliciesByOrgUnitId(
+    contractId,
+    orgUnitId,
+    cookie,
+    search,
+    page
+  );
+};
 
-    return {
-      data: [],
-      total: 0,
-    };
+export const getBuyingPoliciesService = withClientErrorBoundary(
+  getBuyingPoliciesFunction,
+  {
+    componentName: "BuyingPoliciesService",
+    onError: handleUnauthorizedRedirect,
   }
-};
+);

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

@@ -1,3 +1,7 @@
+import {
+  withClientErrorBoundary,
+  handleUnauthorizedRedirect,
+} from "../../shared/utils/withClientErrorBoundary";
 import { contractsClient } from "../clients/ContractsClient";
 
 type GetContractDetailsServiceProps = {
@@ -6,7 +10,7 @@ type GetContractDetailsServiceProps = {
   unitId: string;
 };
 
-export const getContractDetailsService = async ({
+const getContractDetailsFunction = async ({
   contractId,
   cookie,
   unitId,
@@ -19,3 +23,11 @@ export const getContractDetailsService = async ({
 
   return contract;
 };
+
+export const getContractDetailsService = withClientErrorBoundary(
+  getContractDetailsFunction,
+  {
+    componentName: "ContractDetails",
+    onError: handleUnauthorizedRedirect,
+  }
+);

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

@@ -1,3 +1,7 @@
+import {
+  withClientErrorBoundary,
+  handleUnauthorizedRedirect,
+} from "../../shared/utils/withClientErrorBoundary";
 import { contractsClient } from "../clients/ContractsClient";
 
 import type { ContractData } from "../types";
@@ -10,7 +14,7 @@ export type GetContractsByOrgUnitIdServiceProps = {
   cookie: string;
 };
 
-export const getContractsByOrgUnitIdService = async ({
+const getContractsByOrgUnitIdFunction = async ({
   orgUnitId,
   cookie,
 }: GetContractsByOrgUnitIdServiceProps): Promise<ContractData[]> => {
@@ -20,16 +24,19 @@ export const getContractsByOrgUnitIdService = async ({
     return contractsData;
   }
 
-  try {
-    const { contracts } = await contractsClient.getContractsByOrgUnitId(
-      orgUnitId,
-      cookie
-    );
-    contractsData.push(...contracts);
-  } catch (err) {
-    console.error("Failed to fetch contracts", err);
-    return contractsData;
-  }
+  const { contracts } = await contractsClient.getContractsByOrgUnitId(
+    orgUnitId,
+    cookie
+  );
+  contractsData.push(...contracts);
 
   return contractsData;
 };
+
+export const getContractsByOrgUnitIdService = withClientErrorBoundary(
+  getContractsByOrgUnitIdFunction,
+  {
+    componentName: "GetContractsByOrgUnitId",
+    onError: handleUnauthorizedRedirect,
+  }
+);

package/src/features/contracts/services/update-contract-status.service.ts

@@ -1,3 +1,7 @@
+import {
+  withClientErrorBoundary,
+  handleUnauthorizedRedirect,
+} from "../../shared/utils/withClientErrorBoundary";
 import { contractsClient } from "../clients/ContractsClient";
 
 export type UpdateContractStatusServiceProps = {
@@ -7,21 +11,24 @@ export type UpdateContractStatusServiceProps = {
   unitId: string;
 };
 
-export const updateContractStatusService = async ({
+const updateContractStatusFunction = async ({
   contractId,
   isActive,
   cookie,
   unitId,
 }: UpdateContractStatusServiceProps): Promise<{ isActive: boolean } | null> => {
-  try {
-    const data = await contractsClient.updateContractStatus(
-      { unitId: unitId, contractId, isActive },
-      cookie
-    );
+  const data = await contractsClient.updateContractStatus(
+    { unitId: unitId, contractId, isActive },
+    cookie
+  );
 
-    return data;
-  } catch (err) {
-    console.error("Failed to update contract status", err);
-    return null;
-  }
+  return data;
 };
+
+export const updateContractStatusService = withClientErrorBoundary(
+  updateContractStatusFunction,
+  {
+    componentName: "UpdateContractStatus",
+    onError: handleUnauthorizedRedirect,
+  }
+);

package/src/features/profile/layouts/ProfileLayout/profile-layout.scss

@@ -5,6 +5,7 @@
   @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
   @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
+  @import "../../../shared/components/Error/error.scss";
 
   width: 100%;
 

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

@@ -3,8 +3,9 @@ import {
   getAuthFromCookie,
   getCookieWithoutSessionObjects,
 } from "../utils/cookie";
+import { extractErrorMessage } from "../utils/extractErrorMessage";
 
-interface RequestConfig<Input = never> {
+interface RequestConfig<Input = unknown> {
   url: string;
   method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
   data?: Input;
@@ -12,6 +13,37 @@ interface RequestConfig<Input = never> {
   params?: Record<string, string | number | boolean>;
   ignoreContentType?: boolean;
   cache?: RequestCache;
+  componentName?: string; // For error tracking
+}
+
+export class ClientError extends Error {
+  public status?: number;
+  public statusText?: string;
+  public url?: string;
+  public method?: string;
+  public responseData?: unknown;
+  public componentName?: string;
+
+  constructor(
+    message: string,
+    options: {
+      status?: number;
+      statusText?: string;
+      url?: string;
+      method?: string;
+      responseData?: unknown;
+      componentName?: string;
+    } = {}
+  ) {
+    super(message);
+    this.name = "ClientError";
+    this.status = options.status;
+    this.statusText = options.statusText;
+    this.url = options.url;
+    this.method = options.method;
+    this.responseData = options.responseData;
+    this.componentName = options.componentName;
+  }
 }
 
 class Client {
@@ -21,6 +53,22 @@ class Client {
     this.baseURL = baseURL;
   }
 
+  private createClientError(
+    message: string,
+    response: Response,
+    responseData: unknown,
+    requestConfig: RequestConfig
+  ): ClientError {
+    return new ClientError(message, {
+      status: response.status,
+      statusText: response.statusText,
+      url: this.baseURL + requestConfig.url,
+      method: requestConfig.method,
+      responseData,
+      componentName: requestConfig.componentName,
+    });
+  }
+
   async request<Return, Input = never>({
     url,
     method,
@@ -29,6 +77,7 @@ class Client {
     params = {},
     ignoreContentType = false,
     cache = "no-cache",
+    componentName,
   }: RequestConfig<Input>): Promise<Return> {
     const config: RequestInit = {
       method,
@@ -59,24 +108,51 @@ class Client {
       }
 
       if (!response.ok) {
-        console.error(`Request to ${url} failed:`, responseData);
-        console.error(response.status, response.statusText);
-        throw new Error(
-          responseData ? JSON.stringify(responseData) : "Request failed"
+        const errorMessage = extractErrorMessage(response, responseData);
+
+        const clientError = this.createClientError(
+          errorMessage,
+          response,
+          responseData,
+          {
+            url,
+            method,
+            data,
+            headers,
+            params,
+            ignoreContentType,
+            cache,
+            componentName,
+          }
         );
+
+        throw clientError;
       }
 
       return responseData as Return;
     } catch (error) {
-      return Promise.reject(error);
+      if (error instanceof ClientError) {
+        throw error;
+      }
+
+      const clientError = new ClientError(
+        error instanceof Error ? error.message : "Network error",
+        {
+          url: this.baseURL + url,
+          method,
+          componentName,
+        }
+      );
+
+      throw clientError;
     }
   }
 
   get<Return>(
     url: string,
-    config: Partial<RequestConfig> = {}
+    config: Partial<RequestConfig<never>> = {}
   ): Promise<Return> {
-    return this.request<Return>({ url, method: "GET", ...config });
+    return this.request<Return, never>({ url, method: "GET", ...config });
   }
 
   post<Return, Input>(

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

@@ -1,6 +1,7 @@
 import { createContext, type ReactNode } from "react";
 
 import { LoadingTabsLayout } from "../../layouts";
+import { ErrorBoundary } from "../ErrorBoundary/ErrorBoundary";
 
 import type { ContractData } from "../../../contracts/types";
 import type { OrgUnitBasicData } from "../../../org-units/types";
@@ -31,7 +32,9 @@ export const BuyerPortalProvider = ({
 }: BuyerPortalProviderProps) => {
   return (
     <BuyerPortalContext.Provider value={value}>
-      <LoadingTabsLayout>{children}</LoadingTabsLayout>
+      <ErrorBoundary>
+        <LoadingTabsLayout>{children}</LoadingTabsLayout>
+      </ErrorBoundary>
     </BuyerPortalContext.Provider>
   );
 };

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

@@ -0,0 +1,31 @@
+import { isDevelopment } from "../../utils/environment";
+import { Icon } from "../Icon";
+
+export type ErrorProps = {
+  error?: Error;
+  tags?: {
+    component: string;
+    errorType: string;
+  };
+};
+
+export default function Error({ error, tags }: ErrorProps) {
+  return (
+    <div data-fs-bp-error>
+      <Icon name="Warning" width={48} height={48} data-fs-icon-loading="true" />
+      <h2 data-fs-bp-error-title>Something went wrong!</h2>
+      <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>{tags?.errorType}</span>
+          <h2 data-fs-bp-error-details-title>Error Details</h2>
+          <p data-fs-bp-error-details-message>{error?.message}</p>
+          <p data-fs-bp-error-details-stack>Stack: {error?.stack}</p>
+          <p data-fs-bp-error-details-component>Component: {tags?.component}</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/features/shared/components/Error/error.scss

@@ -0,0 +1,71 @@
+[data-fs-bp-error] {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fs-spacing-4);
+  height: 100%;
+  min-height: calc(100vh / 2);
+
+  [data-fs-bp-error-title] {
+    font-size: var(--fs-text-size-3);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: calc(var(--fs-text-size-4) + var(--fs-scale));
+  }
+
+  [data-fs-bp-error-button] {
+    font-size: var(--fs-text-size-1);
+    font-weight: var(--fs-text-weight-semibold);
+    color: #1f1f1f;
+    cursor: pointer;
+  }
+
+  [data-fs-icon="true"] {
+    color: #d31a15;
+  }
+
+  [data-fs-bp-error-details] {
+    background-color: #1f1f1f;
+    border-top: calc(var(--fs-border-width) * 5) solid #d31a15;
+    padding: var(--fs-spacing-4);
+    border-radius: var(--fs-border-radius-medium);
+    position: relative;
+
+    [data-fs-bp-error-details-type] {
+      position: absolute;
+      right: var(--fs-spacing-4);
+      top: var(--fs-spacing-4);
+      background: #f1f1f1;
+      padding: var(--fs-spacing-1);
+      border-radius: var(--fs-border-radius-medium);
+      font-size: var(--fs-text-size-0);
+    }
+
+    [data-fs-bp-error-details-title] {
+      font-size: var(--fs-text-size-3);
+      color: #e2e2e2;
+      font-weight: var(--fs-text-weight-semibold);
+    }
+
+    [data-fs-bp-error-details-message] {
+      margin: var(--fs-spacing-4) 0;
+      font-size: var(--fs-text-size-2);
+      font-weight: var(--fs-text-weight-medium);
+      color: #e2e2e2;
+    }
+
+    [data-fs-bp-error-details-stack] {
+      font-size: var(--fs-text-size-2);
+      margin: var(--fs-spacing-4) 0;
+      font-weight: var(--fs-text-weight-medium);
+    }
+
+    [data-fs-bp-error-details-component] {
+      font-size: var(--fs-text-size-2);
+      font-weight: var(--fs-text-weight-medium);
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import React, { Component, type ReactNode } from "react";
+
+import { ErrorTabsLayout } from "../../layouts/ErrorTabsLayout/ErrorTabsLayout";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  tags?: {
+    component: string;
+    errorType: string;
+  };
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorTabsLayout
+          error={{
+            error: this.state.error ?? {
+              message: "Unknown error",
+              name: "Unknown error",
+              stack: "Unknown error",
+            },
+            tags: this.props.tags ?? {
+              component: "Unknown",
+              errorType: "Unknown",
+            },
+          }}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/features/shared/components/ErrorBoundary/types.ts

@@ -0,0 +1,14 @@
+export type ErrorBoundaryProps = {
+  error: {
+    message: string;
+    name: string;
+    stack?: string;
+  };
+  tags: {
+    component: string;
+    errorType: string;
+  };
+  extra?: {
+    query: unknown;
+  };
+};

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

@@ -72,3 +72,6 @@ export type { CounterProps as PaginatorCounterProps } from "./Paginator/Counter"
 export type { NextPageButtonProps as PaginatorNextPageButtonProps } from "./Paginator/NextPageButton";
 
 export { EmptyState, type EmptyStateProps } from "./EmptyState/EmptyState";
+export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
+export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";
+export { default as Error } from "./Error/Error";

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

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+
+import { ErrorBoundary } from "../ErrorBoundary/ErrorBoundary";
+
+type WithErrorBoundaryOptions = {
+  fallback?: React.ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  tags?: {
+    component: string;
+    errorType: string;
+  };
+};
+
+export function withErrorBoundary<P extends Record<string, unknown>>(
+  WrappedComponent: React.ComponentType<P>,
+  options: WithErrorBoundaryOptions = {}
+) {
+  const { onError, tags } = options;
+
+  const ComponentWithErrorBoundary = (props: P) => {
+    return (
+      <ErrorBoundary onError={onError} tags={tags}>
+        <WrappedComponent {...props} />
+      </ErrorBoundary>
+    );
+  };
+
+  ComponentWithErrorBoundary.displayName = `WithErrorBoundary(${
+    WrappedComponent.displayName || WrappedComponent.name || "Component"
+  })`;
+
+  return ComponentWithErrorBoundary;
+}

package/src/features/shared/layouts/BaseTabsLayout/SidebarMenu.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { useRouter } from "next/router";
+
 import { VerticalNav } from "../../components";
 import { useBuyerPortal } from "../../hooks";
 import {
@@ -22,6 +24,11 @@ export type SidebarMenuProps = {
 export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
   const { currentOrgUnit, currentContract } = useBuyerPortal();
 
+  const router = useRouter();
+
+  const orgUnitId = router.query.orgUnitId as string;
+  const customerId = router.query.contractId as string;
+
   const idContract =
     (currentContract?.id
       ? currentContract?.id
@@ -31,8 +38,8 @@ export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
     <aside data-fs-bp-sidebar-menu {...otherProps}>
       <VerticalNav.Menu title="Contract">
         {getContractSettingsLinks({
-          orgUnitId: currentOrgUnit?.id ?? "",
-          contractId: idContract,
+          orgUnitId: orgUnitId ?? currentOrgUnit?.id ?? "",
+          contractId: customerId ?? idContract,
         }).map((option) => (
           <VerticalNav.Link key={option.name} link={option.link}>
             {option.name}