1 files changed, 31 insertions, 14 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index a0c15c77c..3fc4fcbf1 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -18,13 +18,10 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import {
-  parsePaytoUri,
-  PaytoUriGeneric,
-  stringifyPaytoUri,
-} from "@gnu-taler/taler-util";
+import { parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
 import { COUNTRY_TABLE } from "../../utils/constants.js";
 import { undefinedIfEmpty } from "../../utils/table.js";
 import { FormErrors, FormProvider } from "./FormProvider.js";
@@ -32,7 +29,6 @@ import { Input } from "./Input.js";
 import { InputGroup } from "./InputGroup.js";
 import { InputSelector } from "./InputSelector.js";
 import { InputProps, useField } from "./useField.js";
-import { useEffect, useState } from "preact/hooks";
 
 export interface Props<T> extends InputProps<T> {
   isValid?: (e: any) => boolean;
@@ -108,13 +104,14 @@ function validateEthereum_path1(
  * bank.com/path
  * bank.com/path/subpath/
  */
-const DOMAIN_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+(\/[a-zA-Z0-9-.]+)*\/?$/
+const DOMAIN_REGEX =
+  /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+(:[0-9]+)?(\/[a-zA-Z0-9-.]+)*\/?$/;
 
 function validateTalerBank_path1(
   addr: string,
   i18n: ReturnType<typeof useTranslationContext>["i18n"],
 ): string | undefined {
-  console.log(addr, DOMAIN_REGEX.test(addr))
+  console.log(addr, DOMAIN_REGEX.test(addr));
   try {
     const valid = DOMAIN_REGEX.test(addr);
     if (valid) return undefined;
@@ -206,6 +203,7 @@ export function InputPaytoForm<T>({
   const { value: initialValueStr, onChange } = useField<T>(name);
 
   const initialPayto = parsePaytoUri(initialValueStr ?? "");
+
   const paths = !initialPayto ? [] : initialPayto.targetPath.split("/");
   const initialPath1 = paths.length >= 1 ? paths[0] : undefined;
   const initialPath2 = paths.length >= 2 ? paths[1] : undefined;
@@ -219,6 +217,18 @@ export function InputPaytoForm<T>({
           path2: initialPath2,
         };
   const [value, setValue] = useState<Partial<Entity>>(initial);
+  useEffect(() => {
+    const nv = parsePaytoUri(initialValueStr ?? "");
+    const paths = !initialPayto ? [] : initialPayto.targetPath.split("/");
+    if (nv !== undefined && nv.isKnown) {
+      setValue({
+        target: nv.targetType,
+        params: nv.params,
+        path1: paths.length >= 1 ? paths[0] : undefined,
+        path2: paths.length >= 2 ? paths[1] : undefined,
+    });
+    }
+  }, [initialValueStr]);
 
   const { i18n } = useTranslationContext();
 
@@ -252,7 +262,8 @@ export function InputPaytoForm<T>({
     (k) => (errors as any)[k] !== undefined,
   );
 
-  const path1WithSlash = value.path1 && !value.path1.endsWith("/") ? value.path1 + "/" : value.path1
+  const path1WithSlash =
+    value.path1 && !value.path1.endsWith("/") ? value.path1 + "/" : value.path1;
   const str =
     hasErrors || !value.target
       ? undefined
@@ -413,11 +424,17 @@ export function InputPaytoForm<T>({
                 return v;
               }}
               tooltip={i18n.str`Bank host.`}
-              help={<Fragment>
-                <div><i18n.Translate>Without scheme and may include subpath:</i18n.Translate></div>
-                <div>bank.com/</div>
-                <div>bank.com/path/subpath/</div>
-                </Fragment>}
+              help={
+                <Fragment>
+                  <div>
+                    <i18n.Translate>
+                      Without scheme and may include subpath:
+                    </i18n.Translate>
+                  </div>
+                  <div>bank.com/</div>
+                  <div>bank.com/path/subpath/</div>
+                </Fragment>
+              }
             />
             <Input<Entity>
               name="path2"