blob: 9e8f7ce9f7b10e4feaf8354ad522be1e7852f90a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* 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/. */
import HandleEventMixin from "../mixins/HandleEventMixin.js";
import PaymentRequestPage from "../components/payment-request-page.js";
import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
import paymentRequest from "../paymentRequest.js";
/* import-globals-from ../unprivileged-fallbacks.js */
/**
* <completion-error-page></completion-error-page>
*
* XXX: Bug 1473772 - This page isn't fully localized when used via this custom element
* as it will be much easier to implement and share the logic once we switch to Fluent.
*/
export default class CompletionErrorPage extends HandleEventMixin(
PaymentStateSubscriberMixin(PaymentRequestPage)
) {
constructor() {
super();
this.classList.add("error-page");
this.suggestionHeading = document.createElement("p");
this.body.append(this.suggestionHeading);
this.suggestionsList = document.createElement("ul");
this.suggestions = [];
this.body.append(this.suggestionsList);
this.brandingSpan = document.createElement("span");
this.brandingSpan.classList.add("branding");
this.footer.appendChild(this.brandingSpan);
this.doneButton = document.createElement("button");
this.doneButton.classList.add("done-button", "primary");
this.doneButton.addEventListener("click", this);
this.footer.appendChild(this.doneButton);
}
render(state) {
let { page } = state;
if (this.id && page && page.id !== this.id) {
log.debug(
`CompletionErrorPage: no need to further render inactive page: ${page.id}`
);
return;
}
let { request } = this.requestStore.getState();
let { displayHost } = request.topLevelPrincipal.URI;
for (let key of [
"pageTitle",
"suggestion-heading",
"suggestion-1",
"suggestion-2",
"suggestion-3",
]) {
if (this.dataset[key] && displayHost) {
this.dataset[key] = this.dataset[key].replace(
"**host-name**",
displayHost
);
}
}
this.pageTitleHeading.textContent = this.dataset.pageTitle;
this.suggestionHeading.textContent = this.dataset.suggestionHeading;
this.brandingSpan.textContent = this.dataset.brandingLabel;
this.doneButton.textContent = this.dataset.doneButtonLabel;
this.suggestionsList.textContent = "";
if (this.dataset["suggestion-1"]) {
this.suggestions[0] = this.dataset["suggestion-1"];
}
if (this.dataset["suggestion-2"]) {
this.suggestions[1] = this.dataset["suggestion-2"];
}
if (this.dataset["suggestion-3"]) {
this.suggestions[2] = this.dataset["suggestion-3"];
}
let suggestionsFragment = document.createDocumentFragment();
for (let suggestionText of this.suggestions) {
let listNode = document.createElement("li");
listNode.textContent = suggestionText;
suggestionsFragment.appendChild(listNode);
}
this.suggestionsList.appendChild(suggestionsFragment);
}
onClick(event) {
switch (event.target) {
case this.doneButton: {
this.onDoneButtonClick(event);
break;
}
default: {
throw new Error("Unexpected click target");
}
}
}
onDoneButtonClick(event) {
paymentRequest.closeDialog();
}
}
customElements.define("completion-error-page", CompletionErrorPage);
|
