From 66a1567f229de6b28791e3abf68b78e562dae4a2 Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Wed, 21 Feb 2018 14:16:35 -0800
Subject: [PATCH] Bug 1429189 - Show shipping address errors on the summary
 screen. r=mattn

MozReview-Commit-ID: LaXrvWliWna

--HG--
extra : rebase_source : 6b0639a39a92192dc0c4cbc9392d97e16717adfc
---
 .../payments/content/paymentDialogWrapper.js  | 16 ++++
 .../components/payments/paymentUIService.js   | 22 ++++-
 .../payments/res/containers/payment-dialog.js |  5 +-
 .../payments/res/paymentRequest.xhtml         |  1 +
 .../payments/test/PaymentTestUtils.jsm        | 67 ++++++++++++-
 .../payments/test/browser/browser.ini         |  1 +
 .../browser_shippingaddresschange_error.js    | 93 +++++++++++++++++++
 .../test/browser/browser_show_dialog.js       |  2 +-
 .../components/payments/test/browser/head.js  | 17 ++++
 9 files changed, 217 insertions(+), 7 deletions(-)
 create mode 100644 toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js

diff --git a/toolkit/components/payments/content/paymentDialogWrapper.js b/toolkit/components/payments/content/paymentDialogWrapper.js
index c007ac83cc14..97ffb7793cb9 100644
--- a/toolkit/components/payments/content/paymentDialogWrapper.js
+++ b/toolkit/components/payments/content/paymentDialogWrapper.js
@@ -108,6 +108,9 @@ var paymentDialogWrapper = {
     if (!requestId || typeof(requestId) != "string") {
       throw new Error("Invalid PaymentRequest ID");
     }
+
+    // The Request object returned by the Payment Service is live and
+    // will automatically get updated if event.updateWith is used.
     this.request = paymentSrv.getPaymentRequestById(requestId);
 
     if (!this.request) {
@@ -250,6 +253,19 @@ var paymentDialogWrapper = {
     });
   },
 
