fix #7741

show QR with nonce

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>

packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts

@@ -102,7 +102,6 @@ export function useComponentState({
     contractTermsHash: "asd",
     amountRaw: hook.response.p2p.amount,
     amountEffective: hook.response.p2p.amount,
-    noncePriv: "",
   } as PreparePayResult;
 
   const insufficientBalance: PreparePayResult = {

packages/taler-wallet-webextension/src/cta/Payment/stories.tsx

@@ -61,7 +61,7 @@ export const NoEnoughBalanceAvailable = tests.createExample(BaseView, {
       feeGapEstimate: "USD:1",
     },
     talerUri: "taler://pay/..",
-    noncePriv: "",
+
     proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
     contractTerms: {
       merchant: {
@@ -101,7 +101,7 @@ export const NoEnoughBalanceMaterial = tests.createExample(BaseView, {
       feeGapEstimate: "USD:1",
     },
     talerUri: "taler://pay/..",
-    noncePriv: "",
+
     proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
     contractTerms: {
       merchant: {
@@ -141,7 +141,7 @@ export const NoEnoughBalanceAgeAcceptable = tests.createExample(BaseView, {
       feeGapEstimate: "USD:1",
     },
     talerUri: "taler://pay/..",
-    noncePriv: "",
+
     proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
     contractTerms: {
       merchant: {
@@ -182,7 +182,7 @@ export const NoEnoughBalanceMerchantAcceptable = tests.createExample(BaseView, {
       feeGapEstimate: "USD:1",
     },
     talerUri: "taler://pay/..",
-    noncePriv: "",
+
     proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
     contractTerms: {
       merchant: {
@@ -224,7 +224,7 @@ export const NoEnoughBalanceMerchantDepositable = tests.createExample(
         feeGapEstimate: "USD:1",
       },
       talerUri: "taler://pay/..",
-      noncePriv: "",
+
       proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
       contractTerms: {
         merchant: {
@@ -265,7 +265,7 @@ export const NoEnoughBalanceFeeGap = tests.createExample(BaseView, {
       feeGapEstimate: "USD:1",
     },
     talerUri: "taler://pay/..",
-    noncePriv: "",
+
     proposalId: "96YY92RQZGF3V7TJSPN4SF9549QX7BRF88Q5PYFCSBNQ0YK4RPK0",
     contractTerms: {
       merchant: {
@@ -302,7 +302,7 @@ export const PaymentPossible = tests.createExample(BaseView, {
     talerUri: "taler://pay/..",
     amountEffective: "USD:10",
     amountRaw: "USD:10",
-    noncePriv: "",
+
     contractTerms: {
       nonce: "123213123",
       merchant: {
@@ -342,7 +342,7 @@ export const PaymentPossibleWithFee = tests.createExample(BaseView, {
     talerUri: "taler://pay/..",
     amountEffective: "USD:10.20",
     amountRaw: "USD:10",
-    noncePriv: "",
+
     contractTerms: {
       nonce: "123213123",
       merchant: {
@@ -379,7 +379,7 @@ export const TicketWithAProductList = tests.createExample(BaseView, {
     talerUri: "taler://pay/..",
     amountEffective: "USD:10.20",
     amountRaw: "USD:10",
-    noncePriv: "",
+
     contractTerms: {
       nonce: "123213123",
       merchant: {
@@ -435,7 +435,7 @@ export const TicketWithShipping = tests.createExample(BaseView, {
     talerUri: "taler://pay/..",
     amountEffective: "USD:10.20",
     amountRaw: "USD:10",
-    noncePriv: "",
+
     contractTerms: {
       nonce: "123213123",
       merchant: {

packages/taler-wallet-webextension/src/cta/Payment/views.tsx

@@ -47,7 +47,9 @@ export function BaseView(state: SupportedStates): VNode {
 
   const effective =
     "amountEffective" in state.payStatus
-      ? Amounts.parseOrThrow(state.payStatus.amountEffective)
+      ? state.payStatus.amountEffective
+        ? Amounts.parseOrThrow(state.payStatus.amountEffective)
+        : Amounts.zeroOfCurrency(state.amount.currency)
       : state.amount;
 
   return (