aboutsummaryrefslogtreecommitdiff
path: root/packages/demobank-ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/demobank-ui')
-rw-r--r--packages/demobank-ui/src/components/Transactions/index.ts2
-rw-r--r--packages/demobank-ui/src/components/Transactions/state.ts2
-rw-r--r--packages/demobank-ui/src/components/Transactions/views.tsx8
-rw-r--r--packages/demobank-ui/src/pages/AccountPage.tsx57
-rw-r--r--packages/demobank-ui/src/stories.test.ts50
-rw-r--r--packages/demobank-ui/src/stories.tsx4
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
index 618fcfb71..0c9084946 100644
--- 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
index ac76e31e2..5d613c5d0 100644
--- 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
index b3683b743..1822f9d94 100644
--- 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
index 5dd820b53..8d29bd933 100644
--- 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
new file mode 100644
index 000000000..f0b692ed2
--- /dev/null
+++ 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
index a8ebcd867..54bda49a2 100644
--- 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 },