Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-17 23:35:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1421806 - Use a custom element for the payment request dialog contents. r=jaws

Browse Source 
The payment-dialog contents are already tested via browser-chrome tests

MozReview-Commit-ID: IsFH2FteBpf

--HG--
extra : rebase_source : e26dbd565f22002fb684777e3c95395666eb6359
This commit is contained in:
Matthew Noorenberghe 2017-12-01 14:15:04 -08:00
parent f2930c7a77
commit 89e27ffc78
6 changed files with 212 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
toolkit/components/payments/res/components/currency-amount.js
View File

@ -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";
/**
* <currency-amount value="7.5" currency="USD"></currency-amount>
*/

55
toolkit/components/payments/res/containers/payment-dialog.js Normal file
View File

@ -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";
/**
* <payment-dialog></payment-dialog>
*/
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);

3
toolkit/components/payments/res/debugging.html
View File

@ -11,6 +11,9 @@
<body>
<div>
<button id="refresh">Refresh</button>
<button id="logState">Log state</button>
<button id="setRequest1">Set Request 1</button>
<button id="setRequest2">Set Request 2</button>
</div>
</body>
</html>

123
toolkit/components/payments/res/debugging.js
View File

@ -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) {

34
toolkit/components/payments/res/paymentRequest.js
View File

@ -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");
},

29
toolkit/components/payments/res/paymentRequest.xhtml
View File

@ -9,20 +9,33 @@
<title></title>
<link rel="stylesheet" href="paymentRequest.css"/>
<script src="vendor/custom-elements.min.js"></script>
<script src="PaymentsStore.js"></script>
<script src="mixins/ObservedPropertiesMixin.js"></script>
<script src="mixins/PaymentStateSubscriberMixin.js"></script>
<script src="components/currency-amount.js"></script>
<script src="containers/payment-dialog.js"></script>
<script src="paymentRequest.js"></script>
<template id="payment-dialog-template">
<div id="host-name"></div>
<div id="total">
<h2 class="label"></h2>
<currency-amount></currency-amount>
</div>
<div id="controls-container">
<button id="cancel">Cancel payment</button>
</div>
</template>
</head>
<body>
<iframe id="debugging-console" hidden="hidden" src="debugging.html"></iframe>
<div id="host-name"></div>
<div id="total">
<h2 class="label"></h2>
<currency-amount></currency-amount>
</div>
<div id="controls-container">
<button id="cancel">Cancel payment</button>
</div>
<payment-dialog></payment-dialog>
</body>
</html>