sharing components in web-util

5 files changed, 79 insertions, 76 deletions

diff --git a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
index ce820d612..f618a3592 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
@@ -1,24 +1,23 @@
-import { Fragment, VNode, h } from "preact";
 import {
   AbsoluteTime,
   AmountJson,
   Amounts,
+  PaytoString,
+  TalerError,
   TranslatedString,
+  assertUnreachable,
 } from "@gnu-taler/taler-util";
-import { format } from "date-fns";
+import { ErrorLoading, Loading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ArrowDownCircleIcon, ClockIcon } from "@heroicons/react/20/solid";
+import { format } from "date-fns";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { NiceForm } from "../NiceForm.js";
 import { FlexibleForm } from "../forms/index.js";
 import { UIFormField } from "../handlers/forms.js";
+import { useCaseDetails } from "../hooks/useCaseDetails.js";
 import { Pages } from "../pages.js";
 import { AmlExchangeBackend } from "../types.js";
-import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { useOfficer } from "../hooks/useOfficer.js";
-import { buildQuerySignature } from "../account.js";
-import { useCaseDetails } from "../hooks/useCaseDetails.js";
-import { handleNotOkResult } from "../utils/errors.js";
 
 type AmlEvent = AmlFormEvent | KycCollectionEvent | KycExpirationEvent;
 type AmlFormEvent = {
@@ -85,30 +84,33 @@ function getEventsFromAmlHistory(
   return ae.concat(ke).sort(selectSooner);
 }
 
-export function CaseDetails({ account: paytoHash }: { account: string }) {
+export function CaseDetails({ account }: { account: string }) {
   const [selected, setSelected] = useState<AmlEvent | undefined>(undefined);
 
-  const officer = useOfficer();
   const { i18n } = useTranslationContext();
-  if (officer.state !== "ready") {
-    return <HandleAccountNotReady officer={officer} />;
+  const details = useCaseDetails(account)
+  if (!details) {
+    return <Loading />
   }
-  const signature =
-    officer.state === "ready"
-      ? buildQuerySignature(officer.account.signingKey)
-      : undefined;
-  const details = useCaseDetails(officer.account.accountId, paytoHash, signature)
-  if (!details.ok && !details.loading) {
-    return handleNotOkResult(i18n)(details);
+  if (details instanceof TalerError) {
+    return <ErrorLoading error={details} />
   }
-  const aml_history = details.loading ? [] : details.data.aml_history
-  const kyc_attributes = details.loading ? [] : details.data.kyc_attributes
-  const events = getEventsFromAmlHistory(aml_history,kyc_attributes);
-  
+  if (details.type === "fail") {
+    switch (details.case) {
+      case "unauthorized":
+      case "officer-not-found":
+      case "officer-disabled": return <div />
+      default: assertUnreachable(details)
+    }
+  }
+  const { aml_history, kyc_attributes } = details.body
+
+  const events = getEventsFromAmlHistory(aml_history, kyc_attributes);
+
   return (
     <div>
       <a
-        href={Pages.newFormEntry.url({ account: paytoHash })}
+        href={Pages.newFormEntry.url({ account })}
         class="m-4 block rounded-md w-fit border-0 px-3 py-2 text-center text-sm bg-indigo-700 text-white shadow-sm hover:bg-indigo-700"
       >
         New AML form
@@ -287,23 +289,22 @@ function ShowConsolidated({
       },
       Object.entries(cons.kyc).length > 0
         ? {
-            title: "KYC" as TranslatedString,
-            fields: Object.entries(cons.kyc).map(([key, field]) => {
-              const result: UIFormField = {
-                type: "text",
-                props: {
-                  label: key as TranslatedString,
-                  name: `kyc.${key}.value`,
-                  help: `${field.provider} since ${
-                    field.since.t_ms === "never"
-                      ? "never"
-                      : format(field.since.t_ms, "dd/MM/yyyy")
+          title: "KYC" as TranslatedString,
+          fields: Object.entries(cons.kyc).map(([key, field]) => {
+            const result: UIFormField = {
+              type: "text",
+              props: {
+                label: key as TranslatedString,
+                name: `kyc.${key}.value`,
+                help: `${field.provider} since ${field.since.t_ms === "never"
+                  ? "never"
+                  : format(field.since.t_ms, "dd/MM/yyyy")
                   }` as TranslatedString,
-                },
-              };
-              return result;
-            }),
-          }
+              },
+            };
+            return result;
+          }),
+        }
         : undefined,
     ],
   };
@@ -319,7 +320,7 @@ function ShowConsolidated({
         key={`${String(Date.now())}`}
         form={form}
         initial={cons}
-        onUpdate={() => {}}
+        onUpdate={() => { }}
       />
     </Fragment>
   );
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 990c0d2d4..5f79db71e 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -1,4 +1,5 @@
-import { TranslatedString } from "@gnu-taler/taler-util";
+import { TalerError, TranslatedString, assertUnreachable } from "@gnu-taler/taler-util";
+import { ErrorLoading, Loading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { createNewForm } from "../handlers/forms.js";
@@ -7,34 +8,37 @@ import { useOfficer } from "../hooks/useOfficer.js";
 import { Pages } from "../pages.js";
 import { AmlExchangeBackend } from "../types.js";
 import { amlStateConverter } from "./CaseDetails.js";
-import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
-import { buildQuerySignature } from "../account.js";
-import { handleNotOkResult } from "../utils/errors.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
 export function Cases() {
-  const officer = useOfficer();
   const { i18n } = useTranslationContext();
-  if (officer.state !== "ready") {
-    return <HandleAccountNotReady officer={officer} />;
-  }
-  const form = createNewForm<{
-    state: AmlExchangeBackend.AmlState;
-  }>();
 
-  const signature =
-    officer.state === "ready"
-      ? buildQuerySignature(officer.account.signingKey)
-      : undefined;
+  const form = createNewForm<{ state: AmlExchangeBackend.AmlState }>();
+
 
   const initial = AmlExchangeBackend.AmlState.pending;
   const [stateFilter, setStateFilter] = useState(initial);
-  const list = useCases(officer.account.accountId, stateFilter, signature);
 
-  if (!list.ok && !list.loading) {
-    return handleNotOkResult(i18n)(list);
+  const list = useCases(stateFilter);
+
+  if (!list) {
+    return <Loading />
+  }
+
+  if (list instanceof TalerError) {
+    return <ErrorLoading error={list} />
   }
-  const records = list.loading ? [] : list.data.records
+
+  if (list.data.type === "fail") {
+    switch (list.data.case) {
+      case "unauthorized":
+      case "officer-not-found":
+      case "officer-disabled": return <div />
+      default: assertUnreachable(list.data)
+    }
+  }
+
+  const { records } = list.data.body
+
   return (
     <div>
       <div class="px-4 sm:px-6 lg:px-8">
@@ -52,7 +56,7 @@ export function Cases() {
             onUpdate={(v) => {
               setStateFilter(v.state ?? initial);
             }}
-            onSubmit={(v) => {}}
+            onSubmit={(v) => { }}
           >
             <form.InputChoiceHorizontal
               name="state"
diff --git a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
index 429cfb9ca..fa79bb476 100644
--- a/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
+++ b/packages/aml-backoffice-ui/src/pages/NewFormEntry.tsx
@@ -2,12 +2,11 @@ import { VNode, h } from "preact";
 import { allForms } from "./AntiMoneyLaunderingForm.js";
 import { Pages } from "../pages.js";
 import { NiceForm } from "../NiceForm.js";
-import { AbsoluteTime, Amounts, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Amounts, TalerExchangeApi, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 import { AmlExchangeBackend } from "../types.js";
-import { useAmlCasesAPI } from "../hooks/useCaseDetails.js";
 import { useOfficer } from "../hooks/useOfficer.js";
 import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
-import { buildDecisionSignature, buildQuerySignature } from "../account.js";
+import { useExchangeApiContext } from "../context/config.js";
 
 export function NewFormEntry({
   account,
@@ -40,21 +39,21 @@ export function NewFormEntry({
     state: AmlExchangeBackend.AmlState.pending,
     threshold: Amounts.parseOrThrow("KUDOS:1000"),
   };
-  const api = useAmlCasesAPI()
-  
+  const { api } = useExchangeApiContext()
+
   return (
     <NiceForm
       initial={initial}
       form={showingFrom(initial)}
       onSubmit={(formValue) => {
         if (formValue.state === undefined || formValue.threshold === undefined) return;
-        
+
         const justification = {
           index: selectedForm,
           name: formName,
           value: formValue
         }
-        const decision: AmlExchangeBackend.AmlDecision = {
+        const decision: TalerExchangeApi.AmlDecision = {
           justification: JSON.stringify(justification),
           decision_time: TalerProtocolTimestamp.now(),
           h_payto: account,
@@ -63,9 +62,9 @@ export function NewFormEntry({
           officer_sig: "",
           kyc_requirements: undefined
         }
-        const signature = buildDecisionSignature(officer.account.signingKey, decision);
-        decision.officer_sig = signature
-        api.updateDecision(officer.account.accountId, decision);
+        // const signature = buildDecisionSignature(officer.account.signingKey, decision);
+        // decision.officer_sig = signature
+        api.addDecisionDetails(officer.account, decision);
 
         // alert(JSON.stringify(formValue));
       }}
diff --git a/packages/aml-backoffice-ui/src/pages/Officer.tsx b/packages/aml-backoffice-ui/src/pages/Officer.tsx
index 5320369e4..4af34805a 100644
--- a/packages/aml-backoffice-ui/src/pages/Officer.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Officer.tsx
@@ -14,12 +14,12 @@ export function Officer() {
         Public key
       </h1>
       <div class="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg">
-        <p class="mt-6 font-mono break-all">{officer.account.accountId}</p>
+        <p class="mt-6 font-mono break-all">{officer.account.id}</p>
       </div>
       <p>
         <a
           href={`mailto:aml@exchange.taler.net?body=${encodeURIComponent(
-            `I want my AML account\n\n\nPubKey: ${officer.account.accountId}`,
+            `I want my AML account\n\n\nPubKey: ${officer.account.id}`,
           )}`}
           target="_blank"
           rel="noreferrer"
diff --git a/packages/aml-backoffice-ui/src/pages/UnlockAccount.tsx b/packages/aml-backoffice-ui/src/pages/UnlockAccount.tsx
index 39f8addd3..83d8767fb 100644
--- a/packages/aml-backoffice-ui/src/pages/UnlockAccount.tsx
+++ b/packages/aml-backoffice-ui/src/pages/UnlockAccount.tsx
@@ -1,7 +1,6 @@
-import { TranslatedString } from "@gnu-taler/taler-util";
+import { TranslatedString, UnwrapKeyError } from "@gnu-taler/taler-util";
 import { notifyError, notifyInfo } from "@gnu-taler/web-util/browser";
 import { VNode, h } from "preact";
-import { UnwrapKeyError } from "../account.js";
 import { createNewForm } from "../handlers/forms.js";
 
 export function UnlockAccount({