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

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 },