From 56a6f47c7daae088c2017c0d9781ddcf7cee175b Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 21 Sep 2023 15:44:17 -0300
Subject: more ui

---
 .../demobank-ui/src/pages/WalletWithdrawForm.tsx   | 183 +++++++++++----------
 1 file changed, 99 insertions(+), 84 deletions(-)

(limited to 'packages/demobank-ui/src/pages/WalletWithdrawForm.tsx')

diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 8c41f7576..08f706919 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -20,6 +20,7 @@ import {
   HttpStatusCode,
   Logger,
   TranslatedString,
+  WithdrawUriResult,
   parseWithdrawUri,
 } from "@gnu-taler/taler-util";
 import {
@@ -34,6 +35,9 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { useAccessAPI } from "../hooks/access.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { Amount } from "./PaytoWireTransferForm.js";
+import { useSettings } from "../hooks/settings.js";
+import { WithdrawalOperationState } from "./WithdrawalQRCode.js";
+import { Loading } from "../components/Loading.js";
 
 const logger = new Logger("WalletWithdrawForm");
 const RefAmount = forwardRef(Amount);
@@ -51,8 +55,9 @@ export function WalletWithdrawForm({
 }): VNode {
   const { i18n } = useTranslationContext();
   const { createWithdrawal } = useAccessAPI();
+  const [settings, updateSettings] = useSettings()
 
-  const [amountStr, setAmountStr] = useState<string | undefined>("5.00");
+  const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`);
   const ref = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (focus) ref.current?.focus();
@@ -78,7 +83,6 @@ export function WalletWithdrawForm({
   async function doStart() {
     if (!parsedAmount) return;
     try {
-      console.log("ASDASD")
       const result = await createWithdrawal({
         amount: Amounts.stringify(parsedAmount),
       });
@@ -109,7 +113,6 @@ export function WalletWithdrawForm({
         )
       }
     }
-
   }
 
   return (<div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
@@ -122,91 +125,103 @@ export function WalletWithdrawForm({
         <i18n.Translate>After using your wallet you will be redirected here to confirm or cancel the operation.</i18n.Translate>
       </p>
     </div>
-    <form
-      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
-      autoCapitalize="none"
-      autoCorrect="off"
-      onSubmit={e => {
-        e.preventDefault()
-      }}
-    >
-      <div class="px-4 py-6 sm:p-8">
-        <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-          <div class="sm:col-span-5">
-            <label for="withdraw-amount">{i18n.str`Amount`}</label>
-            <RefAmount
-              currency={limit.currency}
-              value={amountStr}
-              name="withdraw-amount"
-              onChange={(v) => {
-                setAmountStr(v);
-              }}
-              error={errors?.amount}
-              ref={ref}
-            />
-          </div>
-          <div class="sm:col-span-5">
-            <span class="isolate inline-flex rounded-md shadow-sm">
-              <button type="button"
-                class="relative               inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setAmountStr("50.00")
-                }}
-              >
-                50.00
-              </button>
-              <button type="button"
-                class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setAmountStr("25.00")
-                }}
-              >
-
-                25.00
-              </button>
-              <button type="button"
-                class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setAmountStr("10.00")
-                }}
-              >
-                10.00
-              </button>
-              <button type="button"
-                class="relative               inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setAmountStr("5.00")
+
+    {!settings.fastWithdrawal ?
+      <form
+        class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
+        autoCapitalize="none"
+        autoCorrect="off"
+        onSubmit={e => {
+          e.preventDefault()
+        }}
+      >
+        <div class="px-4 py-6 sm:p-8">
+          <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            <div class="sm:col-span-5">
+              <label for="withdraw-amount">{i18n.str`Amount`}</label>
+              <RefAmount
+                currency={limit.currency}
+                value={amountStr}
+                name="withdraw-amount"
+                onChange={(v) => {
+                  setAmountStr(v);
                 }}
-              >
-                5.00
-              </button>
-            </span>
-          </div>
+                error={errors?.amount}
+                ref={ref}
+              />
+            </div>
+            <div class="sm:col-span-5">
+              <span class="isolate inline-flex rounded-md shadow-sm">
+                <button type="button"
+                  class="relative               inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setAmountStr("50.00")
+                  }}
+                >
+                  50.00
+                </button>
+                <button type="button"
+                  class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setAmountStr("25.00")
+                  }}
+                >
+
+                  25.00
+                </button>
+                <button type="button"
+                  class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setAmountStr("10.00")
+                  }}
+                >
+                  10.00
+                </button>
+                <button type="button"
+                  class="relative               inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setAmountStr("5.00")
+                  }}
+                >
+                  5.00
+                </button>
+              </span>
+            </div>
 
+          </div>
+        </div>
+        <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+          <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
+            onClick={onCancel}
+          >
+            <i18n.Translate>Cancel</i18n.Translate></button>
+          <button type="submit"
+            class="disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
+            // disabled={isRawPayto ? !!errorsPayto : !!errorsWire}
+            onClick={(e) => {
+              e.preventDefault()
+              doStart()
+            }}
+          >
+            <i18n.Translate>Continue</i18n.Translate>
+          </button>
         </div>
-      </div>
-      <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
-        <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
-          onClick={onCancel}
-        >
-          <i18n.Translate>Cancel</i18n.Translate></button>
-        <button type="submit"
-          class="disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
-          // disabled={isRawPayto ? !!errorsPayto : !!errorsWire}
-          onClick={(e) => {
-            e.preventDefault()
-            doStart()
-          }}
-        >
-          <i18n.Translate>Continue</i18n.Translate>
-        </button>
-      </div>
 
-    </form>
+      </form>
+      : settings.currentWithdrawalOperationId === undefined ?
+        <Loading /> :
+        <WithdrawalOperationState
+          currentOperation={settings.currentWithdrawalOperationId}
+          currency={limit.currency}
+          onClose={() => {
+            onCancel()
+          }}
+        />
+    }
   </div>
   );
 }
-- 
cgit v1.2.3