From 5e7812d63e3e51dbcc9d0d313a3074f9d5d16478 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 1 Sep 2022 08:42:18 -0300 Subject: show sharing action when the tx is not completed --- .../src/wallet/History.stories.tsx | 5 +- .../src/wallet/Transaction.stories.tsx | 49 ++++++++++++++- .../src/wallet/Transaction.tsx | 69 ++++++++++++++++++---- 3 files changed, 108 insertions(+), 15 deletions(-) diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 335d5ea9c..e37711b8a 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -51,9 +51,9 @@ const commonTransaction = (): TransactionCommon => amountEffective: "USD:9", pending: false, timestamp: TalerProtocolTimestamp.fromSeconds( - new Date().getTime() - count++ * 60 * 60 * 7, + new Date().getTime() / 1000 - count++ * 60 * 60 * 7, ), - transactionId: "12", + transactionId: String(count), } as TransactionCommon); const exampleData = { @@ -145,6 +145,7 @@ const exampleData = { pull_debit: { ...commonTransaction(), type: TransactionType.PeerPullDebit, + exchangeBaseUrl: "https://exchange.taler.net", } as TransactionPeerPullDebit, }; diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index 6c591611a..acb50642a 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -20,6 +20,7 @@ */ import { + AbsoluteTime, PaymentStatus, TalerProtocolTimestamp, TransactionCommon, @@ -146,6 +147,13 @@ const exampleData = { push_credit: { ...commonTransaction, type: TransactionType.PeerPushCredit, + info: { + expiration: { + t_s: new Date().getTime() / 1000 + 2 * 60 * 60, + }, + summary: "take this money", + completed: true, + }, exchangeBaseUrl: "https://exchange.taler.net", } as TransactionPeerPushCredit, push_debit: { @@ -153,6 +161,13 @@ const exampleData = { type: TransactionType.PeerPushDebit, talerUri: "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0", + info: { + expiration: { + t_s: new Date().getTime() / 1000 + 2 * 60 * 60, + }, + summary: "take this money", + completed: true, + }, exchangeBaseUrl: "https://exchange.taler.net", } as TransactionPeerPushDebit, pull_credit: { @@ -160,11 +175,25 @@ const exampleData = { type: TransactionType.PeerPullCredit, talerUri: "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0", + info: { + expiration: { + t_s: new Date().getTime() / 1000 + 2 * 60 * 60, + }, + summary: "pay me, please?", + completed: true, + }, exchangeBaseUrl: "https://exchange.taler.net", } as TransactionPeerPullCredit, pull_debit: { ...commonTransaction, type: TransactionType.PeerPullDebit, + info: { + expiration: { + t_s: new Date().getTime() / 1000 + 2 * 60 * 60, + }, + summary: "pay me, please?", + completed: true, + }, exchangeBaseUrl: "https://exchange.taler.net", } as TransactionPeerPullDebit, }; @@ -527,10 +556,17 @@ export const RefundPending = createExample(TestedComponent, { transaction: { ...exampleData.refund, pending: true }, }); -export const InvoiceCredit = createExample(TestedComponent, { +export const InvoiceCreditComplete = createExample(TestedComponent, { transaction: { ...exampleData.pull_credit }, }); +export const InvoiceCreditIncomplete = createExample(TestedComponent, { + transaction: { + ...exampleData.pull_credit, + info: { ...exampleData.pull_credit.info, completed: false }, + }, +}); + export const InvoiceDebit = createExample(TestedComponent, { transaction: { ...exampleData.pull_debit }, }); @@ -539,6 +575,15 @@ export const TransferCredit = createExample(TestedComponent, { transaction: { ...exampleData.push_credit }, }); -export const TransferDebit = createExample(TestedComponent, { +export const TransferDebitComplete = createExample(TestedComponent, { transaction: { ...exampleData.push_debit }, }); +export const TransferDebitIncomplete = createExample(TestedComponent, { + transaction: { + ...exampleData.push_debit, + info: { + ...exampleData.push_debit.info, + completed: false, + }, + }, +}); diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index c8c4e3ae1..44543c2cd 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -115,6 +115,9 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { return ( { + null; + }} onDelete={() => wxApi.deleteTransaction(tid).then(() => goToWalletHistory(currency)) } @@ -129,6 +132,7 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { export interface WalletTransactionProps { transaction: Transaction; + onSend: () => Promise; onDelete: () => Promise; onRetry: () => Promise; onRefund: (id: string) => Promise; @@ -147,6 +151,7 @@ export function TransactionView({ transaction, onDelete, onRetry, + onSend, onRefund, }: WalletTransactionProps): VNode { const [confirmBeforeForget, setConfirmBeforeForget] = useState(false); @@ -169,6 +174,10 @@ export function TransactionView({ }: { children: ComponentChildren; }): VNode { + const showSend = + (transaction.type === TransactionType.PeerPullCredit || + transaction.type === TransactionType.PeerPushDebit) && + !transaction.info.completed; const showRetry = transaction.error !== undefined || transaction.timestamp.t_s === "never" || @@ -194,7 +203,13 @@ export function TransactionView({
{children}