merge ui props and state

26 files changed, 103 insertions, 103 deletions

diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx
index 2d75de660..a38391efb 100644
--- a/packages/aml-backoffice-ui/src/Dashboard.tsx
+++ b/packages/aml-backoffice-ui/src/Dashboard.tsx
@@ -84,6 +84,9 @@ const versionText = VERSION
  * also fundations
  * also life insurance
  * 
+ * no all state are handled by all the inputs
+ * all the input implementation should respect
+ * ui props and state 
  */
 
 export function ExchangeAmlFrame({
diff --git a/packages/aml-backoffice-ui/src/forms/902_11e.ts b/packages/aml-backoffice-ui/src/forms/902_11e.ts
index a604b560e..7ed3ea42b 100644
--- a/packages/aml-backoffice-ui/src/forms/902_11e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_11e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js";
 import { Simplest, resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title:
@@ -49,8 +48,8 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({
         {
           type: "array",
           props: {
-            name: "businessEstablisher",
-            label: "Persons" as TranslatedString,
+            name: "people",
+            label: "People" as TranslatedString,
             required: true,
             placeholder: "this is the placeholder" as TranslatedString,
             fields: [
@@ -111,13 +110,12 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({
     v: Partial<Form902_11.Form>,
   ): FormState<Form902_11.Form> {
     return {
-      person: {
-        hidden:
-          v.declares !== "controlling-in-other-ways" &&
+      people: {
+        hidden: v.declares !== "controlling-in-other-ways" &&
           v.declares !== "managing-director",
-      },
+      }
     };
-  },
+  }
 });
 
 namespace Form902_11 {
@@ -129,7 +127,7 @@ namespace Form902_11 {
   export interface Form extends BaseForm {
     contractingPartner: string;
     declares: "25-or-more" | "controlling-in-other-ways" | "managing-director";
-    person: Person[];
+    people: Person[];
     fiduciaryAssets: "no" | "yes";
     signature: string;
   }
diff --git a/packages/aml-backoffice-ui/src/forms/902_12e.ts b/packages/aml-backoffice-ui/src/forms/902_12e.ts
index 12e885e8f..3cfe69f88 100644
--- a/packages/aml-backoffice-ui/src/forms/902_12e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_12e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_12.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title: "Foundations" as TranslatedString,
diff --git a/packages/aml-backoffice-ui/src/forms/902_13e.ts b/packages/aml-backoffice-ui/src/forms/902_13e.ts
index f03364de0..045246fc6 100644
--- a/packages/aml-backoffice-ui/src/forms/902_13e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_13e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_13.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title: "Declaration for trusts" as TranslatedString,
diff --git a/packages/aml-backoffice-ui/src/forms/902_15e.ts b/packages/aml-backoffice-ui/src/forms/902_15e.ts
index b9796add8..0d90d82ee 100644
--- a/packages/aml-backoffice-ui/src/forms/902_15e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_15e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js";
 import { Simplest, resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_15.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title:
@@ -156,8 +155,7 @@ export const v1 = (current: BaseForm): FlexibleForm<Form902_15.Form> => ({
   behavior: function formBehavior(
     v: Partial<Form902_15.Form>,
   ): FormState<Form902_15.Form> {
-    return {
-    };
+    return {};
   },
 });
 
diff --git a/packages/aml-backoffice-ui/src/forms/902_1e.ts b/packages/aml-backoffice-ui/src/forms/902_1e.ts
index 2cd16b840..7fcabe829 100644
--- a/packages/aml-backoffice-ui/src/forms/902_1e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_1e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm, languageList } from "./index.js";
 import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_1.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title: "Information on customer" as TranslatedString,
diff --git a/packages/aml-backoffice-ui/src/forms/902_4e.ts b/packages/aml-backoffice-ui/src/forms/902_4e.ts
index 041f08c98..6f82302f3 100644
--- a/packages/aml-backoffice-ui/src/forms/902_4e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_4e.ts
@@ -7,7 +7,6 @@ import { Simplest, resolutionSection } from "./simplest.js";
 import { ArrowRightIcon, ChevronRightIcon } from "../pages/Cases.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_4.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title: "Risk Profile AMLA" as TranslatedString,
diff --git a/packages/aml-backoffice-ui/src/forms/902_5e.ts b/packages/aml-backoffice-ui/src/forms/902_5e.ts
index c3948e1c7..d695c94b4 100644
--- a/packages/aml-backoffice-ui/src/forms/902_5e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_5e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm, currencyList } from "./index.js";
 import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_5.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title: "Customer Profile" as TranslatedString,
diff --git a/packages/aml-backoffice-ui/src/forms/902_9e.ts b/packages/aml-backoffice-ui/src/forms/902_9e.ts
index a5753d5d0..e52531bcb 100644
--- a/packages/aml-backoffice-ui/src/forms/902_9e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_9e.ts
@@ -5,7 +5,6 @@ import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_9.Form> => ({
-  versionId: "2023-05-15",
   design: [
     {
       title:
diff --git a/packages/aml-backoffice-ui/src/forms/index.ts b/packages/aml-backoffice-ui/src/forms/index.ts
index c236bbaa3..8feef0c49 100644
--- a/packages/aml-backoffice-ui/src/forms/index.ts
+++ b/packages/aml-backoffice-ui/src/forms/index.ts
@@ -3,7 +3,6 @@ import { FormState } from "../handlers/FormProvider.js";
 import { DoubleColumnForm } from "../handlers/forms.js";
 
 export interface FlexibleForm<T extends object> {
-  versionId: string;
   design: DoubleColumnForm;
   behavior: (form: Partial<T>) => FormState<T>;
 }
diff --git a/packages/aml-backoffice-ui/src/forms/simplest.ts b/packages/aml-backoffice-ui/src/forms/simplest.ts
index 9b462e1c5..5acb58201 100644
--- a/packages/aml-backoffice-ui/src/forms/simplest.ts
+++ b/packages/aml-backoffice-ui/src/forms/simplest.ts
@@ -13,7 +13,6 @@ import { FlexibleForm } from "./index.js";
 import { amlStateConverter } from "../pages/ShowConsolidated.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({
-  versionId: "2023-05-25",
   design: [
     {
       title: "Simple form" as TranslatedString,
@@ -33,6 +32,9 @@ export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({
     v: Partial<Simplest.Form>,
   ): FormState<Simplest.Form> {
     return {
+      comment: {
+        help: ((v.comment?.length ?? 0) > 10 ? "too long" : "") as TranslatedString
+      },
       threshold: {
         disabled: v.state === AmlExchangeBackend.AmlState.frozen,
       },
diff --git a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx b/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx
index 310954bd0..2d9eec164 100644
--- a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx
@@ -10,7 +10,7 @@ import {
   useState
 } from "preact/hooks";
 
-export interface FormType<T> {
+export interface FormType<T extends object> {
   value: MutableRef<Partial<T>>;
   initialValue?: Partial<T>;
   readOnly?: boolean;
@@ -21,18 +21,20 @@ export interface FormType<T> {
 //@ts-ignore
 export const FormContext = createContext<FormType<any>>({});
 
-export type FormState<T> = {
+export type FormState<T extends object> = {
   [field in keyof T]?: T[field] extends AbsoluteTime
-  ? Partial<InputFieldState>
+  ? BehaviorResult
   : T[field] extends AmountJson
-  ? Partial<InputFieldState>
-  : T[field] extends Array<infer P>
-  ? Partial<InputArrayFieldState<P>>
+  ? BehaviorResult
+  : T[field] extends Array<infer P extends object>
+  ? InputArrayFieldState<P>
   : T[field] extends (object | undefined)
   ? FormState<T[field]>
-  : Partial<InputFieldState>;
+  : BehaviorResult;
 };
 
+export type BehaviorResult = Partial<InputFieldState> & FieldUIOptions
+
 export interface InputFieldState {
   /* should show the error */
   error?: TranslatedString;
@@ -44,11 +46,46 @@ export interface InputFieldState {
   hidden: boolean;
 }
 
-export interface InputArrayFieldState<T> extends InputFieldState {
-  elements: FormState<T>[];
+export interface IconAddon {
+  type: "icon";
+  icon: VNode;
+}
+export interface ButtonAddon {
+  type: "button";
+  onClick: () => void;
+  children: ComponentChildren;
+}
+export interface TextAddon {
+  type: "text";
+  text: TranslatedString;
 }
+export type Addon = IconAddon | ButtonAddon | TextAddon;
 
-export function FormProvider<T>({
+export interface StringConverter<T> {
+  toStringUI: (v?: T) => string;
+  fromStringUI: (v?: string) => T;
+}
+
+type FieldUIOptions = {
+  placeholder?: TranslatedString;
+  tooltip?: TranslatedString;
+  help?: TranslatedString;
+  required?: boolean;
+}
+
+export interface UIFormProps<T extends object, K extends keyof T> extends FieldUIOptions {
+  name: K;
+  label: TranslatedString;
+  before?: Addon;
+  after?: Addon;
+  converter?: StringConverter<T[K]>;
+}
+
+export interface InputArrayFieldState<P extends object> extends BehaviorResult {
+  elements?: FormState<P>[];
+}
+
+export function FormProvider<T extends object>({
   children,
   initialValue,
   onUpdate: notify,
@@ -63,18 +100,10 @@ export function FormProvider<T>({
   readOnly?: boolean;
   children: ComponentChildren;
 }): VNode {
-  // const value = useRef(initialValue ?? {});
-  // useEffect(() => {
-  //   return function onUnload() {
-  //     value.current = initialValue ?? {};
-  //   };
-  // });
-  // const onUpdate = notify
+
   const [state, setState] = useState<Partial<T>>(initialValue ?? {});
   const value = { current: state };
-  // console.log("RENDER", initialValue, value);
   const onUpdate = (v: typeof state) => {
-    // console.log("updated");
     setState(v);
     if (notify) notify(v);
   };
diff --git a/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx
index b6cc78adb..29ec43525 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx
@@ -1,7 +1,8 @@
 import { AmountJson, Amounts, TranslatedString } from "@gnu-taler/taler-util";
 import { VNode, h } from "preact";
-import { InputLine, UIFormProps } from "./InputLine.js";
+import { InputLine } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputAmount<T extends object, K extends keyof T>(
   props: { currency?: string } & UIFormProps<T, K>,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputArray.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.tsx
index d229b35de..38c399e66 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputArray.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputArray.tsx
@@ -1,10 +1,10 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, VNode, h } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { FormProvider, InputArrayFieldState } from "./FormProvider.js";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { useState } from "preact/hooks";
+import { FormProvider, UIFormProps } from "./FormProvider.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
 import { useField } from "./useField.js";
-import { TranslatedString } from "@gnu-taler/taler-util";
 
 function Option({
   label,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx
index a5f263615..312e014c5 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx
@@ -1,7 +1,8 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export interface Choice<V> {
   label: TranslatedString;
diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx
index 29c596994..48d367ff2 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx
@@ -1,7 +1,8 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export interface Choice<V> {
   label: TranslatedString;
diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.tsx
index 7fcc16b33..794bfd7a2 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputDate.tsx
@@ -1,11 +1,12 @@
 import { AbsoluteTime } from "@gnu-taler/taler-util";
-import { InputLine, UIFormProps } from "./InputLine.js";
+import { InputLine } from "./InputLine.js";
 import { Fragment, VNode, h } from "preact";
 import { format, parse } from "date-fns";
 import { Dialog } from "./Dialog.js";
 import { Calendar } from "./Calendar.js";
 import { useState } from "preact/hooks";
 import { useField } from "./useField.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputDate<T extends object, K extends keyof T>(
   props: { pattern?: string } & UIFormProps<T, K>,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
index d9af03f86..bc460f370 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
@@ -1,6 +1,7 @@
 import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { UIFormProps, BehaviorResult } from "./FormProvider.js";
 
 export function InputFile<T extends object, K extends keyof T>(
   props: { maxBites: number; accept?: string } & UIFormProps<T, K>,
@@ -11,12 +12,12 @@ export function InputFile<T extends object, K extends keyof T>(
     placeholder,
     tooltip,
     required,
-    help,
+    help: propsHelp,
     maxBites,
     accept,
   } = props;
   const { value, onChange, state } = useField<T, K>(name);
-
+  const help = propsHelp ?? state.help
   if (state.hidden) {
     return <div />;
   }
diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx
index fb04e3852..a6a02ad43 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx
@@ -1,5 +1,6 @@
 import { VNode, h } from "preact";
-import { InputLine, UIFormProps } from "./InputLine.js";
+import { InputLine } from "./InputLine.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputInteger<T extends object, K extends keyof T>(
   props: UIFormProps<T, K>,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
index f6c709d94..890bb54cb 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
@@ -2,42 +2,7 @@ import { TranslatedString } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useField } from "./useField.js";
 import { useEffect, useState } from "preact/hooks";
-
-export interface IconAddon {
-  type: "icon";
-  icon: VNode;
-}
-interface ButtonAddon {
-  type: "button";
-  onClick: () => void;
-  children: ComponentChildren;
-}
-interface TextAddon {
-  type: "text";
-  text: TranslatedString;
-}
-type Addon = IconAddon | ButtonAddon | TextAddon;
-
-interface StringConverter<T> {
-  toStringUI: (v?: T) => string;
-  fromStringUI: (v?: string) => T;
-}
-
-export interface UIFormProps<T extends object, K extends keyof T> {
-  name: K;
-  label: TranslatedString;
-  placeholder?: TranslatedString;
-  tooltip?: TranslatedString;
-  help?: TranslatedString;
-  before?: Addon;
-  after?: Addon;
-  required?: boolean;
-  converter?: StringConverter<T[K]>;
-}
-
-export type FormErrors<T> = {
-  [P in keyof T]?: string | FormErrors<T[P]>;
-};
+import { UIFormProps } from "./FormProvider.js";
 
 //@ts-ignore
 const TooltipIcon = (
@@ -201,10 +166,7 @@ export function InputLine<T extends object, K extends keyof T>(
   useEffect(() => {
     const newValue = toString(value)
     if (newValue) {
-
       setText(newValue)
-    } else {
-      console.log("invalid")
     }
   }, [value])
 
@@ -257,7 +219,8 @@ export function InputLine<T extends object, K extends keyof T>(
     return (
       <InputWrapper<T, K>
         {...props}
-        disabled={state.disabled}
+        help={props.help ?? state.help}
+        disabled={state.disabled ?? false}
         error={showError ? state.error : undefined}
       >
         <textarea
@@ -279,7 +242,10 @@ export function InputLine<T extends object, K extends keyof T>(
   }
 
   return (
-    <InputWrapper<T, K> {...props} disabled={state.disabled} error={showError ? state.error : undefined}>
+    <InputWrapper<T, K> {...props}
+      help={props.help ?? state.help}
+      disabled={state.disabled ?? false} error={showError ? state.error : undefined}
+    >
       <input
         name={String(name)}
         type={type}
diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx
index 6e6186a88..06eb91bb3 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx
@@ -1,8 +1,9 @@
 import { Fragment, VNode, h } from "preact";
 import { Choice } from "./InputChoiceStacked.js";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
 import { useState } from "preact/hooks";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputSelectMultiple<T extends object, K extends keyof T>(
   props: {
diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx
index b0e2277d3..98430306e 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx
@@ -1,8 +1,9 @@
 import { Fragment, VNode, h } from "preact";
 import { Choice } from "./InputChoiceStacked.js";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
 import { useState } from "preact/hooks";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputSelectOne<T extends object, K extends keyof T>(
   props: {
@@ -22,8 +23,8 @@ export function InputSelectOne<T extends object, K extends keyof T>(
     filter === undefined
       ? undefined
       : choices.filter((v) => {
-          return regex.test(v.label);
-        });
+        return regex.test(v.label);
+      });
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -104,7 +105,7 @@ export function InputSelectOne<T extends object, K extends keyof T>(
                       onChange(v.value as T[K]);
                     }}
 
-                    // tabindex="-1"
+                  // tabindex="-1"
                   >
                     {/* <!-- Selected: "font-semibold" --> */}
                     <span class="block truncate">{v.label}</span>
diff --git a/packages/aml-backoffice-ui/src/handlers/InputText.tsx b/packages/aml-backoffice-ui/src/handlers/InputText.tsx
index 1b37ee6fb..7ad36b737 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputText.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputText.tsx
@@ -1,5 +1,6 @@
 import { VNode, h } from "preact";
-import { InputLine, UIFormProps } from "./InputLine.js";
+import { InputLine } from "./InputLine.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputText<T extends object, K extends keyof T>(
   props: UIFormProps<T, K>,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx b/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx
index 45229951e..6b76d8329 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx
@@ -1,5 +1,6 @@
 import { VNode, h } from "preact";
-import { InputLine, UIFormProps } from "./InputLine.js";
+import { InputLine } from "./InputLine.js";
+import { UIFormProps } from "./FormProvider.js";
 
 export function InputTextArea<T extends object, K extends keyof T>(
   props: UIFormProps<T, K>,
diff --git a/packages/aml-backoffice-ui/src/handlers/useField.ts b/packages/aml-backoffice-ui/src/handlers/useField.ts
index 7eec5c5f8..651778628 100644
--- a/packages/aml-backoffice-ui/src/handlers/useField.ts
+++ b/packages/aml-backoffice-ui/src/handlers/useField.ts
@@ -1,10 +1,10 @@
 import { useContext, useState } from "preact/compat";
-import { FormContext, InputFieldState } from "./FormProvider.js";
+import { BehaviorResult, FormContext, InputFieldState } from "./FormProvider.js";
 
 export interface InputFieldHandler<Type> {
   value: Type;
   onChange: (s: Type) => void;
-  state: InputFieldState;
+  state: BehaviorResult;
   isDirty: boolean;
 }
 
@@ -27,7 +27,7 @@ export function useField<T extends object, K extends keyof T>(
   // console.log("USE FIELD", String(name), formValue.current, fieldValue);
   const [currentValue, setCurrentValue] = useState<any | undefined>(fieldValue);
   const fieldState =
-    readField<Partial<InputFieldState>>(formState, String(name)) ?? {};
+    readField<Partial<BehaviorResult>>(formState, String(name)) ?? {};
 
   //compute default state
   const state = {
@@ -35,6 +35,7 @@ export function useField<T extends object, K extends keyof T>(
     readonly: readOnlyForm ? true : (fieldState.readonly ?? false),
     hidden: fieldState.hidden ?? false,
     error: fieldState.error,
+    help: fieldState.help,
     elements: "elements" in fieldState ? fieldState.elements ?? [] : [],
   };
 
diff --git a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
index 214c17648..d53ac27c1 100644
--- a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
+++ b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
@@ -82,7 +82,7 @@ export function NewFormEntry({
 function SelectForm({ account }: { account: string }) {
   return (
     <div>
-      <pre>New form for account: {account}</pre>
+      <pre>New form for account: {account.substring(0, 16)}...</pre>
       {allForms.map((form, idx) => {
         return (
           <a