show buttons

2023-05-29 23:47:21 -03:00 · 2023-05-29 23:47:21 -03:00 · bd7ca80ff6
commit bd7ca80ff6
parent cb720b7a96
1 changed files with 128 additions and 69 deletions
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/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 () => {
-        await api.wallet.call(WalletApiOperation.DeleteTransaction, {
+      onSuspend={async () => {
+        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 =
-    transaction.txState.major !== TransactionMajorState.Aborted &&
-    transaction.txState.major !== TransactionMajorState.Done &&
-    transaction.txState.major !== TransactionMajorState.Failed;
+  const isFinalState =
+    transaction.txState.major === TransactionMajorState.Aborted ||
+    transaction.txState.major === TransactionMajorState.Done ||
+    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.error !== undefined ||
-      (transaction.txState.major === TransactionMajorState.Aborting &&
-        (transaction.timestamp.t_s === "never" ||
-          differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) >
-            SHOWING_RETRY_THRESHOLD_SECS)));
+    transaction.txState.major !== TransactionMajorState.Pending &&
+    transaction.txState.major !== TransactionMajorState.Aborting;
+
+  const showDelete = isFinalState;
+
+  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 ? (
-            <Button
-              variant="contained"
-              onClick={safely("send transaction", onSend)}
-            >
-              <i18n.Translate>Send</i18n.Translate>
-            </Button>
-          ) : null}
-        </div>
-        <div>
-          {showRetry ? (
+          {showRetry && (
            <Button
              variant="contained"
              onClick={safely("retry transaction", onRetry)}
            >
              <i18n.Translate>Retry</i18n.Translate>
            </Button>
-          ) : null}
-          {transactionStillActive ? (
-            hasCancelTransactionImplemented ? (
-              <Button
-                variant="contained"
-                color="error"
-                onClick={doCheckBeforeCancel as SafeHandler<void>}
-              >
-                <i18n.Translate>Cancel</i18n.Translate>
-              </Button>
-            ) : (
-              <EnabledBySettings name="deleteActiveTransactions">
-                <Button
-                  variant="contained"
-                  color="error"
-                  onClick={doCheckBeforeForget as SafeHandler<void>}
-                >
-                  <i18n.Translate>Delete</i18n.Translate>
-                </Button>
-              </EnabledBySettings>
-            )
-          ) : (
+          )}
+          {showAbort && (
+            <Button
+              variant="contained"
+              onClick={safely("abort transaction", onAbort)}
+            >
+              <i18n.Translate>Abort</i18n.Translate>
+            </Button>
+          )}
+          {showResume && (
+            <Button
+              variant="contained"
+              onClick={safely("resume transaction", onResume)}
+            >
+              <i18n.Translate>Resume</i18n.Translate>
+            </Button>
+          )}
+          {showSuspend && (
+            <Button
+              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>