From a5406c5a5dc437e036168eb068db11d88e05bb0f Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 19 Sep 2023 08:31:08 -0300 Subject: some ui --- .../src/pages/PaytoWireTransferForm.tsx | 581 +++++++++++---------- 1 file changed, 304 insertions(+), 277 deletions(-) (limited to 'packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx') diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index d16dc70f8..1107360bd 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -17,26 +17,24 @@ import { AmountJson, Amounts, - buildPayto, HttpStatusCode, Logger, - parsePaytoUri, - stringifyPaytoUri, + parsePaytoUri } from "@gnu-taler/taler-util"; import { RequestError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { h, VNode, Fragment } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; -import { notifyError } from "../hooks/notification.js"; +import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAPI } from "../hooks/access.js"; +import { notifyError } from "../hooks/notification.js"; import { buildRequestErrorMessage, undefinedIfEmpty, validateIBAN, } from "../utils.js"; -import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; const logger = new Logger("PaytoWireTransferForm"); @@ -72,293 +70,322 @@ export function PaytoWireTransferForm({ iban: !iban ? i18n.str`Missing IBAN` : !IBAN_REGEX.test(iban) - ? i18n.str`IBAN should have just uppercased letters and numbers` - : validateIBAN(iban, i18n), + ? i18n.str`IBAN should have just uppercased letters and numbers` + : validateIBAN(iban, i18n), subject: !subject ? i18n.str`Missing subject` : undefined, amount: !trimmedAmountStr ? i18n.str`Missing amount` : !parsedAmount - ? i18n.str`Amount is not valid` - : Amounts.isZero(parsedAmount) - ? i18n.str`Should be greater than 0` - : Amounts.cmp(limit, parsedAmount) === -1 - ? i18n.str`balance is not enough` - : undefined, + ? i18n.str`Amount is not valid` + : Amounts.isZero(parsedAmount) + ? i18n.str`Should be greater than 0` + : Amounts.cmp(limit, parsedAmount) === -1 + ? i18n.str`balance is not enough` + : undefined, }); const { createTransaction } = useAccessAPI(); - if (!isRawPayto) - return ( -
-
{ - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > -   - { - setIban(e.currentTarget.value); - }} - /> - -   - { - setSubject(e.currentTarget.value); - }} - /> - -   -
- - { - setAmount(e.currentTarget.value); - }} - /> -
- -

- { - e.preventDefault(); - if (!(iban && subject && amount)) { - return; - } - const ibanPayto = buildPayto("iban", iban, undefined); - ibanPayto.params.message = encodeURIComponent(subject); - const paytoUri = stringifyPaytoUri(ibanPayto); - - try { - await createTransaction({ - paytoUri, - amount: `${limit.currency}:${amount}`, - }); - onSuccess(); - setAmount(undefined); - setIban(undefined); - setSubject(undefined); - } catch (error) { - if (error instanceof RequestError) { - notifyError( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.BadRequest - ? i18n.str`The request was invalid or the payto://-URI used unacceptable features.` - : undefined, - }), - ); - } else { - notifyError({ - title: i18n.str`Operation failed, please report`, - description: - error instanceof Error - ? error.message - : JSON.stringify(error), - }); - } - } - }} - /> - { - e.preventDefault(); - setAmount(undefined); - setIban(undefined); - setSubject(undefined); - }} - /> -

- -

- { - setIsRawPayto(true); - e.preventDefault(); - }} - > - {i18n.str`Want to try the raw payto://-format?`} - -

