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

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/Navbar.tsx

@@ -73,7 +73,7 @@ export const Navbar = ({
         {loading ? (
           <Skeleton size={{ width: "22rem", height: "2.5rem" }} />
         ) : (
-          <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} />
+          <OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} hasDropdown />
         )}
 
         <div data-fs-bp-nav-menu-actions>

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}

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -20,12 +20,15 @@
         calc(var(--fs-spacing-0) + var(--fs-spacing-3));
     }
 
-    [data-fs-bp-breadcrumb-current] {
-      font-size: var(--fs-text-size-2);
-
-      @include media("<=phonemid") {
-        font-size: var(--fs-text-size-1);
-      }
+    [data-fs-bp-breadcrumb-nav] {
+      [data-fs-bp-breadcrumb-current],
+      [data-fs-bp-breadcrumb-dropdown-trigger] {
+        font-size: var(--fs-text-size-2);
+  
+        @include media("<=phonemid") {
+          font-size: var(--fs-text-size-1);
+        }
+      }      
     }
 
     [data-fs-bp-nav-menu-btn-container] {

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

@@ -27,12 +27,14 @@ export const ContractTabsLayout = ({
   pageName,
   loading = false,
   children,
+  orgUnitId,
+  contractId,
 }: ContractTabsLayoutProps) => {
   const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
 
   const verticalLinks = getContractSettingsLinks({
-    contractId: currentContract?.id ?? "",
-    orgUnitId: currentOrgUnit?.id ?? "",
+    contractId: currentContract?.id ?? contractId ?? "",
+    orgUnitId: currentOrgUnit?.id ?? orgUnitId ?? "",
   });
 
   return (

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

@@ -0,0 +1,119 @@
+import { type ReactNode } from "react";
+
+import { useRouter } from "next/router";
+
+import { OrgUnitDetailsNavbar } from "../../../org-units/components";
+import { HeaderInside } from "../../components";
+import Error from "../../components/Error/Error";
+import { useBuyerPortal } from "../../hooks";
+import { getTabsLayoutConfigFromRoute } from "../../utils/routeLayoutMapping";
+import { ContractTabsLayout } from "../ContractTabsLayout/ContractTabsLayout";
+import { FinanceTabsLayout } from "../FinanceTabsLayout/FinanceTabsLayout";
+import { OrgUnitTabsLayout } from "../OrgUnitTabsLayout/OrgUnitTabLayout";
+
+export type ErrorTabsLayoutContentProps = {
+  title?: string;
+  error?: {
+    error: Error;
+    tags: {
+      component: string;
+      errorType: string;
+    };
+  };
+};
+
+export type ErrorTabsLayoutProps = {
+  children?: ReactNode;
+  error?: {
+    error: Error;
+    tags: {
+      component: string;
+      errorType: string;
+    };
+  };
+};
+
+export const ErrorTabsLayoutContent = ({
+  title,
+  error,
+}: ErrorTabsLayoutContentProps) => (
+  <div>
+    <section data-fs-bp-profile>
+      <HeaderInside title={title} />
+      <Error error={error?.error} tags={error?.tags} />
+    </section>
+  </div>
+);
+
+export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
+  const router = useRouter();
+
+  const {
+    currentOrgUnit: orgUnit,
+    currentUser: user,
+    currentContract: contract,
+  } = useBuyerPortal();
+
+  const orgUnitId = router.query.orgUnitId as string;
+  const customerId = router.query.contractId as string;
+
+  const layoutConfig = getTabsLayoutConfigFromRoute(router.route);
+
+  if (!layoutConfig) {
+    return <>{children}</>;
+  }
+
+  const pageTitle = layoutConfig.pageTitle;
+
+  switch (layoutConfig.layout) {
+    case "ContractTabsLayout":
+      return (
+        <ContractTabsLayout
+          orgUnitName={orgUnit?.name ?? ""}
+          orgUnitId={orgUnitId}
+          contractId={customerId}
+          contractName={contract?.name ?? ""}
+          pageName="Contract"
+          person={{
+            image: undefined,
+            name: user?.name ?? "",
+            role: user?.role ?? "",
+          }}
+        >
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </ContractTabsLayout>
+      );
+
+    case "FinanceTabsLayout":
+      return (
+        <FinanceTabsLayout pageName={layoutConfig.pageName}>
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </FinanceTabsLayout>
+      );
+
+    case "OrgUnitTabsLayout":
+      return (
+        <OrgUnitTabsLayout pageName={layoutConfig.pageName}>
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </OrgUnitTabsLayout>
+      );
+
+    case "OrgUnitDetailsLayout":
+      return (
+        <div data-fs-bp-create-user-error-state>
+          <OrgUnitDetailsNavbar
+            orgName={orgUnit?.name ?? ""}
+            person={{
+              name: user?.name ?? "",
+              role: user?.role ?? "",
+            }}
+            loading={false}
+          />
+          <ErrorTabsLayoutContent title={pageTitle} error={error} />
+        </div>
+      );
+
+    default:
+      return <ErrorTabsLayoutContent error={error} />;
+  }
+};

package/src/features/shared/layouts/ErrorTabsLayout/error-tabs-layout.scss

@@ -0,0 +1 @@
+@import "../../components//Error/error.scss";

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

@@ -0,0 +1,41 @@
+/**
+ * Utility functions for environment detection
+ */
+
+/**
+ * Checks if the application is running on localhost
+ * @returns {boolean} True if running on localhost, false otherwise
+ */
+export const isLocalhost = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const hostname = window.location.hostname;
+
+  return (
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "0.0.0.0" ||
+    hostname.startsWith("192.168.") ||
+    hostname.startsWith("10.") ||
+    hostname.startsWith("172.") ||
+    hostname.endsWith(".local")
+  );
+};
+
+/**
+ * Checks if the application is running in development mode
+ * @returns {boolean} True if in development mode, false otherwise
+ */
+export const isDevelopment = (): boolean => {
+  return process.env.NODE_ENV === "development";
+};
+
+/**
+ * Checks if detailed error information should be shown
+ * @returns {boolean} True if error details should be shown, false otherwise
+ */
+export const shouldShowErrorDetails = (): boolean => {
+  return isLocalhost() && isDevelopment();
+};

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

@@ -0,0 +1,22 @@
+export const extractErrorMessage = (
+  response: Response,
+  responseData: unknown
+): string => {
+  if (
+    responseData &&
+    typeof responseData === "object" &&
+    "message" in responseData
+  ) {
+    return String((responseData as { message: unknown }).message);
+  }
+
+  if (responseData) {
+    try {
+      return JSON.stringify(responseData);
+    } catch {
+      return String(responseData);
+    }
+  }
+
+  return `HTTP ${response.status}: ${response.statusText}`;
+};

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

@@ -0,0 +1,5 @@
+import storeConfig from "discovery.config";
+
+export const goHome = () => {
+  window.location.assign(storeConfig.storeUrl);
+};

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

@@ -33,3 +33,5 @@ export {
 } from "./search";
 export { toQueryParams } from "./toQueryParams";
 export { getValidPage } from "./getValidPage";
+export { withLoaderErrorBoundary } from "./withLoaderErrorBoundary";
+export { withClientErrorBoundary } from "./withClientErrorBoundary";

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

@@ -0,0 +1,61 @@
+import { goHome } from "./getHome";
+
+import type { ClientError } from "../clients/Client";
+
+interface WithClientErrorBoundaryOptions {
+  componentName?: string;
+  onError?: (
+    error: ClientError,
+    requestInfo: {
+      url: string;
+      method: string;
+      data?: unknown;
+    }
+  ) => void;
+}
+
+export const handleUnauthorizedRedirect = (error: ClientError) => {
+  if (error.status === 401) {
+    if (typeof window !== "undefined") {
+      goHome();
+    }
+  }
+};
+
+export function withClientErrorBoundary<TArgs extends unknown[], TReturn>(
+  clientFunction: (...args: TArgs) => Promise<TReturn>,
+  options: WithClientErrorBoundaryOptions = {}
+) {
+  const { componentName, onError } = options;
+
+  return async (...args: TArgs): Promise<TReturn> => {
+    try {
+      return await clientFunction(...args);
+    } catch (error) {
+      if (onError && error instanceof Error) {
+        const clientError = error as Partial<ClientError>;
+        const requestInfo = {
+          url:
+            typeof clientError.url === "string" ? clientError.url : "unknown",
+          method:
+            typeof clientError.method === "string"
+              ? clientError.method
+              : "unknown",
+          data:
+            clientError.responseData !== undefined
+              ? clientError.responseData
+              : undefined,
+        };
+
+        onError(error as ClientError, requestInfo);
+      }
+
+      if (error instanceof Error && (error as ClientError).status === 401) {
+        return null as TReturn;
+      }
+
+      console.error(`Error in ${componentName || "client function"}:`, error);
+      throw error;
+    }
+  };
+}

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

@@ -0,0 +1,46 @@
+import type { LoaderData } from "../types";
+
+interface WithLoaderErrorBoundaryOptions {
+  componentName?: string;
+  onError?: (error: Error, query: unknown) => void;
+  redirectToError?: boolean;
+}
+
+export function withLoaderErrorBoundary<TQuery, TReturn>(
+  loaderFn: (data: LoaderData<TQuery>) => Promise<TReturn>,
+  options: WithLoaderErrorBoundaryOptions = {}
+) {
+  const { componentName, onError, redirectToError = true } = options;
+
+  return async (data: LoaderData<TQuery>): Promise<TReturn> => {
+    try {
+      return await loaderFn(data);
+    } catch (error) {
+      if (onError) {
+        onError(error as Error, data.query);
+      }
+
+      if (redirectToError) {
+        return {
+          error: {
+            error: {
+              message: (error as Error).message,
+              name: (error as Error).name,
+              stack: (error as Error).stack,
+            },
+            tags: {
+              component: componentName || "Unknown",
+              errorType: "loader_error",
+            },
+            extra: {
+              query: data.query,
+            },
+          },
+          hasError: true,
+        } as TReturn;
+      }
+
+      throw error;
+    }
+  };
+}

package/src/features/users/clients/UsersClient.ts

@@ -48,7 +48,6 @@ class UsersClient extends Client {
       });
     } catch (err) {
       console.error(err);
-      console.error(`Error listing ${page} Users page(s)`);
     }
 
     return { users, total };

