From 2b895bea57ae486004d8173354ccd5af52cf042e Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 14 Jun 2024 12:33:17 -0300 Subject: new payto form --- .../src/components/form/InputPaytoForm.tsx | 4 +- .../src/components/form/InputToggle.tsx | 28 ++++-- .../src/components/menu/index.tsx | 16 ++-- .../src/components/modal/index.tsx | 103 +++++++++++++++++++++ .../src/components/tokenfamily/TokenFamilyForm.tsx | 2 +- 5 files changed, 135 insertions(+), 18 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/components') diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx index 9cec72c01..585894863 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx @@ -296,7 +296,7 @@ export function InputPaytoForm({ > name="target" - label={i18n.str`Account type`} + label={i18n.str`Type`} tooltip={i18n.str`Method to use for wire transfer`} values={targets} readonly={readonly} @@ -430,7 +430,9 @@ export function InputPaytoForm({ name="params.receiver-name" readonly={readonly} label={i18n.str`Owner's name`} + placeholder="John Doe" tooltip={i18n.str`Legal name of the person holding the account.`} + help={i18n.str`It should match the bank account name.`} /> )} diff --git a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx index 8c935f33b..89a4dc48c 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputToggle.tsx @@ -18,7 +18,7 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import { InputProps, useField } from "./useField.js"; interface Props extends InputProps { @@ -26,11 +26,12 @@ interface Props extends InputProps { readonly?: boolean; expand?: boolean; threeState?: boolean; + side?: ComponentChildren; toBoolean?: (v?: any) => boolean | undefined; fromBoolean?: (s: boolean | undefined) => any; } -const defaultToBoolean = (f?: any): boolean | undefined => f || ""; +const defaultToBoolean = (f?: any): boolean | undefined => f; const defaultFromBoolean = (v: boolean | undefined): any => v as any; export function InputToggle({ @@ -41,6 +42,7 @@ export function InputToggle({ label, help, threeState, + side, expand, fromBoolean = defaultFromBoolean, toBoolean = defaultToBoolean, @@ -56,7 +58,7 @@ export function InputToggle({ return (
-
); diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index baab9584c..c13839d2d 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -29,11 +29,11 @@ function getInstanceTitle(path: string, id: string): string { case InstancePaths.settings: return `${id}: Settings`; case InstancePaths.bank_new: - return `${id}: Account`; + return `${id}: New bank account`; case InstancePaths.bank_list: - return `${id}: Account`; + return `${id}: Bank accounts`; case InstancePaths.bank_update: - return `${id}: Account`; + return `${id}: Update bank Account`; case InstancePaths.order_list: return `${id}: Orders`; case InstancePaths.order_new: @@ -44,10 +44,6 @@ function getInstanceTitle(path: string, id: string): string { return `${id}: New product`; case InstancePaths.inventory_update: return `${id}: Update product`; - case InstancePaths.reserves_new: - return `${id}: New reserve`; - case InstancePaths.reserves_list: - return `${id}: Reserves`; case InstancePaths.transfers_list: return `${id}: Transfers`; case InstancePaths.transfers_new: @@ -59,11 +55,11 @@ function getInstanceTitle(path: string, id: string): string { case InstancePaths.webhooks_update: return `${id}: Update webhook`; case InstancePaths.otp_devices_list: - return `${id}: otp devices`; + return `${id}: OTP devices`; case InstancePaths.otp_devices_new: - return `${id}: New otp devices`; + return `${id}: New OTP device`; case InstancePaths.otp_devices_update: - return `${id}: Update otp devices`; + return `${id}: Update OTP device`; case InstancePaths.templates_new: return `${id}: New template`; case InstancePaths.templates_update: diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx index 43062d13e..518583a9c 100644 --- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -31,6 +31,8 @@ import { AccountLetter, codecForAccountLetter, PaytoString, + PaytoUri, + stringifyPaytoUri, } from "@gnu-taler/taler-util"; interface Props { @@ -288,6 +290,107 @@ export function ImportingAccountModal({ ); } +interface CompareAccountsModalProps { + onCancel: () => void; + onConfirm: (account: PaytoString) => void; + formPayto: PaytoUri | undefined; + testPayto: PaytoUri; +} + +export function CompareAccountsModal({ + onCancel, + onConfirm, + formPayto, + testPayto, +}: CompareAccountsModalProps): VNode { + const { i18n } = useTranslationContext(); + return ( + onConfirm(stringifyPaytoUri(testPayto))} + > +

+ + Testing agaisnt the account info URL succedded but the account + information reported is different with the account details form. + +

+
+ + + + + + + + + + + + + + + {testPayto.targetType === "iban" && ( + + + + + + )} + {testPayto.targetType === "bitcoin" && ( + + + + + + )} + {testPayto.targetType === "x-taler-bank" && ( + + + + + + + + + + + + + )} + + + + + + +
+ Field + + In the form + + Reported +
+ Type + {formPayto?.targetType ?? "--"}{testPayto.targetType}
+ IBAN + {formPayto?.targetPath ?? "--"}{testPayto.targetPath}
+ Address + {formPayto?.targetPath ?? "--"}{testPayto.targetPath}
+ Host + {formPayto?.targetPath ?? "--"}{testPayto.targetPath}
+ Account id + {formPayto?.targetPath ?? "--"}{testPayto.targetPath}
+ Owner's name + {formPayto?.params["receiver-name"] ?? "--"}{testPayto.params["receiver-name"]}
+
+ + ); +} + interface DeleteModalProps { element: { id: string; name: string }; onCancel: () => void; diff --git a/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx b/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx index 1492beb48..b4c49502d 100644 --- a/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/tokenfamily/TokenFamilyForm.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 Taler Systems S.A. + (C) 2021-2024 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 -- cgit v1.2.3