fix #7152

1 files changed, 108 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
new file mode 100644
index 000000000..a56c82dee
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
@@ -0,0 +1,108 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslationContext } from "../../../web-util/src/index.browser.js";
+import {
+  ErrorAlert,
+  Alert as AlertNotification,
+  useAlertContext,
+} from "../context/alert.js";
+import { Alert } from "../mui/Alert.js";
+
+/**
+ *
+ * @author sebasjm
+ */
+
+function AlertContext({
+  context,
+  cause,
+}: {
+  cause: unknown;
+  context: undefined | object;
+}): VNode {
+  const [more, setMore] = useState(false);
+  const { i18n } = useTranslationContext();
+  if (!more) {
+    return (
+      <div style={{ display: "flex", justifyContent: "right" }}>
+        <a onClick={() => setMore(true)}>
+          <i18n.Translate>more info</i18n.Translate>
+        </a>
+      </div>
+    );
+  }
+  return (
+    <pre style={{ overflow: "overlay" }}>
+      {JSON.stringify(
+        context === undefined ? { cause } : { context, cause },
+        undefined,
+        2,
+      )}
+    </pre>
+  );
+}
+
+export function ErrorAlertView({
+  error: alert,
+  onClose,
+}: {
+  error: ErrorAlert;
+  onClose?: () => Promise<void>;
+}): VNode {
+  return (
+    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <div>{alert.description}</div>
+        <AlertContext context={alert.context} cause={alert.cause} />
+      </div>
+    </Alert>
+  );
+}
+
+export function AlertView({
+  alert,
+  onClose,
+}: {
+  alert: AlertNotification;
+  onClose?: () => Promise<void>;
+}): VNode {
+  return (
+    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <div>{alert.description}</div>
+      </div>
+    </Alert>
+  );
+}
+
+export function CurrentAlerts(): VNode {
+  const { alerts, removeAlert } = useAlertContext();
+  if (alerts.length === 0) return <Fragment />;
+  return (
+    <Wrapper>
+      {alerts.map((n, i) => (
+        <AlertView key={i} alert={n} onClose={async () => removeAlert(n)} />
+      ))}
+    </Wrapper>
+  );
+}
+
+function Wrapper({ children }: { children: ComponentChildren }): VNode {
+  return <div style={{ margin: "2em" }}>{children}</div>;
+}