From 89e27ffc785c00f1abce05ccf61f84a400da3348 Mon Sep 17 00:00:00 2001 From: Matthew Noorenberghe Date: Fri, 1 Dec 2017 14:15:04 -0800 Subject: [PATCH] Bug 1421806 - Use a custom element for the payment request dialog contents. r=jaws The payment-dialog contents are already tested via browser-chrome tests MozReview-Commit-ID: IsFH2FteBpf --HG-- extra : rebase_source : e26dbd565f22002fb684777e3c95395666eb6359 --- .../res/components/currency-amount.js | 2 + .../payments/res/containers/payment-dialog.js | 55 ++++++++ .../components/payments/res/debugging.html | 3 + toolkit/components/payments/res/debugging.js | 123 ++++++++++++++++++ .../components/payments/res/paymentRequest.js | 34 ++--- .../payments/res/paymentRequest.xhtml | 29 +++-- 6 files changed, 212 insertions(+), 34 deletions(-) create mode 100644 toolkit/components/payments/res/containers/payment-dialog.js diff --git a/toolkit/components/payments/res/components/currency-amount.js b/toolkit/components/payments/res/components/currency-amount.js index 1cc0bd62f84b..a7024f2e006f 100644 --- a/toolkit/components/payments/res/components/currency-amount.js +++ b/toolkit/components/payments/res/components/currency-amount.js @@ -2,6 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + /** * */ diff --git a/toolkit/components/payments/res/containers/payment-dialog.js b/toolkit/components/payments/res/containers/payment-dialog.js new file mode 100644 index 000000000000..dcafbca84225 --- /dev/null +++ b/toolkit/components/payments/res/containers/payment-dialog.js @@ -0,0 +1,55 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* global PaymentStateSubscriberMixin, PaymentRequest */ + +"use strict"; + +/** + * + */ + +class PaymentDialog extends PaymentStateSubscriberMixin(HTMLElement) { + constructor() { + super(); + this._template = document.getElementById("payment-dialog-template"); + } + + connectedCallback() { + let contents = document.importNode(this._template.content, true); + this._hostNameEl = contents.querySelector("#host-name"); + + this._cancelButton = contents.querySelector("#cancel"); + this._cancelButton.addEventListener("click", this.cancelRequest); + + this.appendChild(contents); + + super.connectedCallback(); + } + + disconnectedCallback() { + this._cancelButtonEl.removeEventListener("click", this.cancelRequest); + super.disconnectedCallback(); + } + + cancelRequest() { + PaymentRequest.cancel(); + } + + setLoadingState(state) { + this.requestStore.setState(state); + } + + render(state) { + let request = state.request; + this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost; + + let totalItem = request.paymentDetails.totalItem; + let totalAmountEl = this.querySelector("#total > currency-amount"); + totalAmountEl.value = totalItem.amount.value; + totalAmountEl.currency = totalItem.amount.currency; + } +} + +customElements.define("payment-dialog", PaymentDialog); diff --git a/toolkit/components/payments/res/debugging.html b/toolkit/components/payments/res/debugging.html index 0c044220a5f8..f42976ca7b9b 100644 --- a/toolkit/components/payments/res/debugging.html +++ b/toolkit/components/payments/res/debugging.html @@ -11,6 +11,9 @@
+ + +
diff --git a/toolkit/components/payments/res/debugging.js b/toolkit/components/payments/res/debugging.js index 6d5ace18a310..19979b783e6c 100644 --- a/toolkit/components/payments/res/debugging.js +++ b/toolkit/components/payments/res/debugging.js @@ -2,10 +2,133 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +const requestStore = window.parent.document.querySelector("payment-dialog").requestStore; + +let REQUEST_1 = { + tabId: 9, + topLevelPrincipal: {URI: {displayHost: "tschaeff.github.io"}}, + requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25", + paymentMethods: [], + paymentDetails: { + id: "", + totalItem: {label: "Demo total", amount: {currency: "EUR", value: "1.00"}, pending: false}, + displayItems: [ + { + label: "Square", + amount: { + currency: "USD", + value: "5", + }, + }, + ], + shippingOptions: [ + { + id: "123", + label: "Fast", + amount: { + currency: "USD", + value: 10, + }, + selected: false, + }, + { + id: "456", + label: "Faster (default)", + amount: { + currency: "USD", + value: 20, + }, + selected: true, + }, + ], + modifiers: null, + error: "", + }, + paymentOptions: { + requestPayerName: false, + requestPayerEmail: false, + requestPayerPhone: false, + requestShipping: false, + shippingType: "shipping", + }, +}; + +let REQUEST_2 = { + tabId: 9, + topLevelPrincipal: {URI: {displayHost: "example.com"}}, + requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25", + paymentMethods: [], + paymentDetails: { + id: "", + totalItem: {label: "Demo total", amount: {currency: "CAD", value: "25.75"}, pending: false}, + displayItems: [ + { + label: "Triangle", + amount: { + currency: "CAD", + value: "3", + }, + }, + { + label: "Circle", + amount: { + currency: "EUR", + value: "10.50", + }, + }, + ], + shippingOptions: [ + { + id: "123", + label: "Fast (default)", + amount: { + currency: "USD", + value: 10, + }, + selected: true, + }, + { + id: "947", + label: "Slow", + amount: { + currency: "USD", + value: 10, + }, + selected: false, + }, + ], + modifiers: null, + error: "", + }, + paymentOptions: { + requestPayerName: false, + requestPayerEmail: false, + requestPayerPhone: false, + requestShipping: false, + shippingType: "shipping", + }, +}; + + let buttonActions = { + logState() { + let state = requestStore.getState(); + // eslint-disable-next-line no-console + console.log(state); + dump(`${JSON.stringify(state, null, 2)}\n`); + }, + refresh() { window.parent.location.reload(true); }, + + setRequest1() { + requestStore.setState({request: REQUEST_1}); + }, + + setRequest2() { + requestStore.setState({request: REQUEST_2}); + }, }; window.addEventListener("click", function onButtonClick(evt) { diff --git a/toolkit/components/payments/res/paymentRequest.js b/toolkit/components/payments/res/paymentRequest.js index 9979c89f847e..67245748884f 100644 --- a/toolkit/components/payments/res/paymentRequest.js +++ b/toolkit/components/payments/res/paymentRequest.js @@ -11,7 +11,6 @@ "use strict"; let PaymentRequest = { - request: null, domReadyPromise: null, init() { @@ -34,15 +33,6 @@ let PaymentRequest = { this.onPaymentRequestLoad(); break; } - case "click": { - switch (event.target.id) { - case "cancel": { - this.onCancel(); - break; - } - } - break; - } case "keypress": { if (event.code != "KeyD" || !event.altKey || !event.ctrlKey) { break; @@ -80,37 +70,29 @@ let PaymentRequest = { switch (messageType) { case "showPaymentRequest": { - this.request = detail.request; - this.onShowPaymentRequest(); + this.onShowPaymentRequest(detail); break; } } }, onPaymentRequestLoad(requestId) { - let cancelBtn = document.getElementById("cancel"); - cancelBtn.addEventListener("click", this, {once: true}); - window.addEventListener("unload", this, {once: true}); this.sendMessageToChrome("paymentDialogReady"); }, - async onShowPaymentRequest() { + async onShowPaymentRequest(detail) { // Handle getting called before the DOM is ready. await this.domReadyPromise; - let hostNameEl = document.getElementById("host-name"); - hostNameEl.textContent = this.request.topLevelPrincipal.URI.displayHost; - - let totalItem = this.request.paymentDetails.totalItem; - let totalEl = document.getElementById("total"); - let currencyEl = totalEl.querySelector("currency-amount"); - currencyEl.value = totalItem.amount.value; - currencyEl.currency = totalItem.amount.currency; - totalEl.querySelector(".label").textContent = totalItem.label; + document.querySelector("payment-dialog").setLoadingState({ + request: detail.request, + savedAddresses: detail.savedAddresses, + savedBasicCards: detail.savedBasicCards, + }); }, - onCancel() { + cancel() { this.sendMessageToChrome("paymentCancel"); }, diff --git a/toolkit/components/payments/res/paymentRequest.xhtml b/toolkit/components/payments/res/paymentRequest.xhtml index 0453be74a153..ceb861e1222e 100644 --- a/toolkit/components/payments/res/paymentRequest.xhtml +++ b/toolkit/components/payments/res/paymentRequest.xhtml @@ -9,20 +9,33 @@ + + + + + + + + + + -
-
-

- -
-
- -
+