From a51333b693a8fe0b7c2073600d344d1e0b629419 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 29 Nov 2021 14:11:32 -0300 Subject: show better info on transaction error --- .../src/components/ErrorMessage.tsx | 2 +- .../src/components/ErrorTalerOperation.tsx | 63 ++++++++++++++++++++++ packages/taler-wallet-webextension/src/cta/Pay.tsx | 49 +++++++++-------- .../src/wallet/Transaction.stories.tsx | 2 +- .../src/wallet/Transaction.tsx | 7 ++- 5 files changed, 98 insertions(+), 25 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx (limited to 'packages') diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index c6b64fb6a..21f10eeef 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -24,7 +24,7 @@ export function ErrorMessage({ }: { title?: string | VNode; description?: string; -}) { +}): VNode | null { const [showErrorDetail, setShowErrorDetail] = useState(false); if (!title) return null; return ( diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx new file mode 100644 index 000000000..4aaf4a5be --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -0,0 +1,63 @@ +/* + This file is part of GNU Taler + (C) 2019 Taler Systems SA + + 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 + */ +import { TalerErrorDetails } from "@gnu-taler/taler-util"; +import { VNode, h, Fragment } from "preact"; +import { useState } from "preact/hooks"; +import arrowDown from "../../static/img/chevron-down.svg"; +import { ErrorBox } from "./styled"; + +export function ErrorTalerOperation({ + title, + error, +}: { + title?: string; + error?: TalerErrorDetails; +}): VNode | null { + const [showErrorDetail, setShowErrorDetail] = useState(false); + const [showExtraInfo, setShowExtraInfo] = useState(false); + if (!title || !error) return null; + return ( + +
+

{title}

+ {error && ( + + )} +
+ {showErrorDetail && ( + +
+
{error.message}
+ setShowExtraInfo((v) => !v)}> + more + +
+ {showExtraInfo && ( +
+ 
{JSON.stringify(error, undefined, 2)}
+
+ )} + + )} + + ); +} diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 30b571f01..9f015280b 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -36,8 +36,10 @@ import { PreparePayResult, PreparePayResultType, } from "@gnu-taler/taler-util"; +import { OperationFailedError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; +import { ErrorTalerOperation } from "../components/ErrorTalerOperation"; import { LogoHeader } from "../components/LogoHeader"; import { Part } from "../components/Part"; import { QR } from "../components/QR"; @@ -107,7 +109,9 @@ export function PayPage({ talerPayUri }: Props): VNode { const [payResult, setPayResult] = useState( undefined, ); - const [payErrMsg, setPayErrMsg] = useState(undefined); + const [payErrMsg, setPayErrMsg] = useState< + OperationFailedError | string | undefined + >(undefined); const balance = useAsyncAsHook(wxApi.getBalance); const balanceWithoutError = balance?.hasError @@ -131,6 +135,9 @@ export function PayPage({ talerPayUri }: Props): VNode { const p = await wxApi.preparePay(talerPayUri); setPayStatus(p); } catch (e) { + if (e instanceof OperationFailedError) { + setPayErrMsg(e); + } if (e instanceof Error) { setPayErrMsg(e.message); } @@ -144,6 +151,20 @@ export function PayPage({ talerPayUri }: Props): VNode { } if (!payStatus) { + if (payErrMsg instanceof OperationFailedError) { + return ( + + +

{i18n.str`Digital cash payment`}

+
+ +
+ + ); + } if (payErrMsg) { return ( @@ -177,7 +198,6 @@ export function PayPage({ talerPayUri }: Props): VNode { payStatus={payStatus} payResult={payResult} onClick={onClick} - payErrMsg={payErrMsg} balance={foundAmount} /> ); @@ -196,7 +216,6 @@ export function PaymentRequestView({ payStatus, payResult, onClick, - payErrMsg, balance, }: PaymentRequestViewProps): VNode { let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); @@ -218,12 +237,12 @@ export function PaymentRequestView({ totalFees = Amounts.sub(amountEffective, amountRaw).amount; } - let merchantName: VNode; - if (contractTerms.merchant && contractTerms.merchant.name) { - merchantName = {contractTerms.merchant.name}; - } else { - merchantName = (pub: {contractTerms.merchant_pub}); - } + // let merchantName: VNode; + // if (contractTerms.merchant && contractTerms.merchant.name) { + // merchantName = {contractTerms.merchant.name}; + // } else { + // merchantName = (pub: {contractTerms.merchant_pub}); + // } function Alternative(): VNode { const [showQR, setShowQR] = useState(false); @@ -259,18 +278,6 @@ export function PaymentRequestView({ } return ; } - if (payErrMsg) { - return ( -
-
-

Payment failed: {payErrMsg}

- -
-
- ); - } if (payStatus.status === PreparePayResultType.PaymentPossible) { return ( diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index a25e2ca80..656c57324 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -121,7 +121,7 @@ const transactionError = { code: 2000, details: "details", hint: "this is a hint for the error", - message: "message", + message: "this is the error message with get from the app", }; export const Withdraw = createExample(TestedComponent, { diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 02c78320a..6cc836f60 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -29,7 +29,7 @@ import { route } from "preact-router"; import { useState } from "preact/hooks"; import emptyImg from "../../static/img/empty.png"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; -import { ErrorMessage } from "../components/ErrorMessage"; +import { ErrorTalerOperation } from "../components/ErrorTalerOperation"; import { Part } from "../components/Part"; import { Button, @@ -128,7 +128,10 @@ export function TransactionView({ return (
- + {transaction.pending && ( This transaction is not completed )} -- cgit v1.2.3