commit e9d4e40e1918014d686ffc74e1ad817d44b30661
parent 5885cc498cf4effb4774305383e24eddb2910019
Author: Sebastian <sebasjm@taler-systems.com>
Date: Wed, 11 Mar 2026 14:37:50 -0300
fix #11237
Diffstat:
5 files changed, 38 insertions(+), 40 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/exception/QR.tsx b/packages/merchant-backoffice-ui/src/components/exception/QR.tsx
@@ -18,7 +18,10 @@ import { h, VNode } from "preact";
import { useEffect, useRef } from "preact/hooks";
import qrcode from "qrcode-generator";
-export function QR({ text }: { text: string }): VNode {
+export function QR({
+ text,
+ ...rest
+}: { text: string } & h.JSX.HTMLAttributes<HTMLDivElement>): VNode {
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const qr = qrcode(0, "L");
@@ -42,19 +45,5 @@ export function QR({ text }: { text: string }): VNode {
}
});
- return (
- <div
- style={{
- width: "100%",
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- }}
- >
- <div
- style={{ width: "50%", minWidth: 200, maxWidth: 300 }}
- ref={divRef}
- />
- </div>
- );
+ return <div {...rest} ref={divRef} />;
}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -58,6 +58,7 @@ import { RefundModal } from "../list/Table.js";
import { Event, Timeline } from "./Timeline.js";
import { ConfirmModal } from "../../../../components/modal/index.js";
import { Tooltip } from "../../../../components/Tooltip.js";
+import { QR } from "../../../../components/exception/QR.js";
const TALER_SCREEN_ID = 44;
@@ -1000,7 +1001,7 @@ function UnpaidPage({
>
<p>
<b>
- <i18n.Translate>Pay at</i18n.Translate>:
+ <i18n.Translate>Payment link</i18n.Translate>:
</b>{" "}
<a
href={order.order_status_url}
@@ -1010,7 +1011,7 @@ function UnpaidPage({
{order.order_status_url}
</a>
</p>
- <p>
+ {/* <p>
<b>
<i18n.Translate>Created at</i18n.Translate>:
</b>{" "}
@@ -1020,7 +1021,7 @@ function UnpaidPage({
new Date(order.creation_time.t_s * 1000),
datetimeFormatForPreferences(preferences),
)}
- </p>
+ </p> */}
</div>
</div>
</div>
@@ -1028,6 +1029,14 @@ function UnpaidPage({
</div>
</section>
+ <section>
+ <div
+ style={{ width: "100%", display: "flex", justifyContent: "center" }}
+ >
+ <QR style={{width:"90%", maxWidth:400}} text={value.taler_pay_uri!} />
+ </div>
+ </section>
+
<section class="section is-main-section">
<div class="columns">
<div class="column" />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
@@ -61,10 +61,6 @@ export function CreatePage({ onCreated, onBack }: Props): VNode {
const { i18n } = useTranslationContext();
const [state, setState] = useState<Partial<Entity>>({
- otp_key: "E5V6OSMTZRL2ARYKNDJ4SUDGYOCLQUOT",
- otp_ctr: 1,
- otp_device_id: "1",
- otp_device_description: "asd",
otp_algorithm: 0,
});
const [notification, safeFunctionHandler] = useLocalNotificationBetter();
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
@@ -30,21 +30,24 @@ interface Props {
onConfirm: () => void;
}
-export function CreatedSuccessfully({
- entity,
- onConfirm,
-}: Props): VNode {
+export function CreatedSuccessfully({ entity, onConfirm }: Props): VNode {
const { i18n } = useTranslationContext();
const { state } = useSessionContext();
const issuer = state.backendUrl.href;
const qrText = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key}`;
- const qrTextSafe = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(0, 6)}...`;
+ const qrTextSafe = `otpauth://totp/${state.instance}/${
+ entity.otp_device_id
+ }?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(
+ 0,
+ 6,
+ )}...`;
return (
<Template onConfirm={onConfirm} focus>
<p class="is-size-5">
<i18n.Translate>
- You can scan the next QR code with your device or save the key before continuing.
+ You can scan the next QR code with your device or save the key before
+ continuing.
</i18n.Translate>
</p>
<div class="field is-horizontal">
@@ -54,18 +57,16 @@ export function CreatedSuccessfully({
<div class="field-body is-flex-grow-3">
<div class="field">
<p class="control">
- <input
- readonly
- class="input"
- value={entity.otp_device_id}
- />
+ <input readonly class="input" value={entity.otp_device_id} />
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
- <label class="label"><i18n.Translate>Description</i18n.Translate></label>
+ <label class="label">
+ <i18n.Translate>Description</i18n.Translate>
+ </label>
</div>
<div class="field-body is-flex-grow-3">
<div class="field">
@@ -79,9 +80,9 @@ export function CreatedSuccessfully({
</div>
</div>
</div>
- <QR
- text={qrText}
- />
+ <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
+ <QR style={{ width: "90%", maxWidth: 400 }} text={qrText} />
+ </div>
<div
style={{
color: "grey",
@@ -97,4 +98,3 @@ export function CreatedSuccessfully({
</Template>
);
}
-
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx
@@ -57,7 +57,11 @@ export function QrPage({ id: templateId, onBack }: Props): VNode {
return (
<div>
<section id="printThis" ref={printThis}>
- <QR text={payTemplateUri} />
+ <div
+ style={{ width: "100%", display: "flex", justifyContent: "center" }}
+ >
+ <QR style={{width:"90%", maxWidth:400}} text={payTemplateUri} />
+ </div>
<pre style={{ textAlign: "center" }}>
<a target="_blank" rel="noreferrer" href={payTemplateUri}>
{payTemplateUri}
