issue #5860

6 files changed, 186 insertions, 136 deletions

diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index 028a5c660..4023e4ebd 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -22,6 +22,7 @@
     "history": "4.10.1",
     "preact": "^10.5.13",
     "preact-router": "^3.2.1",
+    "qrcode-generator": "^1.4.4",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
diff --git a/packages/taler-wallet-webextension/src/components/QR.tsx b/packages/taler-wallet-webextension/src/components/QR.tsx
new file mode 100644
index 000000000..8e3f69295
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/QR.tsx
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+ import { h, VNode } from "preact";
+ import { useEffect, useRef } from "preact/hooks";
+ import qrcode from "qrcode-generator";
+ 
+ export function QR({ text }: { text: string; }):VNode {
+   const divRef = useRef<HTMLDivElement>(null);
+   useEffect(() => {
+     if (!divRef.current) return
+     const qr = qrcode(0, 'L');
+     qr.addData(text);
+     qr.make();
+     divRef.current.innerHTML = qr.createSvgTag({
+       scalable: true,
+     });
+   });
+ 
+   return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+     <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
+   </div>;
+ }
+ 
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index f7945569e..a46f38ee9 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -29,10 +29,11 @@ export const PaymentStatus = styled.div<{ color: string }>`
 
 export const WalletAction = styled.section`
   display: flex;
+  text-align: center;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  max-width: 50%;
+  /* max-width: 50%; */
 
   margin: auto;
   height: 100%;
