@vtex/faststore-plugin-buyer-portal 1.3.40 → 1.3.42

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.42] - 2025-12-11
+
+### Fixed
+
+- Improve error handling in the payment methods
+- Show error details on error boundary only in development environment
+
+## [1.3.41] - 2025-12-09
+
+### Changed
+
+- Refactor `<AddressForm>` to use conditional rendering in zipCode field
+
 ## [1.3.40] - 2025-12-09
 
 - Fix e2e auth flow
@@ -44,10 +57,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.34] - 2025-12-01
 
+- Add generic `SettingsDrawer` component with `ListType` subcomponent for scope configuration
+- Add Scope Config API integration (`useGetScopeConfig`, `useSetScopeConfig` hooks)
+- Integrate Settings Drawer with Address Settings page
+
 ### Added
 
 - Add DK Docs
 
+### Fixed
+
+- Fix address ID mapping in default address service to use correct `id` field
+
 ## [1.3.33] - 2025-11-25
 
 ### Changed
@@ -356,7 +377,7 @@ 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/v1.3.40...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.42...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
@@ -398,9 +419,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 > > > > > > > main
 > > > > > > > [1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
 
+[1.3.41]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.40...v1.3.41
 [1.3.40]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.39...v1.3.40
 [1.3.39]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...v1.3.39
 [1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
 [1.3.37]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.36...v1.3.37
 [1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
 [1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
+
+[1.3.42]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.42

package/package.json

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

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

@@ -93,268 +93,302 @@ export const AddressForm = ({
         <div data-fs-create-address-form>
           {!hideLabel && <span>Fill in the address details</span>}
 
-          <AutocompleteDropdown
-            data-fs-bp-create-address-country-selector
-            label="Country"
-            className="address-country"
-            value={address.country}
-            options={CountryOptions}
-            shouldCloseOnSelect
-            onConfirmKeyPress={(option) => {
-              handleCountrySelect(option);
-            }}
-            renderOption={(option, index) => (
-              <AutocompleteDropdown.Item
-                key={option.id}
-                closeOnClick
-                index={index}
-                isSelected={address.country === option.name}
-                onClick={() => {
-                  handleCountrySelect(option);
-                }}
-              >
-                {option?.name}
-                {address.country === option?.name && (
-                  <Icon name="Check" width={12} height={12} />
-                )}
-              </AutocompleteDropdown.Item>
-            )}
-          />
-
-          {isEdit ? (
-            <InputText
-              label="Address Name"
-              value={address.name}
-              className="address-name"
-              hasError={isTouched && !address.name?.trim()}
-              onChange={(event) =>
-                setAddress({ ...address, name: event.target.value })
-              }
-            />
-          ) : (
+          <div key="country">
             <AutocompleteDropdown
-              label="Address Name"
-              value={autoCompleteAddressName}
-              className="address-name"
-              options={searchedAddresses}
+              data-fs-bp-create-address-country-selector
+              label="Country"
+              className="address-country"
+              value={address.country}
+              options={CountryOptions}
               shouldCloseOnSelect
-              shouldShowArrowDown={false}
-              placeholder="Already in the contract — select to add"
-              onChange={(event) => {
-                setAutoCompleteAddressName(event.currentTarget.value);
-                setAddress({ ...address, name: event.target.value });
+              onConfirmKeyPress={(option) => {
+                handleCountrySelect(option);
               }}
               renderOption={(option, index) => (
                 <AutocompleteDropdown.Item
                   key={option.id}
                   closeOnClick
                   index={index}
-                  isSelected={completedAddress?.id === option?.id}
+                  isSelected={address.country === option.name}
                   onClick={() => {
-                    if (setCompletedAddress && setUseExistingAddress) {
-                      setCompletedAddress(option);
-                      setUseExistingAddress(true);
-                    }
+                    handleCountrySelect(option);
                   }}
                 >
-                  <div data-fs-bp-autocomplete-dropdown-option-content>
-                    <p data-fs-bp-autocomplete-dropdown-option-title>
-                      {option?.name}
-                    </p>
-                    <p data-fs-bp-autocomplete-dropdown-option-subtitle>
-                      {option?.streetAddress}
-                    </p>
-                  </div>
-                  {completedAddress?.id === option?.id && (
+                  {option?.name}
+                  {address.country === option?.name && (
                     <Icon name="Check" width={12} height={12} />
                   )}
                 </AutocompleteDropdown.Item>
               )}
             />
-          )}
-
-          <ErrorMessage
-            show={isTouched && !address.name?.trim()}
-            message="Address Name is required"
-          />
-
-          <InputText
-            label="Street Address"
-            value={address.streetAddress}
-            className="street-address"
-            hasError={isTouched && !address.streetAddress?.trim()}
-            onChange={(event) =>
-              setAddress({ ...address, streetAddress: event.target.value })
-            }
-          />
-
-          <ErrorMessage
-            show={isTouched && !address.streetAddress?.trim()}
-            message="Street Address is required"
-          />
+          </div>
 
           {address.countryCode === "BRA" && (
-            <>
+            <div key="zipCode">
               <InputText
-                type="number"
-                label="Number"
-                value={address.streetNumber || ""}
-                className="address-number"
-                hasError={isTouched && !address.streetNumber?.trim()}
-                onChange={(event) =>
-                  setAddress({ ...address, streetNumber: event.target.value })
-                }
+                label="Postal Code"
+                value={address.zip}
+                className="address-postal-code"
+                hasError={isTouched && !address.zip?.trim()}
+                onChange={(event) => handleChangePostalCode(event.target.value)}
+                disabled={!address.countryCode}
               />
-
               <ErrorMessage
-                show={isTouched && !address.streetNumber?.trim()}
-                message="Number is required"
+                show={isTouched && !address.zip?.trim()}
+                message="Postal Code is required"
               />
+            </div>
+          )}
 
+          <div key="addressName">
+            {isEdit ? (
               <InputText
-                label="Neighborhood"
-                value={address.neighborhood || ""}
-                className="address-neighborhood"
-                hasError={isTouched && !address.neighborhood?.trim()}
+                label="Address Name"
+                value={address.name}
+                className="address-name"
+                hasError={isTouched && !address.name?.trim()}
                 onChange={(event) =>
-                  setAddress({ ...address, neighborhood: event.target.value })
+                  setAddress({ ...address, name: event.target.value })
                 }
               />
-
-              <ErrorMessage
-                show={isTouched && !address.neighborhood?.trim()}
-                message="Neighborhood is required"
+            ) : (
+              <AutocompleteDropdown
+                label="Address Name"
+                value={autoCompleteAddressName}
+                className="address-name"
+                options={searchedAddresses}
+                shouldCloseOnSelect
+                shouldShowArrowDown={false}
+                placeholder="Already in the contract — select to add"
+                onChange={(event) => {
+                  setAutoCompleteAddressName(event.currentTarget.value);
+                  setAddress({ ...address, name: event.target.value });
+                }}
+                renderOption={(option, index) => (
+                  <AutocompleteDropdown.Item
+                    key={option.id}
+                    closeOnClick
+                    index={index}
+                    isSelected={completedAddress?.id === option?.id}
+                    onClick={() => {
+                      if (setCompletedAddress && setUseExistingAddress) {
+                        setCompletedAddress(option);
+                        setUseExistingAddress(true);
+                      }
+                    }}
+                  >
+                    <div data-fs-bp-autocomplete-dropdown-option-content>
+                      <p data-fs-bp-autocomplete-dropdown-option-title>
+                        {option?.name}
+                      </p>
+                      <p data-fs-bp-autocomplete-dropdown-option-subtitle>
+                        {option?.streetAddress}
+                      </p>
+                    </div>
+                    {completedAddress?.id === option?.id && (
+                      <Icon name="Check" width={12} height={12} />
+                    )}
+                  </AutocompleteDropdown.Item>
+                )}
               />
-            </>
-          )}
-
-          <InputText
-            label="Apt, Suite, Building (optional)"
-            className="street-address2"
-            value={address.streetAddress2}
-            onChange={(event) =>
-              setAddress({ ...address, streetAddress2: event.target.value })
-            }
-          />
-
-          <InputText
-            label="City"
-            className="address-city"
-            value={address.city}
-            hasError={isTouched && !address.city?.trim()}
-            onChange={(event) =>
-              setAddress({ ...address, city: event.target.value })
-            }
-          />
+            )}
+          </div>
 
-          <AutocompleteDropdown
-            data-fs-bp-create-address-state-selector
-            label="State"
-            className="address-state"
-            value={selectedState}
-            options={getStateDisplayOptions(address.countryCode || "")}
-            shouldCloseOnSelect
-            onConfirmKeyPress={(option) => {
-              const stateData = findStateByDisplayValue(
-                address.countryCode || "",
-                option
-              );
-              if (stateData) {
-                setSelectedState(option);
-                setAddress({ ...address, state: getStateSaveValue(stateData) });
+          <div key="streetAddress">
+            <InputText
+              label="Street Address"
+              value={address.streetAddress}
+              className="street-address"
+              hasError={isTouched && !address.streetAddress?.trim()}
+              onChange={(event) =>
+                setAddress({ ...address, streetAddress: event.target.value })
               }
-            }}
-            disabled={!address.countryCode}
-            renderOption={(option, index) => {
-              const stateData = findStateByDisplayValue(
-                address.countryCode || "",
-                option
-              );
-              const isSelected = stateData
-                ? isStateSelected(address.state, stateData)
-                : false;
-
-              return (
-                <AutocompleteDropdown.Item
-                  key={`${option}-${index}`}
-                  closeOnClick
-                  index={index}
-                  isSelected={isSelected}
-                  onClick={() => {
-                    if (stateData) {
-                      setSelectedState(getStateDisplayValue(stateData));
-                      setAddress({
-                        ...address,
-                        state: getStateSaveValue(stateData),
-                      });
-                    }
-                  }}
-                >
-                  {option}
-                  {isSelected && <Icon name="Check" width={12} height={12} />}
-                </AutocompleteDropdown.Item>
-              );
-            }}
-          />
+            />
+            <ErrorMessage
+              show={isTouched && !address.streetAddress?.trim()}
+              message="Street Address is required"
+            />
+          </div>
 
-          <InputText
-            label="Postal Code"
-            value={address.zip}
-            className="address-postal-code"
-            hasError={isTouched && !address.zip?.trim()}
-            onChange={(event) => handleChangePostalCode(event.target.value)}
-            disabled={!address.countryCode}
-          />
+          {address.countryCode === "BRA" && (
+            <>
+              <div key="streetNumber">
+                <InputText
+                  type="number"
+                  label="Number"
+                  value={address.streetNumber || ""}
+                  className="address-number"
+                  hasError={isTouched && !address.streetNumber?.trim()}
+                  onChange={(event) =>
+                    setAddress({ ...address, streetNumber: event.target.value })
+                  }
+                />
+                <ErrorMessage
+                  show={isTouched && !address.streetNumber?.trim()}
+                  message="Number is required"
+                />
+              </div>
 
-          <ErrorMessage
-            show={isTouched && !address.zip?.trim()}
-            message="Postal Code is required"
-          />
+              <div key="neighborhood">
+                <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"
+                />
+              </div>
+            </>
+          )}
 
-          <ErrorMessage
-            show={isTouched && !address.city?.trim()}
-            message="City is required"
-          />
+          <div key="streetAddress2">
+            <InputText
+              label="Apt, Suite, Building (optional)"
+              className="street-address2"
+              value={address.streetAddress2}
+              onChange={(event) =>
+                setAddress({ ...address, streetAddress2: event.target.value })
+              }
+            />
+          </div>
 
-          {isEdit && (
+          <div key="city">
             <InputText
-              label="Geo coordinates (Optional)"
-              value={address.geoCoordinates}
+              label="City"
+              className="address-city"
+              value={address.city}
+              hasError={isTouched && !address.city?.trim()}
               onChange={(event) =>
-                setAddress({ ...address, geoCoordinates: event.target.value })
+                setAddress({ ...address, city: event.target.value })
               }
             />
-          )}
+            <ErrorMessage
+              show={isTouched && !address.city?.trim()}
+              message="City is required"
+            />
+          </div>
 
-          {!fixedType && (
+          <div key="state">
             <AutocompleteDropdown
-              label="Address Type"
-              value={address?.types.length > 0 ? address.types : ""}
-              className="address-type"
-              options={addressTypeOptions}
+              data-fs-bp-create-address-state-selector
+              label="State"
+              className="address-state"
+              value={selectedState}
+              options={getStateDisplayOptions(address.countryCode || "")}
               shouldCloseOnSelect
-              onConfirmKeyPress={(option) =>
-                setAddress({ ...address, types: [option] })
-              }
-              renderOption={(option, index) => (
-                <AutocompleteDropdown.Item
-                  key={`${option}-${index}`}
-                  closeOnClick
-                  index={index}
-                  isSelected={
-                    address?.types[0]?.toLocaleLowerCase() ===
-                    option.toLocaleLowerCase()
-                  }
-                  onClick={() => setAddress({ ...address, types: [option] })}
-                >
-                  {option}
-                  {address?.types[0]?.toLowerCase() ===
-                    option.toLocaleLowerCase() && (
-                    <Icon name="Check" width={12} height={12} />
-                  )}
-                </AutocompleteDropdown.Item>
-              )}
+              onConfirmKeyPress={(option) => {
+                const stateData = findStateByDisplayValue(
+                  address.countryCode || "",
+                  option
+                );
+                if (stateData) {
+                  setSelectedState(option);
+                  setAddress({
+                    ...address,
+                    state: getStateSaveValue(stateData),
+                  });
+                }
+              }}
+              disabled={!address.countryCode}
+              renderOption={(option, index) => {
+                const stateData = findStateByDisplayValue(
+                  address.countryCode || "",
+                  option
+                );
+                const isSelected = stateData
+                  ? isStateSelected(address.state, stateData)
+                  : false;
+
+                return (
+                  <AutocompleteDropdown.Item
+                    key={`${option}-${index}`}
+                    closeOnClick
+                    index={index}
+                    isSelected={isSelected}
+                    onClick={() => {
+                      if (stateData) {
+                        setSelectedState(getStateDisplayValue(stateData));
+                        setAddress({
+                          ...address,
+                          state: getStateSaveValue(stateData),
+                        });
+                      }
+                    }}
+                  >
+                    {option}
+                    {isSelected && <Icon name="Check" width={12} height={12} />}
+                  </AutocompleteDropdown.Item>
+                );
+              }}
             />
+          </div>
+
+          {address.countryCode !== "BRA" && (
+            <div key="zipCode">
+              <InputText
+                label="Postal Code"
+                value={address.zip}
+                className="address-postal-code"
+                hasError={isTouched && !address.zip?.trim()}
+                onChange={(event) => handleChangePostalCode(event.target.value)}
+                disabled={!address.countryCode}
+              />
+              <ErrorMessage
+                show={isTouched && !address.zip?.trim()}
+                message="Postal Code is required"
+              />
+            </div>
+          )}
+
+          {isEdit && (
+            <div key="geoCoordinates">
+              <InputText
+                label="Geo coordinates (Optional)"
+                value={address.geoCoordinates}
+                onChange={(event) =>
+                  setAddress({ ...address, geoCoordinates: event.target.value })
+                }
+              />
+            </div>
+          )}
+
+          {!fixedType && (
+            <div key="addressType">
+              <AutocompleteDropdown
+                label="Address Type"
+                value={address?.types.length > 0 ? address.types : ""}
+                className="address-type"
+                options={addressTypeOptions}
+                shouldCloseOnSelect
+                onConfirmKeyPress={(option) =>
+                  setAddress({ ...address, types: [option] })
+                }
+                renderOption={(option, index) => (
+                  <AutocompleteDropdown.Item
+                    key={`${option}-${index}`}
+                    closeOnClick
+                    index={index}
+                    isSelected={
+                      address?.types[0]?.toLocaleLowerCase() ===
+                      option.toLocaleLowerCase()
+                    }
+                    onClick={() => setAddress({ ...address, types: [option] })}
+                  >
+                    {option}
+                    {address?.types[0]?.toLowerCase() ===
+                      option.toLocaleLowerCase() && (
+                      <Icon name="Check" width={12} height={12} />
+                    )}
+                  </AutocompleteDropdown.Item>
+                )}
+              />
+            </div>
           )}
         </div>
       ) : (