diff options
author | Sebastian <sebasjm@gmail.com> | 2023-10-19 02:55:57 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-10-19 02:56:15 -0300 |
commit | 366cccb8fcae6a9971a1e8a9143d821e289339d1 (patch) | |
tree | fcaa481f7053ef11c92e988d3fb84bf3cedbaba3 /packages/demobank-ui/src/pages/admin/AccountForm.tsx | |
parent | a67518ab1a865fc79374a19bce6513b0caa2eab6 (diff) | |
download | wallet-core-366cccb8fcae6a9971a1e8a9143d821e289339d1.tar.xz |
integrate bank into the new taler-util API
Diffstat (limited to 'packages/demobank-ui/src/pages/admin/AccountForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/admin/AccountForm.tsx | 72 |
1 files changed, 39 insertions, 33 deletions
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx index ed8bf610d..8470930bf 100644 --- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx @@ -3,7 +3,7 @@ import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; import { PartialButDefined, RecursivePartial, WithIntermediate, undefinedIfEmpty, validateIBAN } from "../../utils.js"; import { useEffect, useRef, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { buildPayto, parsePaytoUri } from "@gnu-taler/taler-util"; +import { TalerCorebankApi, buildPayto, parsePaytoUri } from "@gnu-taler/taler-util"; import { doAutoFocus } from "../PaytoWireTransferForm.js"; const IBAN_REGEX = /^[A-Z][A-Z0-9]*$/; @@ -28,8 +28,8 @@ export function AccountForm({ }: { focus?: boolean, children: ComponentChildren, - template: SandboxBackend.Circuit.CircuitAccountData | undefined; - onChange: (a: SandboxBackend.Circuit.CircuitAccountData | undefined) => void; + template: TalerCorebankApi.AccountData | undefined; + onChange: (a: TalerCorebankApi.AccountData | undefined) => void; purpose: "create" | "update" | "show"; }): VNode { const initial = initializeFromTemplate(template); @@ -41,12 +41,12 @@ export function AccountForm({ function updateForm(newForm: typeof initial): void { - const parsed = !newForm.cashout_address + const parsed = !newForm.cashout_payto_uri ? undefined - : buildPayto("iban", newForm.cashout_address, undefined);; + : buildPayto("iban", newForm.cashout_payto_uri, undefined);; const errors = undefinedIfEmpty<RecursivePartial<typeof initial>>({ - cashout_address: !newForm.cashout_address + cashout_payto_uri: !newForm.cashout_payto_uri ? i18n.str`required` : !parsed ? i18n.str`does not follow the pattern` @@ -75,7 +75,8 @@ export function AccountForm({ // ? i18n.str`IBAN should have just uppercased letters and numbers` // : validateIBAN(newForm.iban, i18n), name: !newForm.name ? i18n.str`required` : undefined, - username: !newForm.username ? i18n.str`required` : undefined, + + // username: !newForm.username ? i18n.str`required` : undefined, }); setErrors(errors); setForm(newForm); @@ -94,7 +95,7 @@ export function AccountForm({ <div class="px-4 py-6 sm:p-8"> <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <div class="sm:col-span-5"> + {/* <div class="sm:col-span-5"> <label class="block text-sm font-medium leading-6 text-gray-900" for="username" @@ -127,7 +128,7 @@ export function AccountForm({ <p class="mt-2 text-sm text-gray-500" > <i18n.Translate>account identification in the bank</i18n.Translate> </p> - </div> + </div> */} <div class="sm:col-span-5"> <label @@ -178,7 +179,7 @@ export function AccountForm({ name="internal-iban" id="internal-iban" disabled={true} - value={form.iban ?? ""} + value={form.payto_uri ?? ""} /> </div> <p class="mt-2 text-sm text-gray-500" > @@ -200,18 +201,20 @@ export function AccountForm({ class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name="email" id="email" - data-error={!!errors?.contact_data?.email && form.contact_data.email !== undefined} + data-error={!!errors?.contact_data?.email && form.contact_data?.email !== undefined} disabled={purpose !== "create"} - value={form.contact_data.email ?? ""} + value={form.contact_data?.email ?? ""} onChange={(e) => { - form.contact_data.email = e.currentTarget.value; - updateForm(structuredClone(form)); + if (form.contact_data) { + form.contact_data.email = e.currentTarget.value; + updateForm(structuredClone(form)); + } }} autocomplete="off" /> <ShowInputErrorLabel message={errors?.contact_data?.email} - isDirty={form.contact_data.email !== undefined} + isDirty={form.contact_data?.email !== undefined} /> </div> </div> @@ -231,18 +234,20 @@ export function AccountForm({ name="phone" id="phone" disabled={purpose !== "create"} - value={form.contact_data.phone ?? ""} - data-error={!!errors?.contact_data?.phone && form.contact_data.phone !== undefined} + value={form.contact_data?.phone ?? ""} + data-error={!!errors?.contact_data?.phone && form.contact_data?.phone !== undefined} onChange={(e) => { - form.contact_data.phone = e.currentTarget.value; - updateForm(structuredClone(form)); + if (form.contact_data) { + form.contact_data.phone = e.currentTarget.value; + updateForm(structuredClone(form)); + } }} // placeholder="" autocomplete="off" /> <ShowInputErrorLabel message={errors?.contact_data?.phone} - isDirty={form.contact_data.phone !== undefined} + isDirty={form.contact_data?.phone !== undefined} /> </div> </div> @@ -259,21 +264,21 @@ export function AccountForm({ <div class="mt-2"> <input type="text" - data-error={!!errors?.cashout_address && form.cashout_address !== undefined} + data-error={!!errors?.cashout_payto_uri && form.cashout_payto_uri !== undefined} class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name="cashout" id="cashout" disabled={purpose === "show"} - value={form.cashout_address ?? ""} + value={form.cashout_payto_uri ?? ""} onChange={(e) => { - form.cashout_address = e.currentTarget.value; + form.cashout_payto_uri = e.currentTarget.value; updateForm(structuredClone(form)); }} autocomplete="off" /> <ShowInputErrorLabel - message={errors?.cashout_address} - isDirty={form.cashout_address !== undefined} + message={errors?.cashout_payto_uri} + isDirty={form.cashout_payto_uri !== undefined} /> </div> <p class="mt-2 text-sm text-gray-500" > @@ -289,26 +294,27 @@ export function AccountForm({ } function initializeFromTemplate( - account: SandboxBackend.Circuit.CircuitAccountData | undefined, -): WithIntermediate<SandboxBackend.Circuit.CircuitAccountData> { + account: TalerCorebankApi.AccountData | undefined, +): WithIntermediate<TalerCorebankApi.AccountData> { const emptyAccount = { - cashout_address: undefined, - iban: undefined, - name: undefined, - username: undefined, + cashout_payto_uri: undefined, contact_data: undefined, + payto_uri: undefined, + balance: undefined, + debit_threshold: undefined, + name: undefined, }; const emptyContact = { email: undefined, phone: undefined, }; - const initial: PartialButDefined<SandboxBackend.Circuit.CircuitAccountData> = + const initial: PartialButDefined<TalerCorebankApi.AccountData> = structuredClone(account) ?? emptyAccount; if (typeof initial.contact_data === "undefined") { initial.contact_data = emptyContact; } - initial.contact_data.email; + // initial.contact_data.email; return initial as any; } |