package/src/pages/address-details.tsx

@@ -4,15 +4,21 @@ 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 } from "../features/shared/components";
+import {
+  BuyerPortalProvider,
+  withErrorBoundary,
+} from "../features/shared/components";
+import { ErrorBoundaryProps } from "../features/shared/components/ErrorBoundary/types";
 import {
   PAGE_PARAMS,
   SEARCH_PARAMS,
 } from "../features/shared/hooks/usePageItems";
+import { ErrorTabsLayout } from "../features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout";
 import {
   type ClientContext,
   getClientContext,
   getValidPage,
+  withLoaderErrorBoundary,
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
@@ -57,11 +63,13 @@ export type AddressDetailsPageData = {
     currentContract: ContractData | null;
     currentUser: UserData | null;
   };
+  hasError?: boolean;
+  error?: ErrorBoundaryProps;
 };
 
-export async function loader(
+const loaderFunction = async (
   data: LoaderData<AddressDetailsPageQuery>
-): Promise<AddressDetailsPageData> {
+): Promise<AddressDetailsPageData> => {
   const {
     contractId,
     orgUnitId,
@@ -135,16 +143,35 @@ export async function loader(
       currentUser: user,
     },
   };
-}
+};
+
+export const loader = withLoaderErrorBoundary(loaderFunction, {
+  componentName: "AddressDetailsPage",
+  redirectToError: true,
+});
 
-const AddressDetailsPage = ({ data, context }: AddressDetailsPageData) => (
+const AddressDetailsPage = ({
+  data,
+  context,
+  hasError,
+  error,
+}: AddressDetailsPageData) => (
   <BuyerPortalProvider {...context}>
-    <AddressDetailsLayout
-      addressDetails={data.addressDetails}
-      recipientsData={data.recipientsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
-      locationsData={data.locationsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
-    />
+    {hasError ? (
+      <ErrorTabsLayout error={error} />
+    ) : (
+      <AddressDetailsLayout
+        addressDetails={data.addressDetails}
+        recipientsData={data.recipientsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
+        locationsData={data.locationsData ?? DEFAULT_ADDRESS_PAGINATED_DATA}
+      />
+    )}
   </BuyerPortalProvider>
 );
 
-export default AddressDetailsPage;
+export default withErrorBoundary(AddressDetailsPage, {
+  tags: {
+    component: "AddressDetailsPage",
+    errorType: "address_details_error",
+  },
+});