diff options
author | Sebastian <sebasjm@gmail.com> | 2022-10-28 13:39:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-10-28 13:39:26 -0300 |
commit | fe6e9be70225cf2953822ff64b9e90066cab97ea (patch) | |
tree | d3c2f2829a963efd6596dbc7fd04d2a325bd2ae0 /packages/taler-wallet-webextension/src/wallet/ManageAccount | |
parent | 7c33040ae377548e5589b11ad218c8b95b82c9c5 (diff) | |
download | wallet-core-fe6e9be70225cf2953822ff64b9e90066cab97ea.tar.xz |
manage account instead of add account
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ManageAccount')
5 files changed, 977 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts new file mode 100644 index 000000000..cd591be74 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts @@ -0,0 +1,80 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { KnownBankAccountsInfo } from "@gnu-taler/taler-util"; +import { Loading } from "../../components/Loading.js"; +import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { + ButtonHandler, + SelectFieldHandler, + TextFieldHandler +} from "../../mui/handlers.js"; +import { compose, StateViewMap } from "../../utils/index.js"; +import { wxApi } from "../../wxApi.js"; +import { useComponentState } from "./state.js"; +import { LoadingUriView, ReadyView } from "./views.js"; + +export interface Props { + currency: string; + onAccountAdded: (uri: string) => void; + onCancel: () => void; +} + +export type State = State.Loading | State.LoadingUriError | State.Ready; + +export namespace State { + export interface Loading { + status: "loading"; + error: undefined; + } + + export interface LoadingUriError { + status: "loading-error"; + error: HookError; + } + + export interface BaseInfo { + error: undefined; + } + export interface Ready extends BaseInfo { + status: "ready"; + error: undefined; + currency: string; + accountType: SelectFieldHandler; + uri: TextFieldHandler; + alias: TextFieldHandler; + onAccountAdded: ButtonHandler; + onCancel: ButtonHandler; + accountByType: AccountByType, + deleteAccount: (a: KnownBankAccountsInfo) => Promise<void>, + } +} + +export type AccountByType = { + [key: string]: KnownBankAccountsInfo[] +}; + +const viewMapping: StateViewMap<State> = { + loading: Loading, + "loading-error": LoadingUriView, + ready: ReadyView, +}; + +export const ManageAccountPage = compose( + "ManageAccountPage", + (p: Props) => useComponentState(p, wxApi), + viewMapping, +); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts new file mode 100644 index 000000000..ad8643133 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts @@ -0,0 +1,127 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { KnownBankAccountsInfo, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { useState } from "preact/hooks"; +import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; +import { wxApi } from "../../wxApi.js"; +import { AccountByType, Props, State } from "./index.js"; + +export function useComponentState( + { currency, onAccountAdded, onCancel }: Props, + api: typeof wxApi, +): State { + const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency })); + + const [payto, setPayto] = useState(""); + const [alias, setAlias] = useState(""); + const [type, setType] = useState(""); + + if (!hook) { + return { + status: "loading", + error: undefined, + }; + } + if (hook.hasError) { + return { + status: "loading-error", + error: hook, + }; + } + + const accountType: Record<string, string> = { + "": "Choose one account type", + iban: "IBAN", + // bitcoin: "Bitcoin", + // "x-taler-bank": "Taler Bank", + }; + const uri = parsePaytoUri(payto); + const found = + hook.response.accounts.findIndex( + (a) => stringifyPaytoUri(a.uri) === payto, + ) !== -1; + + async function addAccount(): Promise<void> { + if (!uri || found) return; + + const normalizedPayto = stringifyPaytoUri(uri); + await api.wallet.call(WalletApiOperation.AddKnownBankAccounts, { + alias, currency, payto: normalizedPayto + }); + onAccountAdded(payto); + } + + const paytoUriError = + found + ? "that account is already present" + : undefined; + + const unableToAdd = !type || !alias || !!paytoUriError || !uri; + + const accountByType: AccountByType = { + iban: [], + bitcoin: [], + "x-taler-bank": [], + } + + hook.response.accounts.forEach(acc => { + accountByType[acc.uri.targetType].push(acc) + }); + + async function deleteAccount(account: KnownBankAccountsInfo): Promise<void> { + const payto = stringifyPaytoUri(account.uri); + await api.wallet.call(WalletApiOperation.ForgetKnownBankAccounts, { + payto + }) + hook?.retry() + } + + return { + status: "ready", + error: undefined, + currency, + accountType: { + list: accountType, + value: type, + onChange: async (v) => { + setType(v); + }, + }, + alias: { + value: alias, + onInput: async (v) => { + setAlias(v); + }, + }, + uri: { + value: payto, + error: paytoUriError, + onInput: async (v) => { + setPayto(v); + }, + }, + accountByType, + deleteAccount, + onAccountAdded: { + onClick: unableToAdd ? undefined : addAccount, + }, + onCancel: { + onClick: async () => onCancel(), + }, + }; +} diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx new file mode 100644 index 000000000..c0d3a38b0 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx @@ -0,0 +1,208 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { createExample } from "../../test-utils.js"; +import { ReadyView } from "./views.js"; + +export default { + title: "wallet/manage account", +}; + +const nullFunction = async () => { + null; +}; + +export const JustTwoBitcoinAccounts = createExample(ReadyView, { + status: "ready", + currency: "ARS", + accountType: { + list: { + "": "Choose one account type", + iban: "IBAN", + // bitcoin: "Bitcoin", + // "x-taler-bank": "Taler Bank", + }, + value: "", + }, + alias: { + value: "", + onInput: nullFunction, + }, + uri: { + value: "", + onInput: nullFunction, + }, + accountByType: { + iban: [], + "x-taler-bank": [], + bitcoin: [ + { + alias: "my bitcoin addr", + currency: "BTC", + kyc_completed: false, + uri: { + targetType: "bitcoin", + segwitAddrs: [], + isKnown: true, + targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh", + params: {}, + }, + }, + { + alias: "my other addr", + currency: "BTC", + kyc_completed: true, + uri: { + targetType: "bitcoin", + segwitAddrs: [], + isKnown: true, + targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh", + params: {}, + }, + }, + ], + }, + onAccountAdded: {}, + onCancel: {}, +}); + +export const WithAllTypeOfAccounts = createExample(ReadyView, { + status: "ready", + currency: "ARS", + accountType: { + list: { + "": "Choose one account type", + iban: "IBAN", + // bitcoin: "Bitcoin", + // "x-taler-bank": "Taler Bank", + }, + value: "", + }, + alias: { + value: "", + onInput: nullFunction, + }, + uri: { + value: "", + onInput: nullFunction, + }, + accountByType: { + iban: [ + { + alias: "my bank", + currency: "ARS", + kyc_completed: true, + uri: { + targetType: "iban", + iban: "ASDQWEQWE", + isKnown: true, + targetPath: "/ASDQWEQWE", + params: {}, + }, + }, + ], + "x-taler-bank": [ + { + alias: "my xtaler bank", + currency: "ARS", + kyc_completed: true, + uri: { + targetType: "x-taler-bank", + host: "localhost", + account: "123", + isKnown: true, + targetPath: "localhost/123", + params: {}, + }, + }, + ], + bitcoin: [ + { + alias: "my bitcoin addr", + currency: "BTC", + kyc_completed: false, + uri: { + targetType: "bitcoin", + segwitAddrs: [], + isKnown: true, + targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh", + params: {}, + }, + }, + { + alias: "my other addr", + currency: "BTC", + kyc_completed: true, + uri: { + targetType: "bitcoin", + segwitAddrs: [], + isKnown: true, + targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh", + params: {}, + }, + }, + ], + }, + onAccountAdded: {}, + onCancel: {}, +}); + +export const AddingIbanAccount = createExample(ReadyView, { + status: "ready", + currency: "ARS", + accountType: { + list: { + "": "Choose one account type", + iban: "IBAN", + // bitcoin: "Bitcoin", + // "x-taler-bank": "Taler Bank", + }, + value: "iban", + }, + alias: { + value: "", + onInput: nullFunction, + }, + uri: { + value: "", + onInput: nullFunction, + }, + accountByType: { + iban: [ + { + alias: "my bank", + currency: "ARS", + kyc_completed: true, + uri: { + targetType: "iban", + iban: "ASDQWEQWE", + isKnown: true, + targetPath: "/ASDQWEQWE", + params: {}, + }, + }, + ], + "x-taler-bank": [], + bitcoin: [], + }, + onAccountAdded: {}, + onCancel: {}, +}); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts new file mode 100644 index 000000000..eae4d4ca2 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts @@ -0,0 +1,28 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { expect } from "chai"; + +describe("test description", () => { + it("should assert", () => { + expect([]).deep.equals([]); + }); +}); diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx new file mode 100644 index 000000000..9bb9e5814 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx @@ -0,0 +1,534 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { + KnownBankAccountsInfo, + PaytoUriBitcoin, + PaytoUriIBAN, + PaytoUriTalerBank, +} 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 { LoadingError } from "../../components/LoadingError.js"; +import { SelectList } from "../../components/SelectList.js"; +import { + Input, + LightText, + 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"; +import { TextField } from "../../mui/TextField.js"; +import checkIcon from "../../svg/check_24px.svg"; +import warningIcon from "../../svg/warning_24px.svg"; +import deleteIcon from "../../svg/delete_24px.svg"; +import { State } from "./index.js"; + +type AccountType = "bitcoin" | "x-taler-bank" | "iban"; +type ComponentFormByAccountType = { + [type in AccountType]: (props: { field: TextFieldHandler }) => VNode; +}; + +type ComponentListByAccountType = { + [type in AccountType]: (props: { + list: KnownBankAccountsInfo[]; + onDelete: (a: KnownBankAccountsInfo) => Promise<void>; + }) => VNode; +}; + +const formComponentByAccountType: ComponentFormByAccountType = { + iban: IbanAddressAccount, + bitcoin: BitcoinAddressAccount, + "x-taler-bank": TalerBankAddressAccount, +}; +const tableComponentByAccountType: ComponentListByAccountType = { + iban: IbanTable, + bitcoin: BitcoinTable, + "x-taler-bank": TalerBankTable, +}; + +const AccountTable = styled.table` + width: 100%; + + border-collapse: separate; + border-spacing: 0px 10px; + tbody tr:nth-child(odd) > td:not(.actions, .kyc) { + background-color: lightgrey; + } + .actions, + .kyc { + width: 10px; + background-color: inherit; + } +`; + +export function LoadingUriView({ error }: State.LoadingUriError): VNode { + const { i18n } = useTranslationContext(); + + return ( + <LoadingError + title={<i18n.Translate>Could not load</i18n.Translate>} + error={error} + /> + ); +} + +export function ReadyView({ + currency, + error, + accountType, + accountByType, + alias, + onAccountAdded, + deleteAccount, + onCancel, + uri, +}: State.Ready): VNode { + const { i18n } = useTranslationContext(); + + return ( + <Fragment> + <section> + <SubTitle> + <i18n.Translate>Known accounts for {currency}</i18n.Translate> + </SubTitle> + <p> + <i18n.Translate> + To add a new account first select the account type. + </i18n.Translate> + </p> + + {error && ( + <ErrorMessage + title={<i18n.Translate>Unable add this account</i18n.Translate>} + description={error} + /> + )} + <p> + <Input> + <SelectList + label={<i18n.Translate>Select account type</i18n.Translate>} + list={accountType.list} + name="accountType" + value={accountType.value} + onChange={accountType.onChange} + /> + </Input> + </p> + {accountType.value === "" ? undefined : ( + <Fragment> + <p> + <CustomFieldByAccountType + type={accountType.value as AccountType} + field={uri} + /> + </p> + <p> + <TextField + label="Account alias" + variant="standard" + required + fullWidth + disabled={accountType.value === ""} + value={alias.value} + onChange={alias.onInput} + /> + </p> + </Fragment> + )} + </section> + <section> + <Button + variant="contained" + color="secondary" + onClick={onCancel.onClick} + > + <i18n.Translate>Cancel</i18n.Translate> + </Button> + <Button + variant="contained" + onClick={onAccountAdded.onClick} + disabled={!onAccountAdded.onClick} + > + <i18n.Translate>Add</i18n.Translate> + </Button> + </section> + <section> + {Object.entries(accountByType).map(([type, list]) => { + const Table = tableComponentByAccountType[type as AccountType]; + return <Table key={type} list={list} onDelete={deleteAccount} />; + })} + </section> + </Fragment> + ); +} + +function IbanTable({ + list, + onDelete, +}: { + list: KnownBankAccountsInfo[]; + onDelete: (ac: KnownBankAccountsInfo) => void; +}): VNode { + const { i18n } = useTranslationContext(); + if (list.length === 0) return <Fragment />; + return ( + <div> + <h1> + <i18n.Translate>IBAN accounts</i18n.Translate> + </h1> + <AccountTable> + <thead> + <tr> + <th> + <i18n.Translate>Alias</i18n.Translate> + </th> + <th> + <i18n.Translate>Int. Account Number</i18n.Translate> + </th> + <th class="kyc"> + <i18n.Translate>KYC</i18n.Translate> + </th> + <th class="actions"></th> + </tr> + </thead> + <tbody> + {list.map((account) => { + const p = account.uri as PaytoUriIBAN; + return ( + <tr key={account.alias}> + <td>{account.alias}</td> + <td>{p.targetPath}</td> + <td class="kyc"> + {account.kyc_completed ? ( + <SvgIcon + title={i18n.str`KYC done`} + dangerouslySetInnerHTML={{ __html: checkIcon }} + color="green" + /> + ) : ( + <SvgIcon + title={i18n.str`KYC missing`} + dangerouslySetInnerHTML={{ __html: warningIcon }} + color="orange" + /> + )} + </td> + <td class="actions"> + <Button + variant="outlined" + startIcon={deleteIcon} + size="small" + onClick={async () => onDelete(account)} + color="error" + > + Forget + </Button> + </td> + </tr> + ); + })} + </tbody> + </AccountTable> + </div> + ); +} + +function TalerBankTable({ + list, + onDelete, +}: { + list: KnownBankAccountsInfo[]; + onDelete: (ac: KnownBankAccountsInfo) => void; +}): VNode { + const { i18n } = useTranslationContext(); + if (list.length === 0) return <Fragment />; + return ( + <div> + <h1> + <i18n.Translate>Taler accounts</i18n.Translate> + </h1> + <AccountTable> + <thead> + <tr> + <th> + <i18n.Translate>Alias</i18n.Translate> + </th> + <th> + <i18n.Translate>Host</i18n.Translate> + </th> + <th> + <i18n.Translate>Account</i18n.Translate> + </th> + <th class="kyc"> + <i18n.Translate>KYC</i18n.Translate> + </th> + <th class="actions"></th> + </tr> + </thead> + <tbody> + {list.map((account) => { + const p = account.uri as PaytoUriTalerBank; + return ( + <tr key={account.alias}> + <td>{account.alias}</td> + <td>{p.host}</td> + <td>{p.account}</td> + <td class="kyc"> + {account.kyc_completed ? ( + <SvgIcon + title={i18n.str`KYC done`} + dangerouslySetInnerHTML={{ __html: checkIcon }} + color="green" + /> + ) : ( + <SvgIcon + title={i18n.str`KYC missing`} + dangerouslySetInnerHTML={{ __html: warningIcon }} + color="orange" + /> + )} + </td> + <td class="actions"> + <Button + variant="outlined" + startIcon={deleteIcon} + size="small" + onClick={async () => onDelete(account)} + color="error" + > + Forget + </Button> + </td> + </tr> + ); + })} + </tbody> + </AccountTable> + </div> + ); +} + +function BitcoinTable({ + list, + onDelete, +}: { + list: KnownBankAccountsInfo[]; + onDelete: (ac: KnownBankAccountsInfo) => void; +}): VNode { + const { i18n } = useTranslationContext(); + if (list.length === 0) return <Fragment />; + return ( + <div> + <h2> + <i18n.Translate>Bitcoin accounts</i18n.Translate> + </h2> + <AccountTable> + <thead> + <tr> + <th> + <i18n.Translate>Alias</i18n.Translate> + </th> + <th> + <i18n.Translate>Address</i18n.Translate> + </th> + <th class="kyc"> + <i18n.Translate>KYC</i18n.Translate> + </th> + <th class="actions"></th> + </tr> + </thead> + <tbody> + {list.map((account) => { + const p = account.uri as PaytoUriBitcoin; + return ( + <tr key={account.alias}> + <td>{account.alias}</td> + <td>{p.targetPath}</td> + <td class="kyc"> + {account.kyc_completed ? ( + <SvgIcon + title={i18n.str`KYC done`} + dangerouslySetInnerHTML={{ __html: checkIcon }} + color="green" + /> + ) : ( + <SvgIcon + title={i18n.str`KYC missing`} + dangerouslySetInnerHTML={{ __html: warningIcon }} + color="orange" + /> + )} + </td> + <td class="actions"> + <Button + variant="outlined" + startIcon={deleteIcon} + size="small" + onClick={async () => onDelete(account)} + color="error" + > + Forget + </Button> + </td> + </tr> + ); + })} + </tbody> + </AccountTable> + </div> + ); +} + +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/${v}`); + } + }} + /> + {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/${v}/${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}/${v}`); + } + }} + />{" "} + {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://iban/${v}`); + } + }} + /> + {value !== undefined && errors?.value && ( + <ErrorMessage title={<span>{errors?.value}</span>} /> + )} + </Fragment> + ); +} + +function CustomFieldByAccountType({ + type, + field, +}: { + type: AccountType; + field: TextFieldHandler; +}): VNode { + const { i18n } = useTranslationContext(); + + const AccountForm = formComponentByAccountType[type]; + + 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> + ); +} |