@@ -42,6 +43,10 @@ export const WalletAction = styled.section`
   }
   section {
     margin-bottom: 2em;
+    & button {
+      margin-right: 8px;
+      margin-left: 8px;
+    }
   }
 `
 export const WalletActionOld = styled.section`
@@ -628,6 +633,7 @@ export const TermsOfService = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
+  max-width: 500px;
 
   & > header {
     text-align: center;
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
index 38e3d0f35..9a997687f 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
@@ -33,6 +33,7 @@ export default {
 export const InsufficientBalance = createExample(TestedComponent, {
   payStatus: {
     status: PreparePayResultType.InsufficientBalance,
+    noncePriv: '',
     proposalId: "proposal1234",
     contractTerms: {
       merchant: {
@@ -45,15 +46,19 @@ export const InsufficientBalance = createExample(TestedComponent, {
 });
 
 export const PaymentPossible = createExample(TestedComponent, {
+  uri: 'taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0',
   payStatus: {
     status: PreparePayResultType.PaymentPossible,
     amountEffective: 'USD:10',
     amountRaw: 'USD:10',
+    noncePriv: '',
     contractTerms: {
+      nonce: '123213123',
       merchant: {
         name: 'someone'
       },
       amount: 'USD:10',
+      summary: 'some beers',
     } as Partial<ContractTerms> as any,
     contractTermsHash: '123456',
     proposalId: 'proposal1234'
@@ -65,6 +70,7 @@ export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: 'USD:10',
     amountRaw: 'USD:10',
+    noncePriv: '',
     contractTerms: {
       merchant: {
         name: 'someone'
@@ -82,6 +88,7 @@ export const AlreadyConfirmedWithoutFullfilment = createExample(TestedComponent,
   payStatus: {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: 'USD:10',
+    noncePriv: '',
     amountRaw: 'USD:10',
     contractTerms: {
       merchant: {
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 758bc4b54..e85cd60a1 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -29,7 +29,7 @@ import * as wxApi from "../wxApi";
 
 import { useState, useEffect } from "preact/hooks";
 
-import { ConfirmPayResultDone, getJsonI18n, i18n } from "@gnu-taler/taler-util";
+import { AmountLike, ConfirmPayResultDone, getJsonI18n, i18n } from "@gnu-taler/taler-util";
 import {
   PreparePayResult,
   ConfirmPayResult,
@@ -39,7 +39,11 @@ import {
   ContractTerms,
   ConfirmPayResultType,
 } from "@gnu-taler/taler-util";
-import { JSX, VNode, h } from "preact";
+import { JSX, VNode, h, Fragment } from "preact";
+import { ButtonSuccess, LinkSuccess, WalletAction } from "../components/styled";
+import { LogoHeader } from "../components/LogoHeader";
+import { Part } from "../components/Part";
+import { QR } from "../components/QR";
 
 interface Props {
   talerPayUri?: string
@@ -143,17 +147,17 @@ export function PayPage({ talerPayUri }: Props): JSX.Element {
 
   }
 
-  return <PaymentRequestView payStatus={payStatus} onClick={onClick} payErrMsg={payErrMsg} />;
+  return <PaymentRequestView uri={talerPayUri} payStatus={payStatus} onClick={onClick} payErrMsg={payErrMsg} />;
 }
 
 export interface PaymentRequestViewProps {
   payStatus: PreparePayResult;
   onClick: () => void;
   payErrMsg?: string;
-
+  uri: string;
 }
-export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentRequestViewProps) {
-  let totalFees: AmountJson | undefined = undefined;
+export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: PaymentRequestViewProps) {
+  let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   let insufficientBalance = false;
   const [loading, setLoading] = useState(false);
   const contractTerms: ContractTerms = payStatus.contractTerms;
@@ -174,6 +178,7 @@ export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentReq
 
   if (payStatus.status == PreparePayResultType.InsufficientBalance) {
     insufficientBalance = true;
+    return <div>no te alcanza</div>
   }
 
   if (payStatus.status === PreparePayResultType.PaymentPossible) {
@@ -191,65 +196,62 @@ export function PaymentRequestView({ payStatus, onClick, payErrMsg }: PaymentReq
     merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>;
   }
 
-  const amount = (
-    <strong>{renderAmount(Amounts.parseOrThrow(contractTerms.amount))}</strong>
-  );
-
-  return <section class="main">
-    <h1>GNU Taler Wallet</h1>
-    <article class="fade">
-      <div>
-        <p>
-          <i18n.Translate>
-            The merchant <span>{merchantName}</span> offers you to purchase:
-      </i18n.Translate>
-          <div style={{ textAlign: "center" }}>
-            <strong>{contractTerms.summary}</strong>
-          </div>
-          {totalFees ? (
-            <i18n.Translate>
-              The total price is <span>{amount} </span>
-        (plus <span>{renderAmount(totalFees)}</span> fees).
-            </i18n.Translate>
-          ) : (
-              <i18n.Translate>
-                The total price is <span>{amount}</span>.
-              </i18n.Translate>
-            )}
-        </p>
-
-        {insufficientBalance ? (
-          <div>
-            <p style={{ color: "red", fontWeight: "bold" }}>
-              Unable to pay: Your balance is insufficient.
-            </p>
-          </div>
-        ) : null}
-
-        {payErrMsg ? (
-          <div>
-            <p>Payment failed: {payErrMsg}</p>
-            <button
-              class="pure-button button-success"
-              onClick={onClick}
-            >
-              {i18n.str`Retry`}
-            </button>
-          </div>
-        ) : (
-            <div>
-              <ProgressButton
-                isLoading={loading}
-                disabled={insufficientBalance}
-                onClick={onClick}
-              >
-                {i18n.str`Confirm payment`}
-              </ProgressButton>
-            </div>
-          )}
-      </div>
-    </article>
-  </section>
-
+  const [showQR, setShowQR] = useState<boolean>(false)
+  const privateUri = `${uri}&n=${payStatus.noncePriv}`
+  return <WalletAction>
+    <LogoHeader />
+    <h2>
+      {i18n.str`Digital cash payment`}
+    </h2>
+    <section>
+      <Part big title="Total paid" text={amountToString(payStatus.amountEffective)} kind='negative' />
+      <Part big title="Purchase amount" text={amountToString(payStatus.amountRaw)} kind='neutral' />
+      {Amounts.isNonZero(totalFees) && <Part big title="Fee" text={amountToString(totalFees)} kind='negative' />}
+      <Part title="Merchant" text={contractTerms.merchant.name} kind='neutral' />
+      <Part title="Purchase" text={contractTerms.summary} kind='neutral' />
+      {contractTerms.order_id && <Part title="Receipt" text={`#${contractTerms.order_id}`} kind='neutral' />}
+    </section>
+    {showQR && <section>
+      <QR text={privateUri} />
+      <a href={privateUri}>or click here to pay with a installed wallet</a>
+    </section>}
+    <section>
+      {payErrMsg ? (
+        <div>
+          <p>Payment failed: {payErrMsg}</p>
+          <button
+            class="pure-button button-success"
+            onClick={onClick}
+          >
+            {i18n.str`Retry`}
+          </button>
+        </div>
+      ) : (
+        <Fragment>
+
+          <LinkSuccess
+            upperCased
+            // disabled={!details.exchangeInfo.baseUrl}
+            onClick={() => setShowQR(qr => !qr)}
+          >
+            {!showQR ? i18n.str`Complete with mobile wallet` : i18n.str`Hide QR`}
+          </LinkSuccess>
+          <ButtonSuccess
+            upperCased
+          // disabled={!details.exchangeInfo.baseUrl}
+          // onClick={() => onReview(true)}
+          >
+            {i18n.str`Confirm payment`}
+          </ButtonSuccess>
+        </Fragment>
+      )}
+
+    </section>
+  </WalletAction>
+}
 
