merchant fixes

21 files changed, 82 insertions, 110 deletions

diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx
index 82329974f..e832d3107 100644
--- a/packages/merchant-backoffice-ui/src/Application.tsx
+++ b/packages/merchant-backoffice-ui/src/Application.tsx
@@ -34,13 +34,11 @@ import {
   NotificationCard
 } from "./components/menu/index.js";
 import {
-  BackendContextProvider,
-  useBackendContext,
+  BackendContextProvider
 } from "./context/backend.js";
 import { ConfigContextProvider } from "./context/config.js";
 import { useBackendConfig } from "./hooks/backend.js";
 import { strings } from "./i18n/strings.js";
-import { LoginPage } from "./paths/login/index.js";
 
 export function Application(): VNode {
   return (
diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
index 5d33655ff..dcb3e21ea 100644
--- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
+++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
@@ -62,9 +62,9 @@ import TemplateUpdatePage from "./paths/instance/templates/update/index.js";
 import WebhookCreatePage from "./paths/instance/webhooks/create/index.js";
 import WebhookListPage from "./paths/instance/webhooks/list/index.js";
 import WebhookUpdatePage from "./paths/instance/webhooks/update/index.js";
-import ValidatorCreatePage from "./paths/instance/validators/create/index.js";
-import ValidatorListPage from "./paths/instance/validators/list/index.js";
-import ValidatorUpdatePage from "./paths/instance/validators/update/index.js";
+import ValidatorCreatePage from "./paths/instance/otp_devices/create/index.js";
+import ValidatorListPage from "./paths/instance/otp_devices/list/index.js";
+import ValidatorUpdatePage from "./paths/instance/otp_devices/update/index.js";
 import TransferCreatePage from "./paths/instance/transfers/create/index.js";
 import TransferListPage from "./paths/instance/transfers/list/index.js";
 import InstanceUpdatePage, {
@@ -114,9 +114,9 @@ export enum InstancePaths {
   webhooks_update = "/webhooks/:tid/update",
   webhooks_new = "/webhooks/new",
 
-  validators_list = "/validators",
-  validators_update = "/validators/:vid/update",
-  validators_new = "/validators/new",
+  otp_devices_list = "/otp-devices",
+  otp_devices_update = "/otp-devices/:vid/update",
+  otp_devices_new = "/otp-devices/new",
 
   interface = "/interface",
 }
@@ -526,39 +526,39 @@ export function InstanceRoutes({
          * Validator pages
          */}
         <Route
-          path={InstancePaths.validators_list}
+          path={InstancePaths.otp_devices_list}
           component={ValidatorListPage}
           onUnauthorized={LoginPageAccessDenied}
           onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
           onLoadError={ServerErrorRedirectTo(InstancePaths.settings)}
           onCreate={() => {
-            route(InstancePaths.validators_new);
+            route(InstancePaths.otp_devices_new);
           }}
           onSelect={(id: string) => {
-            route(InstancePaths.validators_update.replace(":vid", id));
+            route(InstancePaths.otp_devices_update.replace(":vid", id));
           }}
         />
         <Route
-          path={InstancePaths.validators_update}
+          path={InstancePaths.otp_devices_update}
           component={ValidatorUpdatePage}
           onConfirm={() => {
-            route(InstancePaths.validators_list);
+            route(InstancePaths.otp_devices_list);
           }}
           onUnauthorized={LoginPageAccessDenied}
-          onLoadError={ServerErrorRedirectTo(InstancePaths.validators_list)}
+          onLoadError={ServerErrorRedirectTo(InstancePaths.otp_devices_list)}
           onNotFound={IfAdminCreateDefaultOr(NotFoundPage)}
           onBack={() => {
-            route(InstancePaths.validators_list);
+            route(InstancePaths.otp_devices_list);
           }}
         />
         <Route
-          path={InstancePaths.validators_new}
+          path={InstancePaths.otp_devices_new}
           component={ValidatorCreatePage}
           onConfirm={() => {
-            route(InstancePaths.validators_list);
+            route(InstancePaths.otp_devices_list);
           }}
           onBack={() => {
-            route(InstancePaths.validators_list);
+            route(InstancePaths.otp_devices_list);
           }}
         />
         {/**
@@ -667,7 +667,7 @@ export function InstanceRoutes({
           }}
         />
         <Route path={InstancePaths.kyc} component={ListKYCPage} />
-        <Route path={InstancePaths.settings} component={Settings} />
+        <Route path={InstancePaths.interface} component={Settings} />
         {/**
          * Example pages
          */}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index 5cd69a0b3..0362310b9 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -306,8 +306,9 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
-              label={i18n.str`Account`}
-              tooltip={i18n.str`Bank Account Number.`}
+              label={i18n.str`IBAN`}
+              tooltip={i18n.str`International Bank Account Number.`}
+              placeholder="DE1231231231"
               inputExtra={{ style: { textTransform: "uppercase" } }}
             />
           </Fragment>
@@ -371,8 +372,8 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input
               name="params.receiver-name"
-              label={i18n.str`Name`}
-              tooltip={i18n.str`Bank account owner's name.`}
+              label={i18n.str`Owner's name`}
+              tooltip={i18n.str`Legal name of the person holding the account.`}
             />
           </Fragment>
         )}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
index d7b490a5d..e9fd88770 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
@@ -26,6 +26,7 @@ export interface Props<T> extends InputProps<T> {
   inputType?: "text" | "number" | "password";
   addonBefore?: ComponentChildren;
   addonAfter?: ComponentChildren;
+  addonAfterAction?: () => void;
   toStr?: (v?: any) => string;
   fromStr?: (s: string) => any;
   inputExtra?: any;
@@ -50,6 +51,7 @@ export function InputWithAddon<T>({
   inputExtra,
   side,
   addonAfter,
+  addonAfterAction,
   toStr = defaultToString,
   fromStr = defaultFromString,
 }: Props<keyof T>): VNode {
@@ -76,9 +78,8 @@ export function InputWithAddon<T>({
               </div>
             )}
             <p
-              class={`control${expand ? " is-expanded" : ""}${
-                required ? " has-icons-right" : ""
-              }`}
+              class={`control${expand ? " is-expanded" : ""}${required ? " has-icons-right" : ""
+                }`}
             >
               <input
                 {...(inputExtra || {})}
@@ -99,7 +100,7 @@ export function InputWithAddon<T>({
               {children}
             </p>
             {addonAfter && (
-              <div class="control">
+              <div class="control" onClick={addonAfterAction} style={{ cursor: addonAfterAction ? "pointer" : undefined }}>
                 <a class="button is-static">{addonAfter}</a>
               </div>
             )}
@@ -109,7 +110,7 @@ export function InputWithAddon<T>({
         </div>
         {expand ? <div>{side}</div> : side}
       </div>
-      
+
     </div>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index d6c4ce4b2..8aac5f543 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -149,12 +149,12 @@ export function Sidebar({
                 </a>
               </li>
               <li>
-                <a href={"/validators"} class="has-icon">
+                <a href={"/otp-devices"} class="has-icon">
                   <span class="icon">
                     <i class="mdi mdi-lock" />
                   </span>
                   <span class="menu-item-label">
-                    <i18n.Translate>Validators</i18n.Translate>
+                    <i18n.Translate>OTP Devices</i18n.Translate>
                   </span>
                 </a>
               </li>
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
index 0e881d7a5..7bb7c0c00 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -50,12 +50,12 @@ function getInstanceTitle(path: string, id: string): string {
       return `${id}: New webhook`;
     case InstancePaths.webhooks_update:
       return `${id}: Update webhook`;
-    case InstancePaths.validators_list:
-      return `${id}: Validators`;
-    case InstancePaths.validators_new:
-      return `${id}: New validator`;
-    case InstancePaths.validators_update:
-      return `${id}: Update validators`;
+    case InstancePaths.otp_devices_list:
+      return `${id}: otp devices`;
+    case InstancePaths.otp_devices_new:
+      return `${id}: New otp devices`;
+    case InstancePaths.otp_devices_update:
+      return `${id}: Update otp devices`;
     case InstancePaths.templates_new:
       return `${id}: New template`;
     case InstancePaths.templates_update:
diff --git a/packages/merchant-backoffice-ui/src/hooks/otp.ts b/packages/merchant-backoffice-ui/src/hooks/otp.ts
index 93eefeea5..b045e365a 100644
--- a/packages/merchant-backoffice-ui/src/hooks/otp.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/otp.ts
@@ -158,7 +158,7 @@ export function useInstanceOtpDevices(
   // if the query returns less that we ask, then we have reach the end or beginning
   const isReachingEnd =
     afterData && afterData.data.otp_devices.length < totalAfter;
-  const isReachingStart = false;
+  const isReachingStart = true;
 
   const pagination = {
     isReachingEnd,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
index 9788ce0ec..100241e22 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
@@ -43,7 +43,7 @@ interface Props {
   onSelect: (id: string) => void;
 }
 
-export default function ListValidators({
+export default function ListOtpDevices({
   onUnauthorized,
   onLoadError,
   onCreate,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx
index fcb77b820..d6b1d65e0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx
@@ -23,7 +23,7 @@ import { h, VNode, FunctionalComponent } from "preact";
 import { UpdatePage as TestedComponent } from "./UpdatePage.js";
 
 export default {
-  title: "Pages/Validators/Update",
+  title: "Pages/OtpDevices/Update",
   component: TestedComponent,
   argTypes: {
     onUpdate: { action: "onUpdate" },
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
index 1cfbec29b..5ff76e37a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -503,13 +503,15 @@ function PaidPage({
                           textOverflow: "ellipsis",
                         }}
                       >
-                        <p>
-                          <i18n.Translate>Next event in </i18n.Translate> {formatDistance(
-                            nextEvent!.when,
-                            new Date(),
-                            // "yyyy/MM/dd HH:mm:ss",
-                          )}
-                        </p>
+                        {nextEvent &&
+                          <p>
+                            <i18n.Translate>Next event in </i18n.Translate> {formatDistance(
+                              nextEvent.when,
+                              new Date(),
+                              // "yyyy/MM/dd HH:mm:ss",
+                            )}
+                          </p>
+                        }
                       </div>
                     </div>
                   </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx
index 56762db7b..26f851cc8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/Create.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx
@@ -23,6 +23,6 @@ import { h, VNode, FunctionalComponent } from "preact";
 import { CreatePage as TestedComponent } from "./CreatePage.js";
 
 export default {
-  title: "Pages/Validators/Create",
+  title: "Pages/OtpDevices/Create",
   component: TestedComponent,
 };
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
index 4e813d777..5f1ae26a3 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
@@ -70,7 +70,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
         : state.otp_key.length !== 32
           ? i18n.str`size of the key should be 32`
           : undefined,
-          otp_device_description: !state.otp_device_description ? i18n.str`required`
+    otp_device_description: !state.otp_device_description ? i18n.str`required`
       : !/[a-zA-Z0-9]*/.test(state.otp_device_description)
         ? i18n.str`no valid. only characters and numbers`
         : undefined,
@@ -125,8 +125,11 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                     help="Be sure to be very hard to guess or use the random generator"
                     tooltip={i18n.str`Your device need to have exactly the same value`}
                     fromStr={(v) => v.toUpperCase()}
+                    addonAfterAction={() => {
+                      setShowKey(!showKey);
+                    }}
                     addonAfter={
-                      <span class="icon">
+                      <span class="icon" >
                         {showKey ? (
                           <i class="mdi mdi-eye" />
                         ) : (
@@ -135,34 +138,15 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                       </span>
                     }
                     side={
-                      <span style={{ display: "flex" }}>
-                        <button
-                          data-tooltip={i18n.str`generate random secret key`}
-                          class="button is-info mr-3"
-                          onClick={(e) => {
-                            setState((s) => ({ ...s, otp_key: randomBase32Key() }));
-                          }}
-                        >
-                          <i18n.Translate>random</i18n.Translate>
-                        </button>
-                        <button
-                          data-tooltip={
-                            showKey
-                              ? i18n.str`show secret key`
-                              : i18n.str`hide secret key`
-                          }
-                          class="button is-info mr-3"
-                          onClick={(e) => {
-                            setShowKey(!showKey);
-                          }}
-                        >
-                          {showKey ? (
-                            <i18n.Translate>hide</i18n.Translate>
-                          ) : (
-                            <i18n.Translate>show</i18n.Translate>
-                          )}
-                        </button>
-                      </span>
+                      <button
+                        data-tooltip={i18n.str`generate random secret key`}
+                        class="button is-info mr-3"
+                        onClick={(e) => {
+                          setState((s) => ({ ...s, otp_key: randomBase32Key() }));
+                        }}
+                      >
+                        <i18n.Translate>random</i18n.Translate>
+                      </button>
                     }
                   />
                 </Fragment>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
index db3842711..db3842711 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx
index 648846793..648846793 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx
index 3aa491c53..b18049674 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/List.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx
@@ -23,6 +23,6 @@ import { FunctionalComponent, h } from "preact";
 import { ListPage as TestedComponent } from "./ListPage.js";
 
 export default {
-  title: "Pages/Validators/List",
+  title: "Pages/OtpDevices/List",
   component: TestedComponent,
 };
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx
index 4efee9781..4efee9781 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx
index 0c28027fe..0c28027fe 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx
index 8837c848b..2aae8738a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx
@@ -42,7 +42,7 @@ interface Props {
   onSelect: (id: string) => void;
 }
 
-export default function ListValidators({
+export default function ListOtpDevices({
   onUnauthorized,
   onLoadError,
   onCreate,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx
index fcb77b820..d6b1d65e0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/Update.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx
@@ -23,7 +23,7 @@ import { h, VNode, FunctionalComponent } from "preact";
 import { UpdatePage as TestedComponent } from "./UpdatePage.js";
 
 export default {
-  title: "Pages/Validators/Update",
+  title: "Pages/OtpDevices/Update",
   component: TestedComponent,
   argTypes: {
     onUpdate: { action: "onUpdate" },
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
index 79be9802f..1164aed5a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
@@ -109,8 +109,13 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                       help={state.otp_key === undefined ? "Not modified" : "Be sure to be very hard to guess or use the random generator"}
                       tooltip={i18n.str`Your device need to have exactly the same value`}
                       fromStr={(v) => v.toUpperCase()}
+                      addonAfterAction={() => {
+                        setShowKey(!showKey);
+                      }}
                       addonAfter={
-                        <span class="icon">
+                        <span class="icon" onClick={() => {
+                          setShowKey(!showKey);
+                        }}>
                           {showKey ? (
                             <i class="mdi mdi-eye" />
                           ) : (
@@ -125,34 +130,15 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                             setState((s) => ({ ...s, otp_key: "" }));
                           }}
                           class="button">change key</button> :
-                          <span style={{ display: "flex" }}>
-                            <button
-                              data-tooltip={i18n.str`generate random secret key`}
-                              class="button is-info mr-3"
-                              onClick={(e) => {
-                                setState((s) => ({ ...s, otp_key: randomBase32Key() }));
-                              }}
-                            >
-                              <i18n.Translate>random</i18n.Translate>
-                            </button>
-                            <button
-                              data-tooltip={
-                                showKey
-                                  ? i18n.str`show secret key`
-                                  : i18n.str`hide secret key`
-                              }
-                              class="button is-info mr-3"
-                              onClick={(e) => {
-                                setShowKey(!showKey);
-                              }}
-                            >
-                              {showKey ? (
-                                <i18n.Translate>hide</i18n.Translate>
-                              ) : (
-                                <i18n.Translate>show</i18n.Translate>
-                              )}
-                            </button>
-                          </span>
+                          <button
+                            data-tooltip={i18n.str`generate random secret key`}
+                            class="button is-info mr-3"
+                            onClick={(e) => {
+                              setState((s) => ({ ...s, otp_key: randomBase32Key() }));
+                            }}
+                          >
+                            <i18n.Translate>random</i18n.Translate>
+                          </button>
                       }
                     />
                   </Fragment>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx
index 52f6c6c29..52f6c6c29 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx