summaryrefslogtreecommitdiffstats
path: root/browser/components/payments/res/containers/completion-error-page.js
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/payments/res/containers/completion-error-page.js')
-rw-r--r--browser/components/payments/res/containers/completion-error-page.js112
1 files changed, 112 insertions, 0 deletions
diff --git a/browser/components/payments/res/containers/completion-error-page.js b/browser/components/payments/res/containers/completion-error-page.js
new file mode 100644
index 0000000000..9e8f7ce9f7
--- /dev/null
+++ b/browser/components/payments/res/containers/completion-error-page.js
@@ -0,0 +1,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);