diff options
author | Sebastian <sebasjm@gmail.com> | 2024-06-03 12:04:31 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-06-03 12:12:24 -0300 |
commit | 43857ec597880cbb4d8c6e477fab192b827b962f (patch) | |
tree | 07ee840977dd0232e5ecd1af7745f89edf32741c /packages/merchant-backoffice-ui/src/components/modal | |
parent | 361a6f9d36542a8ce616b33676e96f769ae34d4d (diff) | |
download | wallet-core-43857ec597880cbb4d8c6e477fab192b827b962f.tar.xz |
fix errors msg and import account letter
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/modal')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/modal/index.tsx | 89 |
1 files changed, 88 insertions, 1 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx index 1335d0f77..43062d13e 100644 --- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -24,9 +24,14 @@ import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js"; import { Spinner } from "../exception/loading.js"; -import { FormProvider } from "../form/FormProvider.js"; +import { FormErrors, FormProvider } from "../form/FormProvider.js"; import { Input } from "../form/Input.js"; import { useSessionContext } from "../../context/session.js"; +import { + AccountLetter, + codecForAccountLetter, + PaytoString, +} from "@gnu-taler/taler-util"; interface Props { active?: boolean; @@ -201,6 +206,88 @@ export function ClearConfirmModal({ ); } +interface ImportingAccountModalProps { + onCancel: () => void; + onConfirm: (account: AccountLetter) => void; +} + +export function ImportingAccountModal({ + onCancel, + onConfirm, +}: ImportingAccountModalProps): VNode { + const { i18n } = useTranslationContext(); + const [letter, setLetter] = useState<string>(); + let parsed = undefined; + try { + parsed = JSON.parse(letter ?? ""); + } catch (e) { + parsed = undefined; + } + let account: AccountLetter | undefined = undefined; + let parsingError: string | undefined = undefined; + try { + account = + parsed !== undefined ? codecForAccountLetter().decode(parsed) : undefined; + } catch (e) { + account = undefined; + if (e instanceof Error) { + parsingError = e.message; + } + } + const errors: FormErrors<{ letter: string }> = { + letter: !letter + ? i18n.str`required` + : parsed === undefined + ? i18n.str`letter should be a JSON string` + : account === undefined + ? i18n.str`JSON string is invalid` + : undefined, + }; + return ( + <ConfirmModal + label={i18n.str`Import`} + description={i18n.str`Importing an account from the bank`} + active + onCancel={onCancel} + disabled={account === undefined} + onConfirm={() => onConfirm(account!)} + > + <p> + <i18n.Translate> + You can export your account settings from the Libeufin Bank's account + profile. Paste the content in the next field. + </i18n.Translate> + </p> + <div class="field is-horizontal"> + <div class="field-label is-normal"> + <label class="label"> + <i18n.Translate>Account information</i18n.Translate> + </label> + </div> + <div class="field-body is-flex-grow-3"> + <div class="field"> + <p class="control"> + <input + class="input" + value={letter ?? ""} + onChange={(e) => { + setLetter(e.currentTarget.value); + }} + /> + </p> + {letter !== undefined && errors.letter && ( + <p class="help is-danger">{errors.letter}</p> + )} + {parsingError !== undefined && ( + <p class="help is-danger">{parsingError}</p> + )} + </div> + </div> + </div> + </ConfirmModal> + ); +} + interface DeleteModalProps { element: { id: string; name: string }; onCancel: () => void; |