Merge pull request #3150 from catchpoint/fix_update_billing

fix billing information update

Author: lbartoli79

www/assets/js/country-list/country-list.js

@@ -2,7 +2,7 @@
 
 ((window) => {
   class CountrySelector {
-    constructor(selector, subdivisionSelector, isoCompliantJsonBlob) {
+    constructor(selector, subdivisionSelector, isoCompliantJsonBlob, initialCountry, initialState) {
       this.countryList = isoCompliantJsonBlob;
       this.countries = Object.keys(this.countryList).map((code) => {
         return {
@@ -22,9 +22,12 @@
 
       this.countrySelector = selector;
       this.subdivisionSelector = subdivisionSelector;
+      this.countrySelector.value = initialCountry;
 
       // Fill in subdivisions
-      this.fillSubdivision(this.countries[0].code);
+      this.fillSubdivision(initialCountry ?? this.countries[0].code);
+
+      this.subdivisionSelector.value = initialState;
 
       // Attach listener
       this.countrySelector.addEventListener("change", (e) => {
@@ -47,6 +50,7 @@
     }
 
     fillSubdivision(countryCode) {
+      this.subdivisionSelector.value = undefined;
       const divisions = this.getSubdivisions(countryCode);
       const opts = Object.keys(divisions).map((key) => {
         return new Option(divisions[key], key);
@@ -60,4 +64,4 @@
   }
 
   window.CountrySelector = CountrySelector;
-})(window);
+})(window);

www/templates/account/billing/update-payment-confirm-address.php

@@ -31,11 +31,8 @@
                         <label for="state">State</label>
                         <div>
                             <select autocomplete="off" name="state" data-country-selector="state-selector" required>
-
-                                <?php foreach ($state_list as $state) : ?>
-                                    <option value="<?= $state['code'] ?>" <?php if ($state['code'] == $state_code) {
-                                                                                echo 'selected';
-                                                                            } ?>>
+                                <?php foreach ($state_list as $state): ?>
+                                    <option value="<?= $state['code'] ?>">
                                         <?= $state['name']; ?>
                                     </option>
                                 <?php endforeach; ?>
@@ -45,21 +42,8 @@
                     <div class="info-container country">
                         <label for="country">Country</label>
                         <select autocomplete="off" name="country" data-country-selector="selector" required>
-                            <?php foreach ($country_list as $country) : ?>
-                                <?php
-                                $current_code = $country["code"];
-                                $selected_country = false;
-                                if (isset($country_code) && !is_null($country_code)) {
-                                    if ($current_code == $country_code) {
-                                        $selected_country = true;
-                                    }
-                                } else {
-                                    if ($current_code == 'US') {
-                                        $selected_country = true;
-                                    }
-                                }
-                                ?>
-                                <option value="<?= $country["code"] ?>" <?= $selected_country ? 'selected' : '' ?>>
+                            <?php foreach ($country_list as $country): ?>
+                                <option value="<?= $country["code"] ?>">
                                     <?= $country["name"]; ?>
                                 </option>
                             <?php endforeach; ?>
@@ -83,18 +67,19 @@
     <script>
         (() => {
             const countryList = <?= $country_list_json_blob ?>;
+            const initialCountry = "<?= $country_code ?>";
+            const initialState = "<?= $state_code ?>";
             if (document.readyState === "loading") {
                 document.addEventListener("DOMContentLoaded", () => {
                     const countrySelectorEl = document.querySelector("[data-country-selector=selector]");
                     const divisionSelectorEl = document.querySelector("[data-country-selector=state-selector]");
 
-                    new CountrySelector(countrySelectorEl, divisionSelectorEl, countryList);
+                    new CountrySelector(countrySelectorEl, divisionSelectorEl, countryList, initialCountry, initialState);
                 });
             } else {
                 const countrySelectorEl = document.querySelector("[data-country-selector=selector]");
                 const divisionSelectorEl = document.querySelector("[data-country-selector=state-selector]");
-
-                new CountrySelector(countrySelectorEl, divisionSelectorEl, countryList);
+                new CountrySelector(countrySelectorEl, divisionSelectorEl, countryList, initialCountry, initialState);
             }
         })();
     </script>