[taler-wallet-core] branch master updated: show better info on transaction error

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository wallet-core.

The following commit(s) were added to refs/heads/master by this push:
     new a51333b6 show better info on transaction error
a51333b6 is described below

commit a51333b693a8fe0b7c2073600d344d1e0b629419
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Nov 29 14:11:32 2021 -0300

    show better info on transaction error
---
 .../src/components/ErrorMessage.tsx                |  2 +-
 .../{ErrorMessage.tsx => ErrorTalerOperation.tsx}  | 34 +++++++++++----
 packages/taler-wallet-webextension/src/cta/Pay.tsx | 49 ++++++++++++----------
 .../src/wallet/Transaction.stories.tsx             |  2 +-
 .../src/wallet/Transaction.tsx                     |  7 +++-
 5 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx 
b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index c6b64fb6..21f10eee 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/ErrorMessage.tsx 
b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
similarity index 60%
copy from packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
copy to 
packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index c6b64fb6..4aaf4a5b 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
@@ -13,25 +13,27 @@
  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 { VNode, h } from "preact";
+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 ErrorMessage({
+export function ErrorTalerOperation({
   title,
-  description,
+  error,
 }: {
-  title?: string | VNode;
-  description?: string;
-}) {
+  title?: string;
+  error?: TalerErrorDetails;
+}): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
-  if (!title) return null;
+  const [showExtraInfo, setShowExtraInfo] = useState(false);
+  if (!title || !error) return null;
   return (
     <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
       <div>
         <p>{title}</p>
-        {description && (
+        {error && (
           <button
             onClick={() => {
               setShowErrorDetail((v) => !v);
@@ -41,7 +43,21 @@ export function ErrorMessage({
           </button>
         )}
       </div>
-      {showErrorDetail && <p>{description}</p>}
+      {showErrorDetail && (
+        <Fragment>
+          <div style={{ padding: 5, textAlign: "left" }}>
+            <div>{error.message}</div>
+            <a href="#" onClick={() => setShowExtraInfo((v) => !v)}>
+              more
+            </a>
+          </div>
+          {showExtraInfo && (
+            <div style={{ textAlign: "left", overflowX: "auto" }}>
+              <pre>{JSON.stringify(error, undefined, 2)}</pre>
+            </div>
+          )}
+        </Fragment>
+      )}
     </ErrorBox>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx 
b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 30b571f0..9f015280 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<ConfirmPayResult | undefined>(
     undefined,
   );
-  const [payErrMsg, setPayErrMsg] = useState<string | undefined>(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 (
+        <WalletAction>
+          <LogoHeader />
+          <h2>{i18n.str`Digital cash payment`}</h2>
+          <section>
+            <ErrorTalerOperation
+              title="Could not get the payment information for this order"
+              error={payErrMsg?.operationError}
+            />
+          </section>
+        </WalletAction>
+      );
+    }
     if (payErrMsg) {
       return (
         <WalletAction>
@@ -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 = <strong>{contractTerms.merchant.name}</strong>;
-  } else {
-    merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>;
-  }
+  // let merchantName: VNode;
+  // if (contractTerms.merchant && contractTerms.merchant.name) {
+  //   merchantName = <strong>{contractTerms.merchant.name}</strong>;
+  // } else {
+  // merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>;
+  // }
 
   function Alternative(): VNode {
     const [showQR, setShowQR] = useState<boolean>(false);
@@ -259,18 +278,6 @@ export function PaymentRequestView({
       }
       return <Fragment />;
     }
-    if (payErrMsg) {
-      return (
-        <section>
-          <div>
-            <p>Payment failed: {payErrMsg}</p>
-            <button class="pure-button button-success" onClick={onClick}>
-              {i18n.str`Retry`}
-            </button>
-          </div>
-        </section>
-      );
-    }
     if (payStatus.status === PreparePayResultType.PaymentPossible) {
       return (
         <Fragment>
diff --git 
a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx 
b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index a25e2ca8..656c5732 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 02c78320..6cc836f6 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 (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
-          <ErrorMessage title={transaction?.error?.hint} />
+          <ErrorTalerOperation
+            title="There was an error trying to complete the transaction"
+            error={transaction?.error}
+          />
           {transaction.pending && (
             <WarningBox>This transaction is not completed</WarningBox>
           )}

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.