-
- ); - const parsed = !rawPaytoInput ? undefined : parsePaytoUri(rawPaytoInput); const errorsPayto = undefinedIfEmpty({ rawPaytoInput: !rawPaytoInput ? i18n.str`required` : !parsed - ? i18n.str`does not follow the pattern` - : !parsed.params.amount - ? i18n.str`use the "amount" parameter to specify the amount to be transferred` - : Amounts.parse(parsed.params.amount) === undefined - ? i18n.str`the amount is not valid` - : !parsed.params.message - ? i18n.str`use the "message" parameter to specify a reference text for the transfer` - : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` - : !IBAN_REGEX.test(parsed.iban) - ? i18n.str`IBAN should have just uppercased letters and numbers` - : validateIBAN(parsed.iban, i18n), + ? i18n.str`does not follow the pattern` + : !parsed.params.amount + ? i18n.str`use the "amount" parameter to specify the amount to be transferred` + : Amounts.parse(parsed.params.amount) === undefined + ? i18n.str`the amount is not valid` + : !parsed.params.message + ? i18n.str`use the "message" parameter to specify a reference text for the transfer` + : !parsed.isKnown || parsed.targetType !== "iban" + ? i18n.str`only "IBAN" target are supported` + : !IBAN_REGEX.test(parsed.iban) + ? i18n.str`IBAN should have just uppercased letters and numbers` + : validateIBAN(parsed.iban, i18n), }); + // if (!isRawPayto) { + return (
+
+

Transfer details

+
+
+ {/* */} + - return ( -
-

{i18n.str`Transfer money to account identified by payto:// URI:`}

-
{ - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > -

-   - { - rawPaytoInputSetter(e.currentTarget.value); - }} - /> - -
-

- Hint: - - payto://iban/[receiver-iban]?message=[subject]&amount=[ - {limit.currency} - :X.Y] - -
-

-

- { - if (!rawPaytoInput) { - logger.error("Didn't get any raw Payto string!"); - return; - } - try { - await createTransaction({ - paytoUri: rawPaytoInput, - }); - onSuccess(); - rawPaytoInputSetter(undefined); - } catch (error) { - if (error instanceof RequestError) { - notifyError( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.BadRequest - ? i18n.str`The request was invalid or the payto://-URI used unacceptable features.` - : undefined, - }), - ); - } else { - notifyError({ - title: i18n.str`Operation failed, please report`, - description: - error instanceof Error - ? error.message - : JSON.stringify(error), - }); - } - } - }} - /> -

-

- { - setIsRawPayto(false); - }} - > - {i18n.str`Use wire-transfer form?`} - -

-
+ {/* */} + +
+
- ); + +
+
+
+ {!isRawPayto ? + + +
+ +
+ { + setIban(e.currentTarget.value); + }} + /> + +
+

the receiver of the money

+
+ +
+
+ +
+ +
+ + { + setSubject(e.currentTarget.value); + }} + /> + +
+

some text to identify the transfer

+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ : + +
+ +
+ { + rawPaytoInputSetter(e.currentTarget.value); + }} + /> + +
+
+ + + } +
+
+
+ + +
+
+
+ ) + // } + // return ( + //
+ //
{ + // e.preventDefault(); + // }} + // autoCapitalize="none" + // autoCorrect="off" + // > + //   + + //   + + //   + //
+ // + // { + // setAmount(e.currentTarget.value); + // }} + // /> + //
+ // + //

+ // { + // e.preventDefault(); + // if (!(iban && subject && amount)) { + // return; + // } + // const ibanPayto = buildPayto("iban", iban, undefined); + // ibanPayto.params.message = encodeURIComponent(subject); + // const paytoUri = stringifyPaytoUri(ibanPayto); + + // try { + // await createTransaction({ + // paytoUri, + // amount: `${limit.currency}:${amount}`, + // }); + // onSuccess(); + // setAmount(undefined); + // setIban(undefined); + // setSubject(undefined); + // } catch (error) { + // if (error instanceof RequestError) { + // notifyError( + // buildRequestErrorMessage(i18n, error.cause, { + // onClientError: (status) => + // status === HttpStatusCode.BadRequest + // ? i18n.str`The request was invalid or the payto://-URI used unacceptable features.` + // : undefined, + // }), + // ); + // } else { + // notifyError({ + // title: i18n.str`Operation failed, please report`, + // description: + // error instanceof Error + // ? error.message + // : JSON.stringify(error), + // }); + // } + // } + // }} + // /> + // { + // e.preventDefault(); + // setAmount(undefined); + // setIban(undefined); + // setSubject(undefined); + // }} + // /> + //

+ // + //

+ // { + // setIsRawPayto(true); + // e.preventDefault(); + // }} + // > + // {i18n.str`Want to try the raw payto://-format?`} + // + //

+ //
+ // ); + + + + // return ( + //
+ //

{i18n.str`Transfer money to account identified by payto:// URI:`}

+ + //
+ // ); } -- cgit v1.2.3