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

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

--HG--
extra : moz-landing-system : lando

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
-    // to a payment card if one exists.
-    if (!basicCards[selectedPaymentCard]) {
-      // Determining the initial selection is tracked in bug 1455789
+    // Ensure `selectedPaymentCard` never refers to a deleted payment card.
+    if (selectedPaymentCard && !basicCards[selectedPaymentCard]) {
       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) {
-      this.changePaymentMethod(state.selectedPaymentCard);
+    let selectedPaymentCard = 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,11 +67,15 @@ export default class PaymentMethodPicker extends RichPicker {
 
     // Update selectedness after the options are updated
     let selectedPaymentCardGUID = state[this.selectedStateKey];
-    this.dropdown.value = selectedPaymentCardGUID;
+    if (selectedPaymentCardGUID) {
+      this.dropdown.value = selectedPaymentCardGUID;
 
-    if (selectedPaymentCardGUID && selectedPaymentCardGUID !== this.dropdown.value) {
-      throw new Error(`The option ${selectedPaymentCardGUID} ` +
-                      `does not exist in the payment method picker`);
+      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"];

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_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,64 +629,73 @@ 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() {
-    let {
-      PaymentTestUtils: PTU,
-    } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
+  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");
-    is(editLink.textContent, "Edit", "Edit link text");
+      let paymentMethodPicker = content.document.querySelector("payment-method-picker");
+      let editLink = paymentMethodPicker.querySelector(".edit-link");
 
-    editLink.click();
+      content.fillField(Cu.waiveXrays(paymentMethodPicker).dropdown.popupBox,
+                        prefilledGuids.card1GUID);
 
-    let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
-      return state.page.id == "basic-card-page" && state["basic-card-page"].guid;
-    }, "Check edit page state");
+      is(editLink.textContent, "Edit", "Edit link text");
 
-    state = await PTU.DialogContentUtils.waitForState(content, (state) => {
-      return Object.keys(state.savedBasicCards).length == 1 &&
-             Object.keys(state.savedAddresses).length == 1;
-    }, "Check card and address present at beginning of test");
+      editLink.click();
 
-    let networkSelector = content.document.querySelector("basic-card-form #cc-type");
-    is(Cu.waiveXrays(networkSelector).selectedIndex, -1,
-       "An invalid cc-type should result in no selection");
-    is(Cu.waiveXrays(networkSelector).value, "",
-       "An invalid cc-type should result in an empty string as value");
+      let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return state.page.id == "basic-card-page" && state["basic-card-page"].guid;
+      }, "Check edit page state");
 
-    ok(content.document.querySelector("basic-card-form button.save-button").disabled,
-       "Save button should be disabled due to a missing cc-type");
+      state = await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return Object.keys(state.savedBasicCards).length == 1 &&
+               Object.keys(state.savedAddresses).length == 1;
+      }, "Check card and address present at beginning of test");
 
-    content.fillField(Cu.waiveXrays(networkSelector), "visa");
+      let networkSelector = content.document.querySelector("basic-card-form #cc-type");
+      is(Cu.waiveXrays(networkSelector).selectedIndex, -1,
+         "An invalid cc-type should result in no selection");
+      is(Cu.waiveXrays(networkSelector).value, "",
+         "An invalid cc-type should result in an empty string as value");
 
-    ok(!content.document.querySelector("basic-card-form button.save-button").disabled,
-       "Save button should be enabled after fixing cc-type");
-    content.document.querySelector("basic-card-form button.save-button").click();
+      ok(content.document.querySelector("basic-card-form button.save-button").disabled,
+         "Save button should be disabled due to a missing cc-type");
 
-    // We expect that saving a card with a fixed network will result in the
-    // cc-type property being changed to the new value.
-    state = await PTU.DialogContentUtils.waitForState(content, (state) => {
-      let cards = Object.entries(state.savedBasicCards);
-      return cards.length == 1 &&
-             cards[0][1]["cc-type"] == "visa";
-    }, "Check card was edited");
+      content.fillField(Cu.waiveXrays(networkSelector), "visa");
 
-    let cardGUIDs = Object.keys(state.savedBasicCards);
-    is(cardGUIDs.length, 1, "Check there is still one card");
-    let savedCard = state.savedBasicCards[cardGUIDs[0]];
-    is(savedCard["cc-type"], "visa", "We expect the cc-type value to be updated");
+      ok(!content.document.querySelector("basic-card-form button.save-button").disabled,
+         "Save button should be enabled after fixing cc-type");
+      content.document.querySelector("basic-card-form button.save-button").click();
 
-    state = await PTU.DialogContentUtils.waitForState(content, (state) => {
-      return state.page.id == "payment-summary";
-    }, "Switched back to payment-summary");
-  }, args);
+      // We expect that saving a card with a fixed network will result in the
+      // cc-type property being changed to the new value.
+      state = await PTU.DialogContentUtils.waitForState(content, (state) => {
+        let cards = Object.entries(state.savedBasicCards);
+        return cards.length == 1 &&
+               cards[0][1]["cc-type"] == "visa";
+      }, "Check card was edited");
+
+      let cardGUIDs = Object.keys(state.savedBasicCards);
+      is(cardGUIDs.length, 1, "Check there is still one card");
+      let savedCard = state.savedBasicCards[cardGUIDs[0]];
+      is(savedCard["cc-type"], "visa", "We expect the cc-type value to be updated");
+
+      state = await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return state.page.id == "payment-summary";
+      }, "Switched back to payment-summary");
+    }, args);
 });
 
 add_task(async function test_private_card_adding() {

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`);
-      // 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));
+      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.
    */