/* This file is part of GNU Taler (C) 2021 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 */ import { AmountString, Timestamp, Transaction, TransactionType } from '@gnu-taler/taler-util'; import { format, formatDistance } from 'date-fns'; import { h } from 'preact'; import imageBank from '../../static/img/ri-bank-line.svg'; import imageHandHeart from '../../static/img/ri-hand-heart-line.svg'; import imageRefresh from '../../static/img/ri-refresh-line.svg'; import imageRefund from '../../static/img/ri-refund-2-line.svg'; import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg'; import { Pages } from "../NavigationBar"; import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index'; export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element { const tx = props.tx; switch (tx.type) { case TransactionType.Withdrawal: return ( ); case TransactionType.Payment: return ( ); case TransactionType.Refund: return ( ); case TransactionType.Tip: return ( ); case TransactionType.Refresh: return ( ); case TransactionType.Deposit: return ( ); } } function TransactionLayout(props: TransactionLayoutProps): JSX.Element { const date = new Date(props.timestamp.t_ms); const dateStr = format(date, 'dd MMM, hh:mm') return (
{props.title}
{props.subtitle &&
{props.subtitle}
}
{props.pending && Waiting for confirmation } {dateStr}
); } interface TransactionLayoutProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountString | "unknown"; timestamp: Timestamp; title: string; subtitle?: string; id: string; iconPath: string; pending: boolean; multiCurrency: boolean; } interface TransactionAmountProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountString | "unknown"; pending: boolean; multiCurrency: boolean; } function TransactionAmount(props: TransactionAmountProps): JSX.Element { const [currency, amount] = props.amount.split(":"); let sign: string; switch (props.debitCreditIndicator) { case "credit": sign = "+"; break; case "debit": sign = "-"; break; case "unknown": sign = ""; } return ( {sign} {amount} {props.multiCurrency &&
{currency}
} {props.pending &&
PENDING
}
); }