+  updateRequest() {
+    // There is no need to update this.request since the object is live
+    // and will automatically get updated if event.updateWith is used.
+    let requestSerialized = this._serializeRequest(this.request);
+
+    this.mm.sendAsyncMessage("paymentChromeToContent", {
+      messageType: "updateState",
+      data: {
+        request: requestSerialized,
+      },
+    });
+  },
+
   /**
    * Recursively convert and filter input to the subset of data types supported by JSON
    *
diff --git a/toolkit/components/payments/paymentUIService.js b/toolkit/components/payments/paymentUIService.js
index ae64cbc92589..e9d57d1f99cb 100644
--- a/toolkit/components/payments/paymentUIService.js
+++ b/toolkit/components/payments/paymentUIService.js
@@ -80,7 +80,13 @@ PaymentUIService.prototype = {
   },
 
   updatePayment(requestId) {
+    let dialog = this.findDialog(requestId);
     this.log.debug("updatePayment:", requestId);
+    if (!dialog) {
+      this.log.error("updatePayment: no dialog found");
+      return;
+    }
+    dialog.paymentDialogWrapper.updateRequest();
   },
 
   // other helper methods
@@ -90,17 +96,25 @@ PaymentUIService.prototype = {
    * @returns {boolean} whether the specified dialog was closed.
    */
   closeDialog(requestId) {
+    let win = this.findDialog(requestId);
+    if (!win) {
+      return false;
+    }
+    this.log.debug(`closing: ${win.name}`);
+    win.close();
+    return true;
+  },
+
+  findDialog(requestId) {
     let enu = Services.wm.getEnumerator(null);
     let win;
     while ((win = enu.getNext())) {
       if (win.name == `${this.REQUEST_ID_PREFIX}${requestId}`) {
-        this.log.debug(`closing: ${win.name}`);
-        win.close();
-        return true;
+        return win;
       }
     }
 
-    return false;
+    return null;
   },
 
   requestIdForWindow(window) {
diff --git a/toolkit/components/payments/res/containers/payment-dialog.js b/toolkit/components/payments/res/containers/payment-dialog.js
index 5caf5f3005be..2f82ac513ce2 100644
--- a/toolkit/components/payments/res/containers/payment-dialog.js
+++ b/toolkit/components/payments/res/containers/payment-dialog.js
@@ -32,6 +32,7 @@ class PaymentDialog extends PaymentStateSubscriberMixin(HTMLElement) {
 
     this._orderDetailsOverlay = contents.querySelector("#order-details-overlay");
     this._shippingRequestedEls = contents.querySelectorAll(".shippingRequested");
+    this._errorText = contents.querySelector("#error-text");
 
     this._disabledOverlay = contents.getElementById("disabled-overlay");
 
@@ -178,14 +179,16 @@ class PaymentDialog extends PaymentStateSubscriberMixin(HTMLElement) {
 
   render(state) {
     let request = state.request;
+    let paymentDetails = request.paymentDetails;
     this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost;
 
-    let totalItem = request.paymentDetails.totalItem;
+    let totalItem = paymentDetails.totalItem;
     let totalAmountEl = this.querySelector("#total > currency-amount");
     totalAmountEl.value = totalItem.amount.value;
     totalAmountEl.currency = totalItem.amount.currency;
 
     this._orderDetailsOverlay.hidden = !state.orderDetailsShowing;
+    this._errorText.textContent = paymentDetails.error;
     for (let element of this._shippingRequestedEls) {
       element.hidden = !request.paymentOptions.requestShipping;
     }
diff --git a/toolkit/components/payments/res/paymentRequest.xhtml b/toolkit/components/payments/res/paymentRequest.xhtml
index bf2c3fc67e23..07e727384b4d 100644
--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -71,6 +71,7 @@
           <shipping-option-picker class="shippingRequested"></shipping-option-picker>
           <div><label>&paymentMethodsLabel;</label></div>
           <payment-method-picker selected-state-key="selectedPaymentCard"></payment-method-picker>
+          <div id="error-text"></div>
         </section>
 
         <footer id="controls-container">
diff --git a/toolkit/components/payments/test/PaymentTestUtils.jsm b/toolkit/components/payments/test/PaymentTestUtils.jsm
index 6a459fe80db9..49657af32efa 100644
--- a/toolkit/components/payments/test/PaymentTestUtils.jsm
+++ b/toolkit/components/payments/test/PaymentTestUtils.jsm
@@ -36,6 +36,25 @@ this.PaymentTestUtils = {
       return true;
     },
 
+    updateWith: async ({eventName, details}) => {
+      /* globals ok */
+      if (details.error &&
+          (!details.shippingOptions || details.shippingOptions.length)) {
+        ok(false, "Need to clear the shipping options to show error text");
+      }
+      if (!details.total) {
+        ok(false, "`total: { label, amount: { value, currency } }` is required for updateWith");
+      }
+
+      content[eventName + "Promise"] =
+        new Promise(resolve => {
+          content.rq.addEventListener(eventName, event => {
+            event.updateWith(details);
+            resolve();
+          }, {once: true});
+        });
+    },
+
     /**
      * Create a new payment request and cache it as `rq`.
      *
@@ -67,7 +86,7 @@ this.PaymentTestUtils = {
   DialogContentTasks: {
     isElementVisible: selector => {
       let element = content.document.querySelector(selector);
-      return !element.hidden;
+      return element.getBoundingClientRect().height > 0;
     },
 
     getShippingOptions: () => {
@@ -87,6 +106,14 @@ this.PaymentTestUtils = {
       };
     },
 
+    getErrorDetails: () => {
+      let doc = content.document;
+      let errorText = doc.querySelector("#error-text");
+      return {
+        text: errorText.textContent,
+      };
+    },
+
     selectShippingAddressByCountry: country => {
       let doc = content.document;
       let addressPicker =
@@ -268,4 +295,42 @@ this.PaymentTestUtils = {
       requestShipping: true,
     },
   },
+
+  Addresses: {
+    TimBL: {
+      "given-name": "Timothy",
+      "additional-name": "John",
+      "family-name": "Berners-Lee",
+      organization: "World Wide Web Consortium",
+      "street-address": "32 Vassar Street\nMIT Room 32-G524",
+      "address-level2": "Cambridge",
+      "address-level1": "MA",
+      "postal-code": "02139",
+      country: "US",
+      tel: "+16172535702",
+      email: "timbl@example.org",
+    },
+    TimBL2: {
+      "given-name": "Timothy",
+      "additional-name": "John",
+      "family-name": "Berners-Lee",
+      organization: "World Wide Web Consortium",
+      "street-address": "1 Pommes Frittes Place",
+      "address-level2": "Berlin",
+      "address-level1": "BE",
+      "postal-code": "02138",
+      country: "DE",
+      tel: "+16172535702",
+      email: "timbl@example.org",
+    },
+  },
+
+  BasicCards: {
+    JohnDoe: {
+      "cc-exp-month": 1,
+      "cc-exp-year": 9999,
+      "cc-name": "John Doe",
+      "cc-number": "999999999999",
+    },
+  },
 };
diff --git a/toolkit/components/payments/test/browser/browser.ini b/toolkit/components/payments/test/browser/browser.ini
index ad26918ce7f2..1d19113ed09e 100644
--- a/toolkit/components/payments/test/browser/browser.ini
+++ b/toolkit/components/payments/test/browser/browser.ini
@@ -12,6 +12,7 @@ support-files =
 [browser_request_serialization.js]
 [browser_request_shipping.js]
 [browser_request_summary.js]
+[browser_shippingaddresschange_error.js]
 [browser_show_dialog.js]
 skip-if = os == 'win' && debug # bug 1418385
 [browser_total.js]
diff --git a/toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js b/toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js
new file mode 100644
index 000000000000..98e6c4185f75
--- /dev/null
+++ b/toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js
@@ -0,0 +1,93 @@
+"use strict";
+
+add_task(addSampleAddressesAndBasicCard);
+
+add_task(async function test_show_error_on_addresschange() {
+  await BrowserTestUtils.withNewTab({
+    gBrowser,
+    url: BLANK_PAGE_URL,
+  }, async browser => {
+    let dialogReadyPromise = waitForWidgetReady();
+    // start by creating a PaymentRequest, and show it
+    await ContentTask.spawn(browser,
+                            {
+                              methodData: [PTU.MethodData.basicCard],
+                              details: PTU.Details.twoShippingOptions,
+                              options: PTU.Options.requestShippingOption,
+                            },
+                            PTU.ContentTasks.createAndShowRequest);
+
+    // get a reference to the UI dialog and the requestId
+    let [win] = await Promise.all([getPaymentWidget(), dialogReadyPromise]);
+    ok(win, "Got payment widget");
+    let requestId = paymentUISrv.requestIdForWindow(win);
+    ok(requestId, "requestId should be defined");
+    is(win.closed, false, "dialog should not be closed");
+
+    let frame = await getPaymentFrame(win);
+    ok(frame, "Got payment frame");
+
+    info("setting up the event handler for shippingoptionchange");
+    let EXPECTED_ERROR_TEXT = "Cannot ship with option 1 on days that end with Y";
+    await ContentTask.spawn(browser, {
+      eventName: "shippingoptionchange",
+      details: {
+        error: EXPECTED_ERROR_TEXT,
+        shippingOptions: [],
+        total: {
+          label: "Grand total is!!!!!: ",
+          amount: {
+            value: "12",
+            currency: "USD",
+          },
+        },
+      },
+    }, PTU.ContentTasks.updateWith);
+    await spawnPaymentDialogTask(frame,
+                                 PTU.DialogContentTasks.selectShippingOptionById,
+                                 "1");
+    info("awaiting the shippingoptionchange event");
+    await ContentTask.spawn(browser, {
+      eventName: "shippingoptionchange",
+    }, PTU.ContentTasks.awaitPaymentRequestEventPromise);
+
+    let errors = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getErrorDetails);
+    is(errors.text, EXPECTED_ERROR_TEXT, "Error text should be present on dialog");
+    let errorsVisible =
+      await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#error-text");
+    ok(errorsVisible, "Error text should be visible");
+
+    info("setting up the event handler for shippingaddresschange");
+    await ContentTask.spawn(browser, {
+      eventName: "shippingaddresschange",
+      details: {
+        error: "",
+        shippingOptions: PTU.Details.twoShippingOptions.shippingOptions,
+        total: {
+          label: "Grand total is now: ",
+          amount: {
+            value: "24",
+            currency: "USD",
+          },
+        },
+      },
+    }, PTU.ContentTasks.updateWith);
+    await spawnPaymentDialogTask(frame,
+                                 PTU.DialogContentTasks.selectShippingAddressByCountry,
+                                 "DE");
+    info("awaiting the shippingaddresschange event");
+    await ContentTask.spawn(browser, {
+      eventName: "shippingaddresschange",
+    }, PTU.ContentTasks.awaitPaymentRequestEventPromise);
+    errors = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getErrorDetails);
+    is(errors.text, "", "Error text should not be present on dialog");
+    errorsVisible =
+      await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#error-text");
+    ok(!errorsVisible, "Error text should not be visible");
+
+    info("clicking cancel");
+    spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
+
+    await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
+  });
+});
diff --git a/toolkit/components/payments/test/browser/browser_show_dialog.js b/toolkit/components/payments/test/browser/browser_show_dialog.js
index 8ee4f324c93b..12b79d3c6285 100644
--- a/toolkit/components/payments/test/browser/browser_show_dialog.js
+++ b/toolkit/components/payments/test/browser/browser_show_dialog.js
@@ -153,7 +153,7 @@ add_task(async function test_show_completePayment() {
 
     let frame = await getPaymentFrame(win);
 
-    ContentTask.spawn(browser, {
+    await ContentTask.spawn(browser, {
       eventName: "shippingoptionchange",
     }, PTU.ContentTasks.promisePaymentRequestEvent);
 
diff --git a/toolkit/components/payments/test/browser/head.js b/toolkit/components/payments/test/browser/head.js
index 893c76ad8331..c2df3f468e2f 100644
--- a/toolkit/components/payments/test/browser/head.js
+++ b/toolkit/components/payments/test/browser/head.js
@@ -132,6 +132,23 @@ function spawnTaskInNewDialog(requestId, contentTaskFn, args = null) {
   });
 }
 
+async function addSampleAddressesAndBasicCard() {
+  let onChanged = TestUtils.topicObserved("formautofill-storage-changed",
+                                          (subject, data) => data == "add");
+  profileStorage.addresses.add(PTU.Addresses.TimBL);
+  await onChanged;
+
+  onChanged = TestUtils.topicObserved("formautofill-storage-changed",
+                                      (subject, data) => data == "add");
+  profileStorage.addresses.add(PTU.Addresses.TimBL2);
+  await onChanged;
+
+  onChanged = TestUtils.topicObserved("formautofill-storage-changed",
+                                      (subject, data) => data == "add");
+  profileStorage.creditCards.add(PTU.BasicCards.JohnDoe);
+  await onChanged;
+}
+
 /**
  * Open a merchant tab with the given merchantTaskFn to create a PaymentRequest
  * and then open the associated PaymentRequest dialog in a new tab and run the