1 files changed, 88 insertions, 37 deletions

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 b82907122..7ba531a94 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
@@ -16,7 +16,7 @@
 
 import { parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { QR } from "../../../../components/exception/QR.js";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js";
 import { MerchantBackend } from "../../../../declaration.js";
@@ -32,18 +32,29 @@ interface Props {
   onCreateAnother?: () => void;
 }
 
+function isNotUndefined<X>(x: X | undefined): x is X {
+  return !!x;
+}
+
 export function CreatedSuccessfully({
   entity,
   onConfirm,
   onCreateAnother,
 }: Props): VNode {
-  const p = parsePaytoUri(entity.response.payto_uri);
-  if (p) {
-    p.params["message"] = entity.response.reserve_pub;
-    p.params["amount"] = entity.request.initial_balance;
-  }
+  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 link = !p ? entity.response.payto_uri : stringifyPaytoUri(p);
+  const links = accountsInfo.map((a) => stringifyPaytoUri(a));
   const { i18n } = useTranslationContext();
   return (
     <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
@@ -65,18 +76,6 @@ export function CreatedSuccessfully({
       </div>
       <div class="field is-horizontal">
         <div class="field-label is-normal">
-          <label class="label">Exchange bank account</label>
-        </div>
-        <div class="field-body is-flex-grow-3">
-          <div class="field">
-            <p class="control">
-              <input readonly class="input" value={entity.response.payto_uri} />
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
           <label class="label">Wire transfer subject</label>
         </div>
         <div class="field-body is-flex-grow-3">
@@ -91,24 +90,76 @@ export function CreatedSuccessfully({
           </div>
         </div>
       </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 the indicated account of the exchange.
-        </i18n.Translate>
-      </p>
-      <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={link}>
-          {link}
-        </a>
-      </pre>
-      <QR text={link} />
+      {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>
+
+          <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>
+      )}
     </Template>
   );
 }