From 20d2861508df18da18e66c94a5a268067565121b Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 30 Apr 2024 14:21:01 -0300
Subject: testing aml form as json

---
 .../aml-backoffice-ui/src/pages/CaseDetails.tsx    |  31 ++--
 .../aml-backoffice-ui/src/pages/CaseUpdate.tsx     |  39 ++---
 .../aml-backoffice-ui/src/pages/CreateAccount.tsx  |   1 -
 packages/aml-backoffice-ui/src/pages/Officer.tsx   |   4 +-
 .../src/pages/ShowConsolidated.stories.tsx         | 168 +++++++++++----------
 .../src/pages/ShowConsolidated.tsx                 |   6 +-
 6 files changed, 134 insertions(+), 115 deletions(-)

(limited to 'packages/aml-backoffice-ui/src/pages')

diff --git a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
index e16a6a103..1ad8c9453 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
@@ -34,6 +34,7 @@ import {
 import {
   DefaultForm,
   ErrorLoading,
+  FlexibleForm,
   InternationalizationAPI,
   Loading,
   useTranslationContext,
@@ -42,9 +43,9 @@ import { format } from "date-fns";
 import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { privatePages } from "../Routing.js";
-import { BaseForm, FormMetadata, uiForms } from "../forms/declaration.js";
 import { useCaseDetails } from "../hooks/useCaseDetails.js";
 import { ShowConsolidated } from "./ShowConsolidated.js";
+import { FormMetadata, useUiFormsContext } from "../context/ui-forms.js";
 
 export type AmlEvent =
   | AmlFormEvent
@@ -56,7 +57,7 @@ type AmlFormEvent = {
   when: AbsoluteTime;
   title: TranslatedString;
   justification: Justification;
-  metadata: FormMetadata<BaseForm>;
+  metadata: FormMetadata;
   state: TalerExchangeApi.AmlState;
   threshold: AmountJson;
 };
@@ -115,9 +116,10 @@ export function getEventsFromAmlHistory(
   aml: TalerExchangeApi.AmlDecisionDetail[],
   kyc: TalerExchangeApi.KycDetail[],
   i18n: InternationalizationAPI,
+  forms: FormMetadata[],
 ): AmlEvent[] {
   const ae: AmlEvent[] = aml.map((a) => {
-    const just = parseJustification(a.justification, uiForms.forms(i18n));
+    const just = parseJustification(a.justification, forms);
     return {
       type: just.type === "ok" ? "aml-form" : "aml-form-error",
       state: a.new_state,
@@ -156,11 +158,13 @@ export function CaseDetails({ account }: { account: string }) {
   const [selected, setSelected] = useState<AbsoluteTime>(AbsoluteTime.now());
   const [showForm, setShowForm] = useState<{
     justification: Justification;
-    metadata: FormMetadata<BaseForm>;
+    metadata: FormMetadata;
   }>();
 
   const { i18n } = useTranslationContext();
   const details = useCaseDetails(account);
+  const {forms} = useUiFormsContext()
+
   if (!details) {
     return <Loading />;
   }
@@ -180,14 +184,14 @@ export function CaseDetails({ account }: { account: string }) {
   }
   const { aml_history, kyc_attributes } = details.body;
 
-  const events = getEventsFromAmlHistory(aml_history, kyc_attributes, i18n);
+  const events = getEventsFromAmlHistory(aml_history, kyc_attributes, i18n, forms);
 
   if (showForm !== undefined) {
     return (
       <DefaultForm
         readOnly={true}
         initial={showForm.justification.value}
-        form={showForm.metadata.impl(showForm.justification.value)}
+        form={showForm.metadata as any} // FIXME: HERE
       >
         <div class="mt-6 flex items-center justify-end gap-x-6">
           <button
@@ -243,11 +247,7 @@ export function CaseDetails({ account }: { account: string }) {
   );
 }
 
-function AmlStateBadge({
-  state,
-}: {
-  state: TalerExchangeApi.AmlState;
-}): VNode {
+function AmlStateBadge({ state }: { state: TalerExchangeApi.AmlState }): VNode {
   switch (state) {
     case TalerExchangeApi.AmlState.normal: {
       return (
@@ -389,11 +389,10 @@ function ShowTimeline({
   );
 }
 
-
-export type Justification<T extends BaseForm = BaseForm> = {
+export type Justification<T = Record<string, unknown>> = {
   // form values
   value: T;
-} & Omit<Omit<FormMetadata<BaseForm>, "icon">, "impl">;
+} & Omit<Omit<FormMetadata, "icon">, "config">;
 
 type SimpleFormMetadata = {
   version?: number;
@@ -414,11 +413,11 @@ type ParseJustificationFail =
 
 function parseJustification(
   s: string,
-  listOfAllKnownForms: FormMetadata<BaseForm>[],
+  listOfAllKnownForms: FormMetadata[],
 ):
   | OperationOk<{
       justification: Justification;
-      metadata: FormMetadata<BaseForm>;
+      metadata: FormMetadata;
     }>
   | OperationFail<ParseJustificationFail> {
   try {
diff --git a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
index 47c8f8ab4..64bfb90f1 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
@@ -15,27 +15,29 @@
  */
 import {
   AbsoluteTime,
+  AmountJson,
   Amounts,
   HttpStatusCode,
   TalerExchangeApi,
   TalerProtocolTimestamp,
-  assertUnreachable
+  assertUnreachable,
 } from "@gnu-taler/taler-util";
 import {
   Button,
   LocalNotificationBanner,
   RenderAllFieldsByUiConfig,
+  UIFormField,
   useExchangeApiContext,
   useLocalNotificationHandler,
-  useTranslationContext
+  useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { privatePages } from "../Routing.js";
-import { BaseForm, uiForms } from "../forms/declaration.js";
+import { UIFormFieldConfig, useUiFormsContext } from "../context/ui-forms.js";
 import { useFormState } from "../hooks/form.js";
 import { useOfficer } from "../hooks/officer.js";
-import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
 import { Justification } from "./CaseDetails.js";
+import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
 
 export function CaseUpdate({
   account,
@@ -53,7 +55,7 @@ export function CaseUpdate({
   // const [notification, notify, handleError] = useLocalNotification();
   const [notification, withErrorHandler] = useLocalNotificationHandler();
   const { config } = useExchangeApiContext();
-
+  const { forms } = useUiFormsContext();
   const initial = {
     when: AbsoluteTime.now(),
     state: TalerExchangeApi.AmlState.pending,
@@ -63,12 +65,12 @@ export function CaseUpdate({
   if (officer.state !== "ready") {
     return <HandleAccountNotReady officer={officer} />;
   }
-  const theForm = uiForms.forms(i18n).find((v) => v.id === formId);
+  const theForm = forms.find((v) => v.id === formId);
   if (!theForm) {
     return <div>form with id {formId} not found</div>;
   }
 
-  const [form, state] = useFormState<BaseForm>(initial, (st) => {
+  const [form, state] = useFormState(initial, (st) => {
     return {
       status: "ok",
       result: st as any,
@@ -76,8 +78,6 @@ export function CaseUpdate({
     };
   });
 
-  const ff = theForm.impl(state.result as any);
-
   const validatedForm = state.status === "fail" ? undefined : state.result;
 
   const submitHandler =
@@ -97,8 +97,11 @@ export function CaseUpdate({
                 justification: JSON.stringify(justification),
                 decision_time: TalerProtocolTimestamp.now(),
                 h_payto: account,
-                new_state: justification.value.state,
-                new_threshold: Amounts.stringify(justification.value.threshold),
+                new_state: justification.value
+                  .state as TalerExchangeApi.AmlState,
+                new_threshold: Amounts.stringify(
+                  justification.value.threshold as AmountJson,
+                ),
                 kyc_requirements: undefined,
               };
 
@@ -122,13 +125,15 @@ export function CaseUpdate({
           },
         );
 
-  // const asd = ff.design[0]?.fields[0]?.props
-  
+  function convertUiField(_f: UIFormFieldConfig[]): UIFormField[] {
+    return [];
+  }
+
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} />
       <div class="space-y-10 divide-y -mt-5 divide-gray-900/10">
-        {ff.design.map((section, i) => {
+        {theForm.config.design.map((section, i) => {
           if (!section) return <Fragment />;
           return (
             <div
@@ -150,7 +155,7 @@ export function CaseUpdate({
                   <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                     <RenderAllFieldsByUiConfig
                       key={i}
-                      fields={section.fields}
+                      fields={convertUiField(section.fields)}
                     />
                   </div>
                 </div>
@@ -180,11 +185,11 @@ export function CaseUpdate({
 }
 
 export function SelectForm({ account }: { account: string }) {
-  const { i18n } = useTranslationContext();
+  const { forms } = useUiFormsContext();
   return (
     <div>
       <pre>New form for account: {account.substring(0, 16)}...</pre>
-      {uiForms.forms(i18n).map((form) => {
+      {forms.map((form) => {
         return (
           <a
             key={form.id}
diff --git a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
index a8a853bc1..abcaaa2a6 100644
--- a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
@@ -118,7 +118,6 @@ export function CreateAccount(): VNode {
           async () => officer.create(form.password!.value!),
           () => {},
         );
-  form.password;
   return (
     <div class="flex min-h-full flex-col ">
       <LocalNotificationBanner notification={notification} />
diff --git a/packages/aml-backoffice-ui/src/pages/Officer.tsx b/packages/aml-backoffice-ui/src/pages/Officer.tsx
index ad8ae1ed3..39359cd5e 100644
--- a/packages/aml-backoffice-ui/src/pages/Officer.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Officer.tsx
@@ -20,11 +20,11 @@ import {
 import { h } from "preact";
 import { useOfficer } from "../hooks/officer.js";
 import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
-import { useSettingsContext } from "../context/settings.js";
+import { useUiSettingsContext } from "../context/ui-settings.js";
 
 export function Officer() {
   const officer = useOfficer();
-  const settings = useSettingsContext();
+  const settings = useUiSettingsContext();
   const { lib } = useExchangeApiContext();
 
   const { i18n } = useTranslationContext();
diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.stories.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.stories.tsx
index 11b25575b..714bf6580 100644
--- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.stories.tsx
+++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.stories.tsx
@@ -19,13 +19,16 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AbsoluteTime, AmountString, Duration, TranslatedString } from "@gnu-taler/taler-util";
+import {
+  AbsoluteTime,
+  AmountString,
+  Duration,
+  TranslatedString,
+} from "@gnu-taler/taler-util";
 import { InternationalizationAPI } from "@gnu-taler/web-util/browser";
 import * as tests from "@gnu-taler/web-util/testing";
 import { getEventsFromAmlHistory } from "./CaseDetails.js";
-import {
-  ShowConsolidated as TestedComponent,
-} from "./ShowConsolidated.js";
+import { ShowConsolidated as TestedComponent } from "./ShowConsolidated.js";
 
 export default {
   title: "show consolidated",
@@ -36,81 +39,94 @@ const nullTranslator: InternationalizationAPI = {
   singular: (str: TemplateStringsArray) => str.join() as TranslatedString,
   translate: (str: TemplateStringsArray) => [str.join()] as TranslatedString[],
   Translate: () => undefined as unknown,
-}
+};
 
 export const WithEmptyHistory = tests.createExample(TestedComponent, {
-  history: getEventsFromAmlHistory([], [], nullTranslator),
-  until: AbsoluteTime.now()
+  history: getEventsFromAmlHistory([], [], nullTranslator, []),
+  until: AbsoluteTime.now(),
 });
 
 export const WithSomeEvents = tests.createExample(TestedComponent, {
-  history: getEventsFromAmlHistory([
-    {
-      "decider_pub": "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
-      "justification": "{\"index\":0,\"name\":\"Simple comment\",\"value\":{\"fullName\":\"loggedIn_user_fullname\",\"when\":{\"t_ms\":1700207199558},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"comment\":\"test\"}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700208199
-      }
-    },
-    {
-      "decider_pub": "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
-      "justification": "{\"index\":0,\"name\":\"Simple comment\",\"value\":{\"fullName\":\"loggedIn_user_fullname\",\"when\":{\"t_ms\":1700207199558},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"comment\":\"test\"}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700208211
-      }
-    },
-    {
-      "decider_pub": "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
-      "justification": "{\"index\":0,\"name\":\"Simple comment\",\"value\":{\"fullName\":\"loggedIn_user_fullname\",\"when\":{\"t_ms\":1700207199558},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"comment\":\"test\"}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700208220
-      }
-    },
-    {
-      "decider_pub": "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
-      "justification": "{\"index\":4,\"name\":\"Declaration for trusts (902.13e)\",\"value\":{\"fullName\":\"loggedIn_user_fullname\",\"when\":{\"t_ms\":1700208362854},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"contractingPartner\":\"f\",\"knownAs\":\"a\",\"trust\":{\"name\":\"b\",\"type\":\"discretionary\",\"revocability\":\"irrevocable\"}}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700208385
-      }
-    },
-    {
-      "decider_pub": "6CD3J8XSKWQPFFDJY4SP4RK2D7T7WW7JRJDTXHNZY7YKGXDCE2QG",
-      "justification": "{\"id\":\"simple_comment\",\"label\":\"Simple comment\",\"version\":1,\"value\":{\"when\":{\"t_ms\":1700488420810},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"comment\":\"qwe\"}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700488423
-      }
-    },
-    {
-      "decider_pub": "6CD3J8XSKWQPFFDJY4SP4RK2D7T7WW7JRJDTXHNZY7YKGXDCE2QG",
-      "justification": "{\"id\":\"simple_comment\",\"label\":\"Simple comment\",\"version\":1,\"value\":{\"when\":{\"t_ms\":1700488671251},\"state\":1,\"threshold\":{\"currency\":\"STATER\",\"fraction\":0,\"value\":0},\"comment\":\"asd asd asd \"}}",
-      "new_threshold": "STATER:0" as AmountString,
-      "new_state": 1,
-      "decision_time": {
-        "t_s": 1700488677
-      }
-    }
-  ], [{
-    collection_time: AbsoluteTime.toProtocolTimestamp(
-      AbsoluteTime.subtractDuraction(AbsoluteTime.now(), Duration.fromPrettyString("1d"))
-    ),
-    expiration_time: { t_s: "never" },
-    provider_section: "asd",
-    attributes: {
-      email: "sebasjm@qwdde.com"
-    }
-  }], nullTranslator),
-  until: AbsoluteTime.now()
+  history: getEventsFromAmlHistory(
+    [
+      {
+        decider_pub: "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
+        justification:
+          '{"index":0,"name":"Simple comment","value":{"fullName":"loggedIn_user_fullname","when":{"t_ms":1700207199558},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"comment":"test"}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700208199,
+        },
+      },
+      {
+        decider_pub: "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
+        justification:
+          '{"index":0,"name":"Simple comment","value":{"fullName":"loggedIn_user_fullname","when":{"t_ms":1700207199558},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"comment":"test"}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700208211,
+        },
+      },
+      {
+        decider_pub: "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
+        justification:
+          '{"index":0,"name":"Simple comment","value":{"fullName":"loggedIn_user_fullname","when":{"t_ms":1700207199558},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"comment":"test"}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700208220,
+        },
+      },
+      {
+        decider_pub: "JD70N2XZ8FZKB7C146ZWR6XBDCS4Z84PJKJMPB73PMJ2B1X35ZFG",
+        justification:
+          '{"index":4,"name":"Declaration for trusts (902.13e)","value":{"fullName":"loggedIn_user_fullname","when":{"t_ms":1700208362854},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"contractingPartner":"f","knownAs":"a","trust":{"name":"b","type":"discretionary","revocability":"irrevocable"}}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700208385,
+        },
+      },
+      {
+        decider_pub: "6CD3J8XSKWQPFFDJY4SP4RK2D7T7WW7JRJDTXHNZY7YKGXDCE2QG",
+        justification:
+          '{"id":"simple_comment","label":"Simple comment","version":1,"value":{"when":{"t_ms":1700488420810},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"comment":"qwe"}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700488423,
+        },
+      },
+      {
+        decider_pub: "6CD3J8XSKWQPFFDJY4SP4RK2D7T7WW7JRJDTXHNZY7YKGXDCE2QG",
+        justification:
+          '{"id":"simple_comment","label":"Simple comment","version":1,"value":{"when":{"t_ms":1700488671251},"state":1,"threshold":{"currency":"STATER","fraction":0,"value":0},"comment":"asd asd asd "}}',
+        new_threshold: "STATER:0" as AmountString,
+        new_state: 1,
+        decision_time: {
+          t_s: 1700488677,
+        },
+      },
+    ],
+    [
+      {
+        collection_time: AbsoluteTime.toProtocolTimestamp(
+          AbsoluteTime.subtractDuraction(
+            AbsoluteTime.now(),
+            Duration.fromPrettyString("1d"),
+          ),
+        ),
+        expiration_time: { t_s: "never" },
+        provider_section: "asd",
+        attributes: {
+          email: "sebasjm@qwdde.com",
+        },
+      },
+    ],
+    nullTranslator,
+    [],
+  ),
+  until: AbsoluteTime.now(),
 });
-
-
-
diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
index 1115414c0..0169572bf 100644
--- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
+++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
@@ -62,14 +62,14 @@ export function ShowConsolidated({
         fields: [
           {
             type: "amount",
-            props: {
+            properties: {
               label: i18n.str`Threshold`,
               name: "aml.threshold",
             },
           },
           {
             type: "choiceHorizontal",
-            props: {
+            properties: {
               label: i18n.str`State`,
               name: "aml.state",
               choices: [
@@ -96,7 +96,7 @@ export function ShowConsolidated({
             fields: Object.entries(cons.kyc).map(([key, field]) => {
               const result: UIFormField = {
                 type: "text",
-                props: {
+                properties: {
                   label: key as TranslatedString,
                   name: `kyc.${key}.value`,
                   help: `${field.provider} since ${
-- 
cgit v1.2.3