taler-typescript-core

commit fead394c8b8fe65cb02ad0f8fc6d867c8391148e
parent 3c86919f17b715e22ade34a040e26932beccf8f9
Author: Sebastian <sebasjm@gmail.com>
Date:   Mon, 24 Nov 2025 10:27:25 -0300

fix #10536

Diffstat:
M
packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx
 | 
7
++++++-
M
packages/merchant-backoffice-ui/src/paths/newAccount/index.tsx
 | 
21
+++++++++++++++++++++

2 files changed, 27 insertions(+), 1 deletion(-)
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx
@@ -47,7 +47,7 @@ export function InputToggle<T>({
   fromBoolean = defaultFromBoolean,
   toBoolean = defaultToBoolean,
 }: Props<keyof T>): VNode {
-  const { error, value, onChange } = useField<T>(name);
+  const { error, value, onChange, required } = useField<T>(name);
 
   const onCheckboxClick = (): void => {
     const c = toBoolean(value);
@@ -95,6 +95,11 @@ export function InputToggle<T>({
                 style={{ cursor: readonly ? "default" : undefined }}
               ></div>
             </label>
+            {required && (
+              <span class="icon has-text-danger is-right">
+                <i class="mdi mdi-alert" />
+              </span>
+            )}
             <p>{help}</p>
           </p>
           {error && (
diff --git a/packages/merchant-backoffice-ui/src/paths/newAccount/index.tsx b/packages/merchant-backoffice-ui/src/paths/newAccount/index.tsx
@@ -45,6 +45,7 @@ import {
   PHONE_JUST_NUMBERS_REGEX,
 } from "../../utils/constants.js";
 import { Notification } from "../../utils/types.js";
+import { InputToggle } from "../../components/form/InputToggle.js";
 
 export interface Account {
   id: string;
@@ -53,6 +54,7 @@ export interface Account {
   repeat: string;
   email: string;
   phone: string;
+  tos: boolean;
 }
 
 const twoHours = Duration.fromSpec({ hours: 2 });
@@ -102,6 +104,7 @@ export function NewAccount({ onCancel, onCreated }: Props): VNode {
           : !PHONE_JUST_NUMBERS_REGEX.test(value.phone)
             ? i18n.str`A phone number consists of numbers only`
             : undefined,
+    tos: !value.tos ? i18n.str`Required` : undefined,
   });
 
   function valueHandler(s: (d: Partial<Account>) => Partial<Account>): void {
@@ -113,6 +116,7 @@ export function NewAccount({ onCancel, onCreated }: Props): VNode {
       repeat: next.repeat ?? "",
       email: next.email ?? "",
       phone: next.phone ?? "",
+      tos: next.tos ?? false,
     };
     setValue(v);
   }
@@ -235,6 +239,23 @@ export function NewAccount({ onCancel, onCreated }: Props): VNode {
                     name="phone"
                   />
                 ) : undefined}
+                <InputToggle
+                  label={i18n.str`I agree`}
+                  name="tos"
+                  help={
+                    <i18n.Translate>
+                      Accept the{" "}
+                      <a
+                        href="/terms"
+                        target="_blank"
+                        referrerpolicy="no-referrer"
+                      >
+                        <i18n.Translate>terms of service</i18n.Translate>
+                      </a>
+                    </i18n.Translate>
+                  }
+                  tooltip={i18n.str`You must accept the terms of service to continue.`}
+                />
               </FormProvider>
             </section>
             <footer