fix #7741

show QR with nonce

1 files changed, 26 insertions, 10 deletions

diff --git a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx b/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx
index d85a2c78e..8cb1c49dd 100644
--- a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx
+++ b/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx
@@ -21,6 +21,8 @@ import {
   PreparePayResult,
   PreparePayResultType,
   TranslatedString,
+  parsePayUri,
+  stringifyPayUri,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -32,6 +34,8 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import { assertUnreachable } from "../utils/index.js";
+import { useBackendContext } from "../context/backend.js";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 
 interface Props {
   payStatus: PreparePayResult;
@@ -50,8 +54,6 @@ export function PaymentButtons({
 }: Props): VNode {
   const { i18n } = useTranslationContext();
   if (payStatus.status === PreparePayResultType.PaymentPossible) {
-    const privateUri = `${uri}&n=${payStatus.noncePriv}`;
-
     return (
       <Fragment>
         <section>
@@ -66,7 +68,7 @@ export function PaymentButtons({
             </i18n.Translate>
           </Button>
         </section>
-        <PayWithMobile uri={privateUri} />
+        <PayWithMobile uri={uri} />
       </Fragment>
     );
   }
@@ -125,7 +127,6 @@ export function PaymentButtons({
       default:
         assertUnreachable(reason);
     }
-    const uriPrivate = `${uri}&n=${payStatus.noncePriv}`;
 
     return (
       <Fragment>
@@ -141,7 +142,7 @@ export function PaymentButtons({
             <i18n.Translate>Get digital cash</i18n.Translate>
           </Button>
         </section>
-        <PayWithMobile uri={uriPrivate} />
+        <PayWithMobile uri={uri} />
       </Fragment>
     );
   }
@@ -159,7 +160,6 @@ export function PaymentButtons({
             />
           )}
         </section>
-        {!payStatus.paid && <PayWithMobile uri={uri} />}
       </Fragment>
     );
   }
@@ -169,20 +169,36 @@ export function PaymentButtons({
 
 function PayWithMobile({ uri }: { uri: string }): VNode {
   const { i18n } = useTranslationContext();
+  const api = useBackendContext();
 
-  const [showQR, setShowQR] = useState<boolean>(false);
+  const payUri = parsePayUri(uri);
 
+  const [showQR, setShowQR] = useState<string | undefined>(undefined);
+  async function sharePrivatePaymentURI() {
+    if (!payUri) {
+      return;
+    }
+    if (!showQR) {
+      const result = await api.wallet.call(WalletApiOperation.SharePayment, {
+        merchantBaseUrl: payUri.merchantBaseUrl,
+        orderId: payUri.orderId,
+      });
+      setShowQR(result.privatePayUri);
+    } else {
+      setShowQR(undefined);
+    }
+  }
   return (
     <section>
-      <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
+      <LinkSuccess upperCased onClick={sharePrivatePaymentURI}>
         {!showQR ? i18n.str`Pay with a mobile phone` : i18n.str`Hide QR`}
       </LinkSuccess>
       {showQR && (
         <div>
-          <QR text={uri} />
+          <QR text={showQR} />
           <i18n.Translate>
             Scan the QR code or &nbsp;
-            <a href={uri}>
+            <a href={showQR}>
               <i18n.Translate>click here</i18n.Translate>
             </a>
           </i18n.Translate>