fix difference between kyc form and aml form, mostly prettier

1 files changed, 55 insertions, 16 deletions

diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
index e53c74aa5..21c14fee3 100644
--- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
+++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
@@ -22,13 +22,17 @@ import {
 import {
   DefaultForm,
   FormConfiguration,
+  RenderAllFieldsByUiConfig,
   UIFormElementConfig,
   UIHandlerId,
+  convertUiField,
+  getConverterById,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { AmlEvent } from "./CaseDetails.js";
+import { getShapeFromFields, useFormState } from "../hooks/form.js";
 
 /**
  * the exchange doesn't hava a consistent api
@@ -63,7 +67,7 @@ export function ShowConsolidated({
 
   const fixed = fixProvidedInfo(cons.kyc);
 
-  const form: FormConfiguration = {
+  const formConfig: FormConfiguration = {
     type: "double-column",
     design: [
       Object.entries(fixed).length > 0
@@ -73,8 +77,9 @@ export function ShowConsolidated({
               const result: UIFormElementConfig = {
                 type: "text",
                 label: key as TranslatedString,
-                id: `kyc.${key}.value` as UIHandlerId,
-                name: `kyc.${key}.value`,
+                id: `${key}.value` as UIHandlerId,
+                name: `${key}.value`,
+                disabled: true,
                 help: `At ${
                   field.since.t_ms === "never"
                     ? "never"
@@ -87,21 +92,55 @@ export function ShowConsolidated({
         : undefined!,
     ],
   };
+  const shape: Array<UIHandlerId> = [];
+
+  formConfig.design.forEach((section) => {
+    Array.prototype.push.apply(shape, getShapeFromFields(section.fields));
+  });
+
+  const [form, state] = useFormState<{}>(shape, fixed, (result) => {
+    return { status: "ok", errors: undefined, result };
+  });
+
   return (
     <Fragment>
-      {/* <h1 class="text-base font-semibold leading-7 text-black">
-        Consolidated information{" "}
-        {until.t_ms === "never"
-          ? ""
-          : `after ${format(until.t_ms, "dd MMMM yyyy")}`}
-      </h1> */}
-      <DefaultForm
-        key={`${String(Date.now())}`}
-        form={form as any}
-        initial={cons}
-        readOnly
-        onUpdate={() => {}}
-      />
+      <div class="space-y-10 divide-y -mt-5 divide-gray-900/10">
+        {formConfig.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={convertUiField(
+                        i18n,
+                        section.fields,
+                        form,
+                        getConverterById,
+                      )}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </Fragment>
   );
 }