Bug 1462779 - Auto-select appropriate addresses in select dropdowns in on-boarding forms. r?MattN
MozReview-Commit-ID: 5Lm3djwSeuG
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -138,32 +138,34 @@ export default class BasicCardForm exten
if (!record) {
throw new Error("Trying to edit a non-existing card: " + basicCardPage.guid);
}
// When editing an existing record, prevent changes to persistence
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;
+ let billingAddressSelect = this.form.querySelector("#billingAddressGUID");
if (basicCardPage.billingAddressGUID) {
- let addressGuid = basicCardPage.billingAddressGUID;
- let billingAddressSelect = this.form.querySelector("#billingAddressGUID");
- billingAddressSelect.value = addressGuid;
+ billingAddressSelect.value = basicCardPage.billingAddressGUID;
+ } else if (!editing) {
+ billingAddressSelect.value = Object.keys(addresses)[0];
}
}
handleEvent(event) {
switch (event.type) {
case "click": {
this.onClick(event);
break;
--- a/browser/components/payments/res/paymentRequest.js
+++ b/browser/components/payments/res/paymentRequest.js
@@ -132,29 +132,30 @@ var paymentRequest = {
// Onboarding wizard flow.
if (!hasSavedAddresses && (shippingRequested || !hasSavedCards)) {
state.page = {
id: "address-page",
onboardingWizard: true,
};
state["address-page"] = {
- selectedStateKey: "selectedShippingAddress",
addressFields: null,
guid: null,
};
if (shippingRequested) {
Object.assign(state["address-page"], {
title: paymentDialog.dataset.shippingAddressTitleAdd,
});
+ state.page.selectedStateKey = ["selectedShippingAddress"];
} else {
Object.assign(state["address-page"], {
title: paymentDialog.dataset.billingAddressTitleAdd,
});
+ state.page.selectedStateKey = ["basic-card-page", "billingAddressGUID"];
}
} else if (!hasSavedCards) {
state.page = {
id: "basic-card-page",
onboardingWizard: true,
};
}
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -32,17 +32,17 @@ add_task(async function test_onboarding_
await spawnPaymentDialogTask(frame, async function() {
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" &&
- state["address-page"].selectedStateKey == "selectedShippingAddress";
+ state.page.selectedStateKey[0] == "selectedShippingAddress";
}, "Address page is shown first during on-boarding if there are no saved addresses");
info("Checking if the address page has been rendered");
let addressSaveButton = content.document.querySelector("address-form .save-button");
ok(content.isVisible(addressSaveButton), "Address save button is rendered");
info("Check if the total header is visible on the address page during on-boarding");
let header = content.document.querySelector("header");
@@ -76,16 +76,22 @@ add_task(async function test_onboarding_
let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
let basicCardTitle = content.document.querySelector("basic-card-form h1");
ok(content.isVisible(basicCardTitle), "Basic card page title is visible");
is(basicCardTitle.textContent, "Add Credit Card", "Basic card page title is correctly shown");
+ info("Check if the correct billing address is selected in the basic card page");
+ PTU.DialogContentUtils.waitForState((state) => {
+ let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
+ return state.selectedShippingAddress == billingAddressSelect.value;
+ }, "Shipping address is selected as the billing address");
+
for (let [key, val] of Object.entries(PTU.BasicCards.JohnDoe)) {
let field = content.document.getElementById(key);
field.value = val;
ok(!field.disabled, `Field #${key} shouldn't be disabled`);
}
content.document.querySelector("basic-card-form .save-button").click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
@@ -301,17 +307,19 @@ add_task(async function test_onboarding_
});
await spawnPaymentDialogTask(frame, async function() {
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
await PTU.DialogContentUtils.waitForState(content, (state) => {
- return state.page.id == "address-page";
+ return state.page.id == "address-page" &&
+ state.page.selectedStateKey[0] == "basic-card-page" &&
+ state.page.selectedStateKey[1] == "billingAddressGUID";
// eslint-disable-next-line max-len
}, "Billing address page is shown first during on-boarding if requestShipping is turned off");
info("Checking if the billing address page has been rendered");
let addressSaveButton = content.document.querySelector("address-form .save-button");
ok(content.isVisible(addressSaveButton),
"Address save button is rendered");
@@ -334,16 +342,22 @@ add_task(async function test_onboarding_
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "basic-card-page";
// eslint-disable-next-line max-len
}, "Basic card page is shown after the billing address page during onboarding if requestShipping is turned off");
let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
+ info("Check if the correct billing address is selected in the basic card page");
+ PTU.DialogContentUtils.waitForState((state) => {
+ let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
+ return state["basic-card-page"].billingAddressGUID == billingAddressSelect.value;
+ }, "Billing Address is correctly shown");
+
for (let [key, val] of Object.entries(PTU.BasicCards.JohnDoe)) {
let field = content.document.getElementById(key);
field.value = val;
ok(!field.disabled, `Field #${key} shouldn't be disabled`);
}
content.document.querySelector("basic-card-form .save-button").click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -214,24 +214,28 @@ add_task(async function test_add_noSelec
[address1.guid]: deepClone(address1),
},
savedBasicCards: {
[card1.guid]: deepClone(card1),
},
selectedShippingAddress: null,
});
await asyncElementRendered();
- checkCCForm(form, {});
+ checkCCForm(form, {
+ billingAddressGUID: address1.guid,
+ });
info("now test with a missing selectedShippingAddress");
await form.requestStore.setState({
selectedShippingAddress: "some-missing-guid",
});
await asyncElementRendered();
- checkCCForm(form, {});
+ checkCCForm(form, {
+ billingAddressGUID: address1.guid,
+ });
form.remove();
await form.requestStore.reset();
});
add_task(async function test_edit() {
let form = new BasicCardForm();
await form.promiseReady;