1 files changed, 38 insertions, 21 deletions
diff --git a/packages/web-util/src/components/ToastBanner.tsx b/packages/web-util/src/components/ToastBanner.tsx
index 2424b17ff..ece26285f 100644
--- a/packages/web-util/src/components/ToastBanner.tsx
+++ b/packages/web-util/src/components/ToastBanner.tsx
@@ -1,5 +1,20 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 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 { Fragment, VNode, h } from "preact"
-import { Attention, GLOBAL_NOTIFICATION_TIMEOUT as GLOBAL_TOAST_TIMEOUT, useNotifications } from "../index.browser.js"
+import { Attention, GLOBAL_NOTIFICATION_TIMEOUT as GLOBAL_TOAST_TIMEOUT, Notification, useNotifications } from "../index.browser.js"
 
 /**
  * Toasts should be considered when displaying these types of information to the user:
@@ -21,24 +36,26 @@ import { Attention, GLOBAL_NOTIFICATION_TIMEOUT as GLOBAL_TOAST_TIMEOUT, useNoti
 export function ToastBanner(): VNode {
   const notifs = useNotifications()
   if (notifs.length === 0) return <Fragment />
-  return <Fragment> {
-    notifs.map(n => {
-      switch (n.message.type) {
-        case "error":
-          return <Attention type="danger" title={n.message.title} onClose={() => {
-            n.remove()
-          }} timeout={GLOBAL_TOAST_TIMEOUT}>
-            {n.message.description &&
-              <div class="mt-2 text-sm text-red-700">
-                {n.message.description}
-              </div>
-            }
-          </Attention>
-        case "info":
-          return <Attention type="success" title={n.message.title} onClose={() => {
-            n.remove();
-          }} timeout={GLOBAL_TOAST_TIMEOUT} />
-      }
-    })}
-  </Fragment>
+  const show = notifs.filter(e => !e.message.ack && !e.message.timeout)
+  if (show.length === 0) return <Fragment />
+  return <AttentionByType msg={show[0]} />
+}
+
+function AttentionByType({ msg }: { msg: Notification }) {
+  switch (msg.message.type) {
+    case "error":
+      return <Attention type="danger" title={msg.message.title} onClose={() => {
+        msg.acknowledge()
+      }} timeout={GLOBAL_TOAST_TIMEOUT}>
+        {msg.message.description &&
+          <div class="mt-2 text-sm text-red-700">
+            {msg.message.description}
+          </div>
+        }
+      </Attention>
+    case "info":
+      return <Attention type="success" title={msg.message.title} onClose={() => {
+        msg.acknowledge();
+      }} timeout={GLOBAL_TOAST_TIMEOUT} />
+  }
 }