diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/AccountPage/views.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/AccountPage/views.tsx | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx new file mode 100644 index 000000000..b476759b4 --- /dev/null +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -0,0 +1,74 @@ +/* + 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 { Amounts, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, h, VNode } from "preact"; +import { Transactions } from "../../components/Transactions/index.js"; +import { PaymentOptions } from "../PaymentOptions.js"; +import { State } from "./index.js"; +import { CopyButton } from "../../components/CopyButton.js"; + +export function InvalidIbanView({error}:State.InvalidIban) { + return ( + <div>Payto from server is not valid "{error.data.paytoUri}"</div> + ); +} + +export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> { + const { i18n } = useTranslationContext(); + return <Fragment> + <div> + <h1 class="nav welcome-text"> + <i18n.Translate> + Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} /> + </i18n.Translate> + </h1> + </div> + + <section id="assets"> + <div class="asset-summary"> + <h2>{i18n.str`Bank account balance`}</h2> + {!balance ? ( + <div class="large-amount" style={{ color: "gray" }}> + Waiting server response... + </div> + ) : ( + <div class="large-amount amount"> + {balanceIsDebit ? <b>-</b> : null} + <span class="value">{`${Amounts.stringifyValue(balance)}`}</span> + + <span class="currency">{`${balance.currency}`}</span> + </div> + )} + </div> + </section> + <section id="payments"> + <div class="payments"> + <h2>{i18n.str`Payments`}</h2> + <PaymentOptions limit={limit} /> + </div> + </section> + + <section style={{ marginTop: "2em" }}> + <div class="active"> + <h3>{i18n.str`Latest transactions`}</h3> + <Transactions account={account} /> + </div> + </section> + </Fragment>; +} + |