From f4f798b1b4bae3073b669a562fd2b3a7880dffc3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 15 May 2023 11:45:23 -0300 Subject: second form --- packages/exchange-backoffice-ui/src/Dashborad.tsx | 80 +- packages/exchange-backoffice-ui/src/NiceForm.tsx | 806 +-------------------- .../exchange-backoffice-ui/src/forms/902_11e.ts | 147 ++++ .../exchange-backoffice-ui/src/forms/902_1e.ts | 686 ++++++++++++++++++ .../src/forms/FormProvider.tsx | 53 -- .../src/forms/InputArray.tsx | 179 ----- .../src/forms/InputChoice.tsx | 119 --- .../exchange-backoffice-ui/src/forms/InputDate.tsx | 35 - .../exchange-backoffice-ui/src/forms/InputFile.tsx | 99 --- .../src/forms/InputInteger.tsx | 19 - .../exchange-backoffice-ui/src/forms/InputLine.tsx | 273 ------- .../src/forms/InputSelectMultiple.tsx | 147 ---- .../exchange-backoffice-ui/src/forms/InputText.tsx | 6 - .../src/forms/InputTextArea.tsx | 6 - packages/exchange-backoffice-ui/src/forms/forms.ts | 91 --- packages/exchange-backoffice-ui/src/forms/index.ts | 120 +++ .../exchange-backoffice-ui/src/forms/useField.ts | 77 -- .../src/handlers/FormProvider.tsx | 59 ++ .../src/handlers/InputArray.tsx | 179 +++++ .../src/handlers/InputChoice.tsx | 93 +++ .../src/handlers/InputDate.tsx | 35 + .../src/handlers/InputFile.tsx | 102 +++ .../src/handlers/InputInteger.tsx | 19 + .../src/handlers/InputLine.tsx | 273 +++++++ .../src/handlers/InputSelectMultiple.tsx | 147 ++++ .../src/handlers/InputText.tsx | 6 + .../src/handlers/InputTextArea.tsx | 6 + .../exchange-backoffice-ui/src/handlers/forms.ts | 93 +++ .../src/handlers/useField.ts | 80 ++ 29 files changed, 2117 insertions(+), 1918 deletions(-) create mode 100644 packages/exchange-backoffice-ui/src/forms/902_11e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_1e.ts delete mode 100644 packages/exchange-backoffice-ui/src/forms/FormProvider.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputArray.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputChoice.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputDate.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputFile.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputInteger.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputLine.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputSelectMultiple.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputText.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/InputTextArea.tsx delete mode 100644 packages/exchange-backoffice-ui/src/forms/forms.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/index.ts delete mode 100644 packages/exchange-backoffice-ui/src/forms/useField.ts create mode 100644 packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputArray.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputDate.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputFile.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputInteger.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputLine.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputText.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputTextArea.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/forms.ts create mode 100644 packages/exchange-backoffice-ui/src/handlers/useField.ts (limited to 'packages/exchange-backoffice-ui/src') diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx index a8bac8ece..3ad2b7745 100644 --- a/packages/exchange-backoffice-ui/src/Dashborad.tsx +++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx @@ -16,16 +16,22 @@ import { ChevronDownIcon, MagnifyingGlassIcon, } from "@heroicons/react/20/solid"; -import { useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { NiceForm } from "./NiceForm.js"; +import { v1 as form_902_1e_v1 } from "./forms/902_1e.js"; +import { v1 as form_902_11e_v1 } from "./forms/902_11e.js"; const navigation = [ - { name: "Dashboard", href: "#", icon: HomeIcon, current: true }, - { name: "Team", href: "#", icon: UsersIcon, current: false }, - { name: "Projects", href: "#", icon: FolderIcon, current: false }, - { name: "Calendar", href: "#", icon: CalendarIcon, current: false }, - { name: "Documents", href: "#", icon: DocumentDuplicateIcon, current: false }, - { name: "Reports", href: "#", icon: ChartPieIcon, current: false }, + { + name: "Identification form (902.1e)", + icon: DocumentDuplicateIcon, + impl: form_902_1e_v1, + }, + { + name: "Operational legal entity or partnership (902.11e)", + icon: DocumentDuplicateIcon, + impl: form_902_11e_v1, + }, ]; const teams = [ { id: 1, name: "Heroicons", href: "#", initial: "H", current: false }, @@ -69,8 +75,24 @@ export function Dashboard({ children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); + const [selectedForm, setSelectedForm] = useState(1); const logRef = useRef(null); + const storedValue = { + when: { + t_ms: new Date().getTime(), + }, + }; + function showFormOnSidebar(v: any) { + if (!logRef.current) return; + logRef.current.innerHTML = JSON.stringify(v, undefined, 1); + } + useEffect(() => { + // initial render + showFormOnSidebar(storedValue); + }); + const showingFrom = navigation[selectedForm]; + console.log(showingFrom); return ( <>
@@ -139,12 +161,15 @@ export function Dashboard({
-
- 

-            

             
+            

+              

+            

           
         
 
@@ -403,10 +428,9 @@ export function Dashboard({
             

               

                  {
-                    if (!logRef.current) return;
-                    logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
-                  }}
+                  initial={storedValue}
+                  form={showingFrom.impl as any}
+                  onUpdate={showFormOnSidebar}
                 />
               

             

diff --git a/packages/exchange-backoffice-ui/src/NiceForm.tsx b/packages/exchange-backoffice-ui/src/NiceForm.tsx
index 1e096eddb..64f8aceea 100644
--- a/packages/exchange-backoffice-ui/src/NiceForm.tsx
+++ b/packages/exchange-backoffice-ui/src/NiceForm.tsx
@@ -1,798 +1,29 @@
-import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h } from "preact";
-import { useRef, useState } from "preact/hooks";
-import { FormProvider, FormState } from "./forms/FormProvider.js";
-import { DoubleColumnForm, RenderAllFieldsByUiConfig } from "./forms/forms.js";
-import { CircleStackIcon } from "@heroicons/react/24/outline";
-
-namespace Form902_1e {
-  interface LegalEntityCustomer {
-    companyName: string;
-    domicile: string;
-    contactPerson: string;
-    telephone: string;
-    email: string;
-    document: string;
-    documentAttachment: string;
-  }
-  interface NaturalCustomer {
-    fullName: string;
-    address: string;
-    telephone: string;
-    email: string;
-    dateOfBirth: AbsoluteTime;
-    nationality: string;
-    document: string;
-    documentAttachment: string;
-    companyName: string;
-    office: string;
-    companyDocument: string;
-    companyDocumentAttachment: string;
-  }
-
-  interface Person {
-    fullName: string;
-    address: string;
-    dateOfBirth: AbsoluteTime;
-    nationality: string;
-    typeOfAuthorization: string;
-    document: string;
-    documentAttachment: string;
-    powerOfAttorneyArrangements: string;
-  }
-
-  interface Acceptance {
-    when: AbsoluteTime;
-    acceptedBy: "face-to-face" | "authenticated-copy";
-    typeOfCorrespondence: string;
-    language: string[];
-    furtherInformation: string;
-    thirdPartyFullName: string;
-    thirdPartyAddress: string;
-  }
-
-  interface Filler {
-    fullName: string;
-    when: AbsoluteTime;
-  }
-
-  interface BeneficialOwner {
-    establishment:
-      | "natural-person"
-      | "foundation"
-      | "trust"
-      | "insurance-wrapper"
-      | "other";
-  }
-
-  interface CashTransactions {
-    typeOfBusiness: "money-exchange" | "money-and-asset-transfer" | "other";
-    otherTypeOfBusiness: string;
-    purpose: string;
-  }
-
-  export interface Form {
-    filler: Filler;
-    customerType: "natural" | "legal";
-    naturalCustomer: NaturalCustomer;
-    legalCustomer: LegalEntityCustomer;
-    businessEstablisher: Array;
-    acceptance: Acceptance;
-    beneficialOwner: BeneficialOwner;
-    embargoEvaluation: string;
-    cashTransactions: CashTransactions;
-    // enclosures: Enclosures;
-  }
-}
-
-const languageList = [
-  {
-    label: "Mandarin Chinese" as TranslatedString,
-    value: "cmn",
-  },
-  {
-    label: "Spanish" as TranslatedString,
-    value: "spa",
-  },
-  {
-    label: "English" as TranslatedString,
-    value: "eng",
-  },
-  {
-    label: "Hindi" as TranslatedString,
-    value: "hin",
-  },
-  {
-    label: "Portuguese" as TranslatedString,
-    value: "por",
-  },
-  {
-    label: "Bengali" as TranslatedString,
-    value: "ben",
-  },
-  {
-    label: "Russian" as TranslatedString,
-    value: "rus",
-  },
-  {
-    label: "Japanese" as TranslatedString,
-    value: "jpn",
-  },
-  {
-    label: "Yue" as TranslatedString,
-    value: "yue",
-  },
-  {
-    label: "Vietnamese" as TranslatedString,
-    value: "vie",
-  },
-  {
-    label: "Turkish" as TranslatedString,
-    value: "tur",
-  },
-  {
-    label: "Wu" as TranslatedString,
-    value: "wuu",
-  },
-  {
-    label: "Marathi" as TranslatedString,
-    value: "mar",
-  },
-  {
-    label: "Telugu" as TranslatedString,
-    value: "ten",
-  },
-  {
-    label: "Korean" as TranslatedString,
-    value: "kor",
-  },
-  {
-    label: "French" as TranslatedString,
-    value: "fra",
-  },
-  {
-    label: "Tamil" as TranslatedString,
-    value: "tam",
-  },
-  {
-    label: "Egyptian Arabic" as TranslatedString,
-    value: "arz",
-  },
-  {
-    label: "Standard German" as TranslatedString,
-    value: "deu",
-  },
-  {
-    label: "Urdu" as TranslatedString,
-    value: "urd",
-  },
-  {
-    label: "Javanese" as TranslatedString,
-    value: "jav",
-  },
-  {
-    label: "Punjabi" as TranslatedString,
-    value: "pan",
-  },
-  {
-    label: "Italian" as TranslatedString,
-    value: "ita",
-  },
-  {
-    label: "Gujarati" as TranslatedString,
-    value: "guj",
-  },
-  {
-    label: "Iranian Persian" as TranslatedString,
-    value: "pes",
-  },
-  {
-    label: "Bhojpuri" as TranslatedString,
-    value: "bho",
-  },
-  {
-    label: "Hausa" as TranslatedString,
-    value: "hau",
-  },
-];
-
-const form902_1e: DoubleColumnForm = [
-  {
-    title: "This form was completed by" as TranslatedString,
-    description:
-      "The customer has to be identified on entering into a permanent business relationship or on concluding a cash transaction, which meets the according threshold." as TranslatedString,
-    fields: [
-      {
-        type: "text",
-        props: {
-          name: "filler.fullName",
-          label: "Full name" as TranslatedString,
-        },
-      },
-      {
-        type: "date",
-        props: {
-          name: "filler.when",
-          pattern: "dd/MM/yyyy",
-          label: "Date" as TranslatedString,
-          help: "format 'dd/MM/yyyy'" as TranslatedString,
-        },
-      },
-    ],
-  },
-  {
-    title: "Information on customer" as TranslatedString,
-    description:
-      "The customer is the person with whom the member concludes the contract with regard to the financial service provided (civil law). Does the member act as director of a domiciliary company, this domiciliary company is the customer." as TranslatedString,
-    fields: [
-      {
-        type: "choiceStacked",
-        props: {
-          name: "customerType",
-          label: "Type of customer" as TranslatedString,
-          required: true,
-          choices: [
-            {
-              label: "Natural person" as TranslatedString,
-              value: "natural",
-            },
-            {
-              label: "Legal entity" as TranslatedString,
-              value: "legal",
-            },
-          ],
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.fullName",
-          label: "Full name" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.address",
-          label: "Residential address" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "integer",
-        props: {
-          name: "naturalCustomer.telephone",
-          label: "Telephone" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.email",
-          label: "E-mail" as TranslatedString,
-        },
-      },
-      {
-        type: "date",
-        props: {
-          name: "naturalCustomer.dateOfBirth",
-          label: "Date of birth" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.nationality",
-          label: "Nationality" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.document",
-          label: "Identification document" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "file",
-        props: {
-          name: "naturalCustomer.documentAttachment",
-          label: "Document attachment" as TranslatedString,
-          required: true,
-          maxBites: 2 * 1024 * 1024,
-          accept: ".png",
-          help: "Max size of 2 mega bytes" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.companyName",
-          label: "Company name" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.office",
-          label: "Registered office" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "naturalCustomer.companyDocument",
-          label: "Company identification document" as TranslatedString,
-        },
-      },
-      {
-        type: "file",
-        props: {
-          name: "naturalCustomer.companyDocumentAttachment",
-          label: "Document attachment" as TranslatedString,
-          required: true,
-          maxBites: 2 * 1024 * 1024,
-          accept: ".png",
-          help: "Max size of 2 mega bytes" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.companyName",
-          label: "Company name" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.domicile",
-          label: "Domicile" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.contactPerson",
-          label: "Contact person" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.telephone",
-          label: "Telephone" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.email",
-          label: "E-mail" as TranslatedString,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "legalCustomer.document",
-          label: "Identification document" as TranslatedString,
-        },
-      },
-      {
-        type: "file",
-        props: {
-          name: "legalCustomer.documentAttachment",
-          label: "Document attachment" as TranslatedString,
-          required: true,
-          maxBites: 2 * 1024 * 1024,
-          accept: ".png",
-          help: "Max size of 2 mega bytes" as TranslatedString,
-        },
-      },
-    ],
-  },
-  {
-    title:
-      "Information on the natural persons who establish the business relationship for legal entities and partnerships" as TranslatedString,
-    description:
-      "For legal entities and partnerships the identity of the natural persons who establish the business relationship must be verified." as TranslatedString,
-    fields: [
-      {
-        type: "array",
-        props: {
-          name: "businessEstablisher",
-          label: "Persons" as TranslatedString,
-          required: true,
-          tooltip: "hola" as TranslatedString,
-          placeholder: "this is the placeholder" as TranslatedString,
-          fields: [
-            {
-              type: "text",
-              props: {
-                name: "fullName",
-                label: "Full name" as TranslatedString,
-                required: true,
-              },
-            },
-            {
-              type: "text",
-              props: {
-                name: "address",
-                label: "Residential address" as TranslatedString,
-                required: true,
-              },
-            },
-            {
-              type: "date",
-              props: {
-                name: "dateOfBirth",
-                label: "Date of birth" as TranslatedString,
-                required: true,
-                help: "format 'dd/MM/yyyy'" as TranslatedString,
-              },
-            },
-            {
-              type: "text",
-              props: {
-                name: "nationality",
-                label: "Nationality" as TranslatedString,
-                required: true,
-              },
-            },
-            {
-              type: "text",
-              props: {
-                name: "typeOfAuthorization",
-                label:
-                  "Type of authorization (signatory of representation)" as TranslatedString,
-                required: true,
-              },
-            },
-            {
-              type: "text",
-              props: {
-                name: "document",
-                label: "Identification document" as TranslatedString,
-                required: true,
-              },
-            },
-            {
-              type: "file",
-              props: {
-                name: "documentAttachment",
-                label: "Document attachment" as TranslatedString,
-                required: true,
-                maxBites: 2 * 1024 * 1024,
-                accept: ".png",
-                help: "Max size of 2 mega bytes" as TranslatedString,
-              },
-            },
-            {
-              type: "text",
-              props: {
-                name: "powerOfAttorneyArrangements",
-                label: "Residential address" as TranslatedString,
-                required: true,
-              },
-            },
-          ],
-          labelField: "fullName",
-        },
-      },
-    ],
-  },
-  {
-    title: "Acceptance of business relationship" as TranslatedString,
-    fields: [
-      {
-        type: "date",
-        props: {
-          name: "acceptance.when",
-          pattern: "dd/MM/yyyy",
-          label: "Date (conclusion of contract)" as TranslatedString,
-          help: "format 'dd/MM/yyyy'" as TranslatedString,
-        },
-      },
-      {
-        type: "choiceStacked",
-        props: {
-          name: "acceptance.acceptedBy",
-          label: "Accepted by" as TranslatedString,
-          required: true,
-          choices: [
-            {
-              label: "Face-to-face meeting with customer" as TranslatedString,
-              value: "face-to-face",
-            },
-            {
-              label:
-                "Correspondence: authenticated copy of identification document obtained" as TranslatedString,
-              value: "correspondence-document",
-            },
-            {
-              label:
-                "Correspondence: residential address validated" as TranslatedString,
-              value: "correspondence-address",
-            },
-          ],
-        },
-      },
-      {
-        type: "choiceStacked",
-        props: {
-          name: "acceptance.typeOfCorrespondence",
-          label: "Type of correspondence" as TranslatedString,
-          choices: [
-            {
-              label: "to the customer" as TranslatedString,
-              value: "face-to-face",
-            },
-            {
-              label: "hold at bank" as TranslatedString,
-              value: "correspondence-document",
-            },
-            {
-              label: "to a third party" as TranslatedString,
-              value: "correspondence-address",
-            },
-          ],
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "acceptance.thirdPartyFullName",
-          label: "Third party full name" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "acceptance.thirdPartyAddress",
-          label: "Third party  address" as TranslatedString,
-          required: true,
-        },
-      },
-      {
-        type: "selectMultiple",
-        props: {
-          name: "acceptance.language",
-          label: "Languages" as TranslatedString,
-          choices: languageList,
-          unique: true,
-        },
-      },
-      {
-        type: "textArea",
-        props: {
-          name: "acceptance.furtherInformation",
-          label: "Further information" as TranslatedString,
-        },
-      },
-    ],
-  },
-  {
-    title:
-      "Information on the beneficial owner of the assets and/or controlling person" as TranslatedString,
-    description:
-      "Establishment of the beneficial owner of the assets and/or controlling person" as TranslatedString,
-    fields: [
-      {
-        type: "choiceStacked",
-        props: {
-          name: "establishment",
-          label: "The customer is" as TranslatedString,
-          required: true,
-          choices: [
-            {
-              label:
-                "a natural person and there are no doubts that this person is the sole beneficial owner of the assets" as TranslatedString,
-              value: "natural",
-            },
-            {
-              label:
-                "a foundation (or a similar construct; incl. underlying companies)" as TranslatedString,
-              value: "foundation",
-            },
-            {
-              label: "a trust (incl. underlying companies)" as TranslatedString,
-              value: "trust",
-            },
-            {
-              label:
-                "a life insurance policy with separately managed accounts/securities accounts" as TranslatedString,
-              value: "insurance-wrapper",
-            },
-            {
-              label: "all other cases" as TranslatedString,
-              value: "other",
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    title:
-      "Evaluation with regard to embargo procedures/terrorism lists on establishing the business relationship" as TranslatedString,
-    description:
-      "Verification whether the customer, beneficial owners of the assets, controlling persons, authorized representatives or other involved persons are listed on an embargo/terrorism list (date of verification/result)" as TranslatedString,
-    fields: [
-      {
-        type: "textArea",
-        props: {
-          name: "embargoEvaluation",
-          help: "The evaluation must be made at the beginning of the business relationship and has to be repeated in the case of permanent business relationship every time the according lists are updated." as TranslatedString,
-          label: "Evaluation" as TranslatedString,
-        },
-      },
-    ],
-  },
-  {
-    title:
-      "In the case of cash transactions/occasional customers: Information on type and purpose of business relationship" as TranslatedString,
-    description:
-      "These details are only necessary for occasional customers, i.e. money exchange, money and asset transfer or other cash transactions provided that no customer profile (VQF doc. No. 902.5) is created" as TranslatedString,
-    fields: [
-      {
-        type: "choiceStacked",
-        props: {
-          name: "cashTransactions.typeOfBusiness",
-          label: "Type of business relationship" as TranslatedString,
-          choices: [
-            {
-              label: "Money exchange" as TranslatedString,
-              value: "money-exchange",
-            },
-            {
-              label: "Money and asset transfer" as TranslatedString,
-              value: "money-and-asset-transfer",
-            },
-            {
-              label:
-                "Other cash transactions. Specify below" as TranslatedString,
-              value: "other",
-            },
-          ],
-        },
-      },
-      {
-        type: "text",
-        props: {
-          name: "cashTransactions.otherTypeOfBusiness",
-          required: true,
-          label: "Specify other cash transactions:" as TranslatedString,
-        },
-      },
-      {
-        type: "textArea",
-        props: {
-          name: "cashTransactions.purpose",
-          label:
-            "Purpose of the business relationship (purpose of service requested)" as TranslatedString,
-        },
-      },
-    ],
-  },
-];
-
-function formBehavior(v: Form902_1e.Form): FormState {
-  return {
-    filler: {
-      fullName: {
-        disabled: true,
-      },
-      when: {
-        disabled: true,
-      },
-    },
-    acceptance: {
-      thirdPartyFullName: {
-        hidden: v.acceptance?.typeOfCorrespondence !== "correspondence-address",
-      },
-      thirdPartyAddress: {
-        hidden: v.acceptance?.typeOfCorrespondence !== "correspondence-address",
-      },
-    },
-    cashTransactions: {
-      otherTypeOfBusiness: {
-        hidden: v.cashTransactions?.typeOfBusiness !== "other",
-      },
-    },
-    naturalCustomer: {
-      fullName: {
-        hidden: v.customerType !== "natural",
-      },
-      address: {
-        hidden: v.customerType !== "natural",
-      },
-      telephone: {
-        hidden: v.customerType !== "natural",
-      },
-      email: {
-        hidden: v.customerType !== "natural",
-      },
-      dateOfBirth: {
-        hidden: v.customerType !== "natural",
-      },
-      nationality: {
-        hidden: v.customerType !== "natural",
-      },
-      document: {
-        hidden: v.customerType !== "natural",
-      },
-      companyName: {
-        hidden: v.customerType !== "natural",
-      },
-      office: {
-        hidden: v.customerType !== "natural",
-      },
-      companyDocument: {
-        hidden: v.customerType !== "natural",
-      },
-    },
-    legalCustomer: {
-      companyName: {
-        hidden: v.customerType !== "legal",
-      },
-      contactPerson: {
-        hidden: v.customerType !== "legal",
-      },
-      document: {
-        hidden: v.customerType !== "legal",
-      },
-      domicile: {
-        hidden: v.customerType !== "legal",
-      },
-      email: {
-        hidden: v.customerType !== "legal",
-      },
-      telephone: {
-        hidden: v.customerType !== "legal",
-      },
-      documentAttachment: {
-        hidden: v.customerType !== "legal",
-      },
-    },
-  };
-}
-
-export function NiceForm({ onUpdate }: { onUpdate: (d: any) => void }) {
+import { FlexibleForm } from "./forms/index.js";
+import { FormProvider } from "./handlers/FormProvider.js";
+import { RenderAllFieldsByUiConfig } from "./handlers/forms.js";
+
+export function NiceForm({
+  initial,
+  onUpdate,
+  form,
+}: {
+  initial: Partial;
+  form: FlexibleForm;
+  onUpdate: (d: Partial) => void;
+}) {
   const { i18n } = useTranslationContext();
-  const initial: Form902_1e.Form = {
-    filler: {
-      fullName: "Sebastian Marchano",
-      when: {
-        t_ms: Date.now(),
-      },
-    },
-    customerType: "natural",
-    naturalCustomer: {
-      fullName: "javier",
-    },
-    businessEstablisher: [
-      {
-        fullName: "sebastian marchano",
-      },
-    ],
-  } as Form902_1e.Form;
+  console.log("render");
   return (
     
       
         

-          {form902_1e.map((section) => {
+          {form.design.map((section, i) => {
             return (
               

                 

@@ -808,7 +39,10 @@ export function NiceForm({ onUpdate }: { onUpdate: (d: any) => void }) {
                 

                   

                     

-                      
+                      
                     

                   

                 

diff --git a/packages/exchange-backoffice-ui/src/forms/902_11e.ts b/packages/exchange-backoffice-ui/src/forms/902_11e.ts
new file mode 100644
index 000000000..49d94736f
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/902_11e.ts
@@ -0,0 +1,147 @@
+import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
+import { FlexibleForm, languageList } from "./index.js";
+import { FormState } from "../handlers/FormProvider.js";
+
+export const v1: FlexibleForm = {
+  versionId: "2023-05-15",
+  design: [
+    {
+      title:
+        "Establishing of the controlling person of operating legal entities and partnerships both not quoted on the stock exchange" as TranslatedString,
+      description:
+        "for operating legal entities and partnership that are contracting partner as well as analogously for operating legal entities and partnership that are beneficial owners." as TranslatedString,
+      fields: [
+        {
+          type: "textArea",
+          props: {
+            name: "contractingPartner",
+            label: "Contracting partner" as TranslatedString,
+          },
+        },
+        {
+          type: "choiceStacked",
+          props: {
+            name: "declares",
+            label:
+              "The contracting partner hereby declares that" as TranslatedString,
+            required: true,
+            choices: [
+              {
+                label:
+                  "the person(s) listed below is/are holding 25% or more of the contracting partner's shares (capital shares or voting rights)" as TranslatedString,
+                value: "25-or-more",
+              },
+              {
+                label:
+                  "if the capital shares or voting rights cannot be determined or in case there are no capital shares or voting rights 25% or more, the contracting partner hereby declares that the person(s) listed below is/are controlling the contracting partner in other ways" as TranslatedString,
+                value: "controlling-in-other-ways",
+              },
+              {
+                label:
+                  "in case this/these person(s) cannot be determined or this/these person(s) does/do not exist, the contracting partner hereby declares that the person(s) listed below is/are the managing director(s)" as TranslatedString,
+                value: "managing-director",
+              },
+            ],
+          },
+        },
+        {
+          type: "array",
+          props: {
+            name: "businessEstablisher",
+            label: "Persons" as TranslatedString,
+            required: true,
+            tooltip: "hola" as TranslatedString,
+            placeholder: "this is the placeholder" as TranslatedString,
+            fields: [
+              {
+                type: "text",
+                props: {
+                  name: "lastName",
+                  label: "Last name(s)" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "firstName",
+                  label: "First name(s)" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "address",
+                  label: "Actual address of domicile" as TranslatedString,
+                  required: true,
+                },
+              },
+            ],
+            labelField: "lastName",
+          },
+        },
+        {
+          type: "choiceStacked",
+          props: {
+            name: "fiduciaryAssets",
+            label: "Fiduciary holding assets" as TranslatedString,
+            help: "Is a third person the beneficial owner of the assets held in the account/securities account?" as TranslatedString,
+            required: true,
+            choices: [
+              {
+                label: "No" as TranslatedString,
+                value: "no",
+              },
+              {
+                label: "Yes" as TranslatedString,
+                value: "yes",
+                description:
+                  "The relevant information regarding the beneficial owner has to be obtained by filling in a separate VQF doc. No. 902.9" as TranslatedString,
+              },
+            ],
+          },
+        },
+        {
+          type: "date",
+          props: {
+            name: "when",
+            pattern: "dd/MM/yyyy",
+            label: "Date" as TranslatedString,
+            help: "format 'dd/MM/yyyy'" as TranslatedString,
+          },
+        },
+      ],
+    },
+  ],
+  behavior: function formBehavior(
+    v: Partial,
+  ): FormState {
+    return {
+      person: {
+        hidden:
+          v.declares !== "controlling-in-other-ways" &&
+          v.declares !== "managing-director",
+      },
+      when: {
+        disabled: true,
+      },
+    };
+  },
+};
+
+namespace Form902_11e {
+  interface Person {
+    lastName: string;
+    firstName: string;
+    address: string;
+  }
+  export interface Form {
+    contractingPartner: string;
+    declares: "25-or-more" | "controlling-in-other-ways" | "managing-director";
+    person: Person[];
+    fiduciaryAssets: "no" | "yes";
+    when: AbsoluteTime;
+    signature: string;
+  }
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/902_1e.ts b/packages/exchange-backoffice-ui/src/forms/902_1e.ts
new file mode 100644
index 000000000..cd65cfedc
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/902_1e.ts
@@ -0,0 +1,686 @@
+import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
+import { FlexibleForm, languageList } from "./index.js";
+import { FormState } from "../handlers/FormProvider.js";
+
+export const v1: FlexibleForm = {
+  versionId: "2023-05-15",
+  design: [
+    {
+      title: "This form was completed by" as TranslatedString,
+      description:
+        "The customer has to be identified on entering into a permanent business relationship or on concluding a cash transaction, which meets the according threshold." as TranslatedString,
+      fields: [
+        {
+          type: "text",
+          props: {
+            name: "fullName",
+            label: "Full name" as TranslatedString,
+          },
+        },
+        {
+          type: "date",
+          props: {
+            name: "when",
+            pattern: "dd/MM/yyyy",
+            label: "Date" as TranslatedString,
+            help: "format 'dd/MM/yyyy'" as TranslatedString,
+          },
+        },
+      ],
+    },
+    {
+      title: "Information on customer" as TranslatedString,
+      description:
+        "The customer is the person with whom the member concludes the contract with regard to the financial service provided (civil law). Does the member act as director of a domiciliary company, this domiciliary company is the customer." as TranslatedString,
+      fields: [
+        {
+          type: "choiceStacked",
+          props: {
+            name: "customerType",
+            label: "Type of customer" as TranslatedString,
+            required: true,
+            choices: [
+              {
+                label: "Natural person" as TranslatedString,
+                value: "natural",
+              },
+              {
+                label: "Legal entity" as TranslatedString,
+                value: "legal",
+              },
+            ],
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.fullName",
+            label: "Full name" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.address",
+            label: "Residential address" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "integer",
+          props: {
+            name: "naturalCustomer.telephone",
+            label: "Telephone" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.email",
+            label: "E-mail" as TranslatedString,
+          },
+        },
+        {
+          type: "date",
+          props: {
+            name: "naturalCustomer.dateOfBirth",
+            label: "Date of birth" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.nationality",
+            label: "Nationality" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.document",
+            label: "Identification document" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "file",
+          props: {
+            name: "naturalCustomer.documentAttachment",
+            label: "Document attachment" as TranslatedString,
+            required: true,
+            maxBites: 2 * 1024 * 1024,
+            accept: ".png",
+            help: "Max size of 2 mega bytes" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.companyName",
+            label: "Company name" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.office",
+            label: "Registered office" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "naturalCustomer.companyDocument",
+            label: "Company identification document" as TranslatedString,
+          },
+        },
+        {
+          type: "file",
+          props: {
+            name: "naturalCustomer.companyDocumentAttachment",
+            label: "Document attachment" as TranslatedString,
+            required: true,
+            maxBites: 2 * 1024 * 1024,
+            accept: ".png",
+            help: "Max size of 2 mega bytes" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.companyName",
+            label: "Company name" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.domicile",
+            label: "Domicile" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.contactPerson",
+            label: "Contact person" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.telephone",
+            label: "Telephone" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.email",
+            label: "E-mail" as TranslatedString,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "legalCustomer.document",
+            label: "Identification document" as TranslatedString,
+            help: "Not older than 12 month" as TranslatedString,
+          },
+        },
+        {
+          type: "file",
+          props: {
+            name: "legalCustomer.documentAttachment",
+            label: "Document attachment" as TranslatedString,
+            required: true,
+            maxBites: 2 * 1024 * 1024,
+            accept: ".png",
+            help: "Max size of 2 mega bytes" as TranslatedString,
+          },
+        },
+      ],
+    },
+    {
+      title:
+        "Information on the natural persons who establish the business relationship for legal entities and partnerships" as TranslatedString,
+      description:
+        "For legal entities and partnerships the identity of the natural persons who establish the business relationship must be verified." as TranslatedString,
+      fields: [
+        {
+          type: "array",
+          props: {
+            name: "businessEstablisher",
+            label: "Persons" as TranslatedString,
+            required: true,
+            tooltip: "hola" as TranslatedString,
+            placeholder: "this is the placeholder" as TranslatedString,
+            fields: [
+              {
+                type: "text",
+                props: {
+                  name: "fullName",
+                  label: "Full name" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "address",
+                  label: "Residential address" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "date",
+                props: {
+                  name: "dateOfBirth",
+                  label: "Date of birth" as TranslatedString,
+                  required: true,
+                  help: "format 'dd/MM/yyyy'" as TranslatedString,
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "nationality",
+                  label: "Nationality" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "typeOfAuthorization",
+                  label:
+                    "Type of authorization (signatory of representation)" as TranslatedString,
+                  required: true,
+                },
+              },
+              {
+                type: "file",
+                props: {
+                  name: "documentAttachment",
+                  label:
+                    "Identification document attachment" as TranslatedString,
+                  required: true,
+                  maxBites: 2 * 1024 * 1024,
+                  accept: ".png",
+                  help: "Max size of 2 mega bytes" as TranslatedString,
+                },
+              },
+              {
+                type: "choiceStacked",
+                props: {
+                  name: "powerOfAttorneyArrangements",
+                  label: "Power of attorney arrangements" as TranslatedString,
+                  required: true,
+                  choices: [
+                    {
+                      label: "CR extract" as TranslatedString,
+                      value: "cr",
+                    },
+                    {
+                      label: "Mandate" as TranslatedString,
+                      value: "mandate",
+                    },
+                    {
+                      label: "Other" as TranslatedString,
+                      value: "other",
+                    },
+                  ],
+                },
+              },
+              {
+                type: "text",
+                props: {
+                  name: "powerOfAttorneyArrangementsOther",
+                  label: "Power of attorney arrangements" as TranslatedString,
+                  required: true,
+                },
+              },
+            ],
+            labelField: "fullName",
+          },
+        },
+      ],
+    },
+    {
+      title: "Acceptance of business relationship" as TranslatedString,
+      fields: [
+        {
+          type: "date",
+          props: {
+            name: "acceptance.when",
+            pattern: "dd/MM/yyyy",
+            label: "Date (conclusion of contract)" as TranslatedString,
+            help: "format 'dd/MM/yyyy'" as TranslatedString,
+          },
+        },
+        {
+          type: "choiceStacked",
+          props: {
+            name: "acceptance.acceptedBy",
+            label: "Accepted by" as TranslatedString,
+            required: true,
+            choices: [
+              {
+                label: "Face-to-face meeting with customer" as TranslatedString,
+                value: "face-to-face",
+              },
+              {
+                label:
+                  "Correspondence: authenticated copy of identification document obtained" as TranslatedString,
+                value: "correspondence-document",
+              },
+              {
+                label:
+                  "Correspondence: residential address validated" as TranslatedString,
+                value: "correspondence-address",
+              },
+            ],
+          },
+        },
+        {
+          type: "choiceStacked",
+          props: {
+            name: "acceptance.typeOfCorrespondence",
+            label: "Type of correspondence service" as TranslatedString,
+            choices: [
+              {
+                label: "to the customer" as TranslatedString,
+                value: "customer",
+              },
+              {
+                label: "hold at bank" as TranslatedString,
+                value: "bank",
+              },
+              {
+                label: "to the member" as TranslatedString,
+                value: "member",
+              },
+              {
+                label: "to a third party" as TranslatedString,
+                value: "third-party",
+              },
+            ],
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "acceptance.thirdPartyFullName",
+            label: "Third party full name" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "acceptance.thirdPartyAddress",
+            label: "Third party  address" as TranslatedString,
+            required: true,
+          },
+        },
+        {
+          type: "selectMultiple",
+          props: {
+            name: "acceptance.language",
+            label: "Languages" as TranslatedString,
+            choices: languageList,
+            unique: true,
+          },
+        },
+        {
+          type: "textArea",
+          props: {
+            name: "acceptance.furtherInformation",
+            label: "Further information" as TranslatedString,
+          },
+        },
+      ],
+    },
+    {
+      title:
+        "Information on the beneficial owner of the assets and/or controlling person" as TranslatedString,
+      description:
+        "Establishment of the beneficial owner of the assets and/or controlling person" as TranslatedString,
+      fields: [
+        {
+          type: "choiceStacked",
+          props: {
+            name: "establishment",
+            label: "The customer is" as TranslatedString,
+            required: true,
+            choices: [
+              {
+                label:
+                  "a natural person and there are no doubts that this person is the sole beneficial owner of the assets" as TranslatedString,
+                value: "natural",
+              },
+              {
+                label:
+                  "a foundation (or a similar construct; incl. underlying companies)" as TranslatedString,
+                value: "foundation",
+              },
+              {
+                label:
+                  "a trust (incl. underlying companies)" as TranslatedString,
+                value: "trust",
+              },
+              {
+                label:
+                  "a life insurance policy with separately managed accounts/securities accounts" as TranslatedString,
+                value: "insurance-wrapper",
+              },
+              {
+                label: "all other cases" as TranslatedString,
+                value: "other",
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      title:
+        "Evaluation with regard to embargo procedures/terrorism lists on establishing the business relationship" as TranslatedString,
+      description:
+        "Verification whether the customer, beneficial owners of the assets, controlling persons, authorized representatives or other involved persons are listed on an embargo/terrorism list (date of verification/result)" as TranslatedString,
+      fields: [
+        {
+          type: "textArea",
+          props: {
+            name: "embargoEvaluation",
+            help: "The evaluation must be made at the beginning of the business relationship and has to be repeated in the case of permanent business relationship every time the according lists are updated." as TranslatedString,
+            label: "Evaluation" as TranslatedString,
+          },
+        },
+      ],
+    },
+    {
+      title:
+        "In the case of cash transactions/occasional customers: Information on type and purpose of business relationship" as TranslatedString,
+      description:
+        "These details are only necessary for occasional customers, i.e. money exchange, money and asset transfer or other cash transactions provided that no customer profile (VQF doc. No. 902.5) is created" as TranslatedString,
+      fields: [
+        {
+          type: "choiceStacked",
+          props: {
+            name: "cashTransactions.typeOfBusiness",
+            label: "Type of business relationship" as TranslatedString,
+            choices: [
+              {
+                label: "Money exchange" as TranslatedString,
+                value: "money-exchange",
+              },
+              {
+                label: "Money and asset transfer" as TranslatedString,
+                value: "money-and-asset-transfer",
+              },
+              {
+                label:
+                  "Other cash transactions. Specify below" as TranslatedString,
+                value: "other",
+              },
+            ],
+          },
+        },
+        {
+          type: "text",
+          props: {
+            name: "cashTransactions.otherTypeOfBusiness",
+            required: true,
+            label: "Specify other cash transactions:" as TranslatedString,
+          },
+        },
+        {
+          type: "textArea",
+          props: {
+            name: "cashTransactions.purpose",
+            label:
+              "Purpose of the business relationship (purpose of service requested)" as TranslatedString,
+          },
+        },
+      ],
+    },
+  ],
+  behavior: function formBehavior(
+    v: Partial,
+  ): FormState {
+    return {
+      fullName: {
+        disabled: true,
+      },
+      when: {
+        disabled: true,
+      },
+      businessEstablisher: {
+        elements: (v.businessEstablisher ?? []).map((be) => {
+          return {
+            powerOfAttorneyArrangementsOther: {
+              hidden: be.powerOfAttorneyArrangements !== "other",
+            },
+          };
+        }),
+      },
+      acceptance: {
+        thirdPartyFullName: {
+          hidden: v.acceptance?.typeOfCorrespondence !== "third-party",
+        },
+        thirdPartyAddress: {
+          hidden: v.acceptance?.typeOfCorrespondence !== "third-party",
+        },
+      },
+      cashTransactions: {
+        otherTypeOfBusiness: {
+          hidden: v.cashTransactions?.typeOfBusiness !== "other",
+        },
+      },
+      naturalCustomer: {
+        fullName: {
+          hidden: v.customerType !== "natural",
+        },
+        address: {
+          hidden: v.customerType !== "natural",
+        },
+        telephone: {
+          hidden: v.customerType !== "natural",
+        },
+        email: {
+          hidden: v.customerType !== "natural",
+        },
+        dateOfBirth: {
+          hidden: v.customerType !== "natural",
+        },
+        nationality: {
+          hidden: v.customerType !== "natural",
+        },
+        document: {
+          hidden: v.customerType !== "natural",
+        },
+        companyName: {
+          hidden: v.customerType !== "natural",
+        },
+        office: {
+          hidden: v.customerType !== "natural",
+        },
+        companyDocument: {
+          hidden: v.customerType !== "natural",
+        },
+        companyDocumentAttachment: {
+          hidden: v.customerType !== "natural",
+        },
+        documentAttachment: {
+          hidden: v.customerType !== "natural",
+        },
+      },
+      legalCustomer: {
+        companyName: {
+          hidden: v.customerType !== "legal",
+        },
+        contactPerson: {
+          hidden: v.customerType !== "legal",
+        },
+        document: {
+          hidden: v.customerType !== "legal",
+        },
+        domicile: {
+          hidden: v.customerType !== "legal",
+        },
+        email: {
+          hidden: v.customerType !== "legal",
+        },
+        telephone: {
+          hidden: v.customerType !== "legal",
+        },
+        documentAttachment: {
+          hidden: v.customerType !== "legal",
+        },
+      },
+    };
+  },
+};
+
+namespace Form902_1e {
+  interface LegalEntityCustomer {
+    companyName: string;
+    domicile: string;
+    contactPerson: string;
+    telephone: string;
+    email: string;
+    document: string;
+    documentAttachment: string;
+  }
+  interface NaturalCustomer {
+    fullName: string;
+    address: string;
+    telephone: string;
+    email: string;
+    dateOfBirth: AbsoluteTime;
+    nationality: string;
+    document: string;
+    documentAttachment: string;
+    companyName: string;
+    office: string;
+    companyDocument: string;
+    companyDocumentAttachment: string;
+  }
+
+  interface Person {
+    fullName: string;
+    address: string;
+    dateOfBirth: AbsoluteTime;
+    nationality: string;
+    typeOfAuthorization: string;
+    document: string;
+    documentAttachment: string;
+    powerOfAttorneyArrangements: "cr" | "mandate" | "other";
+    powerOfAttorneyArrangementsOther: string;
+  }
+
+  interface Acceptance {
+    when: AbsoluteTime;
+    acceptedBy: "face-to-face" | "authenticated-copy";
+    typeOfCorrespondence: string;
+    language: string[];
+    furtherInformation: string;
+    thirdPartyFullName: string;
+    thirdPartyAddress: string;
+  }
+
+  interface BeneficialOwner {
+    establishment:
+      | "natural-person"
+      | "foundation"
+      | "trust"
+      | "insurance-wrapper"
+      | "other";
+  }
+
+  interface CashTransactions {
+    typeOfBusiness: "money-exchange" | "money-and-asset-transfer" | "other";
+    otherTypeOfBusiness: string;
+    purpose: string;
+  }
+
+  export interface Form {
+    when: AbsoluteTime;
+    fullName: string;
+    customerType: "natural" | "legal";
+    naturalCustomer: NaturalCustomer;
+    legalCustomer: LegalEntityCustomer;
+    businessEstablisher: Array;
+    acceptance: Acceptance;
+    beneficialOwner: BeneficialOwner;
+    embargoEvaluation: string;
+    cashTransactions: CashTransactions;
+    // enclosures: Enclosures;
+  }
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx b/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx
deleted file mode 100644
index ebb8e3dce..000000000
--- a/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
-import { ComponentChildren, VNode, createContext, h } from "preact";
-import { MutableRef, StateUpdater, useRef } from "preact/hooks";
-
-export interface FormType {
-  value: MutableRef>;
-  initialValue?: Partial;
-  onUpdate?: StateUpdater;
-  computeFormState?: (v: T) => FormState;
-}
-
-//@ts-ignore
-export const FormContext = createContext>({});
-
-export type FormState = {
-  [field in keyof T]?: T[field] extends AbsoluteTime
-    ? Partial
-    : T[field] extends object
-    ? FormState
-    : Partial;
-};
-
-export interface InputFieldState {
-  /* should show the error */
-  error?: TranslatedString;
-  /* should not allow to edit */
-  readonly: boolean;
-  /* should show as disable */
-  disabled: boolean;
-  /* should not show */
-  hidden: boolean;
-}
-
-export function FormProvider({
-  children,
-  initialValue,
-  onUpdate,
-  computeFormState,
-}: {
-  initialValue?: Partial;
-  onUpdate?: (v: Partial) => void;
-  computeFormState?: (v: T) => FormState;
-  children: ComponentChildren;
-}): VNode {
-  const value = useRef(initialValue ?? {});
-  return (
-    
-      
{children}

-    
-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
deleted file mode 100644
index b2905a2a7..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { Fragment, VNode, h } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { FormProvider } from "./FormProvider.js";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
-import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
-import { useField } from "./useField.js";
-import { TranslatedString } from "@gnu-taler/taler-util";
-
-function Option({
-  label,
-  disabled,
-  isFirst,
-  isLast,
-  isSelected,
-  onClick,
-}: {
-  label: TranslatedString;
-  isFirst?: boolean;
-  isLast?: boolean;
-  isSelected?: boolean;
-  disabled?: boolean;
-  onClick: () => void;
-}): VNode {
-  let clazz = "relative flex border p-4 focus:outline-none disabled:text-grey";
-  if (isFirst) {
-    clazz += " rounded-tl-md rounded-tr-md ";
-  }
-  if (isLast) {
-    clazz += " rounded-bl-md rounded-br-md ";
-  }
-  if (isSelected) {
-    clazz += " z-10 border-indigo-200 bg-indigo-50 ";
-  } else {
-    clazz += " border-gray-200";
-  }
-  if (disabled) {
-    clazz +=
-      " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200  text-gray";
-  } else {
-    clazz += " cursor-pointer";
-  }
-  return (
-    
-  );
-}
-
-export function InputArray(
-  props: {
-    fields: UIFormField[];
-    labelField: string;
-  } & UIFormProps>,
-): VNode {
-  const { fields, labelField, name, label, required, tooltip } = props;
-  const { value, onChange } = useField<{ [s: string]: Array }>(name);
-  const list = value ?? [];
-  const [selectedIndex, setSelected] = useState(undefined);
-  const selected =
-    selectedIndex === undefined ? undefined : list[selectedIndex];
-
-  return (
-    

-      
-
-      

-        {list.map((v, idx) => {
-          return (
-            

-      {selectedIndex !== undefined && (
-         {
-            const newValue = [...list];
-            newValue.splice(selectedIndex, 1, v);
-            onChange(newValue);
-          }}
-        >
-          

-            

-              
-            

-          

-        
-      )}
-      {selectedIndex !== undefined && (
-        

-          

-            {selected !== undefined && (
-              
-            )}
-          

-          {/* 

-            
-          
 */}
-        

-      )}
-    

-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx b/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx
deleted file mode 100644
index 0e1b32cba..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
-import { useField } from "./useField.js";
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-const memoryOptions = [
-  { name: "4 GB", inStock: true },
-  { name: "8 GB", inStock: true },
-  { name: "16 GB", inStock: true },
-  { name: "32 GB", inStock: true },
-  { name: "64 GB", inStock: true },
-  { name: "128 GB", inStock: false },
-];
-
-export interface Choice {
-  label: TranslatedString;
-  description?: TranslatedString;
-  value: string;
-}
-
-export function InputChoiceStacked(
-  props: {
-    choices: Choice[];
-  } & UIFormProps,
-): VNode {
-  const {
-    choices,
-    name,
-    label,
-    tooltip,
-    placeholder,
-    required,
-    before,
-    after,
-    converter,
-  } = props;
-  const { value, onChange, state, isDirty } = useField(name);
-  if (state.hidden) {
-    return ;
-  }
-
-  return (
-    

-      
-      

-        {value !== undefined && !required && (
-          

-            

-              
-            

-          

-        )}
-
-        

-          {choices.map((choice) => {
-            let clazz =
-              "border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
-            if (choice.value === value) {
-              clazz +=
-                " border-transparent border-indigo-600 ring-2 ring-indigo-600";
-            } else {
-              clazz += " border-gray-300";
-            }
-            return (
-              
-            );
-          })}
-        

-      

-    

-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputDate.tsx b/packages/exchange-backoffice-ui/src/forms/InputDate.tsx
deleted file mode 100644
index 00dd59996..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputDate.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { AbsoluteTime } from "@gnu-taler/taler-util";
-import { InputLine, UIFormProps } from "./InputLine.js";
-import { CalendarIcon } from "@heroicons/react/24/outline";
-import { VNode, h } from "preact";
-import { format, parse } from "date-fns";
-
-export function InputDate(
-  props: { pattern?: string } & UIFormProps,
-): VNode {
-  const pattern = props.pattern ?? "dd/MM/yyyy";
-  return (
-    
-      type="text"
-      after={{
-        type: "icon",
-        icon: ,
-      }}
-      converter={{
-        fromStringUI: (v) => {
-          if (!v) return { t_ms: "never" };
-          const t_ms = parse(v, pattern, Date.now()).getTime();
-          return { t_ms };
-        },
-        toStringUI: (v) => {
-          return !v || !v.t_ms
-            ? ""
-            : v.t_ms === "never"
-            ? "never"
-            : format(v.t_ms, pattern);
-        },
-      }}
-      {...props}
-    />
-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputFile.tsx b/packages/exchange-backoffice-ui/src/forms/InputFile.tsx
deleted file mode 100644
index 749c8b264..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputFile.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { VNode, h } from "preact";
-import {
-  InputLine,
-  LabelWithTooltipMaybeRequired,
-  UIFormProps,
-} from "./InputLine.js";
-import { useField } from "./useField.js";
-
-export function InputFile(
-  props: { maxBites: number; accept?: string } & UIFormProps,
-): VNode {
-  const {
-    name,
-    label,
-    placeholder,
-    tooltip,
-    required,
-    help,
-    maxBites,
-    accept,
-  } = props;
-  const { value, onChange } = useField<{ [s: string]: string }>(name);
-
-  return (
-    

-      
-      {!value || !value.startsWith("data:image/") ? (
-        

-          

-            
-            

-              
-              {/* 
or drag and drop
 */}
-            

-          

-        

-      ) : (
-        

-          
-
-          
 {
-              onChange(undefined!);
-            }}
-          >
-            Clear
-          

-        

-      )}
-      {help && 
{help}
}
-    

-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx b/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx
deleted file mode 100644
index 49e6973fc..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { VNode, h } from "preact";
-import { InputLine, UIFormProps } from "./InputLine.js";
-
-export function InputInteger(props: UIFormProps): VNode {
-  return (
-     {
-          return !v ? 0 : Number.parseInt(v, 10);
-        },
-        toStringUI: (v?: number) => {
-          return v === undefined ? "" : String(v);
-        },
-      }}
-      {...props}
-    />
-  );
-}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputLine.tsx b/packages/exchange-backoffice-ui/src/forms/InputLine.tsx
deleted file mode 100644
index 2a5245ddf..000000000
--- a/packages/exchange-backoffice-ui/src/forms/InputLine.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { useField } from "./useField.js";
-
-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 {
-  toStringUI: (v?: T) => string;
-  fromStringUI: (v?: string) => T;
-}
-
-export interface UIFormProps {
-  name: string;
-  label: TranslatedString;
-  placeholder?: TranslatedString;
-  tooltip?: TranslatedString;
-  help?: TranslatedString;
-  before?: Addon;
-  after?: Addon;
-  required?: boolean;
-  converter?: StringConverter;
-}
-
-export type FormErrors = {
-  [P in keyof T]?: string | FormErrors;
-};
-
-//@ts-ignore
-const TooltipIcon = (
-  
-    
-  
-);
-
-export function LabelWithTooltipMaybeRequired({
-  label,
-  required,
-  tooltip,
-}: {
-  label: TranslatedString;
-  required?: boolean;
-  tooltip?: TranslatedString;
-}): VNode {
-  const Label = (
-    
-      

-        
-      

-    
-  );
-  const WithTooltip = tooltip ? (
-    

-      {Label}
-      
-        {TooltipIcon}
-        
-      
-    

-  ) : (
-    Label
-  );
-  if (required) {
-    return (
-      

-        {WithTooltip}
-        *
-      

-    );
-  }
-  return WithTooltip;
-}
-
-function InputWrapper({
-  children,
-  label,
-  tooltip,
-  before,
-  after,
-  help,
-  error,
-  required,
-}: { error?: string; children: ComponentChildren } & UIFormProps): VNode {
-  return (
-    

-      
-      

-        {before &&
-          (before.type === "text" ? (
-            
-              {before.text}
-            
-          ) : before.type === "icon" ? (
-            

-              {before.icon}
-            

-          ) : before.type === "button" ? (
-            
-          ) : undefined)}
-
-        {children}
-
-        {after &&
-          (after.type === "text" ? (
-            
-              {after.text}
-            
-          ) : after.type === "icon" ? (
-            

-              {after.icon}
-            

-          ) : after.type === "button" ? (
-            
-          ) : undefined)}
-      

-      {error && (
-        

-          {error}
-        

-      )}
-      {help && (
-        

-          {help}
-        

-      )}
-    

-  );
-}
-
-function defaultToString(v: unknown) {
-  return v === undefined ? "" : typeof v !== "object" ? String(v) : "";
-}
-function defaultFromString(v: string) {
-  return v;
-}
-
-export function InputLine(props: { type: string } & UIFormProps): VNode {
-  const { name, placeholder, before, after, converter, type } = props;
-  const { value, onChange, state, isDirty } = useField(name);
-
-  if (state.hidden) return ;
-
-  let clazz =
-    "block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200";
-  if (before) {
-    switch (before.type) {
-      case "icon": {
-        clazz += " pl-10";
-        break;
-      }
-      case "button": {
-        clazz += " rounded-none rounded-r-md ";
-        break;
-      }
-      case "text": {
-        clazz += " min-w-0 flex-1 rounded-r-md rounded-none ";
-        break;
-      }
-    }
-  }
-  if (after) {
-    switch (after.type) {
-      case "icon": {
-        clazz += " pr-10";
-        break;
-      }
-      case "button": {
-        clazz += " rounded-none rounded-l-md";
-        break;
-      }
-      case "text": {
-        clazz += " min-w-0 flex-1 rounded-l-md rounded-none ";
-        break;
-      }
-    }
-  }
-  const showError = isDirty && state.error;
-  if (showError) {
-    clazz +=
-      " text-red-900 ring-red-300  placeholder:text-red-300 focus:ring-red-500";
-  } else {
-    clazz +=
-      " text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600";
-  }
-  const fromString: (s: string) => any =
-    converter?.fromStringUI ?? defaultFromString;
-  const toString: (s: any) => string = converter?.toStringUI ?? defaultToString;
-
-  if (type === "text-area") {
-    return (
-       {...props} error={showError ? state.error : undefined}>
-