better error report / retry prompt for failed payments

src/webex/notify.ts

@@ -120,6 +120,7 @@ async function handlePaymentResponse(maybeFoundResponse: QueryPaymentResult) {
     // Gives the user the option to retry / abort and refresh
     wxApi.logAndDisplayError({
       name: "pay-post-failed",
+      contractTerms: walletResp.contractTerms,
       message: e.message,
       response: e.response,
     });

src/webex/pages/confirm-create-reserve.tsx

@@ -41,7 +41,7 @@ import {
   getReserveCreationInfo,
 } from "../wxApi";
 
-import {renderAmount} from "../renderHtml";
+import {Collapsible, renderAmount} from "../renderHtml";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -80,40 +80,6 @@ class EventTrigger {
 }
 
 
-interface CollapsibleState {
-  collapsed: boolean;
-}
-
-interface CollapsibleProps {
-  initiallyCollapsed: boolean;
-  title: string;
-}
-
-class Collapsible extends React.Component<CollapsibleProps, CollapsibleState> {
-  constructor(props: CollapsibleProps) {
-    super(props);
-    this.state = { collapsed: props.initiallyCollapsed };
-  }
-  render() {
-    const doOpen = (e: any) => {
-      this.setState({collapsed: false});
-      e.preventDefault();
-    };
-    const doClose = (e: any) => {
-      this.setState({collapsed: true});
-      e.preventDefault();
-    };
-    if (this.state.collapsed) {
-      return <h2><a className="opener opener-collapsed" href="#" onClick={doOpen}>{this.props.title}</a></h2>;
-    }
-    return (
-      <div>
-        <h2><a className="opener opener-open" href="#" onClick={doClose}>{this.props.title}</a></h2>
-        {this.props.children}
-      </div>
-    );
-  }
-}
 
 function renderAuditorDetails(rci: ReserveCreationInfo|null) {
   console.log("rci", rci);

src/webex/pages/error.tsx

@@ -29,6 +29,8 @@ import URI = require("urijs");
 
 import * as wxApi from "../wxApi";
 
+import { Collapsible } from "../renderHtml";
+
 interface ErrorProps {
   report: any;
 }
@@ -38,7 +40,7 @@ class ErrorView extends React.Component<ErrorProps, { }> {
     const report = this.props.report;
     if (!report) {
       return (
-        <div>
+        <div id="main">
           <h1>Error Report Not Found</h1>
           <p>This page is supposed to display an error reported by the GNU Taler wallet,
               but the corresponding error report can't be found.</p>
@@ -46,15 +48,47 @@ class ErrorView extends React.Component<ErrorProps, { }> {
         </div>
       );
     }
-    switch (report.name) {
-      default:
+    try {
+      switch (report.name) {
+        case "pay-post-failed": {
+          const summary = report.contractTerms.summary || report.contractTerms.order_id;
+          return (
+            <div id="main">
+              <h1>Failed to send payment</h1>
+              <p>Failed to send payment for <strong>{summary}</strong> to merchant <strong>{report.contractTerms.merchant.name}</strong>.</p>
+              <p>You can <a href={report.contractTerms.fulfillment_url}>retry</a> the payment.  If this problem persists,
+                please contact the mechant with the error details below.</p>
+              <Collapsible initiallyCollapsed={true} title="Error Details">
+                <pre>
+                  {JSON.stringify(report, null, " ")}
+                </pre>
+              </Collapsible>
+            </div>
+          );
+        }
+        default:
+          return (
+            <div id="main">
+              <h1>Unknown Error</h1>
+              The GNU Taler wallet reported an unknown error.  Here are the details:
+              <pre>
+                {JSON.stringify(report, null, " ")}
+              </pre>
+            </div>
+          );
+      }
+    } catch (e) {
         return (
-          <div>
-            <h1>Unknown Error</h1>
-            The GNU Taler wallet reported an unknown error.  Here are the details:
+          <div id="main">
+            <h1>Error</h1>
+            The GNU Taler wallet reported an error.  Here are the details:
             <pre>
               {JSON.stringify(report, null, " ")}
             </pre>
+            A detailed error report could not be generated:
+            <pre>
+              {e.toString()}
+            </pre>
           </div>
         );
     }

src/webex/renderHtml.tsx

@@ -91,3 +91,40 @@ export function abbrev(s: string, n: number = 5) {
     </span>
   );
 }
+
+
+
+interface CollapsibleState {
+  collapsed: boolean;
+}
+
+interface CollapsibleProps {
+  initiallyCollapsed: boolean;
+  title: string;
+}
+
+export class Collapsible extends React.Component<CollapsibleProps, CollapsibleState> {
+  constructor(props: CollapsibleProps) {
+    super(props);
+    this.state = { collapsed: props.initiallyCollapsed };
+  }
+  render() {
+    const doOpen = (e: any) => {
+      this.setState({collapsed: false});
+      e.preventDefault();
+    };
+    const doClose = (e: any) => {
+      this.setState({collapsed: true});
+      e.preventDefault();
+    };
+    if (this.state.collapsed) {
+      return <h2><a className="opener opener-collapsed" href="#" onClick={doOpen}>{this.props.title}</a></h2>;
+    }
+    return (
+      <div>
+        <h2><a className="opener opener-open" href="#" onClick={doClose}>{this.props.title}</a></h2>
+        {this.props.children}
+      </div>
+    );
+  }
+}