From e39d5c488e2e425bd7febf694caadc17d5126401 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 20 Sep 2023 15:18:36 -0300
Subject: more ui

---
 packages/demobank-ui/src/pages/BusinessAccount.tsx | 106 ++++++++++-----------
 1 file changed, 52 insertions(+), 54 deletions(-)

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

diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx
index 2faf83a1c..ec71ceca6 100644
--- a/packages/demobank-ui/src/pages/BusinessAccount.tsx
+++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx
@@ -17,17 +17,21 @@ import {
   AmountJson,
   Amounts,
   HttpStatusCode,
-  TranslatedString,
+  TranslatedString
 } from "@gnu-taler/taler-util";
 import {
   HttpResponse,
   HttpResponsePaginated,
   RequestError,
+  notify,
+  notifyError,
+  notifyInfo,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
-import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
+import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
 import { useBackendContext } from "../context/backend.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
@@ -42,12 +46,9 @@ import {
   undefinedIfEmpty,
 } from "../utils.js";
 import { ShowAccountDetails, UpdateAccountPassword } from "./AdminPage.js";
-import { ErrorBannerFloat } from "./BankFrame.js";
-import { LoginForm } from "./LoginForm.js";
-import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
 import { handleNotOkResult } from "./HomePage.js";
-import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
-import { Amount } from "./WalletWithdrawForm.js";
+import { LoginForm } from "./LoginForm.js";
+import { Amount } from "./PaytoWireTransferForm.js";
 
 interface Props {
   onClose: () => void;
@@ -225,7 +226,6 @@ function CreateCashout({
   const { i18n } = useTranslationContext();
   const ratiosResult = useRatiosAndFeeConfig();
   const result = useAccountDetails(account);
-  const [error, saveError] = useState<ErrorMessage | undefined>();
   const {
     estimateByCredit: calculateFromCredit,
     estimateByDebit: calculateFromDebit,
@@ -268,15 +268,15 @@ function CreateCashout({
       calculateFromDebit(amount, sellFee, sellRate)
         .then((r) => {
           setCalc(r);
-          saveError(undefined);
         })
         .catch((error) => {
-          saveError(
+          notify(
             error instanceof RequestError
               ? buildRequestErrorMessage(i18n, error.cause)
               : {
+                  type: "error",
                   title: i18n.str`Could not estimate the cashout`,
-                  description: error.message,
+                  description: error.message as TranslatedString
                 },
           );
         });
@@ -284,13 +284,13 @@ function CreateCashout({
       calculateFromCredit(amount, sellFee, sellRate)
         .then((r) => {
           setCalc(r);
-          saveError(undefined);
         })
         .catch((error) => {
-          saveError(
+          notify(
             error instanceof RequestError
               ? buildRequestErrorMessage(i18n, error.cause)
               : {
+                  type: "error",
                   title: i18n.str`Could not estimate the cashout`,
                   description: error.message,
                 },
@@ -321,9 +321,6 @@ function CreateCashout({
 
   return (
     <div>
-      {error && (
-        <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
-      )}
       <h1>New cashout</h1>
       <form class="pure-form">
         <fieldset>
@@ -341,13 +338,15 @@ function CreateCashout({
           />
         </fieldset>
         <fieldset>
-          <label>
+          <label for="amount">
             {form.isDebit
               ? i18n.str`Amount to send`
               : i18n.str`Amount to receive`}
+            
           </label>
           <div style={{ display: "flex" }}>
             <Amount
+              name="amount"
               currency={amount.currency}
               value={form.amount}
               onChange={(v) => {
@@ -376,24 +375,27 @@ function CreateCashout({
           <input value={sellRate} disabled />
         </fieldset>
         <fieldset>
-          <label>{i18n.str`Balance now`}</label>
+          <label for="balance-now">{i18n.str`Balance now`}</label>
           <Amount
+            name="banace-now"
             currency={balance.currency}
             value={Amounts.stringifyValue(balance)}
           />
         </fieldset>
         <fieldset>
-          <label
+          <label for="total-cost"
             style={{ fontWeight: "bold", color: "red" }}
           >{i18n.str`Total cost`}</label>
           <Amount
+            name="total-cost"
             currency={balance.currency}
             value={Amounts.stringifyValue(calc.debit)}
           />
         </fieldset>
         <fieldset>
-          <label>{i18n.str`Balance after`}</label>
+          <label for="balance-after">{i18n.str`Balance after`}</label>
           <Amount
+            name="balance-after"
             currency={balance.currency}
             value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""}
           />
@@ -401,16 +403,18 @@ function CreateCashout({
         {Amounts.isZero(sellFee) ? undefined : (
           <Fragment>
             <fieldset>
-              <label>{i18n.str`Amount after conversion`}</label>
+              <label for="amount-conversiojn">{i18n.str`Amount after conversion`}</label>
               <Amount
+                name="amount-conversion"
                 currency={fiatCurrency}
                 value={Amounts.stringifyValue(calc.beforeFee)}
               />
             </fieldset>
 
             <fieldset>
-              <label>{i18n.str`Cashout fee`}</label>
+              <label form="cashout-fee">{i18n.str`Cashout fee`}</label>
               <Amount
+                name="cashout-fee"
                 currency={fiatCurrency}
                 value={Amounts.stringifyValue(sellFee)}
               />
@@ -418,10 +422,11 @@ function CreateCashout({
           </Fragment>
         )}
         <fieldset>
-          <label
+          <label for="total"
             style={{ fontWeight: "bold", color: "green" }}
           >{i18n.str`Total cashout transfer`}</label>
           <Amount
+            name="total"
             currency={fiatCurrency}
             value={Amounts.stringifyValue(calc.credit)}
           />
@@ -511,7 +516,7 @@ function CreateCashout({
                 onComplete(res.data.uuid);
               } catch (error) {
                 if (error instanceof RequestError) {
-                  saveError(
+                  notify(
                     buildRequestErrorMessage(i18n, error.cause, {
                       onClientError: (status) =>
                         status === HttpStatusCode.BadRequest
@@ -530,14 +535,13 @@ function CreateCashout({
                     }),
                   );
                 } else {
-                  saveError({
-                    title: i18n.str`Operation failed, please report`,
-                    description:
-                      error instanceof Error
-                        ? error.message
-                        : JSON.stringify(error),
-                  });
-                }
+                  notifyError(
+                    i18n.str`Operation failed, please report`,
+                    (error instanceof Error
+                      ? error.message
+                      : JSON.stringify(error)) as TranslatedString
+                  )
+            }
               }
             }}
           >
@@ -565,7 +569,6 @@ export function ShowCashoutDetails({
   const result = useCashoutDetails(id);
   const { abortCashout, confirmCashout } = useCircuitAccountAPI();
   const [code, setCode] = useState<string | undefined>(undefined);
-  const [error, saveError] = useState<ErrorMessage | undefined>();
   if (!result.ok) return onLoadNotOk(result);
   const errors = undefinedIfEmpty({
     code: !code ? i18n.str`required` : undefined,
@@ -574,9 +577,6 @@ export function ShowCashoutDetails({
   return (
     <div>
       <h1>Cashout details {id}</h1>
-      {error && (
-        <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
-      )}
       <form class="pure-form">
         <fieldset>
           <label>
@@ -661,7 +661,7 @@ export function ShowCashoutDetails({
                   onCancel();
                 } catch (error) {
                   if (error instanceof RequestError) {
-                    saveError(
+                    notify(
                       buildRequestErrorMessage(i18n, error.cause, {
                         onClientError: (status) =>
                           status === HttpStatusCode.NotFound
@@ -672,14 +672,13 @@ export function ShowCashoutDetails({
                       }),
                     );
                   } else {
-                    saveError({
-                      title: i18n.str`Operation failed, please report`,
-                      description:
-                        error instanceof Error
-                          ? error.message
-                          : JSON.stringify(error),
-                    });
-                  }
+                    notifyError(
+                      i18n.str`Operation failed, please report`,
+                      (error instanceof Error
+                        ? error.message
+                        : JSON.stringify(error)) as TranslatedString
+                    )
+                }
                 }
               }}
             >
@@ -699,7 +698,7 @@ export function ShowCashoutDetails({
                   });
                 } catch (error) {
                   if (error instanceof RequestError) {
-                    saveError(
+                    notify(
                       buildRequestErrorMessage(i18n, error.cause, {
                         onClientError: (status) =>
                           status === HttpStatusCode.NotFound
@@ -714,14 +713,13 @@ export function ShowCashoutDetails({
                       }),
                     );
                   } else {
-                    saveError({
-                      title: i18n.str`Operation failed, please report`,
-                      description:
-                        error instanceof Error
-                          ? error.message
-                          : JSON.stringify(error),
-                    });
-                  }
+                    notifyError(
+                      i18n.str`Operation failed, please report`,
+                      (error instanceof Error
+                        ? error.message
+                        : JSON.stringify(error)) as TranslatedString
+                    )
+                }
                 }
               }}
             >
-- 
cgit v1.2.3