aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/taler-wallet-webextension/src/wallet/History.stories.tsx5
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx49
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.tsx69
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}