1 files changed, 124 insertions, 56 deletions
diff --git a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
index c4bff1f9f..47c8f8ab4 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
@@ -19,24 +19,27 @@ import {
   HttpStatusCode,
   TalerExchangeApi,
   TalerProtocolTimestamp,
-  TranslatedString,
+  assertUnreachable
 } from "@gnu-taler/taler-util";
 import {
+  Button,
   LocalNotificationBanner,
+  RenderAllFieldsByUiConfig,
   useExchangeApiContext,
-  useLocalNotification,
-  useTranslationContext,
+  useLocalNotificationHandler,
+  useTranslationContext
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { privatePages } from "../Routing.js";
-import { uiForms } from "../forms/declaration.js";
+import { BaseForm, uiForms } from "../forms/declaration.js";
+import { useFormState } from "../hooks/form.js";
 import { useOfficer } from "../hooks/officer.js";
-import { AntiMoneyLaunderingForm } from "./AntiMoneyLaunderingForm.js";
 import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
+import { Justification } from "./CaseDetails.js";
 
 export function CaseUpdate({
   account,
-  type,
+  type: formId,
 }: {
   account: string;
   type: string;
@@ -46,67 +49,132 @@ export function CaseUpdate({
   const {
     lib: { exchange: api },
   } = useExchangeApiContext();
-  const [notification, notify, handleError] = useLocalNotification();
+
+  // const [notification, notify, handleError] = useLocalNotification();
+  const [notification, withErrorHandler] = useLocalNotificationHandler();
+  const { config } = useExchangeApiContext();
+
+  const initial = {
+    when: AbsoluteTime.now(),
+    state: TalerExchangeApi.AmlState.pending,
+    threshold: Amounts.zeroOfCurrency(config.currency),
+  };
 
   if (officer.state !== "ready") {
     return <HandleAccountNotReady officer={officer} />;
   }
+  const theForm = uiForms.forms(i18n).find((v) => v.id === formId);
+  if (!theForm) {
+    return <div>form with id {formId} not found</div>;
+  }
 
-  return (
-    <Fragment>
-      <LocalNotificationBanner notification={notification} />
+  const [form, state] = useFormState<BaseForm>(initial, (st) => {
+    return {
+      status: "ok",
+      result: st as any,
+      errors: undefined,
+    };
+  });
 
-      <AntiMoneyLaunderingForm
-        account={account}
-        formId={type}
-        onSubmit={async (justification, new_state, new_threshold) => {
-          const decision: Omit<TalerExchangeApi.AmlDecision, "officer_sig"> = {
-            justification: JSON.stringify(justification),
-            decision_time: TalerProtocolTimestamp.now(),
-            h_payto: account,
-            new_state,
-            new_threshold: Amounts.stringify(new_threshold),
-            kyc_requirements: undefined,
-          };
-          await handleError(async () => {
-            const resp = await api.addDecisionDetails(
-              officer.account,
-              decision,
-            );
-            if (resp.type === "ok") {
-              window.location.href = privatePages.cases.url({});
-              return;
-            }
-            switch (resp.case) {
+  const ff = theForm.impl(state.result as any);
+
+  const validatedForm = state.status === "fail" ? undefined : state.result;
+
+  const submitHandler =
+    validatedForm === undefined
+      ? undefined
+      : withErrorHandler(
+          () => {
+            const justification: Justification = {
+              id: theForm.id,
+              label: theForm.label,
+              version: theForm.version,
+              value: validatedForm,
+            };
+
+            const decision: Omit<TalerExchangeApi.AmlDecision, "officer_sig"> =
+              {
+                justification: JSON.stringify(justification),
+                decision_time: TalerProtocolTimestamp.now(),
+                h_payto: account,
+                new_state: justification.value.state,
+                new_threshold: Amounts.stringify(justification.value.threshold),
+                kyc_requirements: undefined,
+              };
+
+            return api.addDecisionDetails(officer.account, decision);
+          },
+          () => {
+            window.location.href = privatePages.cases.url({});
+          },
+          (fail) => {
+            switch (fail.case) {
               case HttpStatusCode.Forbidden:
               case HttpStatusCode.Unauthorized:
-                return notify({
-                  type: "error",
-                  title: i18n.str`Wrong credentials for "${officer.account}"`,
-                  description: resp.detail.hint as TranslatedString,
-                  debug: resp.detail,
-                  when: AbsoluteTime.now(),
-                });
+                return i18n.str`Wrong credentials for "${officer.account}"`;
               case HttpStatusCode.NotFound:
-                return notify({
-                  type: "error",
-                  title: i18n.str`Officer or account not found`,
-                  description: resp.detail.hint as TranslatedString,
-                  debug: resp.detail,
-                  when: AbsoluteTime.now(),
-                });
+                return i18n.str`Officer or account not found`;
               case HttpStatusCode.Conflict:
-                return notify({
-                  type: "error",
-                  title: i18n.str`Officer disabled or more recent decision was already submitted.`,
-                  description: resp.detail.hint as TranslatedString,
-                  debug: resp.detail,
-                  when: AbsoluteTime.now(),
-                });
+                return i18n.str`Officer disabled or more recent decision was already submitted.`;
+              default:
+                assertUnreachable(fail);
             }
-          });
-        }}
-      />
+          },
+        );
+
+  // const asd = ff.design[0]?.fields[0]?.props
+  
+  return (
+    <Fragment>
+      <LocalNotificationBanner notification={notification} />
+      <div class="space-y-10 divide-y -mt-5 divide-gray-900/10">
+        {ff.design.map((section, i) => {
+          if (!section) return <Fragment />;
+          return (
+            <div
+              key={i}
+              class="grid grid-cols-1 gap-x-8 gap-y-8 pt-5 md:grid-cols-3"
+            >
+              <div class="px-4 sm:px-0">
+                <h2 class="text-base font-semibold leading-7 text-gray-900">
+                  {section.title}
+                </h2>
+                {section.description && (
+                  <p class="mt-1 text-sm leading-6 text-gray-600">
+                    {section.description}
+                  </p>
+                )}
+              </div>
+              <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-md md:col-span-2">
+                <div class="p-3">
+                  <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}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div class="mt-6 flex items-center justify-end gap-x-6">
+        <a
+          href={privatePages.caseDetails.url({ cid: account })}
+          class="text-sm font-semibold leading-6 text-gray-900"
+        >
+          <i18n.Translate>Cancel</i18n.Translate>
+        </a>
+        <Button
+          type="submit"
+          handler={submitHandler}
+          class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          <i18n.Translate>Confirm</i18n.Translate>
+        </Button>
+      </div>
     </Fragment>
   );
 }