taler-typescript-core

commit 7cc114b7129d5fae3cb4441b2b8664decce82210
parent f75addda44591fa8c3ce53e41aea9d5301413009
Author: Sebastian <sebasjm@taler-systems.com>
Date:   Wed, 18 Mar 2026 16:19:57 -0300

fix #11176

Diffstat:
A
packages/merchant-backoffice-ui/src/assets/ch-flag.svg
 | 
5
+++++
M
packages/merchant-backoffice-ui/src/components/exception/QR.tsx
 | 
29
+++++++++++++++++++++++++----
M
packages/merchant-backoffice-ui/src/components/modal/index.tsx
 | 
19
+++++++++++++++++--

3 files changed, 47 insertions(+), 6 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/assets/ch-flag.svg b/packages/merchant-backoffice-ui/src/assets/ch-flag.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg width="512" height="512" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="m0 0h32v32h-32z" fill="#00"/>
+<path d="m13 6h6v7h7v6h-7v7h-6v-7h-7v-6h7z" fill="#fff"/>
+</svg>
diff --git a/packages/merchant-backoffice-ui/src/components/exception/QR.tsx b/packages/merchant-backoffice-ui/src/components/exception/QR.tsx
@@ -19,6 +19,7 @@ import { h, VNode } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 import qrcode from "qrcode-generator";
 import logo from "../../assets/logo-2021.svg";
+import chFlag from "../../assets/ch-flag.svg";
 
 export function QR({
   children,
@@ -81,7 +82,10 @@ export function QR({
 export function QR_Taler({ uri }: { uri: TalerUri }): VNode {
   const stringUri = TalerUris.toString(uri);
   return (
-    <QR style={{ width: "90%", maxWidth: 400, margin:"auto"  }} text={stringUri}>
+    <QR
+      style={{ width: "90%", maxWidth: 400, margin: "auto" }}
+      text={stringUri}
+    >
       <img src={logo} style={{ width: 100, height: 50 }} />
     </QR>
   );
@@ -89,15 +93,32 @@ export function QR_Taler({ uri }: { uri: TalerUri }): VNode {
 
 export function QR_TOTP({ otpAuthURI }: { otpAuthURI: string }): VNode {
   return (
-    <QR style={{ width: "90%", maxWidth: 400, margin:"auto"  }} text={otpAuthURI}>
+    <QR
+      style={{ width: "90%", maxWidth: 400, margin: "auto" }}
+      text={otpAuthURI}
+    >
       <div style={{ fontWeight: "bold" }}>T-OTP</div>
     </QR>
   );
 }
 
-export function QR_Bank({ text, label }: { text: string, label: TranslatedString }): VNode {
+export function QR_SwissBank({ text }: { text: string }): VNode {
   return (
-    <QR style={{ width: "90%", maxWidth: 400, margin:"auto" }} text={text}>
+    <QR style={{ width: "90%", maxWidth: 400, margin: "auto" }} text={text}>
+      <img src={chFlag} style={{ width: 50, height: 50 }} />
+    </QR>
+  );
+}
+
+export function QR_Bank({
+  text,
+  label,
+}: {
+  text: string;
+  label: TranslatedString;
+}): VNode {
+  return (
+    <QR style={{ width: "90%", maxWidth: 400, margin: "auto" }} text={text}>
       <div style={{ fontWeight: "bold" }}>{label}</div>
     </QR>
   );
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -37,7 +37,7 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
 import { Spinner } from "../exception/loading.js";
-import { QR, QR_Bank } from "../exception/QR.js";
+import { QR, QR_Bank, QR_SwissBank } from "../exception/QR.js";
 import { doAutoFocus } from "../form/Input.js";
 import { useSessionContext } from "../../context/session.js";
 
@@ -482,7 +482,22 @@ export function ValidBankAccount({
                         }}
                       >
                         <Accordion name={q.type} openedByDefault>
-                          <QR_Bank text={q.qrContent} label={i18n.str`Banking app`} />
+                          {(function () {
+                            switch (q.type) {
+                              case "epc-qr":
+                                return (
+                                  <QR_Bank
+                                    text={q.qrContent}
+                                    label={i18n.str`Banking app`}
+                                  />
+                                );
+                              case "spc":
+                                return <QR_SwissBank text={q.qrContent} />;
+
+                              default:
+                                assertUnreachable(q.type);
+                            }
+                          })()}
                         </Accordion>
                       </td>
                     </tr>