validate iban

packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts

@@ -40,10 +40,18 @@ export function useComponentState({
     api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }),
   );
   const { devMode } = useDevContext();
+  const accountType: Record<string, string> = {
+    iban: "IBAN",
+    // "x-taler-bank": "Taler Bank",
+  };
+  if (devMode) {
+    accountType["bitcoin"] = "Bitcoin";
+    accountType["x-taler-bank"] = "Taler Bank";
+  }
 
   const [payto, setPayto] = useState("");
   const [alias, setAlias] = useState("");
-  const [type, setType] = useState("");
+  const [type, setType] = useState("iban");
 
   if (!hook) {
     return {
@@ -58,15 +66,6 @@ export function useComponentState({
     };
   }
 
-  const accountType: Record<string, string> = {
-    "": "Choose one account type",
-    iban: "IBAN",
-    // "x-taler-bank": "Taler Bank",
-  };
-  if (devMode) {
-    accountType["bitcoin"] = "Bitcoin";
-    accountType["x-taler-bank"] = "Taler Bank";
-  }
   const uri = parsePaytoUri(payto);
   const found =
     hook.response.accounts.findIndex(

packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx

@@ -32,12 +32,11 @@ export const JustTwoBitcoinAccounts = tests.createExample(ReadyView, {
   currency: "ARS",
   accountType: {
     list: {
-      "": "Choose one account type",
       iban: "IBAN",
-      // bitcoin: "Bitcoin",
+      bitcoin: "Bitcoin",
-      // "x-taler-bank": "Taler Bank",
+      "x-taler-bank": "Taler Bank",
     },
-    value: "",
+    value: "bitcoin",
   },
   alias: {
     value: "",
@@ -86,12 +85,11 @@ export const WithAllTypeOfAccounts = tests.createExample(ReadyView, {
   currency: "ARS",
   accountType: {
     list: {
-      "": "Choose one account type",
       iban: "IBAN",
-      // bitcoin: "Bitcoin",
+      bitcoin: "Bitcoin",
-      // "x-taler-bank": "Taler Bank",
+      "x-taler-bank": "Taler Bank",
     },
-    value: "",
+    value: "x-taler-bank",
   },
   alias: {
     value: "",
@@ -167,7 +165,6 @@ export const AddingIbanAccount = tests.createExample(ReadyView, {
   currency: "ARS",
   accountType: {
     list: {
-      "": "Choose one account type",
       iban: "IBAN",
       // bitcoin: "Bitcoin",
       // "x-taler-bank": "Taler Bank",

packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx

@@ -21,18 +21,14 @@ import {
   PaytoUriIBAN,
   PaytoUriTalerBank,
   stringifyPaytoUri,
+  validateIban,
 } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { SelectList } from "../../components/SelectList.js";
-import {
+import { Input, SubTitle, SvgIcon } from "../../components/styled/index.js";
-  Input,
-  SubTitle,
-  SvgIcon,
-  WarningText,
-} from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import { TextFieldHandler } from "../../mui/handlers.js";
@@ -111,38 +107,47 @@ export function ReadyView({
             description={error}
           />
         )}
-        <p>
+        <div style={{ width: "100%", display: "flex" }}>
-          <Input>
+          {Object.entries(accountType.list).map(([key, name], idx) => (
-            <SelectList
+            <div
-              label={i18n.str`Select account type`}
+              style={{
-              list={accountType.list}
+                marginLeft: 8,
-              name="accountType"
+                padding: 8,
-              value={accountType.value}
+                borderTopLeftRadius: 5,
-              onChange={accountType.onChange}
+                borderTopRightRadius: 5,
+                backgroundColor:
+                  accountType.value === key ? "#0042b2" : "unset",
+                color: accountType.value === key ? "white" : "unset",
+              }}
+              onClick={(e) => {
+                if (accountType.onChange) {
+                  accountType.onChange(key);
+                }
+              }}
+            >
+              {name}
+            </div>
+          ))}
+        </div>
+        <div style={{ border: "1px solid gray", padding: 8, borderRadius: 5 }}>
+          <p>
+            <CustomFieldByAccountType
+              type={accountType.value as AccountType}
+              field={uri}
             />
-          </Input>
+          </p>
+        </div>
+        <p>
+          <TextField
+            label="Alias"
+            variant="filled"
+            placeholder="Easy to remember description"
+            fullWidth
+            disabled={accountType.value === ""}
+            value={alias.value}
+            onChange={alias.onInput}
+          />
         </p>
-        {accountType.value === "" ? undefined : (
-          <Fragment>
-            <p>
-              <CustomFieldByAccountType
-                type={accountType.value as AccountType}
-                field={uri}
-              />
-            </p>
-            <p>
-              <TextField
-                label="Alias"
-                variant="filled"
-                placeholder="Easy to remember description"
-                fullWidth
-                disabled={accountType.value === ""}
-                value={alias.value}
-                onChange={alias.onInput}
-              />
-            </p>
-          </Fragment>
-        )}
       </section>
       <section>
         <Button
@@ -403,6 +408,9 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   });
   return (
     <Fragment>
+      <h3>
+        <i18n.Translate>Bitcoin Account</i18n.Translate>
+      </h3>
       <TextField
         label="Bitcoin address"
         variant="standard"
@@ -442,6 +450,9 @@ function TalerBankAddressAccount({
   });
   return (
     <Fragment>
+      <h3>
+        <i18n.Translate>Taler Bank</i18n.Translate>
+      </h3>
       <TextField
         label="Bank host"
         variant="standard"
@@ -493,7 +504,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
       : undefined,
     iban: !iban
       ? i18n.str`Can't be empty`
-      : !ibanRegex.test(iban)
+      : validateIban(iban).type === "invalid"
       ? i18n.str`Invalid iban`
       : undefined,
     name: !name ? i18n.str`Can't be empty` : undefined,
@@ -512,7 +523,10 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   }
   return (
     <Fragment>
-      <p>
+      <h3>
+        <i18n.Translate>International Bank Account Number</i18n.Translate>
+      </h3>
+      {/* <p>
         <TextField
           label="BIC"
           variant="filled"
@@ -526,7 +540,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
             sendUpdateIfNoErrors(v, iban || "", name || "");
           }}
         />
-      </p>
+      </p> */}
       <p>
         <TextField
           label="IBAN"
@@ -545,7 +559,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
       </p>
       <p>
         <TextField
-          label="Receiver name"
+          label="Account name"
           variant="filled"
           placeholder="Name of the target bank account owner"
           fullWidth
@@ -576,11 +590,6 @@ function CustomFieldByAccountType({
 
   return (
     <div>
-      <WarningText>
-        <i18n.Translate>
-          We can not validate the account so make sure the value is correct.
-        </i18n.Translate>
-      </WarningText>
       <AccountForm field={field} />
     </div>
   );

packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx

@@ -42,10 +42,6 @@ import {
   WithdrawalDetails,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
-// import {
-//   createExample,
-//   createExampleWithCustomContext as createExampleInCustomContext,
-// } from "../test-utils.js";
 import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import beer from "../../static-dev/beer.png";
 import { TransactionView as TestedComponent } from "./Transaction.js";