From 236d4347f5884bb1d9ca1d3bb4ad0ba776577fd2 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 23 Jan 2024 18:00:42 -0300 Subject: many changes activate eslint update file headers removed history and preact-router remove eslint errors and more applied prettier --- .../src/pages/business/CreateCashout.tsx | 544 +++++++++++++-------- .../src/pages/business/ShowCashoutDetails.tsx | 136 +++--- 2 files changed, 426 insertions(+), 254 deletions(-) (limited to 'packages/demobank-ui/src/pages/business') diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx index 254a0d81f..93bd2c89d 100644 --- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx +++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx @@ -17,13 +17,13 @@ import { AbsoluteTime, Amounts, HttpStatusCode, - TalerCorebankApi, TalerError, TalerErrorCode, TranslatedString, + assertUnreachable, encodeCrock, getRandomBytes, - parsePaytoUri + parsePaytoUri, } from "@gnu-taler/taler-util"; import { Attention, @@ -32,7 +32,7 @@ import { ShowInputErrorLabel, notifyInfo, useLocalNotification, - useTranslationContext + useTranslationContext, } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useEffect, useState } from "preact/hooks"; @@ -40,24 +40,22 @@ import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js import { VersionHint, useBankCoreApiContext } from "../../context/config.js"; import { useAccountDetails } from "../../hooks/access.js"; import { useBackendState } from "../../hooks/backend.js"; -import { - useConversionInfo, - useEstimator -} from "../../hooks/circuit.js"; -import { - TanChannel, - undefinedIfEmpty -} from "../../utils.js"; -import { LoginForm } from "../LoginForm.js"; -import { InputAmount, RenderAmount, doAutoFocus } from "../PaytoWireTransferForm.js"; -import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { useBankState } from "../../hooks/bank-state.js"; +import { useConversionInfo, useEstimator } from "../../hooks/circuit.js"; +import { RouteDefinition } from "../../route.js"; +import { TanChannel, undefinedIfEmpty } from "../../utils.js"; +import { LoginForm } from "../LoginForm.js"; +import { + InputAmount, + RenderAmount, + doAutoFocus, +} from "../PaytoWireTransferForm.js"; interface Props { account: string; - focus?: boolean, - onAuthorizationRequired: () => void, - onCancel?: () => void; + focus?: boolean; + onAuthorizationRequired: () => void; + routeClose: RouteDefinition>; } type FormType = { @@ -70,12 +68,11 @@ type ErrorFrom = { [P in keyof T]+?: string; }; - export function CreateCashout({ account: accountName, onAuthorizationRequired, focus, - onCancel, + routeClose, }: Props): VNode { const { i18n } = useTranslationContext(); const resultAccount = useAccountDetails(accountName); @@ -84,95 +81,130 @@ export function CreateCashout({ estimateByDebit: calculateFromDebit, } = useEstimator(); const { state: credentials } = useBackendState(); - const creds = credentials.status !== "loggedIn" ? undefined : credentials - const [, updateBankState] = useBankState() + const creds = credentials.status !== "loggedIn" ? undefined : credentials; + const [, updateBankState] = useBankState(); - const { api, config, hints } = useBankCoreApiContext() - const [form, setForm] = useState>({ isDebit: true, }); - const [notification, notify, handleError] = useLocalNotification() + const { api, config, hints } = useBankCoreApiContext(); + const [form, setForm] = useState>({ isDebit: true }); + const [notification, notify, handleError] = useLocalNotification(); const info = useConversionInfo(); if (!config.allow_conversion) { - return - The bank configuration does not support cashout operations. - + return ( + + + + The bank configuration does not support cashout operations. + + +
+ + Close + +
+ + ); } - const OLD_CASHOUT_API = hints.indexOf(VersionHint.CASHOUT_BEFORE_2FA) !== -1 + const OLD_CASHOUT_API = hints.indexOf(VersionHint.CASHOUT_BEFORE_2FA) !== -1; if (!resultAccount) { - return + return ; } if (resultAccount instanceof TalerError) { - return + return ; } if (resultAccount.type === "fail") { switch (resultAccount.case) { - case HttpStatusCode.Unauthorized: return - case HttpStatusCode.NotFound: return - default: assertUnreachable(resultAccount) + case HttpStatusCode.Unauthorized: + return ; + case HttpStatusCode.NotFound: + return ; + default: + assertUnreachable(resultAccount); } } if (!info) { - return + return ; } if (info instanceof TalerError) { - return + return ; } if (info.type === "fail") { switch (info.case) { case HttpStatusCode.NotImplemented: { - return - ; + return ( + + ); } - default: assertUnreachable(info.case) + default: + assertUnreachable(info.case); } } - - const conversionInfo = info.body.conversion_rate + const conversionInfo = info.body.conversion_rate; if (!conversionInfo) { - return
conversion enabled but server replied without conversion_rate
+ return ( +
conversion enabled but server replied without conversion_rate
+ ); } const account = { balance: Amounts.parseOrThrow(resultAccount.body.balance.amount), - balanceIsDebit: resultAccount.body.balance.credit_debit_indicator == "debit", - debitThreshold: Amounts.parseOrThrow(resultAccount.body.debit_threshold) - } + balanceIsDebit: + resultAccount.body.balance.credit_debit_indicator == "debit", + debitThreshold: Amounts.parseOrThrow(resultAccount.body.debit_threshold), + }; - const { fiat_currency, regional_currency, fiat_currency_specification, regional_currency_specification } = info.body + const { + fiat_currency, + regional_currency, + fiat_currency_specification, + regional_currency_specification, + } = info.body; const regionalZero = Amounts.zeroOfCurrency(regional_currency); const fiatZero = Amounts.zeroOfCurrency(fiat_currency); const limit = account.balanceIsDebit ? Amounts.sub(account.debitThreshold, account.balance).amount : Amounts.add(account.balance, account.debitThreshold).amount; - const zeroCalc = { debit: regionalZero, credit: fiatZero, beforeFee: fiatZero }; + const zeroCalc = { + debit: regionalZero, + credit: fiatZero, + beforeFee: fiatZero, + }; const [calc, setCalc] = useState(zeroCalc); const sellFee = Amounts.parseOrThrow(conversionInfo.cashout_fee); - const sellRate = conversionInfo.cashout_ratio + const sellRate = conversionInfo.cashout_ratio; /** * can be in regional currency or fiat currency * depending on the isDebit flag */ const inputAmount = Amounts.parseOrThrow( - `${form.isDebit ? regional_currency : fiat_currency}:${!form.amount ? "0" : form.amount}`, + `${form.isDebit ? regional_currency : fiat_currency}:${ + !form.amount ? "0" : form.amount + }`, ); useEffect(() => { async function doAsync() { await handleError(async () => { if (Amounts.isNonZero(inputAmount)) { - const resp = await (form.isDebit ? - calculateFromDebit(inputAmount, sellFee) : - calculateFromCredit(inputAmount, sellFee)); - setCalc(resp) + const resp = await (form.isDebit + ? calculateFromDebit(inputAmount, sellFee) + : calculateFromCredit(inputAmount, sellFee)); + setCalc(resp); } - }) + }); } - doAsync() + doAsync(); }, [form.amount, form.isDebit]); const balanceAfter = Amounts.sub(account.balance, calc.debit).amount; @@ -198,10 +230,13 @@ export function CreateCashout({ const trimmedAmountStr = form.amount?.trim(); async function createCashout() { - const request_uid = encodeCrock(getRandomBytes(32)) + const request_uid = encodeCrock(getRandomBytes(32)); await handleError(async () => { - //new cashout api doesn't require channel - const validChannel = !OLD_CASHOUT_API || config.supported_tan_channels.length === 0 || form.channel + // new cashout api doesn't require channel + const validChannel = + !OLD_CASHOUT_API || + config.supported_tan_channels.length === 0 || + form.channel; if (!creds || !form.subject || !validChannel) return; const request = { @@ -210,10 +245,10 @@ export function CreateCashout({ amount_debit: Amounts.stringify(calc.debit), subject: form.subject, tan_channel: form.channel, - } - const resp = await api.createCashout(creds, request) + }; + const resp = await api.createCashout(creds, request); if (resp.type === "ok") { - notifyInfo(i18n.str`Cashout created`) + notifyInfo(i18n.str`Cashout created`); } else { switch (resp.case) { case HttpStatusCode.Accepted: { @@ -222,102 +257,127 @@ export function CreateCashout({ id: String(resp.body.challenge_id), sent: AbsoluteTime.never(), request, - }) - return onAuthorizationRequired() + }); + return onAuthorizationRequired(); } - case HttpStatusCode.NotFound: return notify({ - type: "error", - title: i18n.str`Account not found`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case TalerErrorCode.BANK_TRANSFER_REQUEST_UID_REUSED: return notify({ - type: "error", - title: i18n.str`Duplicated request detected, check if the operation succeded or try again.`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case TalerErrorCode.BANK_BAD_CONVERSION: return notify({ - type: "error", - title: i18n.str`The conversion rate was incorrectly applied`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case TalerErrorCode.BANK_UNALLOWED_DEBIT: return notify({ - type: "error", - title: i18n.str`The account does not have sufficient funds`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case HttpStatusCode.NotImplemented: return notify({ - type: "error", - title: i18n.str`Cashouts are not supported`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case TalerErrorCode.BANK_CONFIRM_INCOMPLETE: return notify({ - type: "error", - title: i18n.str`Missing cashout URI in the profile`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case TalerErrorCode.BANK_TAN_CHANNEL_SCRIPT_FAILED: return notify({ - type: "error", - title: i18n.str`Sending the confirmation message failed, retry later or contact the administrator.`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); + case HttpStatusCode.NotFound: + return notify({ + type: "error", + title: i18n.str`Account not found`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case TalerErrorCode.BANK_TRANSFER_REQUEST_UID_REUSED: + return notify({ + type: "error", + title: i18n.str`Duplicated request detected, check if the operation succeded or try again.`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case TalerErrorCode.BANK_BAD_CONVERSION: + return notify({ + type: "error", + title: i18n.str`The conversion rate was incorrectly applied`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case TalerErrorCode.BANK_UNALLOWED_DEBIT: + return notify({ + type: "error", + title: i18n.str`The account does not have sufficient funds`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case HttpStatusCode.NotImplemented: + return notify({ + type: "error", + title: i18n.str`Cashouts are not supported`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case TalerErrorCode.BANK_CONFIRM_INCOMPLETE: + return notify({ + type: "error", + title: i18n.str`Missing cashout URI in the profile`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); + case TalerErrorCode.BANK_TAN_CHANNEL_SCRIPT_FAILED: + return notify({ + type: "error", + title: i18n.str`Sending the confirmation message failed, retry later or contact the administrator.`, + description: resp.detail.hint as TranslatedString, + debug: resp.detail, + }); } - assertUnreachable(resp) + assertUnreachable(resp); } - }) + }); } - const cashoutDisabled = config.supported_tan_channels.length < 1 || !resultAccount.body.cashout_payto_uri - console.log("disab", cashoutDisabled) - const cashoutAccount = !resultAccount.body.cashout_payto_uri ? undefined : - parsePaytoUri(resultAccount.body.cashout_payto_uri); - const cashoutAccountName = !cashoutAccount ? undefined : cashoutAccount.targetPath + const cashoutDisabled = + config.supported_tan_channels.length < 1 || + !resultAccount.body.cashout_payto_uri; + console.log("disab", cashoutDisabled); + const cashoutAccount = !resultAccount.body.cashout_payto_uri + ? undefined + : parsePaytoUri(resultAccount.body.cashout_payto_uri); + const cashoutAccountName = !cashoutAccount + ? undefined + : cashoutAccount.targetPath; return (
-
-

Cashout

+

+ Cashout +

-
Convertion rate
+
+ Convertion rate +
{sellRate}
-
- Balance + + Balance +
- +
- Fee + + Fee +
- +
- {cashoutAccountName ? + {cashoutAccountName ? (
- To account + + To account +
-
- {cashoutAccountName} -
-
: +
{cashoutAccountName}
+
+ ) : (
@@ -325,17 +385,15 @@ export function CreateCashout({
- } - + )} -
{ - e.preventDefault() + onSubmit={(e) => { + e.preventDefault(); }} >
@@ -370,7 +428,6 @@ export function CreateCashout({ isDirty={form.subject !== undefined} />
-
{/* amount */} @@ -384,14 +441,25 @@ export function CreateCashout({ ? i18n.str`Amount to send` : i18n.str`Amount to receive`} - -
{ - form.amount = value; - updateForm(structuredClone(form)); - }} + onChange={ + cashoutDisabled + ? undefined + : (value) => { + form.amount = value; + updateForm(structuredClone(form)); + } + } />
- {Amounts.isZero(calc.credit) ? undefined : (
-
-
Total cost
+
+ Total cost +
- +
-
- Balance left + + Balance left +
- +
- {Amounts.isZero(sellFee) || Amounts.isZero(calc.beforeFee) ? undefined : ( + {Amounts.isZero(sellFee) || + Amounts.isZero(calc.beforeFee) ? undefined : (
- Before fee + + Before fee +
- +
)}
-
Total cashout transfer
+
+ Total cashout transfer +
- +
@@ -453,15 +546,20 @@ export function CreateCashout({ )} {/* channel, not shown if new cashout api */} - {!OLD_CASHOUT_API ? undefined : config.supported_tan_channels.length === 0 ? + {!OLD_CASHOUT_API ? undefined : config.supported_tan_channels + .length === 0 ? (
- + - Before doing a cashout the server need to provide an second channel to confirm the operation + Before doing a cashout the server need to provide an + second channel to confirm the operation
- : + ) : (
- } + )}
- {onCancel ? - - :
- } -

- + Close +
); -- cgit v1.2.3