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">