diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx | 77 |
1 files changed, 51 insertions, 26 deletions
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 52dbd4ff6..7861bb0b3 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -16,9 +16,11 @@ import { AmountJson, + AmountString, Amounts, HttpStatusCode, Logger, + TalerError, TranslatedString, buildPayto, parsePaytoUri, @@ -30,17 +32,18 @@ import { notifyError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { h, VNode, Fragment, Ref } from "preact"; +import { Fragment, Ref, VNode, h } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; -import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty, validateIBAN, } from "../utils.js"; -import { useConfigState } from "../hooks/config.js"; -import { useConfigContext } from "../context/config.js"; +import { useBankCoreApiContext } from "../context/config.js"; +import { useBackendState } from "../hooks/backend.js"; +import { assertUnreachable } from "./HomePage.js"; +import { mutate } from "swr"; const logger = new Logger("PaytoWireTransferForm"); @@ -59,6 +62,8 @@ export function PaytoWireTransferForm({ }): VNode { const [isRawPayto, setIsRawPayto] = useState(false); // FIXME: remove this + const { state: credentials } = useBackendState() + const { api } = useBankCoreApiContext(); const [iban, setIban] = useState<string | undefined>(); const [subject, setSubject] = useState<string | undefined>(); const [amount, setAmount] = useState<string | undefined>(); @@ -95,7 +100,7 @@ export function PaytoWireTransferForm({ : undefined, }); - const { createTransaction } = useAccessAPI(); + // const { createTransaction } = useAccessAPI(); const parsed = !rawPaytoInput ? undefined : parsePaytoUri(rawPaytoInput); @@ -119,36 +124,54 @@ export function PaytoWireTransferForm({ async function doSend() { let payto_uri: string | undefined; - + let sendingAmount: AmountString | undefined; if (rawPaytoInput) { - payto_uri = rawPaytoInput + const p = parsePaytoUri(rawPaytoInput) + if (!p) return; + sendingAmount = p.params.amount + delete p.params.amount + //it should have message + payto_uri = stringifyPaytoUri(p) } else { if (!iban || !subject) return; const ibanPayto = buildPayto("iban", iban, undefined); ibanPayto.params.message = encodeURIComponent(subject); payto_uri = stringifyPaytoUri(ibanPayto); + sendingAmount = `${limit.currency}:${trimmedAmountStr}` } try { - await createTransaction({ + if (credentials.status !== "loggedIn") return; + const res = await api.createTransaction(credentials, { payto_uri, - amount: `${limit.currency}:${amount}`, + amount: sendingAmount, }); + mutate(() => true) + if (res.type === "fail") { + switch (res.case) { + case "invalid-input": return notify({ + type: "error", + title: i18n.str`The request was invalid or the payto://-URI used unacceptable features.`, + description: res.detail.hint as TranslatedString, + debug: res.detail, + }) + case "unauthorized": return notify({ + type: "error", + title: i18n.str`Not enough permission to complete the operation.`, + description: res.detail.hint as TranslatedString, + debug: res.detail, + }) + default: assertUnreachable(res) + } + } onSuccess(); setAmount(undefined); setIban(undefined); setSubject(undefined); rawPaytoInputSetter(undefined) } catch (error) { - if (error instanceof RequestError) { - notify( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.BadRequest - ? i18n.str`The request was invalid or the payto://-URI used unacceptable features.` - : undefined, - }), - ); + if (error instanceof TalerError) { + notify(buildRequestErrorMessage(i18n, error)) } else { notifyError( i18n.str`Operation failed, please report`, @@ -179,11 +202,13 @@ export function PaytoWireTransferForm({ if (amount) { setAmount(Amounts.stringifyValue(amount)) } - const subject = parsed.params["subject"] + const subject = parsed.params["message"] if (subject) { setSubject(subject) } } + //payto://iban/DE9714548806481?amount=LOCAL%3A2&message=011Y8V8KDCPFDEKPDZTHS7KZ14GHX7BVWKRDDPZ1N75TJ90166T0 + //payto://iban/DE9714548806481?receiver-name=Exchanger&amount=LOCAL%3A2&message=011Y8V8KDCPFDEKPDZTHS7KZ14GHX7BVWKRDDPZ1N75TJ90166T0 setIsRawPayto(false) }} /> <span class="flex flex-1"> @@ -298,7 +323,7 @@ export function PaytoWireTransferForm({ /> <ShowInputErrorLabel message={errorsWire?.amount} - isDirty={subject !== undefined} + isDirty={trimmedAmountStr !== undefined} /> <p class="mt-2 text-sm text-gray-500" >amount to transfer</p> </div> @@ -394,7 +419,7 @@ export function InputAmount( }, ref: Ref<HTMLInputElement>, ): VNode { - const cfg = useConfigContext() + const { config } = useBankCoreApiContext() return ( <div class="mt-2"> <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"> @@ -418,8 +443,8 @@ export function InputAmount( if (!onChange) return; const l = e.currentTarget.value.length const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR) - if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) { - e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1) + if (sep_pos !== -1 && l - sep_pos - 1 > config.currency.num_fractional_input_digits) { + e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + config.currency.num_fractional_input_digits + 1) } onChange(e.currentTarget.value); }} @@ -431,11 +456,11 @@ export function InputAmount( } export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode { - const cfg = useConfigContext() + const { config } = useBankCoreApiContext() const str = Amounts.stringifyValue(value) const sep_pos = str.indexOf(FRAC_SEPARATOR) - if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) { - const limit = sep_pos + cfg.currency_fraction_digits + 1 + if (sep_pos !== -1 && str.length - sep_pos - 1 > config.currency.num_fractional_normal_digits) { + const limit = sep_pos + config.currency.num_fractional_normal_digits + 1 const normal = str.substring(0, limit) const small = str.substring(limit) return <span class="whitespace-nowrap"> |