Fix auto-selection errors in pickers on the payment summary page. r?MattN
draft
Fix auto-selection errors in pickers on the payment summary page. r?MattN
MozReview-Commit-ID: KrUyGOczLiG
--- 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,
};
}