integrate bank into the new taler-util API

1 files changed, 54 insertions, 44 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 35fb94a6c..15910201e 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -16,17 +16,17 @@
 
 import {
   Amounts,
-  HttpStatusCode,
   Logger,
+  TalerError,
   WithdrawUriResult,
   parsePaytoUri
 } from "@gnu-taler/taler-util";
-import { ErrorType, notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
+import { ErrorLoading } from "../components/ErrorLoading.js";
 import { Loading } from "../components/Loading.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
-import { useSettings } from "../hooks/settings.js";
-import { handleNotOkResult } from "./HomePage.js";
+import { assertUnreachable } from "./HomePage.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
 
@@ -48,48 +48,20 @@ export function WithdrawalQRCode({
   const { i18n } = useTranslationContext();
   const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId);
 
-  if (!result.ok) {
-    if (result.loading) {
-      return <Loading />;
-    }
-    if (result.type === ErrorType.CLIENT && result.status === HttpStatusCode.NotFound) {
-      return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
-        <div>
-          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 ">
-            <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-            </svg>
-          </div>
-
-          <div class="mt-3 text-center sm:mt-5">
-            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
-              <i18n.Translate>Operation not found</i18n.Translate>
-            </h3>
-            <div class="mt-2">
-              <p class="text-sm text-gray-500">
-                <i18n.Translate>
-                  This operation is not known by the server. The operation id is wrong or the
-                  server deleted the operation information before reaching here.
-                </i18n.Translate>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="mt-5 sm:mt-6">
-          <button type="button"
-            class="inline-flex w-full justify-center 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"
-            onClick={async (e) => {
-              e.preventDefault();
-              onClose()
-            }}>
-            <i18n.Translate>Cotinue to dashboard</i18n.Translate>
-          </button>
-        </div>
-      </div>
+  if (!result) {
+    return <Loading />
+  }
+  if (result instanceof TalerError) {
+    return <ErrorLoading error={result} />
+  }
+  if (result.type === "fail") {
+    switch (result.case) {
+      case "not-found": return <OperationNotFound onClose={onClose} />
+      default: assertUnreachable(result.case)
     }
-    return handleNotOkResult(i18n)(result);
   }
-  const { data } = result;
+
+  const { body: data } = result;
 
   if (data.aborted) {
     return <section id="main" class="content">
@@ -194,3 +166,41 @@ export function WithdrawalQRCode({
     />
   );
 }
+
+
+function OperationNotFound({ onClose }: { onClose: () => void }): VNode {
+  const { i18n } = useTranslationContext();
+  return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+    <div>
+      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 ">
+        <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+        </svg>
+      </div>
+
+      <div class="mt-3 text-center sm:mt-5">
+        <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
+          <i18n.Translate>Operation not found</i18n.Translate>
+        </h3>
+        <div class="mt-2">
+          <p class="text-sm text-gray-500">
+            <i18n.Translate>
+              This operation is not known by the server. The operation id is wrong or the
+              server deleted the operation information before reaching here.
+            </i18n.Translate>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="mt-5 sm:mt-6">
+      <button type="button"
+        class="inline-flex w-full justify-center 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"
+        onClick={async (e) => {
+          e.preventDefault();
+          onClose()
+        }}>
+        <i18n.Translate>Cotinue to dashboard</i18n.Translate>
+      </button>
+    </div>
+  </div>
+}
\ No newline at end of file