Bug 1462779 - Auto-select appropriate addresses in select dropdowns in on-boarding forms. r?MattN draft
authorprathiksha <prathikshaprasadsuman@gmail.com>
Wed, 23 May 2018 16:24:58 -0700
changeset 801831 eab9cfb3cc618e9d349b4f5c4ad03d6eb99774a0
parent 801830 6e17ec2b767241be3e45bda7e996704bfc90e6ae
child 801842 64a194dc109b1a1e4e16eb85470386b8e54b158e
push id111751
push userbmo:prathikshaprasadsuman@gmail.com
push dateWed, 30 May 2018 21:03:28 +0000
reviewersMattN
bugs1462779
milestone62.0a1
Bug 1462779 - Auto-select appropriate addresses in select dropdowns in on-boarding forms. r?MattN MozReview-Commit-ID: 5Lm3djwSeuG
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/paymentRequest.js
browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
browser/components/payments/test/mochitest/test_basic_card_form.html
--- 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;