diff options
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 193 |
1 files changed, 126 insertions, 67 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 39175186f..eb2325e7a 100644 --- 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 ? ( + {showRetry && ( + <Button + variant="contained" + onClick={safely("retry transaction", onRetry)} + > + <i18n.Translate>Retry</i18n.Translate> + </Button> + )} + {showAbort && ( <Button variant="contained" - onClick={safely("send transaction", onSend)} + onClick={safely("abort transaction", onAbort)} > - <i18n.Translate>Send</i18n.Translate> + <i18n.Translate>Abort</i18n.Translate> </Button> - ) : null} - </div> - <div> - {showRetry ? ( + )} + {showResume && ( <Button variant="contained" - onClick={safely("retry transaction", onRetry)} + onClick={safely("resume transaction", onResume)} > - <i18n.Translate>Retry</i18n.Translate> + <i18n.Translate>Resume</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> - ) - ) : ( + )} + {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> |