From aa6227b2b858d48272129c96fcf3d7fae39bba30 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 27 Oct 2022 16:06:41 -0300
Subject: showing error field when there is not account yet

---
 .../src/wallet/AddAccount/views.tsx                | 194 +++++++++++++--------
 1 file changed, 120 insertions(+), 74 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/AddAccount/views.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/AddAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/AddAccount/views.tsx
index fa7014d70..d6ab7e967 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddAccount/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddAccount/views.tsx
@@ -105,7 +105,11 @@ export function ReadyView({
         >
           <i18n.Translate>Cancel</i18n.Translate>
         </Button>
-        <Button variant="contained" onClick={onAccountAdded.onClick}>
+        <Button
+          variant="contained"
+          onClick={onAccountAdded.onClick}
+          disabled={!onAccountAdded.onClick}
+        >
           <i18n.Translate>Add</i18n.Translate>
         </Button>
       </footer>
@@ -113,6 +117,118 @@ export function ReadyView({
   );
 }
 
+function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bitcoin address"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://bitcoin/${value}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+function TalerBankAddressAccount({
+  field,
+}: {
+  field: TextFieldHandler;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [host, setHost] = useState<string | undefined>(undefined);
+  const [account, setAccount] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    host: !host ? i18n.str`Can't be empty` : undefined,
+    account: !account ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bank host"
+        variant="standard"
+        fullWidth
+        value={host}
+        error={host !== undefined && !!errors?.host}
+        onChange={(v) => {
+          setHost(v);
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${host}/${account}`);
+          }
+        }}
+      />{" "}
+      {host !== undefined && errors?.host && (
+        <ErrorMessage title={<span>{errors?.host}</span>} />
+      )}
+      <TextField
+        label="Bank account"
+        variant="standard"
+        fullWidth
+        value={account}
+        error={account !== undefined && !!errors?.account}
+        onChange={(v) => {
+          setAccount(v || "");
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${host}/${account}`);
+          }
+        }}
+      />{" "}
+      {account !== undefined && errors?.account && (
+        <ErrorMessage title={<span>{errors?.account}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="IBAN number"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://iba/${value}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
 function CustomFieldByAccountType({
   type,
   field,
@@ -120,84 +236,14 @@ function CustomFieldByAccountType({
   type: string;
   field: TextFieldHandler;
 }): VNode {
-  const p = parsePaytoUri(field.value);
-  const parts = !p ? [] : p.targetPath.split("/");
-  const initialPart1 = parts.length > 0 ? parts[0] : "";
-  const initialPart2 = parts.length > 1 ? parts[1] : "";
-  const [part1, setPart1] = useState(initialPart1);
-  const [part2, setPart2] = useState(initialPart2);
-  function updateField(): void {
-    if (part1 && part2) {
-      field.onInput(`payto://${type}/${part1}/${part2}`);
-    } else {
-      if (part1) field.onInput(`payto://${type}/${part1}`);
-    }
-  }
-
   if (type === "bitcoin") {
-    return (
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="Bitcoin address"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
+    return <BitcoinAddressAccount field={field} />;
   }
   if (type === "x-taler-bank") {
-    return (
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="Bank host"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />{" "}
-        <TextField
-          label="Bank account"
-          variant="standard"
-          required
-          fullWidth
-          value={part2}
-          onChange={(v) => {
-            setPart2(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
+    return <TalerBankAddressAccount field={field} />;
   }
   if (type === "iban") {
-    return (
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="IBAN number"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
+    return <IbanAddressAccount field={field} />;
   }
   return <Fragment />;
 }
-- 
cgit v1.2.3