new payto form

5 files changed, 135 insertions, 18 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index 9cec72c01..585894863 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -296,7 +296,7 @@ export function InputPaytoForm<T>({
       >
         <InputSelector<Entity>
           name="target"
-          label={i18n.str`Account type`}
+          label={i18n.str`Type`}
           tooltip={i18n.str`Method to use for wire transfer`}
           values={targets}
           readonly={readonly}
@@ -430,7 +430,9 @@ export function InputPaytoForm<T>({
               name="params.receiver-name"
               readonly={readonly}
               label={i18n.str`Owner's name`}
+              placeholder="John Doe"
               tooltip={i18n.str`Legal name of the person holding the account.`}
+              help={i18n.str`It should match the bank account name.`}
             />
           </Fragment>
         )}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx
index 8c935f33b..89a4dc48c 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx
@@ -18,7 +18,7 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { h, VNode } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 import { InputProps, useField } from "./useField.js";
 
 interface Props<T> extends InputProps<T> {
@@ -26,11 +26,12 @@ interface Props<T> extends InputProps<T> {
   readonly?: boolean;
   expand?: boolean;
   threeState?: boolean;
+  side?: ComponentChildren;
   toBoolean?: (v?: any) => boolean | undefined;
   fromBoolean?: (s: boolean | undefined) => any;
 }
 
-const defaultToBoolean = (f?: any): boolean | undefined => f || "";
+const defaultToBoolean = (f?: any): boolean | undefined => f;
 const defaultFromBoolean = (v: boolean | undefined): any => v as any;
 
 export function InputToggle<T>({
@@ -41,6 +42,7 @@ export function InputToggle<T>({
   label,
   help,
   threeState,
+  side,
   expand,
   fromBoolean = defaultFromBoolean,
   toBoolean = defaultToBoolean,
@@ -56,7 +58,7 @@ export function InputToggle<T>({
   return (
     <div class="field is-horizontal">
       <div class="field-label is-normal">
-        <label class="label" >
+        <label class="label">
           {label}
           {tooltip && (
             <span class="icon has-tooltip-right" data-tooltip={tooltip}>
@@ -68,23 +70,37 @@ export function InputToggle<T>({
       <div class="field-body is-flex-grow-3">
         <div class="field">
           <p class={expand ? "control is-expanded" : "control"}>
+            {/* {String(toBoolean(value))} */}
             <label class="toggle" style={{ marginLeft: 4, marginTop: 0 }}>
               <input
                 type="checkbox"
-                class={toBoolean(value) === undefined ? "is-indeterminate" : "toggle-checkbox"}
+                class={"toggle-checkbox"}
                 checked={toBoolean(value)}
                 placeholder={placeholder}
+                ref={(d) => {
+                  if (d) {
+                    d.indeterminate =
+                      !!threeState && toBoolean(value) === undefined;
+                  }
+                }}
                 readonly={readonly}
                 name={String(name)}
                 disabled={readonly}
                 onChange={onCheckboxClick}
               />
-              <div class={`toggle-switch ${readonly ? "disabled" : ""}`} style={{ cursor: readonly ? "default" : undefined }}></div>
+
+              <div
+                class={`toggle-switch ${readonly ? "disabled" : ""} ${
+                  toBoolean(value) === undefined ? "no-dot" : ""
+                }`}
+                style={{ cursor: readonly ? "default" : undefined }}
+              ></div>
             </label>
-            {help}
+            <p>{help}</p>
           </p>
           {error && <p class="help is-danger">{error}</p>}
         </div>
+        {side}
       </div>
     </div>
   );
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
index baab9584c..c13839d2d 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -29,11 +29,11 @@ function getInstanceTitle(path: string, id: string): string {
     case InstancePaths.settings:
       return `${id}: Settings`;
     case InstancePaths.bank_new:
-      return `${id}: Account`;
+      return `${id}: New bank account`;
     case InstancePaths.bank_list:
-      return `${id}: Account`;
+      return `${id}: Bank accounts`;
     case InstancePaths.bank_update:
-      return `${id}: Account`;
+      return `${id}: Update bank Account`;
     case InstancePaths.order_list:
       return `${id}: Orders`;
     case InstancePaths.order_new:
@@ -44,10 +44,6 @@ function getInstanceTitle(path: string, id: string): string {
       return `${id}: New product`;
     case InstancePaths.inventory_update:
       return `${id}: Update product`;
-    case InstancePaths.reserves_new:
-      return `${id}: New reserve`;
-    case InstancePaths.reserves_list:
-      return `${id}: Reserves`;
     case InstancePaths.transfers_list:
       return `${id}: Transfers`;
     case InstancePaths.transfers_new:
@@ -59,11 +55,11 @@ function getInstanceTitle(path: string, id: string): string {
     case InstancePaths.webhooks_update:
       return `${id}: Update webhook`;
     case InstancePaths.otp_devices_list:
-      return `${id}: otp devices`;
+      return `${id}: OTP devices`;
     case InstancePaths.otp_devices_new:
-      return `${id}: New otp devices`;
+      return `${id}: New OTP device`;
     case InstancePaths.otp_devices_update:
-      return `${id}: Update otp devices`;
+      return `${id}: Update OTP device`;
     case InstancePaths.templates_new:
       return `${id}: New template`;
     case InstancePaths.templates_update:
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;
diff --git a/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx b/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx
index 1492beb48..b4c49502d 100644
--- a/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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