Support missing region field in checkout

postcode-nl · Aug 15, 2024 · 215dfbb · 215dfbb
1 parent 6cb48a8
commit 215dfbb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 32 deletions.
diff --git a/view/frontend/web/js/form/components/checkout/address-autofill-nl.js b/view/frontend/web/js/form/components/checkout/address-autofill-nl.js
@@ -28,7 +28,6 @@ define([
                 `${this.parentName}.street`,
                 `${this.parentName}.city`,
                 `${this.parentName}.postcode`,
-                `${this.parentName}.region_id_input`,
             ]);
 
             this.countrySelect((component) => {
@@ -60,29 +59,31 @@ define([
         },
 
         setInputAddress: function (address) {
-            const streetInputs = this.street().elems(),
-                addressParts = this.getAddressParts(address);
-
-            if (streetInputs.length > 2) {
-                streetInputs[0].value(addressParts.street);
-                streetInputs[1].value(addressParts.houseNumber);
-                streetInputs[2].value(addressParts.houseNumberAddition);
-            } else if (streetInputs.length > 1) {
-                streetInputs[0].value(addressParts.street);
-                streetInputs[1].value(addressParts.house);
+            const addressParts = this.getAddressParts(address);
+            let streetValues;
+
+            if (this.street().initChildCount > 2) {
+                streetValues = [addressParts.street, addressParts.houseNumber, addressParts.houseNumberAddition];
+            } else if (this.street().initChildCount > 1) {
+                streetValues = [addressParts.street, addressParts.house];
             } else {
-                streetInputs[0].value(`${addressParts.street} ${addressParts.house}`);
+                streetValues = [addressParts.street + ' ' + addressParts.house];
             }
 
+            // Street children may not yet be available at this point, so value needs to be set asynchronously.
+            streetValues.forEach((v, i) => { Registry.async(`${this.street().name}.${i}`)('value', v); });
+
             this.city().value(addressParts.city);
             this.postcode().value(addressParts.postcode);
-            this.regionIdInput().value(addressParts.province);
+
+            // Region may not exist, use async.
+            Registry.async(`${this.parentName}.region_id_input`)('value', addressParts.province);
         },
 
         resetInputAddress: function () {
             this.city().clear().error(false);
             this.postcode().clear().error(false);
-            this.regionIdInput().clear().error(false);
+            this.regionIdInput()?.clear().error(false);
             this.street().elems.each((streetInput) => streetInput.clear().error(false));
         },
 
@@ -101,8 +102,8 @@ define([
                     this[field](component => component.disabled(!state)); // eslint-disable-line no-loop-func
                 }
 
-                for (let j = 0; j < 4; j++) {
-                    Registry.async(`${this.street().name}.${j}`)('disabled', !state);
+                for (let i = 0; i < this.street().initChildCount; i++) {
+                    Registry.async(`${this.street().name}.${i}`)('disabled', !state);
                 }
 
                 break;

diff --git a/view/frontend/web/js/form/element/checkout/address-autofill-intl.js b/view/frontend/web/js/form/element/checkout/address-autofill-intl.js
@@ -36,28 +36,28 @@ define([
         },
 
         setInputAddress: function (result) {
-            const addressParts = this.getAddressParts(result.address),
-                streetInputs = this.street().elems();
-
-            if (streetInputs.length > 2) {
-                streetInputs[0].value(addressParts.street);
-                streetInputs[1].value(addressParts.buildingNumber);
-                streetInputs[2].value(addressParts.buildingNumberAddition);
-            } else if (streetInputs.length > 1) {
-                streetInputs[0].value(addressParts.street);
-                streetInputs[1].value(addressParts.building);
+            const addressParts = this.getAddressParts(result.address);
+            let streetValues;
+
+            if (this.street().initChildCount > 2) {
+                streetValues = [addressParts.street, addressParts.buildingNumber, addressParts.buildingNumberAddition];
+            } else if (this.street().initChildCount > 1) {
+                streetValues = [addressParts.street, addressParts.building];
             } else {
-                streetInputs[0].value(`${addressParts.street} ${addressParts.building}`);
+                streetValues = [addressParts.street + ' ' + addressParts.building];
             }
 
+            // Street children may not yet be available at this point, so value needs to be set asynchronously.
+            streetValues.forEach((v, i) => { Registry.async(`${this.street().name}.${i}`)('value', v); });
+
             this.city().value(addressParts.locality);
             this.postcode().value(addressParts.postcode);
         },
 
         resetInputAddress: function () {
             this.city().clear().error(false);
             this.postcode().clear().error(false);
-            this.regionIdInput().clear().error(false);
+            this.regionIdInput()?.clear().error(false);
 
             // Must run last because the checkout data in local storage will not change if the street fields are empty.
             this.street().elems.each((streetInput) => streetInput.clear().error(false));
@@ -70,10 +70,8 @@ define([
 
             switch (this.settings.show_hide_address_fields) {
             case 'disable':
-                let j = 4;
-
-                while (j--) {
-                    Registry.async(`${this.street().name}.${j}`)('disabled', !state);
+                for (let i = 0; i < this.street().initChildCount; i++) {
+                    Registry.async(`${this.street().name}.${i}`)('disabled', !state);
                 }
 
                 this.city((component) => component.disabled(!state));