Bug 1477113 - Dispatch paymentmethodchange event from the front-end. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D13740

browser/components/payments/content/paymentDialogWrapper.js

@@ -641,6 +641,27 @@ var paymentDialogWrapper = {
     }
   },
 
+  async onChangePaymentMethod({
+    selectedPaymentCardBillingAddressGUID: billingAddressGUID,
+  }) {
+    const methodName = "basic-card";
+    let methodDetails;
+    try {
+      let billingAddress = await this._convertProfileAddressToPaymentAddress(billingAddressGUID);
+      const basicCardChangeDetails = Cc["@mozilla.org/dom/payments/basiccard-change-details;1"]
+                                       .createInstance(Ci.nsIBasicCardChangeDetails);
+      basicCardChangeDetails.initData(billingAddress);
+      methodDetails = basicCardChangeDetails.QueryInterface(Ci.nsIMethodChangeDetails);
+    } catch (ex) {
+      // TODO (Bug 1498403): Some kind of "credit card storage error" here, perhaps asking user
+      // to re-enter credit card # from management UI.
+      Cu.reportError(ex);
+      return;
+    }
+
+    paymentSrv.changePaymentMethod(this.request.requestId, methodName, methodDetails);
+  },
+
   async onChangeShippingAddress({shippingAddressGUID}) {
     if (shippingAddressGUID) {
       // If a shipping address was de-selected e.g. the selected address was deleted, we'll
@@ -751,6 +772,10 @@ var paymentDialogWrapper = {
         this.onChangePayerAddress(data);
         break;
       }
+      case "changePaymentMethod": {
+        this.onChangePaymentMethod(data);
+        break;
+      }
       case "changeShippingAddress": {
         this.onChangeShippingAddress(data);
         break;

browser/components/payments/res/containers/payment-dialog.js

@@ -156,16 +156,16 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
 
   /**
    * Called when the selectedPaymentCard or its relevant properties or billingAddress are changed.
-   * @param {string} selectedPaymentCardGUID
+   * @param {string} selectedPaymentCardBillingAddressGUID
    */
-  changePaymentMethod(selectedPaymentCardGUID) {
+  changePaymentMethod(selectedPaymentCardBillingAddressGUID) {
     // Clear paymentMethod merchant errors when the paymentMethod or billingAddress changes.
     let request = Object.assign({}, this.requestStore.getState().request);
     request.paymentDetails = Object.assign({}, request.paymentDetails);
     request.paymentDetails.paymentMethodErrors = null;
     this.requestStore.setState({request});
 
-    // TODO: Bug 1477113 - Dispatch paymentmethodchange
+    paymentRequest.changePaymentMethod({selectedPaymentCardBillingAddressGUID});
   }
 
   /**
@@ -304,12 +304,10 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
       }
     }
 
-    // Ensure `selectedPaymentCard` never refers to a deleted payment card and refers
+    // Ensure `selectedPaymentCard` never refers to a deleted payment card.
-    // to a payment card if one exists.
+    if (selectedPaymentCard && !basicCards[selectedPaymentCard]) {
-    if (!basicCards[selectedPaymentCard]) {
-      // Determining the initial selection is tracked in bug 1455789
       this.requestStore.setState({
-        selectedPaymentCard: Object.keys(basicCards)[0] || null,
+        selectedPaymentCard: null,
         selectedPaymentCardSecurityCode: null,
       });
     }
@@ -432,8 +430,14 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
       }
     }
 
-    if (state.selectedPaymentCard != this._cachedState.selectedPaymentCard) {
+    let selectedPaymentCard = state.selectedPaymentCard;
-      this.changePaymentMethod(state.selectedPaymentCard);
+    let basicCards = paymentRequest.getBasicCards(state);
+    let billingAddressGUID = (basicCards[selectedPaymentCard] || {}).billingAddressGUID;
+    if (selectedPaymentCard != this._cachedState.selectedPaymentCard &&
+        billingAddressGUID) {
+      // Update _cachedState to prevent an infinite loop when changePaymentMethod updates state.
+      this._cachedState.selectedPaymentCard = state.selectedPaymentCard;
+      this.changePaymentMethod(billingAddressGUID);
     }
 
     if (this._isPayerRequested(state.request.paymentOptions)) {
@@ -444,7 +448,6 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
 
     this._cachedState.selectedShippingAddress = state.selectedShippingAddress;
     this._cachedState.selectedShippingOption = state.selectedShippingOption;
-    this._cachedState.selectedPaymentCard = state.selectedPaymentCard;
     this._cachedState.selectedPayerAddress = state.selectedPayerAddress;
   }
 

browser/components/payments/res/containers/payment-method-picker.js

@@ -67,12 +67,16 @@ export default class PaymentMethodPicker extends RichPicker {
 
     // Update selectedness after the options are updated
     let selectedPaymentCardGUID = state[this.selectedStateKey];
+    if (selectedPaymentCardGUID) {
       this.dropdown.value = selectedPaymentCardGUID;
 
-    if (selectedPaymentCardGUID && selectedPaymentCardGUID !== this.dropdown.value) {
+      if (selectedPaymentCardGUID !== this.dropdown.value) {
         throw new Error(`The option ${selectedPaymentCardGUID} ` +
                         `does not exist in the payment method picker`);
       }
+    } else {
+      this.dropdown.value = "";
+    }
 
     let securityCodeState = state[this.selectedStateKey + "SecurityCode"];
     if (securityCodeState && securityCodeState != this.securityCodeInput.value) {

browser/components/payments/res/paymentRequest.js

@@ -192,6 +192,10 @@ var paymentRequest = {
     this.sendMessageToChrome("closeDialog");
   },
 
+  changePaymentMethod(data) {
+    this.sendMessageToChrome("changePaymentMethod", data);
+  },
+
   changeShippingAddress(data) {
     this.sendMessageToChrome("changeShippingAddress", data);
   },

browser/components/payments/test/browser/browser_address_edit.js

@@ -559,7 +559,7 @@ add_task(async function test_private_persist_addresses() {
     }, PTU.ContentTasks.awaitPaymentEventPromise);
 
     await spawnPaymentDialogTask(frame, async (args) => {
-      let {address, tempAddressGuid} = args;
+      let {address, tempAddressGuid, prefilledGuids: guids} = args;
       let {
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
@@ -580,7 +580,11 @@ add_task(async function test_private_persist_addresses() {
       ok(tempAddress.name, "Address has a name");
       ok(tempAddress.name.includes(address["given-name"]) &&
          tempAddress.name.includes(address["family-name"]), "Address.name was computed");
-    }, {address: addressToAdd, tempAddressGuid});
+
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {address: addressToAdd, tempAddressGuid, prefilledGuids});
 
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",

browser/components/payments/test/browser/browser_card_edit.js

@@ -215,8 +215,18 @@ async function add_link(aOptions = {}) {
       ok(!button.disabled, "Save button should be enabled with valid CSC");
     });
 
+    ContentTask.spawn(browser, {
+      eventName: "paymentmethodchange",
+    }, PTU.ContentTasks.promisePaymentRequestEvent);
+    info("added paymentmethodchange handler");
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.clickPrimaryButton);
 
+    info("waiting for paymentmethodchange event");
+    await ContentTask.spawn(browser, {
+      eventName: "paymentmethodchange",
+    }, PTU.ContentTasks.awaitPaymentEventPromise);
+
     await spawnPaymentDialogTask(frame, async function waitForSummaryPage(testArgs = {}) {
       let {
         PaymentTestUtils: PTU,
@@ -417,7 +427,8 @@ add_task(async function test_edit_link() {
   {
     let card = Object.assign({}, PTU.BasicCards.JohnDoe,
                              { billingAddressGUID: prefilledGuids.address1GUID });
-    await addCardRecord(card);
+    let guid = await addCardRecord(card);
+    prefilledGuids.card1GUID = guid;
   }
 
   const args = {
@@ -432,7 +443,12 @@ add_task(async function test_edit_link() {
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
 
-      let editLink = content.document.querySelector("payment-method-picker .edit-link");
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      let editLink = paymentMethodPicker.querySelector(".edit-link");
+
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        prefilledGuids.card1GUID);
+
       is(editLink.textContent, "Edit", "Edit link text");
 
       editLink.click();
@@ -613,19 +629,28 @@ add_task(async function test_invalid_network_card_edit() {
                              { billingAddressGUID: prefilledGuids.address1GUID });
     // create a record with an unknown network id
     card["cc-type"] = "asiv";
-    await addCardRecord(card);
+    let guid = await addCardRecord(card);
+    prefilledGuids.card1GUID = guid;
   }
 
   const args = {
     methodData: [PTU.MethodData.basicCard],
     details: PTU.Details.total60USD,
+    prefilledGuids,
   };
-  await spawnInDialogForMerchantTask(PTU.ContentTasks.createAndShowRequest, async function check() {
+  await spawnInDialogForMerchantTask(
+    PTU.ContentTasks.createAndShowRequest,
+    async function check({prefilledGuids}) {
       let {
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
 
-    let editLink = content.document.querySelector("payment-method-picker .edit-link");
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      let editLink = paymentMethodPicker.querySelector(".edit-link");
+
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        prefilledGuids.card1GUID);
+
       is(editLink.textContent, "Edit", "Edit link text");
 
       editLink.click();

browser/components/payments/test/browser/browser_change_shipping.js

@@ -8,6 +8,8 @@ async function setup() {
   await formAutofillStorage.creditCards.update(prefilledGuids.card1GUID, {
     billingAddressGUID: prefilledGuids.address1GUID,
   }, true);
+
+  return prefilledGuids;
 }
 
 add_task(async function test_change_shipping() {
@@ -15,7 +17,7 @@ add_task(async function test_change_shipping() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -29,6 +31,12 @@ add_task(async function test_change_shipping() {
       }
     );
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     let shippingOptions =
       await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getShippingOptions);
     is(shippingOptions.selectedOptionCurrency, "USD", "Shipping options should be in USD");
@@ -257,7 +265,7 @@ add_task(async function test_no_shippingchange_without_shipping() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -270,6 +278,12 @@ add_task(async function test_no_shippingchange_without_shipping() {
       }
     );
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     ContentTask.spawn(browser, {
       eventName: "shippingaddresschange",
     }, PTU.ContentTasks.ensureNoPaymentRequestEvent);

browser/components/payments/test/browser/browser_payment_completion.js

@@ -11,7 +11,8 @@ async function setup() {
   let billingAddressGUID = await addAddressRecord(PTU.Addresses.TimBL);
   let card = Object.assign({}, PTU.BasicCards.JohnDoe,
                            { billingAddressGUID });
-  await addCardRecord(card);
+  let card1GUID = await addCardRecord(card);
+  return {address1GUID: billingAddressGUID, card1GUID};
 }
 
 add_task(async function test_complete_success() {
@@ -19,7 +20,7 @@ add_task(async function test_complete_success() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -32,6 +33,12 @@ add_task(async function test_complete_success() {
       }
     );
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",
     });
@@ -55,7 +62,7 @@ add_task(async function test_complete_fail() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -68,6 +75,12 @@ add_task(async function test_complete_fail() {
       }
     );
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "456",
     });
@@ -93,7 +106,7 @@ add_task(async function test_complete_timeout() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -109,6 +122,12 @@ add_task(async function test_complete_timeout() {
       }
     );
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "789",
     });

browser/components/payments/test/browser/browser_retry.js

@@ -10,7 +10,8 @@ async function setup() {
   let billingAddressGUID = await addAddressRecord(PTU.Addresses.TimBL);
   let card = Object.assign({}, PTU.BasicCards.JohnDoe,
                            { billingAddressGUID });
-  await addCardRecord(card);
+  let card1GUID = await addCardRecord(card);
+  return {address1GUID: billingAddressGUID, card1GUID};
 }
 
 add_task(async function test_retry_with_genericError() {
@@ -18,7 +19,7 @@ add_task(async function test_retry_with_genericError() {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -29,6 +30,12 @@ add_task(async function test_retry_with_genericError() {
       merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
     });
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",
     });

browser/components/payments/test/browser/browser_retry_fieldErrors.js

@@ -24,12 +24,12 @@ async function setup() {
   return prefilledGuids;
 }
 
-add_task(async function test_retry_with_shipppingAddressErrors() {
+add_task(async function test_retry_with_shippingAddressErrors() {
   if (!OSKeyStoreTestUtils.canTestOSKeyStoreLogin()) {
     todo(false, "Cannot test OS key store login on official builds.");
     return;
   }
-  await setup();
+  let prefilledGuids = await setup();
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: BLANK_PAGE_URL,
@@ -43,6 +43,12 @@ add_task(async function test_retry_with_shipppingAddressErrors() {
 
     await selectPaymentDialogShippingAddressByCountry(frame, "DE");
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card2GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",
     });
@@ -189,6 +195,12 @@ add_task(async function test_retry_with_payerErrors() {
       merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
     });
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card2GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",
     });
@@ -357,6 +369,12 @@ add_task(async function test_retry_with_paymentMethodErrors() {
       merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
     });
 
+    await spawnPaymentDialogTask(frame, async ({prefilledGuids: guids}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        guids.card1GUID);
+    }, {prefilledGuids});
+
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",
     });

browser/components/payments/test/browser/browser_show_dialog.js

@@ -71,6 +71,12 @@ add_task(async function test_show_completePayment() {
     info("select the shipping address");
     await selectPaymentDialogShippingAddressByCountry(frame, "US");
 
+    await spawnPaymentDialogTask(frame, async ({card1GUID: cardGuid}) => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        cardGuid);
+    }, {card1GUID});
+
     info("entering CSC");
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "999",
@@ -134,6 +140,12 @@ add_task(async function test_show_completePayment2() {
     info("select the shipping address");
     await selectPaymentDialogShippingAddressByCountry(frame, "US");
 
+    await spawnPaymentDialogTask(frame, async () => {
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox.options[0].value);
+    });
+
     info("entering CSC");
     await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, {
       securityCode: "123",

browser/components/payments/test/browser/browser_total.js

@@ -29,10 +29,23 @@ add_task(async function test_modifier_with_no_method_selected() {
 
 add_task(async function test_modifier_with_no_method_selected() {
   info("adding a basic-card");
-  await addSampleAddressesAndBasicCard();
+  let prefilledGuids = await addSampleAddressesAndBasicCard();
+
+  const testTask = async ({methodData, details, prefilledGuids: guids}) => {
+    is(content.document.querySelector("#total > currency-amount").textContent,
+       "$2.00 USD",
+       "Check total currency amount before selecting the credit card");
+
+    // Select the (only) payment method.
+    let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+    content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                      guids.card1GUID);
+
+    await ContentTaskUtils.waitForCondition(() => {
+      let currencyAmount = content.document.querySelector("#total > currency-amount");
+      return currencyAmount.textContent == "$2.50 USD";
+    }, "Wait for modified total to update");
 
-  const testTask = async ({methodData, details}) => {
-    // We expect the *only* payment method (the one basic-card) to be selected initially.
     is(content.document.querySelector("#total > currency-amount").textContent,
        "$2.50 USD",
        "Check modified total currency amount");
@@ -40,6 +53,7 @@ add_task(async function test_modifier_with_no_method_selected() {
   const args = {
     methodData: [PTU.MethodData.bobPay, PTU.MethodData.basicCard],
     details: Object.assign({}, PTU.Details.bobPayPaymentModifier, PTU.Details.total2USD),
+    prefilledGuids,
   };
   await spawnInDialogForMerchantTask(PTU.ContentTasks.createAndShowRequest, testTask, args);
   await cleanupFormAutofillStorage();

browser/components/payments/test/browser/head.js

@@ -666,9 +666,14 @@ async function fillInCardForm(frame, aCard, aOptions = {}) {
       // of this should be investigated further.
       await ContentTaskUtils.waitForCondition(() => field == content.document.activeElement,
                                               `Waiting for field #${key} to get focus`);
+      if (key == "billingAddressGUID") {
+        // Can't type the value in, press Down until the value is found
+        content.fillField(field, val);
+      } else {
         // cc-exp-* fields are numbers so convert to strings and pad left with 0
         let fillValue = val.toString().padStart(2, "0");
         EventUtils.synthesizeKey(fillValue, {}, Cu.waiveXrays(content.window));
+      }
       // cc-exp-* field values are not padded, so compare with unpadded string.
       is(field.value, val.toString(), `${key} value is correct after sendString`);
     }

dom/interfaces/payments/nsIPaymentRequestService.idl

@@ -41,7 +41,7 @@ interface nsIPaymentRequestService : nsISupports
   void respondPayment(in nsIPaymentActionResponse aResponse);
 
   /**
-   *  Inform the merchant the shipping addres has changed.
+   *  Inform the merchant the shipping address has changed.
    *  @param requestId - the request identifier of the payment request.
    *  @param aAddress - the new payment address.
    */