1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
/*
This file is part of GNU Taler
(C) 2022 Taler Systems S.A.
GNU Taler is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
Foundation; either version 3, or (at your option) any later version.
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
import { Logger } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useEffect } from "preact/hooks";
import useSWR from "swr";
import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
const logger = new Logger("Transactions");
/**
* Show one page of transactions.
*/
export function Transactions({
pageNumber,
accountLabel,
balanceValue,
}: {
pageNumber: number;
accountLabel: string;
balanceValue?: string;
}): VNode {
const { i18n } = useTranslationContext();
const { data, error, mutate } = useSWR(
`access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`,
);
useEffect(() => {
if (balanceValue) {
mutate();
}
}, [balanceValue ?? ""]);
if (typeof error !== "undefined") {
logger.error("transactions not found error", error);
switch (error.status) {
case 404: {
return <p>Transactions page {pageNumber} was not found.</p>;
}
case 401: {
return <p>Wrong credentials given.</p>;
}
default: {
return <p>Transaction page {pageNumber} could not be retrieved.</p>;
}
}
}
if (!data) {
logger.trace(`History data of ${accountLabel} not arrived`);
return <p>Transactions page loading...</p>;
}
logger.trace(`History data of ${accountLabel}`, data);
return (
<div class="results">
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>{i18n.str`Date`}</th>
<th>{i18n.str`Amount`}</th>
<th>{i18n.str`Counterpart`}</th>
<th>{i18n.str`Subject`}</th>
</tr>
</thead>
<tbody>
{data.transactions.map((item: any, idx: number) => {
const sign = item.direction == "DBIT" ? "-" : "";
const counterpart =
item.direction == "DBIT" ? item.creditorIban : item.debtorIban;
// Pattern:
//
// DD/MM YYYY subject -5 EUR
// DD/MM YYYY subject 5 EUR
const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/;
const dateParse = dateRegex.exec(item.date);
const date =
dateParse !== null
? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}`
: "date not found";
return (
<tr key={idx}>
<td>{date}</td>
<td>
{sign}
{item.amount} {item.currency}
</td>
<td>{counterpart}</td>
<td>{item.subject}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
|
