new payto form

1 files changed, 103 insertions, 0 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
index 43062d13e..518583a9c 100644
--- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -31,6 +31,8 @@ import {
   AccountLetter,
   codecForAccountLetter,
   PaytoString,
+  PaytoUri,
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 
 interface Props {
@@ -288,6 +290,107 @@ export function ImportingAccountModal({
   );
 }
 
+interface CompareAccountsModalProps {
+  onCancel: () => void;
+  onConfirm: (account: PaytoString) => void;
+  formPayto: PaytoUri | undefined;
+  testPayto: PaytoUri;
+}
+
+export function CompareAccountsModal({
+  onCancel,
+  onConfirm,
+  formPayto,
+  testPayto,
+}: CompareAccountsModalProps): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <ConfirmModal
+      label={i18n.str`Update form`}
+      description={i18n.str`Comparing account details`}
+      active
+      onCancel={onCancel}
+      onConfirm={() => onConfirm(stringifyPaytoUri(testPayto))}
+    >
+      <p>
+        <i18n.Translate>
+          Testing agaisnt the account info URL succedded but the account
+          information reported is different with the account details form.
+        </i18n.Translate>
+      </p>
+      <div class="table-container">
+        <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+          <thead>
+            <tr>
+              <td>
+                <i18n.Translate>Field</i18n.Translate>
+              </td>
+              <td>
+                <i18n.Translate>In the form</i18n.Translate>
+              </td>
+              <td>
+                <i18n.Translate>Reported</i18n.Translate>
+              </td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <i18n.Translate>Type</i18n.Translate>
+              </td>
+              <td>{formPayto?.targetType ?? "--"}</td>
+              <td>{testPayto.targetType}</td>
+            </tr>
+            {testPayto.targetType === "iban" && (
+              <tr>
+                <td>
+                  <i18n.Translate>IBAN</i18n.Translate>
+                </td>
+                <td>{formPayto?.targetPath ?? "--"}</td>
+                <td>{testPayto.targetPath}</td>
+              </tr>
+            )}
+            {testPayto.targetType === "bitcoin" && (
+              <tr>
+                <td>
+                  <i18n.Translate>Address</i18n.Translate>
+                </td>
+                <td>{formPayto?.targetPath ?? "--"}</td>
+                <td>{testPayto.targetPath}</td>
+              </tr>
+            )}
+            {testPayto.targetType === "x-taler-bank" && (
+              <Fragment>
+                <tr>
+                  <td>
+                    <i18n.Translate>Host</i18n.Translate>
+                  </td>
+                  <td>{formPayto?.targetPath ?? "--"}</td>
+                  <td>{testPayto.targetPath}</td>
+                </tr>
+                <tr>
+                  <td>
+                    <i18n.Translate>Account id</i18n.Translate>
+                  </td>
+                  <td>{formPayto?.targetPath ?? "--"}</td>
+                  <td>{testPayto.targetPath}</td>
+                </tr>
+              </Fragment>
+            )}
+            <tr>
+              <td>
+                <i18n.Translate>Owner's name</i18n.Translate>
+              </td>
+              <td>{formPayto?.params["receiver-name"] ?? "--"}</td>
+              <td>{testPayto.params["receiver-name"]}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ConfirmModal>
+  );
+}
+
 interface DeleteModalProps {
   element: { id: string; name: string };
   onCancel: () => void;