reserveCreated new design

8 files changed, 72 insertions, 121 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 1023013d2..d5861c47c 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -36,7 +36,7 @@ import {
   PreparePayResult,
   PreparePayResultType,
 } from "@gnu-taler/taler-util";
-import { h, Fragment, JSX, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { LogoHeader } from "../components/LogoHeader";
 import { Part } from "../components/Part";
@@ -100,7 +100,7 @@ const doPayment = async (
   return res;
 };
 
-export function PayPage({ talerPayUri }: Props): JSX.Element {
+export function PayPage({ talerPayUri }: Props): VNode {
   const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(
     undefined,
   );
@@ -159,7 +159,7 @@ export function PayPage({ talerPayUri }: Props): JSX.Element {
     return <span>Loading payment information ...</span>;
   }
 
-  const onClick = async () => {
+  const onClick = async (): Promise<void> => {
     try {
       const res = await doPayment(payStatus);
       setPayResult(res);
@@ -198,7 +198,7 @@ export function PaymentRequestView({
   onClick,
   payErrMsg,
   balance,
-}: PaymentRequestViewProps) {
+}: PaymentRequestViewProps): VNode {
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   const contractTerms: ContractTerms = payStatus.contractTerms;
 
@@ -225,7 +225,7 @@ export function PaymentRequestView({
     merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>;
   }
 
-  function Alternative() {
+  function Alternative(): VNode {
     const [showQR, setShowQR] = useState<boolean>(false);
     const privateUri =
       payStatus.status !== PreparePayResultType.AlreadyConfirmed
@@ -246,7 +246,7 @@ export function PaymentRequestView({
     );
   }
 
-  function ButtonsSection() {
+  function ButtonsSection(): VNode {
     if (payResult) {
       if (payResult.type === ConfirmPayResultType.Pending) {
         return (
@@ -257,7 +257,7 @@ export function PaymentRequestView({
           </section>
         );
       }
-      return null;
+      return <Fragment />;
     }
     if (payErrMsg) {
       return (
@@ -392,7 +392,7 @@ export function PaymentRequestView({
   );
 }
 
-function amountToString(text: AmountLike) {
+function amountToString(text: AmountLike): string {
   const aj = Amounts.jsonifyAmount(text);
   const amount = Amounts.stringifyValue(aj, 2);
   return `${amount} ${aj.currency}`;
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index aa11dca6a..cecd1ac00 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -20,12 +20,11 @@
  * @author Florian Dold
  */
 
-import * as wxApi from "../wxApi";
-import { AmountView } from "../renderHtml";
-import { ApplyRefundResponse, Amounts } from "@gnu-taler/taler-util";
+import { Amounts, ApplyRefundResponse } from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { JSX } from "preact/jsx-runtime";
-import { h } from "preact";
+import { AmountView } from "../renderHtml";
+import * as wxApi from "../wxApi";
 
 interface Props {
   talerRefundUri?: string;
@@ -33,7 +32,7 @@ interface Props {
 export interface ViewProps {
   applyResult: ApplyRefundResponse;
 }
-export function View({ applyResult }: ViewProps) {
+export function View({ applyResult }: ViewProps): VNode {
   return (
     <section class="main">
       <h1>GNU Taler Wallet</h1>
@@ -58,7 +57,7 @@ export function View({ applyResult }: ViewProps) {
     </section>
   );
 }
-export function RefundPage({ talerRefundUri }: Props): JSX.Element {
+export function RefundPage({ talerRefundUri }: Props): VNode {
   const [applyResult, setApplyResult] = useState<
     ApplyRefundResponse | undefined
   >(undefined);
@@ -71,9 +70,10 @@ export function RefundPage({ talerRefundUri }: Props): JSX.Element {
         const result = await wxApi.applyRefund(talerRefundUri);
         setApplyResult(result);
       } catch (e) {
-        console.error(e);
-        setErrMsg(e.message);
-        console.log("err message", e.message);
+        if (e instanceof Error) {
+          setErrMsg(e.message);
+          console.log("err message", e.message);
+        }
       }
     };
     doFetch();
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index 0a1c1238c..5a9ab720d 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -20,12 +20,11 @@
  * @author Florian Dold <dold@taler.net>
  */
 
-import { useEffect, useState } from "preact/hooks";
 import { PrepareTipResult } from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
 import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
-import { JSX } from "preact/jsx-runtime";
-import { h } from "preact";
 
 interface Props {
   talerTipUri?: string;
@@ -35,7 +34,11 @@ export interface ViewProps {
   onAccept: () => void;
   onIgnore: () => void;
 }
-export function View({ prepareTipResult, onAccept, onIgnore }: ViewProps) {
+export function View({
+  prepareTipResult,
+  onAccept,
+  onIgnore,
+}: ViewProps): VNode {
   return (
     <section class="main">
       <h1>GNU Taler Wallet</h1>
@@ -64,7 +67,7 @@ export function View({ prepareTipResult, onAccept, onIgnore }: ViewProps) {
   );
 }
 
-export function TipPage({ talerTipUri }: Props): JSX.Element {
+export function TipPage({ talerTipUri }: Props): VNode {
   const [updateCounter, setUpdateCounter] = useState<number>(0);
   const [prepareTipResult, setPrepareTipResult] = useState<
     PrepareTipResult | undefined
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
index 90df2a27e..54ae19c61 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
@@ -19,10 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { amountFractionalBase, Amounts } from "@gnu-taler/taler-util";
-import { ExchangeRecord } from "@gnu-taler/taler-wallet-core";
-import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core/src/operations/withdraw";
-import { getMaxListeners } from "process";
+import { amountFractionalBase } from "@gnu-taler/taler-util";
 import { createExample } from "../test-utils";
 import { View as TestedComponent } from "./Withdraw";
 
@@ -793,12 +790,6 @@ export const NewTerms = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -810,7 +801,9 @@ export const NewTerms = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
@@ -834,12 +827,6 @@ export const TermsReviewingPLAIN = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -851,7 +838,9 @@ export const TermsReviewingPLAIN = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "plain",
@@ -876,12 +865,6 @@ export const TermsReviewingHTML = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -893,7 +876,9 @@ export const TermsReviewingHTML = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "html",
@@ -935,12 +920,6 @@ export const TermsReviewingPDF = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -952,7 +931,9 @@ export const TermsReviewingPDF = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "pdf",
@@ -979,12 +960,6 @@ export const TermsReviewingXML = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -996,7 +971,9 @@ export const TermsReviewingXML = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
@@ -1021,12 +998,6 @@ export const NewTermsAccepted = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -1037,7 +1008,9 @@ export const NewTermsAccepted = createExample(TestedComponent, {
     value: 2,
     fraction: 10000000,
   },
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
@@ -1062,12 +1035,6 @@ export const TermsShowAgainXML = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -1079,7 +1046,9 @@ export const TermsShowAgainXML = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
@@ -1105,12 +1074,6 @@ export const TermsChanged = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -1122,7 +1085,9 @@ export const TermsChanged = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
@@ -1146,12 +1111,6 @@ export const TermsNotFound = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -1163,7 +1122,9 @@ export const TermsNotFound = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     status: "notfound",
   },
@@ -1183,12 +1144,6 @@ export const TermsAlreadyAccepted = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: amountFractionalBase * 0.5,
@@ -1200,7 +1155,9 @@ export const TermsAlreadyAccepted = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     status: "accepted",
   },
@@ -1220,12 +1177,6 @@ export const WithoutFee = createExample(TestedComponent, {
     },
   ],
   exchangeBaseUrl: "exchange.demo.taler.net",
-  details: {
-    content: "",
-    contentType: "",
-    currentEtag: "",
-    acceptedEtag: undefined,
-  },
   withdrawalFee: {
     currency: "USD",
     fraction: 0,
@@ -1237,7 +1188,9 @@ export const WithoutFee = createExample(TestedComponent, {
     fraction: 10000000,
   },
 
-  onSwitchExchange: async () => {},
+  onSwitchExchange: async () => {
+    null;
+  },
   terms: {
     value: {
       type: "xml",
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 603dafcde..8258717bd 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -29,9 +29,8 @@ import {
   i18n,
   WithdrawUriInfoResponse,
 } from "@gnu-taler/taler-util";
-import { VNode, h } from "preact";
+import { VNode, h, Fragment } from "preact";
 import { useState } from "preact/hooks";
-import { Fragment } from "preact/jsx-runtime";
 import { CheckboxOutlined } from "../components/CheckboxOutlined";
 import { ExchangeXmlTos } from "../components/ExchangeToS";
 import { LogoHeader } from "../components/LogoHeader";
@@ -60,7 +59,6 @@ interface Props {
 }
 
 export interface ViewProps {
-  details: GetExchangeTosResult;
   withdrawalFee: AmountJson;
   exchangeBaseUrl: string;
   amount: AmountJson;
@@ -112,14 +110,13 @@ interface TermsDocumentPdf {
   location: URL;
 }
 
-function amountToString(text: AmountJson) {
+function amountToString(text: AmountJson): string {
   const aj = Amounts.jsonifyAmount(text);
   const amount = Amounts.stringifyValue(aj);
   return `${amount} ${aj.currency}`;
 }
 
 export function View({
-  details,
   withdrawalFee,
   exchangeBaseUrl,
   knownExchanges,
@@ -132,7 +129,7 @@ export function View({
   onAccept,
   reviewed,
   confirmed,
-}: ViewProps) {
+}: ViewProps): VNode {
   const needsReview = terms.status === "changed" || terms.status === "new";
 
   const [switchingExchange, setSwitchingExchange] = useState<
@@ -309,7 +306,7 @@ export function WithdrawPageWithParsedURI({
 }: {
   uri: string;
   uriInfo: WithdrawUriInfoResponse;
-}) {
+}): VNode {
   const [customExchange, setCustomExchange] = useState<string | undefined>(
     undefined,
   );
@@ -407,7 +404,7 @@ export function WithdrawPageWithParsedURI({
   return (
     <View
       onWithdraw={onWithdraw}
-      details={details.tos}
+      // details={details.tos}
       amount={withdrawAmount}
       exchangeBaseUrl={exchange}
       withdrawalFee={details.info.withdrawFee} //FIXME
diff --git a/packages/taler-wallet-webextension/src/cta/payback.tsx b/packages/taler-wallet-webextension/src/cta/payback.tsx
index 60cb8c513..1c81b48a0 100644
--- a/packages/taler-wallet-webextension/src/cta/payback.tsx
+++ b/packages/taler-wallet-webextension/src/cta/payback.tsx
@@ -14,8 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { JSX } from "preact/jsx-runtime";
-import { h } from "preact";
+import { h, VNode } from "preact";
 
 /**
  * View and edit auditors.
@@ -27,6 +26,6 @@ import { h } from "preact";
  * Imports.
  */
 
-export function makePaybackPage(): JSX.Element {
+export function makePaybackPage(): VNode {
   return <div>not implemented</div>;
 }
diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
index 3949318c4..75c4c1962 100644
--- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx
+++ b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
@@ -20,7 +20,7 @@
  * @author Florian Dold
  */
 
-import { Component, JSX, h } from "preact";
+import { Component, h, VNode } from "preact";
 import * as wxApi from "../wxApi";
 
 interface State {
@@ -45,7 +45,7 @@ class ResetNotification extends Component<any, State> {
     const res = await wxApi.checkUpgrade();
     this.setState({ resetRequired: res.dbResetRequired });
   }
-  render(): JSX.Element {
+  render(): VNode {
     if (this.state.resetRequired) {
       return (
         <div>
@@ -92,6 +92,6 @@ class ResetNotification extends Component<any, State> {
 /**
  * @deprecated to be removed
  */
-export function createResetRequiredPage(): JSX.Element {
+export function createResetRequiredPage(): VNode {
   return <ResetNotification />;
 }
diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
index 548202cab..55f0297d4 100644
--- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
@@ -14,8 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { JSX } from "preact/jsx-runtime";
-import { h } from "preact";
+import { h, VNode } from "preact";
 /**
  * Return coins to own bank account.
  *
@@ -25,6 +24,6 @@ import { h } from "preact";
 /**
  * Imports.
  */
-export function createReturnCoinsPage(): JSX.Element {
+export function createReturnCoinsPage(): VNode {
   return <span>Not implemented yet.</span>;
 }