update to new web-utils imports

4 files changed, 114 insertions, 89 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
index c0c36e651..fccb20121 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
index 4b634c6c0..445ca3ef0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx
@@ -21,7 +21,7 @@
 
 import { h, VNode, FunctionalComponent } from "preact";
 import { CreatedSuccessfully as TestedComponent } from "./CreatedSuccessfully.js";
-import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import * as tests from "@gnu-taler/web-util/testing";
 
 export default {
   title: "Pages/Reserve/CreatedSuccessfully",
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
index 7ba531a94..94fcdaff7 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -15,11 +15,11 @@
  */
 
 import { parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { QR } from "../../../../components/exception/QR.js";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js";
-import { MerchantBackend } from "../../../../declaration.js";
+import { MerchantBackend, WireAccount } from "../../../../declaration.js";
 
 type Entity = {
   request: MerchantBackend.Tips.ReserveCreateRequest;
@@ -41,20 +41,6 @@ export function CreatedSuccessfully({
   onConfirm,
   onCreateAnother,
 }: Props): VNode {
-  const accountsInfo = !entity.response.accounts
-    ? []
-    : entity.response.accounts
-        .map((acc) => {
-          const p = parsePaytoUri(acc.payto_uri);
-          if (p) {
-            p.params["message"] = entity.response.reserve_pub;
-            p.params["amount"] = entity.request.initial_balance;
-          }
-          return p;
-        })
-        .filter(isNotUndefined);
-
-  const links = accountsInfo.map((a) => stringifyPaytoUri(a));
   const { i18n } = useTranslationContext();
   return (
     <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
@@ -90,76 +76,115 @@ export function CreatedSuccessfully({
           </div>
         </div>
       </div>
-      {links.length === 0 ? (
-        <Fragment>
-          <p class="is-size-5">
-            The response of the reserve creation have invalid accounts. List of
-            invalid payto URIs below:
-          </p>
-          <ul>
-            {entity.response.accounts.map((a, idx) => {
-              return <li key={idx}>{a.payto_uri}</li>;
-            })}
-          </ul>
-        </Fragment>
-      ) : links.length === 1 ? (
-        <Fragment>
-          <p class="is-size-5">
-            <i18n.Translate>
-              To complete the setup of the reserve, you must now initiate a wire
-              transfer using the given wire transfer subject and crediting the
-              specified amount to the indicated account of the exchange.
-            </i18n.Translate>
-          </p>
-          <p style={{ margin: 10 }}>
-            <b>Exchange bank account</b>
-          </p>
-          <QR text={links[0]} />
-          <p class="is-size-5">
-            <i18n.Translate>
-              If your system supports RFC 8905, you can do this by opening this
-              URI:
-            </i18n.Translate>
-          </p>
-          <pre>
-            <a target="_blank" rel="noreferrer" href={links[0]}>
-              {links[0]}
-            </a>
-          </pre>
-        </Fragment>
-      ) : (
-        <div>
-          <p class="is-size-5">
-            <i18n.Translate>
-              To complete the setup of the reserve, you must now initiate a wire
-              transfer using the given wire transfer subject and crediting the
-              specified amount to one of the indicated account of the exchange.
-            </i18n.Translate>
-          </p>
+      <ShowAccountsOfReserveAsQRWithLink
+        accounts={entity.response.accounts ?? []}
+        message={entity.response.reserve_pub}
+        amount={entity.request.initial_balance}
+      />
+    </Template>
+  );
+}
 
-          <p style={{ margin: 10 }}>
-            <b>Exchange bank accounts</b>
-          </p>
-          <p class="is-size-5">
-            <i18n.Translate>
-              If your system supports RFC 8905, you can do this by clicking on
-              the URI below the QR code:
-            </i18n.Translate>
-          </p>
-          {links.map((link) => {
-            return (
-              <Fragment>
-                <QR text={link} />
-                <pre>
-                  <a target="_blank" rel="noreferrer" href={link}>
-                    {link}
-                  </a>
-                </pre>
-              </Fragment>
-            );
+export function ShowAccountsOfReserveAsQRWithLink({
+  accounts,
+  message,
+  amount,
+}: {
+  accounts: WireAccount[];
+  message: string;
+  amount: string;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const accountsInfo = !accounts
+    ? []
+    : accounts
+        .map((acc) => {
+          const p = parsePaytoUri(acc.payto_uri);
+          if (p) {
+            p.params["message"] = message;
+            p.params["amount"] = amount;
+          }
+          return p;
+        })
+        .filter(isNotUndefined);
+
+  const links = accountsInfo.map((a) => stringifyPaytoUri(a));
+
+  if (links.length === 0) {
+    return (
+      <Fragment>
+        <p class="is-size-5">
+          The reserve have invalid accounts. List of invalid payto URIs below:
+        </p>
+        <ul>
+          {accounts.map((a, idx) => {
+            return <li key={idx}>{a.payto_uri}</li>;
           })}
-        </div>
-      )}
-    </Template>
+        </ul>
+      </Fragment>
+    );
+  }
+
+  if (links.length === 1) {
+    return (
+      <Fragment>
+        <p class="is-size-5">
+          <i18n.Translate>
+            To complete the setup of the reserve, you must now initiate a wire
+            transfer using the given wire transfer subject and crediting the
+            specified amount to the indicated account of the exchange.
+          </i18n.Translate>
+        </p>
+        <p style={{ margin: 10 }}>
+          <b>Exchange bank account</b>
+        </p>
+        <QR text={links[0]} />
+        <p class="is-size-5">
+          <i18n.Translate>
+            If your system supports RFC 8905, you can do this by opening this
+            URI:
+          </i18n.Translate>
+        </p>
+        <pre>
+          <a target="_blank" rel="noreferrer" href={links[0]}>
+            {links[0]}
+          </a>
+        </pre>
+      </Fragment>
+    );
+  }
+
+  return (
+    <div>
+      <p class="is-size-5">
+        <i18n.Translate>
+          To complete the setup of the reserve, you must now initiate a wire
+          transfer using the given wire transfer subject and crediting the
+          specified amount to one of the indicated account of the exchange.
+        </i18n.Translate>
+      </p>
+
+      <p style={{ margin: 10 }}>
+        <b>Exchange bank accounts</b>
+      </p>
+      <p class="is-size-5">
+        <i18n.Translate>
+          If your system supports RFC 8905, you can do this by clicking on the
+          URI below the QR code:
+        </i18n.Translate>
+      </p>
+      {links.map((link) => {
+        return (
+          <Fragment>
+            <QR text={link} />
+            <pre>
+              <a target="_blank" rel="noreferrer" href={link}>
+                {link}
+              </a>
+            </pre>
+          </Fragment>
+        );
+      })}
+    </div>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
index 0d39fc298..8a4fe1565 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";