taler-typescript-core

Wallet core logic and WebUIs for various components
Log | Files | Refs | Submodules | README | LICENSE

commit 8c8aad4c21fde2cd37e25ccd4c723a308b79439b
parent 5ae63982c3d0e31ddc7c4df389fe2ec2e0062906
Author: Sebastian <sebasjm@gmail.com>
Date:   Tue, 20 Dec 2022 10:16:39 -0300

fix #7524: do not break if the account is in an invalid state

Diffstat:
Mpackages/demobank-ui/src/components/Transactions/index.ts | 2+-
Mpackages/demobank-ui/src/components/Transactions/state.ts | 2+-
Mpackages/demobank-ui/src/components/Transactions/views.tsx | 8+++++++-
Mpackages/demobank-ui/src/pages/AccountPage.tsx | 57++++++++++++++++++++++++++++++++++++---------------------
Apackages/demobank-ui/src/stories.test.ts | 50++++++++++++++++++++++++++++++++++++++++++++++++++
Mpackages/demobank-ui/src/stories.tsx | 4----
6 files changed, 95 insertions(+), 28 deletions(-)

diff --git a/packages/demobank-ui/src/components/Transactions/index.ts b/packages/demobank-ui/src/components/Transactions/index.ts @@ -55,7 +55,7 @@ export interface Transaction { negative: boolean; counterpart: string; when: AbsoluteTime; - amount: AmountJson; + amount: AmountJson | undefined; subject: string; } diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts @@ -114,7 +114,7 @@ export function useComponentState({ accountLabel, pageNumber, balanceValue }: Pr const when: AbsoluteTime = { t_ms: date.getTime() } - const amount = Amounts.parseOrThrow(`${anyItem.currency}:${anyItem.amount}`); + const amount = Amounts.parse(`${anyItem.currency}:${anyItem.amount}`); const subject = anyItem.subject; return { negative, diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -54,7 +54,13 @@ export function ReadyView({ transactions }: State.Ready): VNode { </td> <td> {item.negative ? "-" : ""} - {Amounts.stringifyValue(item.amount)} {item.amount.currency} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${ + item.amount.currency + }` + ) : ( + <span style={{ color: "grey" }}>&lt;invalid value&gt;</span> + )} </td> <td>{item.counterpart}</td> <td>{item.subject}</td> diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx @@ -174,7 +174,8 @@ function Account({ accountLabel }: { accountLabel: string }): VNode { } } } - const balance = !data ? undefined : Amounts.parseOrThrow(data.balance.amount); + const balance = !data ? undefined : Amounts.parse(data.balance.amount); + const errorParsingBalance = data && !balance; const accountNumber = !data ? undefined : getIbanFromPayto(data.paytoUri); const balanceIsDebit = data && data.balance.credit_debit_indicator == "debit"; @@ -216,28 +217,42 @@ function Account({ accountLabel }: { accountLabel: string }): VNode { </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... + + {errorParsingBalance ? ( + <div class="informational informational-fail" style={{ marginTop: 8 }}> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <p> + <b>Server Error: invalid balance</b> + </p> + </div> + <p>Your account is in an invalid state.</p> + </div> + ) : ( + <Fragment> + <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">{`${balanceValue}`}</span>&nbsp; + <span class="currency">{`${balance.currency}`}</span> + </div> + )} </div> - ) : ( - <div class="large-amount amount"> - {balanceIsDebit ? <b>-</b> : null} - <span class="value">{`${balanceValue}`}</span>&nbsp; - <span class="currency">{`${balance.currency}`}</span> + </section> + <section id="payments"> + <div class="payments"> + <h2>{i18n.str`Payments`}</h2> + <PaymentOptions currency={balance?.currency} /> </div> - )} - </div> - </section> - <section id="payments"> - <div class="payments"> - <h2>{i18n.str`Payments`}</h2> - <PaymentOptions currency={balance?.currency} /> - </div> - </section> + </section> + </Fragment> + )} <section id="main"> <article> <h2>{i18n.str`Latest transactions:`}</h2> diff --git a/packages/demobank-ui/src/stories.test.ts b/packages/demobank-ui/src/stories.test.ts @@ -0,0 +1,50 @@ +/* + 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/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { setupI18n } from "@gnu-taler/taler-util"; +import { parseGroupImport } from "@gnu-taler/web-util/lib/index.browser"; + +import * as pages from "./pages/index.stories.js"; +import * as components from "./components/index.examples.js"; + +import { h as create } from "preact" +import { render as renderToString } from "preact-render-to-string"; + +setupI18n("en", { en: {} }); + + +describe("All the examples:", () => { + const cms = parseGroupImport({ pages, components }); + cms.forEach((group) => { + describe(`Example for group "${group.title}:"`, () => { + group.list.forEach((component) => { + describe(`Component ${component.name}:`, () => { + component.examples.forEach((example) => { + it(`should render example: ${example.name}`, () => { + const vdom = create(example.render.component, example.render.props) + const html = renderToString(vdom) + // console.log(html) + }); + }); + }); + }); + }); + }); +}); diff --git a/packages/demobank-ui/src/stories.tsx b/packages/demobank-ui/src/stories.tsx @@ -27,10 +27,6 @@ import { renderStories } from "@gnu-taler/web-util/lib/index.browser"; import "./scss/main.scss"; -function SortStories(a: any, b: any): number { - return (a?.order ?? 0) - (b?.order ?? 0); -} - function main(): void { renderStories( { pages, components },