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,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_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/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.
    */