Fix auto-selection errors in pickers on the payment summary page. r?MattN draft
authorprathiksha <prathikshaprasadsuman@gmail.com>
Thu, 21 Jun 2018 15:03:36 -0700
changeset 810893 7b93b9c9540963454c3e3e2edb13c3088cffd34f
parent 810892 77ff82e47cafe41b70c3f68fc755cce68d15d369
push id114149
push userbmo:prathikshaprasadsuman@gmail.com
push dateTue, 26 Jun 2018 17:30:13 +0000
reviewersMattN
milestone62.0a1
Fix auto-selection errors in pickers on the payment summary page. r?MattN MozReview-Commit-ID: KrUyGOczLiG
browser/components/payments/res/components/rich-select.js
browser/components/payments/res/containers/address-form.js
browser/components/payments/res/containers/address-picker.js
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/paymentRequest.js
--- a/browser/components/payments/res/components/rich-select.js
+++ b/browser/components/payments/res/components/rich-select.js
@@ -51,22 +51,16 @@ export default class RichSelect extends 
         this.value = event.target.value;
         break;
       }
     }
   }
 
   render() {
     let selectedRichOption = this.querySelector(":scope > .rich-select-selected-clone");
-    if (this.value &&
-        selectedRichOption &&
-        this.value == selectedRichOption.value) {
-      return;
-    }
-
     if (selectedRichOption) {
       selectedRichOption.remove();
     }
 
     if (this.value) {
       let optionType = this.getAttribute("optionType");
       selectedRichOption = document.createElement(optionType);
 
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -200,16 +200,17 @@ export default class AddressForm extends
   saveRecord() {
     let record = this.formHandler.buildFormObject();
     let currentState = this.requestStore.getState();
     let {
       page,
       tempAddresses,
       savedBasicCards,
       "address-page": addressPage,
+      selectedStateKey,
     } = currentState;
     let editing = !!addressPage.guid;
 
     if (editing ? (addressPage.guid in tempAddresses) : !this.persistCheckbox.checked) {
       record.isTemporary = true;
     }
 
     let state = {
@@ -217,17 +218,17 @@ export default class AddressForm extends
         page: {
           id: "address-page",
           onboardingWizard: page.onboardingWizard,
           error: this.dataset.errorGenericSave,
         },
         "address-page": addressPage,
       },
       preserveOldProperties: true,
-      selectedStateKey: page.selectedStateKey,
+      selectedStateKey,
     };
 
     const previousId = page.previousId;
     if (page.onboardingWizard && !Object.keys(savedBasicCards).length) {
       state.successStateChange = {
         page: {
           id: "basic-card-page",
           previousId: "address-page",
@@ -241,15 +242,16 @@ export default class AddressForm extends
           onboardingWizard: page.onboardingWizard,
         },
       };
     }
 
     if (previousId) {
       state.successStateChange[previousId] = Object.assign({}, currentState[previousId]);
       state.successStateChange[previousId].preserveFieldValues = true;
+      state.successStateChange[previousId].selectedStateKey = selectedStateKey;
     }
 
     paymentRequest.updateAutofillRecord("addresses", record, addressPage.guid, state);
   }
 }
 
 customElements.define("address-form", AddressForm);
--- a/browser/components/payments/res/containers/address-picker.js
+++ b/browser/components/payments/res/containers/address-picker.js
@@ -154,23 +154,26 @@ export default class AddressPicker exten
     if (selectedKey) {
       this.requestStore.setState({
         [selectedKey]: this.dropdown.value,
       });
     }
   }
 
   onClick({target}) {
+    let key = [];
+    key.push(this.selectedStateKey);
+
     let nextState = {
       page: {
         id: "address-page",
       },
+      selectedStateKey: key,
       "address-page": {
         addressFields: this.getAttribute("address-fields"),
-        selectedStateKey: this.selectedStateKey,
       },
     };
 
     switch (target) {
       case this.addLink: {
         nextState["address-page"].guid = null;
         nextState["address-page"].title = this.dataset.addAddressTitle;
         break;
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -143,16 +143,17 @@ export default class BasicCardForm exten
       this.persistCheckbox.hidden = true;
     } else {
       this.pageTitle.textContent = this.dataset.addBasicCardTitle;
       // Use a currently selected shipping address as the default billing address
       record.billingAddressGUID = basicCardPage.billingAddressGUID;
       if (!record.billingAddressGUID && selectedShippingAddress) {
         record.billingAddressGUID = selectedShippingAddress;
       }
+
       // Adding a new record: default persistence to checked when in a not-private session
       this.persistCheckbox.hidden = false;
       this.persistCheckbox.checked = !state.isPrivate;
     }
 
     this.formHandler.loadRecord(record, addresses, basicCardPage.preserveFieldValues);
 
     this.form.querySelector(".billingAddressRow").hidden = false;
@@ -184,26 +185,26 @@ export default class BasicCardForm exten
       case this.addressEditLink: {
         let {
           "basic-card-page": basicCardPage,
         } = this.requestStore.getState();
         let nextState = {
           page: {
             id: "address-page",
             previousId: "basic-card-page",
-            selectedStateKey: ["basic-card-page", "billingAddressGUID"],
           },
           "address-page": {
             guid: null,
             title: this.dataset.billingAddressTitleAdd,
           },
           "basic-card-page": {
             preserveFieldValues: true,
             guid: basicCardPage.guid,
           },
+          selectedStateKey: ["basic-card-page", "billingAddressGUID"],
         };
         let billingAddressGUID = this.form.querySelector("#billingAddressGUID");
         let selectedOption = billingAddressGUID.selectedOptions.length &&
                              billingAddressGUID.selectedOptions[0];
         if (evt.target == this.addressEditLink && selectedOption && selectedOption.value) {
           nextState["address-page"].title = this.dataset.billingAddressTitleEdit;
           nextState["address-page"].guid = selectedOption.value;
         }
@@ -275,16 +276,18 @@ export default class BasicCardForm exten
     }
 
     // Only save the card number if we're saving a new record, otherwise we'd
     // overwrite the unmasked card number with the masked one.
     if (!editing) {
       record["cc-number"] = record["cc-number"] || "";
     }
 
+    record.billingAddressGUID = this.form.querySelector("#billingAddressGUID").value;
+
     let state = {
       errorStateChange: {
         page: {
           id: "basic-card-page",
           error: this.dataset.errorGenericSave,
         },
       },
       preserveOldProperties: true,
--- a/browser/components/payments/res/paymentRequest.js
+++ b/browser/components/payments/res/paymentRequest.js
@@ -140,22 +140,22 @@ var paymentRequest = {
         addressFields: null,
         guid: null,
       };
 
       if (shippingRequested) {
         Object.assign(state["address-page"], {
           title: paymentDialog.dataset.shippingAddressTitleAdd,
         });
-        state.page.selectedStateKey = ["selectedShippingAddress"];
+        state.selectedStateKey = ["selectedShippingAddress"];
       } else {
         Object.assign(state["address-page"], {
           title: paymentDialog.dataset.billingAddressTitleAdd,
         });
-        state.page.selectedStateKey = ["basic-card-page", "billingAddressGUID"];
+        state.selectedStateKey = ["basic-card-page", "billingAddressGUID"];
       }
     } else if (!hasSavedCards) {
       state.page = {
         id: "basic-card-page",
         onboardingWizard: true,
       };
     }