diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/ConversionConfig.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/ConversionConfig.tsx | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/ConversionConfig.tsx b/packages/demobank-ui/src/pages/ConversionConfig.tsx new file mode 100644 index 000000000..73a6ab3ee --- /dev/null +++ b/packages/demobank-ui/src/pages/ConversionConfig.tsx @@ -0,0 +1,333 @@ +/* + This file is part of GNU Taler + (C) 2022-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 + 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 { + AmountString, + Amounts, + HttpStatusCode, + OperationOk, + OperationResult, + TalerBankConversionApi, + TranslatedString, + assertUnreachable +} from "@gnu-taler/taler-util"; +import { + LocalNotificationBanner, + ShowInputErrorLabel, + useLocalNotification, + useTranslationContext +} from "@gnu-taler/web-util/browser"; +import { VNode, h } from "preact"; +import { useBankCoreApiContext } from "../context/config.js"; +import { useBackendState } from "../hooks/backend.js"; +import { RouteDefinition } from "../route.js"; +import { ProfileNavigation } from "./ProfileNavigation.js"; +import { useState } from "preact/hooks"; +import { undefinedIfEmpty } from "../utils.js"; +import { InputAmount } from "./PaytoWireTransferForm.js"; + +interface Props { + routeMyAccountDetails: RouteDefinition; + routeMyAccountDelete: RouteDefinition; + routeMyAccountPassword: RouteDefinition; + routeMyAccountCashout: RouteDefinition; + routeConversionConfig: RouteDefinition; + routeCancel: RouteDefinition; + onUpdateSuccess: () => void; +} + +type FormType<T> = { + [k in keyof T]: string | undefined; +} + +type ErrorsType<T> = { + [k in keyof T]?: TranslatedString; +} + + +type FormHandler<T> = { + [k in keyof T]?: { + value: string | undefined; + onUpdate: (s: string) => void; + error: TranslatedString | undefined; + } +} +function useFormState<T>(defaultValue: FormType<T>, validate: (f: FormType<T>) => ErrorsType<T>): FormHandler<T> { + const [form, updateForm] = useState<FormType<T>>(defaultValue) + + const errors = undefinedIfEmpty<ErrorsType<T>>(validate(form)) + + const p = (Object.keys(form) as Array<keyof T>) + console.log("FORM", p) + const handler = p.reduce((prev, fieldName) => { + console.log("fie;d", fieldName) + const currentValue = form[fieldName] + const currentError = errors !== undefined ? errors[fieldName] : undefined + prev[fieldName] = { + error: currentError, + value: currentValue, + onUpdate: (newValue) => { + updateForm({ ...form, [fieldName]: newValue }) + } + } + return prev + }, {} as FormHandler<T>) + + return handler +} + +/** + * Show histories of public accounts. + */ +export function ConversionConfig({ + routeMyAccountCashout, + routeMyAccountDelete, + routeMyAccountDetails, + routeMyAccountPassword, + routeConversionConfig, + routeCancel, + onUpdateSuccess, +}: Props): VNode { + const { i18n } = useTranslationContext(); + + const { state: credentials } = useBackendState(); + const creds = + credentials.status !== "loggedIn" || !credentials.isUserAdministrator + ? undefined + : credentials; + const { api, config } = useBankCoreApiContext(); + + const [notification, notify, handleError] = useLocalNotification(); + + if (!creds) { + return <div>only admin can setup conversion</div>; + } + + const form = useFormState<TalerBankConversionApi.ConversionRate>({ + cashin_min_amount: undefined, + cashin_tiny_amount: undefined, + cashin_fee: undefined, + cashin_ratio: undefined, + cashin_rounding_mode: undefined, + cashout_min_amount: undefined, + cashout_tiny_amount: undefined, + cashout_fee: undefined, + cashout_ratio: undefined, + cashout_rounding_mode: undefined, + }, (state) => { + return ({ + cashin_min_amount: !state.cashin_min_amount ? i18n.str`required` : + !Amounts.parse(`${config.currency}:${state.cashin_min_amount}`) ? i18n.str`invalid` : + undefined, + + }) + }) + + + async function doUpdate() { + if (!creds) return + await handleError(async () => { + const resp = await api + .getConversionInfoAPI() + .updateConversionRate(creds.token, { + + } as any) + if (resp.type === "ok") { + onUpdateSuccess() + } else { + switch (resp.case) { + case HttpStatusCode.Unauthorized: { + return notify({ + type: "error", + title: i18n.str`Wrong credentials`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + } + case HttpStatusCode.NotImplemented: { + return notify({ + type: "error", + title: i18n.str`Conversion is disabled`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + } + default: + assertUnreachable(resp); + } + } + }); + } + + + return ( + <div> + <ProfileNavigation current="conversion" + routeMyAccountCashout={routeMyAccountCashout} + routeMyAccountDelete={routeMyAccountDelete} + routeMyAccountDetails={routeMyAccountDetails} + routeMyAccountPassword={routeMyAccountPassword} + routeConversionConfig={routeConversionConfig} + /> + + <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg"> + <LocalNotificationBanner notification={notification} /> + + <div class="px-4 sm:px-0"> + <h2 class="text-base font-semibold leading-7 text-gray-900"> + <i18n.Translate>Conversion</i18n.Translate> + </h2> + </div> + + <form + class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" + autoCapitalize="none" + autoCorrect="off" + onSubmit={(e) => { + e.preventDefault(); + }} + > + <div class="px-6 pt-6"> + <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"> + <label + for="cashout_amount_min" + class="block text-sm font-medium leading-6 text-gray-900" + >{i18n.str`Minimum amount`}</label> + <InputAmount + name="cashout_amount_min" + left + currency={config.currency} + value={form.cashin_min_amount?.value ?? ""} + onChange={form.cashin_min_amount?.onUpdate} + /> + <ShowInputErrorLabel + message={form.cashin_min_amount?.error} + isDirty={form.cashin_min_amount?.value !== undefined} + /> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate>Only cashout operation above this threshold will be allowed</i18n.Translate> + </p> + </div> + </div> + </div> + + <div class="px-6 pt-6"> + <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"> + <label + for="cashout_amount_tiny" + class="block text-sm font-medium leading-6 text-gray-900" + >{i18n.str`Minimum difference`}</label> + <InputAmount + name="cashout_amount_tiny" + left + currency={config.currency} + value={form.cashin_min_amount?.value ?? ""} + onChange={form.cashin_min_amount?.onUpdate} + /> + <ShowInputErrorLabel + message={form.cashin_min_amount?.error} + isDirty={form.cashin_min_amount?.value !== undefined} + /> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate>Smallest difference between two amounts</i18n.Translate> + </p> + </div> + </div> + </div> + + <div class="px-6 pt-6"> + <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"> + <label + for="cashin_fee" + class="block text-sm font-medium leading-6 text-gray-900" + >{i18n.str`Fee`}</label> + <InputAmount + name="cashin_fee" + left + currency={config.currency} + value={form.cashin_min_amount?.value ?? ""} + onChange={form.cashin_fee?.onUpdate} + /> + <ShowInputErrorLabel + message={form.cashin_fee?.error} + isDirty={form.cashin_fee?.value !== undefined} + /> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate>Operation fee</i18n.Translate> + </p> + </div> + </div> + </div> + + <div class="px-6 pt-6"> + <label + class="block text-sm font-medium leading-6 text-gray-900" + for="password" + > + {i18n.str`Ratio`} + </label> + <div class="mt-2"> + <input + type="number" + class="block w-full 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="current" + id="cashout_ratio" + data-error={!!form.cashin_ratio?.error && form.cashout_ratio?.value !== undefined} + value={form.cashout_ratio?.value ?? ""} + onChange={(e) => { + form.cashout_ratio?.onUpdate(e.currentTarget.value); + }} + autocomplete="off" + /> + <ShowInputErrorLabel + message={form.cashin_ratio?.error} + isDirty={form.cashout_ratio?.value !== undefined} + /> + </div> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate> + Your current password, for security + </i18n.Translate> + </p> + </div> + + <div class="flex items-center justify-between mt-6 gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> + <a name="cancel" + href={routeCancel.url({})} + class="text-sm font-semibold leading-6 text-gray-900" + > + <i18n.Translate>Cancel</i18n.Translate> + </a> + <button + type="submit" + name="update conversion" + class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + onClick={async () => { + doUpdate() + }} + > + <i18n.Translate>Update</i18n.Translate> + </button> + </div> + </form> + </div> + </div> + ); +} + |