14 files changed, 44 insertions, 72 deletions
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