commit 8eb5f2d923e3ebb95f6965fdb3cac715a400d0a2
parent 21aec98f38943f794ca38139d925b772251e659b
Author: Sebastian <sebasjm@taler-systems.com>
Date: Fri, 28 Nov 2025 10:47:41 -0300
fix #9766
Diffstat:
2 files changed, 92 insertions(+), 23 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -20,9 +20,10 @@
*/
import {
+ getQrCodesForPayto,
Paytos,
PaytoType,
- TranslatedString
+ TranslatedString,
} from "@gnu-taler/taler-util";
import {
ButtonBetterBulma,
@@ -34,6 +35,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
import { doAutoFocus } from "../../../../web-util/src/components/utils.js";
import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
import { Spinner } from "../exception/loading.js";
+import { QR } from "../exception/QR.js";
const TALER_SCREEN_ID = 18;
@@ -428,6 +430,7 @@ export function ValidBankAccount({
? `${origin.address.substring(0, 8)}...`
: origin.displayName;
+ const qrs = getQrCodesForPayto(Paytos.toFullString(payto));
return (
<ConfirmModal
label={i18n.str`OK`}
@@ -492,19 +495,9 @@ export function ValidBankAccount({
</i18n.Translate>
</td>
</tr>
- {/* <Row
- name={i18n.str`Amount`}
- value={
- <Amount
- value={payto.params["amount"] as AmountString}
- hideCurrency
- />
- }
- /> */}
<tr>
<td colSpan={3}>
- {/* <WarningBox style={{ margin: 0 }}> */}
- <b >
+ <b>
<i18n.Translate>
Make sure ALL data is correct, especially the subject, and
that you are choosing the bank account from which you
@@ -513,7 +506,37 @@ export function ValidBankAccount({
the "payto://" URI below to copy just one value.
</i18n.Translate>
</b>
- {/* </WarningBox> */}
+ </td>
+ </tr>
+ <tr>
+ <td colSpan={3}>
+ {!qrs.length ? undefined : (
+ <div style={{ overflowY: "auto", height: "95%", padding: 5 }}>
+ <p>
+ <i18n.Translate>If your bank application allows you make a wire transfer using standard QR codes then try scanning the following:</i18n.Translate>
+ </p>
+ <table style={{ width: "100%" }}>
+ {qrs.map((q, idx) => {
+ return (
+ <tr key={idx}>
+ <td
+ style={{
+ padding: 5,
+ borderSpacing: 0,
+ borderRadius: 4,
+ border: "1px solid black",
+ }}
+ >
+ <Accordion name={q.type} >
+ <QR text={q.qrContent} />
+ </Accordion>
+ </td>
+ </tr>
+ );
+ })}
+ </table>
+ </div>
+ )}
</td>
</tr>
<tr>
@@ -543,6 +566,52 @@ export function ValidBankAccount({
);
}
+function Accordion({
+ openedByDefault,
+ children,
+ name,
+}: {
+ name: string;
+ children: ComponentChildren;
+ openedByDefault?: boolean;
+}) {
+ const [opened, setOpened] = useState(!!openedByDefault);
+ return (
+ <div>
+ <button
+ style={{
+ color: "#444",
+ padding: 8,
+ fontSize: "large",
+ width: "100%",
+ cursor: "pointer",
+ textAlign: "left",
+ border: "none",
+ }}
+ class={opened ? "accordion active" : "accordion"}
+ onClick={() => {
+ setOpened(!opened);
+ }}
+ >
+ {name}
+ </button>
+ <div
+ onClick={() => {
+ setOpened(!opened);
+ }}
+ class="dpanel"
+ style={{
+ display: opened ? "block" : "none",
+ padding: "0 18px",
+ cursor: "pointer",
+ }}
+ >
+ {children}
+ </div>
+ </div>
+ );
+}
+
export function Row({
name,
value,
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -65,10 +65,10 @@ describe("DepositPage states", () => {
{
flags: [],
available: `${currency}:0` as AmountString,
-
+
pendingIncoming: `${currency}:0` as AmountString,
pendingOutgoing: `${currency}:0` as AmountString,
-
+
scopeInfo: defaultScope,
},
],
@@ -112,10 +112,10 @@ describe("DepositPage states", () => {
{
flags: [],
available: `${currency}:1` as AmountString,
-
+
pendingIncoming: `${currency}:0` as AmountString,
pendingOutgoing: `${currency}:0` as AmountString,
-
+
scopeInfo: defaultScope,
},
],
@@ -174,10 +174,10 @@ describe("DepositPage states", () => {
{
flags: [],
available: `${currency}:1` as AmountString,
-
+
pendingIncoming: `${currency}:0` as AmountString,
pendingOutgoing: `${currency}:0` as AmountString,
-
+
scopeInfo: defaultScope,
},
],
@@ -234,10 +234,10 @@ describe("DepositPage states", () => {
{
flags: [],
available: `${currency}:5` as AmountString,
-
+
pendingIncoming: `${currency}:0` as AmountString,
pendingOutgoing: `${currency}:0` as AmountString,
-
+
scopeInfo: defaultScope,
},
],
@@ -324,10 +324,10 @@ describe("DepositPage states", () => {
{
flags: [],
available: `${currency}:10` as AmountString,
-
+
pendingIncoming: `${currency}:0` as AmountString,
pendingOutgoing: `${currency}:0` as AmountString,
-
+
scopeInfo: defaultScope,
},
],
