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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.91",
+	"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/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx

@@ -21,6 +21,7 @@ export type AddAllToOrgUnitDropdownProps = {
   unitId: string;
   unitName: string;
   contractId: string;
+  align?: "left" | "right";
 };
 
 export const AddAllToOrgUnitDropdown = ({
@@ -28,6 +29,7 @@ export const AddAllToOrgUnitDropdown = ({
   unitId,
   unitName,
   contractId,
+  align = "right",
 }: AddAllToOrgUnitDropdownProps) => {
   const sizeProps = { width: 20, height: 20 };
   const [customField, setCustomField] = useState<CustomFieldType | null>(null);
@@ -84,7 +86,7 @@ export const AddAllToOrgUnitDropdown = ({
 
   return (
     <>
-      <BasicDropdownMenu>
+      <BasicDropdownMenu align={align}>
         {/* TODO: Liberar quando adição de contrato estiver finalizada
           levando em consideração as integrações das outras etapas de desenvolviemento
           de Contratos */}

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

@@ -8,6 +8,7 @@ import { OrgUnitBreadcrumbPath } from "./OrgUnitBreadcrumbPath";
 export const OrgUnitBreadcrumb = ({
   items,
   maxItems,
+  hasDropdown = false,
 }: OrgUnitBreadcrumbProps) => {
   const { currentContract } = useBuyerPortal();
   const sortedByPosition = [...items].sort((a, b) => a.position - b.position);
@@ -34,6 +35,7 @@ export const OrgUnitBreadcrumb = ({
         contractId={currentContract?.id ?? ""}
         items={sortedByPosition.slice(offset)}
         divider={divider}
+        hasDropdown={hasDropdown}
       />
     </div>
   );

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

@@ -1,11 +1,10 @@
 import { Fragment } from "react";
 
-import { Dropdown } from "@faststore/ui";
+import { Dropdown, DropdownButton } from "@faststore/ui";
 
-import { BasicDropdownMenu } from "../../../shared/components";
+import { Icon } from "../../../shared/components";
 import { OrgUnitBreadcrumbPathProps } from "../../types";
 import { AddAllToOrgUnitDropdown } from "../AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown";
-import { OrgUnitsDropdownMenu } from "../OrgUnitsDropdownMenu/OrgUnitsDropdownMenu";
 
 import { OrgUnitBreadcrumbLink } from "./OrgUnitBreadcrumbLink";
 
@@ -13,27 +12,28 @@ export const OrgUnitBreadcrumbPath = ({
   items,
   contractId,
   divider,
+  hasDropdown = false,
 }: OrgUnitBreadcrumbPathProps) =>
   items.map((item, index) => {
     const isLast = index === items.length - 1;
 
-    if (isLast) {
+    if (isLast && hasDropdown) {
       return (
         <Fragment key={item.item}>
-          <OrgUnitBreadcrumbLink
-            item={item.item}
-            name={item.name}
-            isLast={isLast}
-          />
           <Dropdown>
-            <BasicDropdownMenu.Trigger iconName="ArrowDropDown" />
+            <DropdownButton asChild>
+              <button data-fs-bp-breadcrumb-dropdown-trigger>
+                {item.name}
+                <Icon name="ArrowDropDown" />
+              </button>
+            </DropdownButton>
 
-            <OrgUnitsDropdownMenu id={item.item} name={item.name} />
             <AddAllToOrgUnitDropdown
               isSingleContract
               contractId={contractId}
               unitId={item.unitId}
               unitName={item.name}
+              align="left"
             />
           </Dropdown>
         </Fragment>
@@ -47,7 +47,7 @@ export const OrgUnitBreadcrumbPath = ({
           name={item.name}
           isLast={isLast}
         />
-        {divider}
+        {!isLast && divider}
       </Fragment>
     );
   });

package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss

@@ -1,7 +1,8 @@
-@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-
 [data-fs-bp-breadcrumb-nav] {
+  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+
+  --fs-dropdown-item-icon-margin-top: var(--fs-spacing-0);
   flex: 1;
   display: flex;
   align-items: center;
@@ -15,46 +16,56 @@
     flex-wrap: wrap;
   }
 
-  [data-fs-bp-basic-dropdown-menu-trigger] {
-    color: var(--fs-color-neutral-6);
-    padding: 0;
-    width: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-    height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+  [data-fs-bp-breadcrumb-link] {
+    flex: 0 0 max-content;
+    max-width: 28.125rem; // 450px
+
+    p,
+    a {
+      font-size: var(--fs-text-size-4);
+      line-height: var(--fs-text-size-6);
+      font-weight: var(--fs-text-weight-semibold);
+      color: #5c5c5c;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      letter-spacing: -0.04em;
+      display: block;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [data-fs-bp-breadcrumb-current] {
+      color: #000;
+      cursor: inherit;
+    }
+
+    a:hover {
+      color: #565656;
+    }
   }
-}
 
-[data-fs-bp-breadcrumb-link] {
-  flex: 0 0 max-content;
-  max-width: 28.125rem; // 450px
+  [data-fs-bp-breadcrumb-divider] {
+    color: #858585;
+    flex: 0 0 auto;
+  }
 
-  p,
-  a {
+  [data-fs-bp-breadcrumb-dropdown-trigger] {
+    display: inline-flex;
+    align-items: center;
     font-size: var(--fs-text-size-4);
     line-height: var(--fs-text-size-6);
     font-weight: var(--fs-text-weight-semibold);
-    color: #5c5c5c;
-    text-decoration: none;
-    cursor: pointer;
-    transition: all 0.2s;
-    letter-spacing: -0.04em;
-    display: block;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [data-fs-bp-breadcrumb-current] {
     color: #000;
-    cursor: inherit;
-  }
+    cursor: pointer;
+    padding: 0 var(--fs-spacing-0) 0 var(--fs-spacing-1);
+    margin-left: calc(var(--fs-spacing-1) * -1);
+    border-radius: var(--fs-border-radius-pill);
 
-  a:hover {
-    color: #565656;
+    &:hover {
+      background-color: #F5F5F5;
+    }
   }
 }
-
-[data-fs-bp-breadcrumb-divider] {
-  color: #858585;
-  flex: 0 0 auto;
-}

package/src/features/org-units/types/OrgUnitBreadcrumbTypes.ts

@@ -10,6 +10,7 @@ export type OrgUnitBreadcrumbItem = {
 export type OrgUnitBreadcrumbProps = {
   items: OrgUnitBreadcrumbItem[];
   maxItems: number;
+  hasDropdown?: boolean;
 };
 
 export interface OrgUnitBreadcrumbItemProps
@@ -21,4 +22,5 @@ export interface OrgUnitBreadcrumbPathProps {
   divider: ReactNode;
   items: OrgUnitBreadcrumbItem[];
   contractId: string;
+  hasDropdown?: boolean;
 }

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>
+  );
+}