Address Automplete addon incorrect address format and country filter not working

[alexgauvin]

Hi,

Incorrect address format
My setup in my JFB form is 1 Address Autocomplete Field with PLACES TYPES field settings set to Address.

The result on the frontend : Postal code is missing.

In screenshot below, first address should read as [ 2215 Rue Marie-Victorin, Québec, QC G1T 1J6, Canada ]
And so on with lists in Canada.
United States (États-Unis in my screenshot) should have a 5 digits number at same place in the address string, just before country name.

I have reached Crocoblock support about that and they provided me with a snippet (see below) fetching the postal code, but this code does position the postal code at the end of the address string, after the country name.
In most countries, postal code MUST be displayed just before the country name, and not after.

In my opinion, adding the postal code to the Address string should not need custom code and should be included by default in JFB > Addon.
As far as I know, ALL post services in ALL countries absolutely need the postal code to be able to validate sending destination and thus, sending anything anywhere.
Not having this as default renders this addon absolutely useless and defies the sole purpose of this added feature to a form.

Here is the snippet provided which adds wrongly positionned postal code.
Unfortunatly, this snippet breaks the Address Autocomplete Field COUNTRIES ALLOWED.
Therefore, setting any country name in this field won't filter accordingly.

document.addEventListener("DOMContentLoaded", function () {
  if (!window?.JetPlugins?.hooks) {
    return;
  }

  const { addAction } = JetPlugins.hooks;

  addAction(
    "jet.fb.input.makeReactive",
    "jet-form-builder/address-autocomplete/custom",
    function (input) {
      if (!input?.nodes?.length) {
        return;
      }

      if (!input.nodes[0].classList.contains("jet-address-autocomplete")) {
        return;
      }

      const $ = jQuery;
      const service = new google.maps.places.AutocompleteService();
      let sessionToken = new google.maps.places.AutocompleteSessionToken();

      function getAddressWIthPostalCode(predictions) {
        const div = document.createElement("div");
        const placesService = new google.maps.places.PlacesService(div);

        let promises = [];

        promises.push(
          ...predictions.map((prediction, index) => {
            const placeId = { placeId: prediction.place_id };

            return new Promise((resolve, reject) => {
              placesService.getDetails(placeId, function (results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                  const postalCodeComponent = results.address_components.find(
                    (item) => item.types.includes("postal_code")
                  );
                  const postal_code = postalCodeComponent
                    ? postalCodeComponent.long_name
                    : "";
                  const newAdrs = postal_code
                    ? prediction.description + " " + postal_code
                    : prediction.description;
                  resolve(newAdrs);
                }
              });
            });
          })
        );

        return Promise.all(promises);
      }

      input.onChangeInput = function (field) {
        const textInput = $(field[0]).prev(".jet-address-autocomplete");
        const settings = textInput.data("address-settings");
        let options = {};
        if (settings.countries) {
          options.componentRestrictions = { country: [...settings.countries] };
          delete settings.countries;
        }
        options = {
          ...options,
          ...settings,
        };

        if (!textInput.val()) {
          field.empty();
          return;
        }

        const displayPredictions = async (predictions, status) => {
          if (status != google.maps.places.PlacesServiceStatus.OK) {
            field.trigger("jet-fb.error", [status, field]);
            return;
          }

          field.empty();

          const items = await getAddressWIthPostalCode(predictions);

          field.append(
            items.map((address, index) => {
              return $("<li>")
                .text(address)
                .attr("value", index)
                .addClass("jet-adr-visible");
            })
          );
        };

        service.getPlacePredictions(
          {
            ...options,
            input: textInput.val(),
            sessionToken,
          },
          displayPredictions
        );
      };
    }
  );
});

[Crocoblock]

Hi @alexgauvin
The code worked, but if you do not see the address the API returns the address without the postal code

Also in Google Maps does not see the postal code https://i.imgur.com/X5U08Qw.png