-}
\ No newline at end of file
+function amountToString(text: AmountLike) {
+  const aj = Amounts.jsonifyAmount(text)
+  const amount = Amounts.stringifyValue(aj)
+  return `${amount} ${aj.currency}`
+}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index ac25bcd15..304313a9e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -80,20 +80,18 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview,
   const needsReview = terms.status === 'changed' || terms.status === 'new'
 
   return (
-    <WalletAction style={{ textAlign: 'center' }}>
+    <WalletAction>
       <LogoHeader />
       <h2>
         {i18n.str`Digital cash withdrawal`}
       </h2>
       <section>
-        <div>
-          <Part title="Total to withdraw" text={amountToString(Amounts.sub(Amounts.parseOrThrow(amount), details.withdrawFee).amount)} kind='positive' />
-          <Part title="Chosen amount" text={amountToString(amount)} kind='neutral' />
-          {Amounts.isNonZero(details.withdrawFee) &&
-            <Part title="Exchange fee" text={amountToString(details.withdrawFee)} kind='negative' />
-          }
-          <Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big />
-        </div>
+        <Part title="Total to withdraw" text={amountToString(Amounts.sub(Amounts.parseOrThrow(amount), details.withdrawFee).amount)} kind='positive' />
+        <Part title="Chosen amount" text={amountToString(amount)} kind='neutral' />
+        {Amounts.isNonZero(details.withdrawFee) &&
+          <Part title="Exchange fee" text={amountToString(details.withdrawFee)} kind='negative' />
+        }
+        <Part title="Exchange" text={details.exchangeInfo.baseUrl} kind='neutral' big />
       </section>
       {!reviewing &&
         <section>
@@ -132,63 +130,50 @@ export function View({ details, amount, onWithdraw, terms, reviewing, onReview,
       }
       {(reviewing || accepted) &&
         <section>
-          <div>
-            <CheckboxOutlined
-              name="terms"
-              enabled={accepted}
-              label={i18n.str`I accept the exchange terms of service`}
-              onToggle={() => {
-                onAccept(!accepted)
-                onReview(false)
-              }}
-            />
-          </div>
+          <CheckboxOutlined
+            name="terms"
+            enabled={accepted}
+            label={i18n.str`I accept the exchange terms of service`}
+            onToggle={() => {
+              onAccept(!accepted)
+              onReview(false)
+            }}
+          />
         </section>
       }
 
       <section>
         {terms.status === 'new' && !accepted &&
-          <div>
-            <ButtonSuccess
-              upperCased
-              disabled={!details.exchangeInfo.baseUrl}
-              onClick={() => onReview(true)}
-            >
-              {i18n.str`Review exchange terms of service`}
-            </ButtonSuccess>
-          </div>
+          <ButtonSuccess
+            upperCased
+            disabled={!details.exchangeInfo.baseUrl}
+            onClick={() => onReview(true)}
+          >
+            {i18n.str`Review exchange terms of service`}
+          </ButtonSuccess>
         }
         {terms.status === 'changed' && !accepted &&
-          <div>
-            <ButtonWarning
-              upperCased
-              disabled={!details.exchangeInfo.baseUrl}
-              onClick={() => onReview(true)}
-            >
-              {i18n.str`Review new version of terms of service`}
-            </ButtonWarning>
-          </div>
+          <ButtonWarning
+            upperCased
+            disabled={!details.exchangeInfo.baseUrl}
+            onClick={() => onReview(true)}
+          >
+            {i18n.str`Review new version of terms of service`}
+          </ButtonWarning>
         }
         {(terms.status === 'accepted' || (needsReview && accepted)) &&
-          <div>
-            <ButtonSuccess
-              upperCased
-              disabled={!details.exchangeInfo.baseUrl || confirmed}
-              onClick={onWithdraw}
-            >
-              {i18n.str`Confirm withdrawal`}
-            </ButtonSuccess>
-          </div>
+          <ButtonSuccess
+            upperCased
+            disabled={!details.exchangeInfo.baseUrl || confirmed}
+            onClick={onWithdraw}
+          >
+            {i18n.str`Confirm withdrawal`}
+          </ButtonSuccess>
         }
         {terms.status === 'notfound' &&
-          <div>
-            <ButtonDestructive
-              upperCased
-              disabled={true}
-            >
-              {i18n.str`Exchange doesn't have terms of service`}
-            </ButtonDestructive>
-          </div>
+          <ButtonDestructive upperCased disabled>
+            {i18n.str`Exchange doesn't have terms of service`}
+          </ButtonDestructive>
         }
       </section>
     </WalletAction>
@@ -231,12 +216,16 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
   useEffect(() => {
     async function fetchData() {
       if (!uriInfo || !uriInfo.defaultExchangeBaseUrl) return
-      const res = await getExchangeWithdrawalInfo({
-        exchangeBaseUrl: uriInfo.defaultExchangeBaseUrl,
-        amount: Amounts.parseOrThrow(uriInfo.amount),
-        tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf']
-      })
-      setDetails(res)
+      try {
+        const res = await getExchangeWithdrawalInfo({
+          exchangeBaseUrl: uriInfo.defaultExchangeBaseUrl,
+          amount: Amounts.parseOrThrow(uriInfo.amount),
+          tosAcceptedFormat: ['text/json', 'text/xml', 'text/pdf']
+        })
+        setDetails(res)
+      } catch (e) {
+        setError(true)
+      }
     }
     fetchData()
   }, [uriInfo])
@@ -249,8 +238,12 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
     if (!details) {
       throw Error("can't accept, no exchange selected");
     }
-    await setExchangeTosAccepted(details.exchangeDetails.exchangeBaseUrl, details.tosRequested?.tosEtag)
-    setAccepted(true)
+    try {
+      await setExchangeTosAccepted(details.exchangeDetails.exchangeBaseUrl, details.tosRequested?.tosEtag)
+      setAccepted(true)
+    } catch (e) {
+      setError(true)
+    }
   }
 
   const onWithdraw = async (): Promise<void> => {
@@ -259,10 +252,14 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
     }
     setConfirmed(true)
     console.log("accepting exchange", details.exchangeInfo.baseUrl);
-    const res = await acceptWithdrawal(talerWithdrawUri, details.exchangeInfo.baseUrl);
-    console.log("accept withdrawal response", res);
-    if (res.confirmTransferUrl) {
-      document.location.href = res.confirmTransferUrl;
+    try {
+      const res = await acceptWithdrawal(talerWithdrawUri, details.exchangeInfo.baseUrl);
+      console.log("accept withdrawal response", res);
+      if (res.confirmTransferUrl) {
+        document.location.href = res.confirmTransferUrl;
+      }
+    } catch (e) {
+      setConfirmed(false)
     }
   };
 
@@ -288,7 +285,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element
       } catch (e) {
         console.log(e)
         debugger;
-       }
+      }
     }
   }