@vtex/faststore-plugin-buyer-portal 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -7,12 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.3.2] - 2025-10-16
+## [1.3.4] - 2025-10-16
+
+- Error boundary:
+  - Updating the authentication loader to provide detailed error context.
+
+## [1.3.3] - 2025-10-16
 
 ### Added
 
+- Neighborhood field to Address form
+  - Added `neighborhood` field to address creation and editing forms
+  - Updated `AddressForm` component to include neighborhood input
+  - Updated `AddressInfoDisplay` to show neighborhood information
+  - Updated `CreateAddressDrawer` and `EditAddressDrawer` to handle neighborhood data
+  - Updated `AddressesClient` to support neighborhood field in API requests
 - Setup KeepChangelog
 
+## [1.3.2] - 2025-10-16
+
 ## [1.2.4] - 2025-10-16
 
 ### Added
@@ -107,9 +120,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.2...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.4...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
-
 [1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
+
+[1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
+
+[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4

package/package.json

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

package/src/features/addresses/clients/AddressesClient.ts

@@ -138,7 +138,7 @@ export default class AddressesClient extends Client {
       streetAddress: data.streetAddress,
       neighborhood: data?.neighborhood ?? "",
       streetAddress2: data.streetAddress2,
-      number: data.streetNumber ?? "",
+      streetNumber: data.streetNumber ?? "",
       city: data.city,
       state: data.state,
       country: data.countryCode,

package/src/features/addresses/components/AddressForm/AddressForm.tsx

@@ -210,6 +210,21 @@ export const AddressForm = ({
                 show={isTouched && !address.streetNumber?.trim()}
                 message="Number is required"
               />
+
+              <InputText
+                label="Neighborhood"
+                value={address.neighborhood || ""}
+                className="address-neighborhood"
+                hasError={isTouched && !address.neighborhood?.trim()}
+                onChange={(event) =>
+                  setAddress({ ...address, neighborhood: event.target.value })
+                }
+              />
+
+              <ErrorMessage
+                show={isTouched && !address.neighborhood?.trim()}
+                message="Neighborhood is required"
+              />
             </>
           )}
 

package/src/features/addresses/components/AddressInfoDisplay/AddressInfoDisplay.tsx

@@ -15,6 +15,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = ({
     {option?.streetAddress}
     {option?.streetAddress2 && `, ${option?.streetAddress2}`}
     {option?.streetNumber && ` ${option?.streetNumber}`}
+    {option?.neighborhood && `, ${option?.neighborhood}`}
     {option?.unit && ` ${option?.unit}`}
     {option?.city && `, ${option?.city}`}
     {option?.state && `, ${option?.state}`}

package/src/features/addresses/components/CreateAddressDrawer/CreateAddressDrawer.tsx

@@ -110,7 +110,13 @@ export const CreateAddressDrawer = ({
     const hasBrazilianNumber =
       !isBrazil || (isBrazil && address.streetNumber?.trim());
 
-    return (hasRequiredFields && hasBrazilianNumber) || useExistingAddress;
+    const hasBrazilianNeighborhood =
+      !isBrazil || (isBrazil && address.neighborhood?.trim());
+
+    return (
+      (hasRequiredFields && hasBrazilianNumber && hasBrazilianNeighborhood) ||
+      useExistingAddress
+    );
   };
 
   const isConfirmButtonEnabled = hasMinimumAddressInformation();

package/src/features/addresses/components/EditAddressDrawer/EditAddressDrawer.tsx

@@ -75,7 +75,10 @@ export const EditAddressDrawer = ({
     const hasBrazilianNumber =
       !isBrazil || (isBrazil && address.streetNumber?.trim());
 
-    return hasRequiredFields && hasBrazilianNumber;
+    const hasBrazilianNeighborhood =
+      !isBrazil || (isBrazil && address.neighborhood?.trim());
+
+    return hasRequiredFields && hasBrazilianNumber && hasBrazilianNeighborhood;
   };
 
   const isConfirmButtonEnabled = hasMinimumAddressInformation();

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

@@ -33,6 +33,7 @@
     padding: var(--fs-spacing-4);
     border-radius: var(--fs-border-radius-medium);
     position: relative;
+    max-width: 100%;
 
     [data-fs-bp-error-details-type] {
       position: absolute;
@@ -56,6 +57,7 @@
       font-weight: var(--fs-text-weight-medium);
       color: #e2e2e2;
       text-wrap: wrap;
+      overflow-wrap: break-word;
     }
 
     [data-fs-bp-error-details-stack] {
@@ -63,12 +65,16 @@
       margin: var(--fs-spacing-4) 0;
       font-weight: var(--fs-text-weight-medium);
       text-wrap: wrap;
+      max-width: 100%;
+      overflow-wrap: break-word;
     }
 
     [data-fs-bp-error-details-component] {
       font-size: var(--fs-text-size-2);
       font-weight: var(--fs-text-weight-medium);
       text-wrap: wrap;
+      overflow-wrap: break-word;
+      max-width: 100%;
     }
   }
 }

package/src/features/shared/types/AuthRouteProps.ts

@@ -1,5 +1,18 @@
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
 import { ClientContext } from "../utils";
 
 export type AuthRouteProps<T> =
-  | { authorized: true; data: T; clientContext: ClientContext }
-  | { authorized: false };
+  | {
+      authorized: true;
+      data: T;
+      clientContext: ClientContext;
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  | {
+      authorized: false;
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+      data?: T;
+      clientContext?: ClientContext;
+    };

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

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.2";
+export const CURRENT_VERSION = "1.3.4";

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

@@ -2,30 +2,42 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
+
 import type { AuthRouteProps } from "../types";
 
 /**
  * HOC that checks only for authorization
  */
 export const withAuth = <T extends Record<string, unknown>>(
-  Component: ComponentType<T>
+  Component: ComponentType<T & { hasError?: boolean }>
 ) => {
-  return function AuthenticatedComponent(props: AuthRouteProps<T>) {
+  return function AuthenticatedComponent(
+    props: AuthRouteProps<T> & {
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  ) {
     const router = useRouter();
 
     useEffect(() => {
       // If not authorized, reload the page
-      if (!props?.authorized) {
+      if (!props?.authorized && !props?.hasError) {
         router.reload();
       }
-    }, [props?.authorized, router]);
+    }, [props?.authorized, props?.hasError, router]);
 
-    // If not authorized, render nothing
-    if (!props?.authorized) {
+    if (!props?.authorized && !props?.hasError && !props?.error) {
       return null;
     }
 
     // If authorized, render the component with the data
-    return <Component {...(props.data as T)} />;
+    return (
+      <Component
+        {...(props.data as T)}
+        hasError={props?.hasError}
+        error={props?.error}
+      />
+    );
   };
 };

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

@@ -37,11 +37,23 @@ export const withAuthLoader = async <T>(
   } catch (error) {
     console.error("Auth validation failed:", error);
 
-    data.res?.writeHead(302, { Location: "/" });
-    data.res?.end();
-
     return {
       authorized: false,
+      hasError: true,
+      error: {
+        error: {
+          message: (error as Error).message,
+          name: (error as Error).name,
+          stack: (error as Error).stack || undefined,
+        },
+        extra: {
+          query: data.query,
+        },
+        tags: {
+          component: "AuthLoader",
+          errorType: "auth_error",
+        },
+      },
     };
   }
 };

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

@@ -3,6 +3,7 @@ import { useEffect, type ComponentType } from "react";
 import { useRouter } from "next/router";
 
 import { BuyerPortalProvider } from "../components";
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
 
 import type { AuthRouteProps } from "../types";
 import type { ClientContext } from "./getClientContext";
@@ -13,7 +14,12 @@ import type { ClientContext } from "./getClientContext";
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
 ) => {
-  return function WrappedPage(props: AuthRouteProps<T>) {
+  return function WrappedPage(
+    props: AuthRouteProps<T> & {
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  ) {
     const router = useRouter();
 
     useEffect(() => {
@@ -23,14 +29,18 @@ export const withAuthProvider = <T,>(
       }
     }, [props?.authorized, router]);
 
-    // Se não está autorizado, não renderiza nada
-    if (!props?.authorized) {
+    if (!props?.authorized && !props?.hasError && !props?.error) {
       return null;
     }
 
     return (
-      <BuyerPortalProvider clientContext={props?.clientContext}>
-        <Component {...props.data} clientContext={props?.clientContext} />
+      <BuyerPortalProvider
+        clientContext={props?.clientContext as ClientContext}
+      >
+        <Component
+          {...(props.data as T)}
+          clientContext={props?.clientContext as ClientContext}
+        />
       </BuyerPortalProvider>
     );
   };