show buttons

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -115,17 +115,26 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
   return (
     <TransactionView
       transaction={state.response}
-      onSend={async () => {
-        null;
-      }}
       onCancel={async () => {
-        await api.wallet.call(WalletApiOperation.AbortTransaction, {
+        await api.wallet.call(WalletApiOperation.CancelAbortingTransaction, {
           transactionId,
         });
         goToWalletHistory(currency);
       }}
-      onDelete={async () => {
+      onSuspend={async () => {
-        await api.wallet.call(WalletApiOperation.DeleteTransaction, {
+        await api.wallet.call(WalletApiOperation.SuspendTransaction, {
+          transactionId,
+        });
+        goToWalletHistory(currency);
+      }}
+      onResume={async () => {
+        await api.wallet.call(WalletApiOperation.SuspendTransaction, {
+          transactionId,
+        });
+        goToWalletHistory(currency);
+      }}
+      onAbort={async () => {
+        await api.wallet.call(WalletApiOperation.AbortTransaction, {
           transactionId,
         });
         goToWalletHistory(currency);
@@ -136,6 +145,12 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
         });
         goToWalletHistory(currency);
       }}
+      onDelete={async () => {
+        await api.wallet.call(WalletApiOperation.DeleteTransaction, {
+          transactionId,
+        });
+        goToWalletHistory(currency);
+      }}
       onRefund={async (transactionId) => {
         await api.wallet.call(WalletApiOperation.StartRefundQuery, {
           transactionId,
@@ -148,8 +163,10 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
 
 export interface WalletTransactionProps {
   transaction: Transaction;
-  onSend: () => Promise<void>;
   onCancel: () => Promise<void>;
+  onSuspend: () => Promise<void>;
+  onResume: () => Promise<void>;
+  onAbort: () => Promise<void>;
   onDelete: () => Promise<void>;
   onRetry: () => Promise<void>;
   onRefund: (id: TransactionIdStr) => Promise<void>;
@@ -175,7 +192,9 @@ function TransactionTemplate({
   transaction,
   onDelete,
   onRetry,
-  onSend,
+  onAbort,
+  onResume,
+  onSuspend,
   onCancel,
   children,
 }: TransactionTemplateProps): VNode {
@@ -199,26 +218,39 @@ function TransactionTemplate({
     setConfirmBeforeCancel(true);
   }
 
-  const SHOWING_RETRY_THRESHOLD_SECS = 30;
-
-  const showSend = false;
   const hasCancelTransactionImplemented =
     transaction.type === TransactionType.Payment;
+  const hasAbortTransactionImplemented =
+    transaction.type === TransactionType.Withdrawal ||
+    transaction.type === TransactionType.Deposit ||
+    transaction.type === TransactionType.Payment;
 
-  const transactionStillActive =
+  const isFinalState =
-    transaction.txState.major !== TransactionMajorState.Aborted &&
+    transaction.txState.major === TransactionMajorState.Aborted ||
-    transaction.txState.major !== TransactionMajorState.Done &&
+    transaction.txState.major === TransactionMajorState.Done ||
-    transaction.txState.major !== TransactionMajorState.Failed;
+    transaction.txState.major === TransactionMajorState.Failed;
+
+  const showAbort =
+    hasAbortTransactionImplemented &&
+    transaction.txState.major === TransactionMajorState.Pending;
+
+  const showCancel =
+    hasCancelTransactionImplemented &&
+    transaction.txState.major === TransactionMajorState.Aborting;
 
-  // show retry if there is an error in an active state, or after some time
-  // if it is not aborting
   const showRetry =
-    transactionStillActive &&
+    transaction.txState.major !== TransactionMajorState.Pending &&
-    (transaction.error !== undefined ||
+    transaction.txState.major !== TransactionMajorState.Aborting;
-      (transaction.txState.major === TransactionMajorState.Aborting &&
+
-        (transaction.timestamp.t_s === "never" ||
+  const showDelete = isFinalState;
-          differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) >
+
-            SHOWING_RETRY_THRESHOLD_SECS)));
+  const showResume =
+    transaction.txState.major === TransactionMajorState.Suspended ||
+    transaction.txState.major === TransactionMajorState.SuspendedAborting;
+
+  const showSuspend =
+    transaction.txState.major === TransactionMajorState.Pending ||
+    transaction.txState.major === TransactionMajorState.Aborting;
 
   return (
     <Fragment>
@@ -331,46 +363,50 @@ function TransactionTemplate({
       </section>
       <section>{children}</section>
       <footer>
+        <div />
         <div>
-          {showSend ? (
+          {showRetry && (
-            <Button
-              variant="contained"
-              onClick={safely("send transaction", onSend)}
-            >
-              <i18n.Translate>Send</i18n.Translate>
-            </Button>
-          ) : null}
-        </div>
-        <div>
-          {showRetry ? (
             <Button
               variant="contained"
               onClick={safely("retry transaction", onRetry)}
             >
               <i18n.Translate>Retry</i18n.Translate>
             </Button>
-          ) : null}
+          )}
-          {transactionStillActive ? (
+          {showAbort && (
-            hasCancelTransactionImplemented ? (
+            <Button
-              <Button
+              variant="contained"
-                variant="contained"
+              onClick={safely("abort transaction", onAbort)}
-                color="error"
+            >
-                onClick={doCheckBeforeCancel as SafeHandler<void>}
+              <i18n.Translate>Abort</i18n.Translate>
-              >
+            </Button>
-                <i18n.Translate>Cancel</i18n.Translate>
+          )}
-              </Button>
+          {showResume && (
-            ) : (
+            <Button
-              <EnabledBySettings name="deleteActiveTransactions">
+              variant="contained"
-                <Button
+              onClick={safely("resume transaction", onResume)}
-                  variant="contained"
+            >
-                  color="error"
+              <i18n.Translate>Resume</i18n.Translate>
-                  onClick={doCheckBeforeForget as SafeHandler<void>}
+            </Button>
-                >
+          )}
-                  <i18n.Translate>Delete</i18n.Translate>
+          {showSuspend && (
-                </Button>
+            <Button
-              </EnabledBySettings>
+              variant="contained"
-            )
+              onClick={safely("suspend transaction", onSuspend)}
-          ) : (
+            >
+              <i18n.Translate>Suspend</i18n.Translate>
+            </Button>
+          )}
+          {showCancel && (
+            <Button
+              variant="contained"
+              color="error"
+              onClick={doCheckBeforeCancel as SafeHandler<void>}
+            >
+              <i18n.Translate>Cancel</i18n.Translate>
+            </Button>
+          )}
+          {showDelete && (
             <Button
               variant="contained"
               color="error"
@@ -388,8 +424,11 @@ function TransactionTemplate({
 export function TransactionView({
   transaction,
   onDelete,
+  onAbort,
+  onBack,
+  onResume,
+  onSuspend,
   onRetry,
-  onSend,
   onRefund,
   onCancel,
 }: WalletTransactionProps): VNode {
@@ -408,7 +447,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -542,8 +583,10 @@ export function TransactionView({
       <TransactionTemplate
         transaction={transaction}
         onDelete={onDelete}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onRetry={onRetry}
-        onSend={onSend}
         onCancel={onCancel}
       >
         <Header
@@ -681,7 +724,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -756,7 +801,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -785,7 +832,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -817,7 +866,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -875,7 +926,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -925,7 +978,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -968,7 +1023,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -1017,7 +1074,9 @@ export function TransactionView({
         transaction={transaction}
         onDelete={onDelete}
         onRetry={onRetry}
-        onSend={onSend}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
         onCancel={onCancel}
       >
         <Header
@@ -1813,10 +1872,10 @@ function NicePayto({ payto }: { payto: PaytoUri }): VNode {
         const url = new URL("/", `https://${payto.host}`);
         return (
           <Fragment>
-            <div>{payto.account}</div>
+            <div>{"payto.account"}</div>
             <SmallLightText>
               <a href={url.href} target="_bank" rel="noreferrer">
-                {url.toString()}
+                {url.href}
               </a>
             </SmallLightText>
           </Fragment>