diff options
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 ( <TransactionView transaction={state.response} + onSend={async () => { + 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<void>; onDelete: () => Promise<void>; onRetry: () => Promise<void>; onRefund: (id: string) => Promise<void>; @@ -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({ </section> <section>{children}</section> <footer> - <div /> + <div> + {showSend ? ( + <Button variant="contained" onClick={onSend}> + <i18n.Translate>Send</i18n.Translate> + </Button> + ) : null} + </div> <div> {showRetry ? ( <Button variant="contained" onClick={onRetry}> @@ -597,16 +612,25 @@ export function TransactionView({ Invoice </Header> + {transaction.info.summary ? ( + <Part + title={<i18n.Translate>Subject</i18n.Translate>} + text={transaction.info.summary} + kind="neutral" + /> + ) : undefined} <Part title={<i18n.Translate>Exchange</i18n.Translate>} text={transaction.exchangeBaseUrl} kind="neutral" /> - <Part - title={<i18n.Translate>URI</i18n.Translate>} - text={<ShowQrWithCopy text={transaction.talerUri} />} - kind="neutral" - /> + {!transaction.info.completed && ( + <Part + title={<i18n.Translate>URI</i18n.Translate>} + text={<ShowQrWithCopy text={transaction.talerUri} />} + kind="neutral" + /> + )} <Part title={<i18n.Translate>Details</i18n.Translate>} text={ @@ -635,6 +659,13 @@ export function TransactionView({ Invoice </Header> + {transaction.info.summary ? ( + <Part + title={<i18n.Translate>Subject</i18n.Translate>} + text={transaction.info.summary} + kind="neutral" + /> + ) : undefined} <Part title={<i18n.Translate>Exchange</i18n.Translate>} text={transaction.exchangeBaseUrl} @@ -667,16 +698,25 @@ export function TransactionView({ Transfer </Header> + {transaction.info.summary ? ( + <Part + title={<i18n.Translate>Subject</i18n.Translate>} + text={transaction.info.summary} + kind="neutral" + /> + ) : undefined} <Part title={<i18n.Translate>Exchange</i18n.Translate>} text={transaction.exchangeBaseUrl} kind="neutral" /> - <Part - title={<i18n.Translate>URI</i18n.Translate>} - text={<QR text={transaction.talerUri} />} - kind="neutral" - /> + {!transaction.info.completed && ( + <Part + title={<i18n.Translate>URI</i18n.Translate>} + text={<ShowQrWithCopy text={transaction.talerUri} />} + kind="neutral" + /> + )} <Part title={<i18n.Translate>Details</i18n.Translate>} text={ @@ -705,6 +745,13 @@ export function TransactionView({ Transfer </Header> + {transaction.info.summary ? ( + <Part + title={<i18n.Translate>Subject</i18n.Translate>} + text={transaction.info.summary} + kind="neutral" + /> + ) : undefined} <Part title={<i18n.Translate>Exchange</i18n.Translate>} text={transaction.exchangeBaseUrl} |