diff options
Diffstat (limited to 'packages/demobank-ui/src/pages')
12 files changed, 48 insertions, 26 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 737a00b57..9e591e95d 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -24,6 +24,7 @@ import { getAllBooleanPreferences, getLabelForPreferences, usePreferences } from import { RenderAmount } from "./PaytoWireTransferForm.js"; import { useSettingsContext } from "../context/settings.js"; import { useBankCoreApiContext } from "../context/config.js"; +import { useBankState } from "../hooks/bank-state.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -40,6 +41,7 @@ export function BankFrame({ const backend = useBackendState(); const settings = useSettingsContext(); const [preferences, updatePreferences] = usePreferences(); + const [, , resetBankState] = useBankState() const [error, resetError] = useErrorBoundary(); @@ -65,7 +67,7 @@ export function BankFrame({ iconLinkURL={settings.iconLinkURL ?? "#"} onLogout={backend.state.status !== "loggedIn" ? undefined : () => { backend.logOut() - updatePreferences("currentWithdrawalOperationId", undefined); + resetBankState(); }} sites={!settings.topNavSites ? [] : Object.entries(settings.topNavSites)} supportedLangs={["en", "es", "de"]} diff --git a/packages/demobank-ui/src/pages/OperationState/state.ts b/packages/demobank-ui/src/pages/OperationState/state.ts index 477146d1e..b214a400d 100644 --- a/packages/demobank-ui/src/pages/OperationState/state.ts +++ b/packages/demobank-ui/src/pages/OperationState/state.ts @@ -24,9 +24,11 @@ import { useBackendState } from "../../hooks/backend.js"; import { usePreferences } from "../../hooks/preferences.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { Props, State } from "./index.js"; +import { useBankState } from "../../hooks/bank-state.js"; export function useComponentState({ currency, onClose }: Props): utils.RecursiveState<State> { - const [settings, updateSettings] = usePreferences() + const [settings] = usePreferences() + const [bankState, updateBankState] = useBankState(); const { state: credentials } = useBackendState() const creds = credentials.status !== "loggedIn" ? undefined : credentials const { api } = useBankCoreApiContext() @@ -46,11 +48,11 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive setFailure(resp) return; } - updateSettings("currentWithdrawalOperationId", resp.body.withdrawal_id) + updateBankState("currentWithdrawalOperationId", resp.body.withdrawal_id) } - const withdrawalOperationId = settings.currentWithdrawalOperationId + const withdrawalOperationId = bankState.currentWithdrawalOperationId useEffect(() => { if (withdrawalOperationId === undefined) { doSilentStart() @@ -77,7 +79,7 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive if (!creds) return; const resp = await api.abortWithdrawalById(creds, wid); if (resp.type === "ok") { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onClose(); } else { return resp; @@ -140,7 +142,7 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive status: "aborted", error: undefined, onClose: async () => { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onClose() }, } @@ -155,7 +157,7 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive status: "aborted", error: undefined, onClose: async () => { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onClose() }, } @@ -163,14 +165,14 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive if (data.status === "confirmed") { if (!settings.showWithdrawalSuccess) { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onClose() } return { status: "confirmed", error: undefined, onClose: async () => { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onClose() }, } diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx index 98eb7169f..5ebd66dac 100644 --- a/packages/demobank-ui/src/pages/OperationState/views.tsx +++ b/packages/demobank-ui/src/pages/OperationState/views.tsx @@ -24,6 +24,7 @@ import { undefinedIfEmpty } from "../../utils.js"; import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { State } from "./index.js"; +import { useBankState } from "../../hooks/bank-state.js"; export function InvalidPaytoView({ payto, onClose }: State.InvalidPayto) { return ( @@ -45,6 +46,7 @@ export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doCon const { i18n } = useTranslationContext() const [settings] = usePreferences() const [notification, notify, errorHandler] = useLocalNotification() + const [, updateBankState] = useBankState() const captchaNumbers = useMemo(() => { return { @@ -135,7 +137,7 @@ export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doCon debug: resp.detail, }); case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`The operation needs a confirmation to complete.`, diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index bbe33eb57..1a431a939 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -21,6 +21,7 @@ import { useState } from "preact/hooks"; import { PaytoWireTransferForm, doAutoFocus } from "./PaytoWireTransferForm.js"; import { WalletWithdrawForm } from "./WalletWithdrawForm.js"; import { usePreferences } from "../hooks/preferences.js"; +import { useBankState } from "../hooks/bank-state.js"; /** * Let the user choose a payment option, @@ -28,7 +29,7 @@ import { usePreferences } from "../hooks/preferences.js"; */ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJson, goToConfirmOperation: (id: string) => void }): VNode { const { i18n } = useTranslationContext(); - const [settings] = usePreferences(); + const [bankState] = useBankState(); const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); @@ -59,7 +60,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ <div class="mt-1 flex items-center text-sm text-gray-500"> <i18n.Translate>Withdraw digital money into your mobile wallet or browser extension</i18n.Translate> </div> - {!!settings.currentWithdrawalOperationId && + {!!bankState.currentWithdrawalOperationId && <span class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 whitespace-pre"> <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true"> <circle cx="3" cy="3" r="3" /> diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 2ef93d35c..0c6c9ada2 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -47,6 +47,7 @@ import { } from "../utils.js"; import { assertUnreachable } from "./WithdrawalOperationPage.js"; import { LocalNotificationBanner } from "@gnu-taler/web-util/browser"; +import { useBankState } from "../hooks/bank-state.js"; const logger = new Logger("PaytoWireTransferForm"); @@ -74,6 +75,7 @@ export function PaytoWireTransferForm({ const [iban, setIban] = useState<string | undefined>(toAccount); const [subject, setSubject] = useState<string | undefined>(); const [amount, setAmount] = useState<string | undefined>(); + const [, updateBankState] = useBankState() const [rawPaytoInput, rawPaytoInputSetter] = useState<string | undefined>( undefined, @@ -190,7 +192,7 @@ export function PaytoWireTransferForm({ debug: resp.detail, }) case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`The operation needs a confirmation to complete.`, diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index bee36e7ad..6e13ae657 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -39,6 +39,7 @@ import { OperationState } from "./OperationState/index.js"; import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { assertUnreachable } from "./WithdrawalOperationPage.js"; import { LocalNotificationBanner } from "@gnu-taler/web-util/browser"; +import { useBankState } from "../hooks/bank-state.js"; const logger = new Logger("WalletWithdrawForm"); const RefAmount = forwardRef(InputAmount); @@ -51,7 +52,8 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { onCancel: () => void; }): VNode { const { i18n } = useTranslationContext(); - const [settings, updateSettings] = usePreferences() + const [settings] = usePreferences() + const [bankState, updateBankState] = useBankState(); const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials @@ -60,11 +62,11 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`); const [notification, notify, handleError] = useLocalNotification() - if (!!settings.currentWithdrawalOperationId) { + if (!!bankState.currentWithdrawalOperationId) { return <Attention type="warning" title={i18n.str`There is an operation already`}> <span ref={focus ? doAutoFocus : undefined} /> <i18n.Translate> - To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${settings.currentWithdrawalOperationId}`}>here</a> + To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${bankState.currentWithdrawalOperationId}`}>here</a> </i18n.Translate> </Attention> } @@ -99,7 +101,7 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { i18n.str`Server responded with an invalid withdraw URI`, i18n.str`Withdraw URI: ${resp.body.taler_withdraw_uri}`); } else { - updateSettings("currentWithdrawalOperationId", uri.withdrawalOperationId) + updateBankState("currentWithdrawalOperationId", uri.withdrawalOperationId) goToConfirmOperation(uri.withdrawalOperationId); } } else { diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 6f18e1283..206b51008 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -48,6 +48,7 @@ import { LoginForm } from "./LoginForm.js"; import { RenderAmount } from "./PaytoWireTransferForm.js"; import { assertUnreachable } from "./WithdrawalOperationPage.js"; import { OperationNotFound } from "./WithdrawalQRCode.js"; +import { useBankState } from "../hooks/bank-state.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -75,6 +76,7 @@ export function WithdrawalConfirmationQuestion({ const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials const withdrawalInfo = useWithdrawalDetails(withdrawUri.withdrawalOperationId) + const [, updateBankState] = useBankState() if (!withdrawalInfo) { return <Loading /> } @@ -154,7 +156,7 @@ export function WithdrawalConfirmationQuestion({ debug: resp.detail, }) case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`The operation needs a confirmation to complete.`, diff --git a/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx b/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx index 7060b7a98..4bb3b4d7b 100644 --- a/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalOperationPage.tsx @@ -20,12 +20,12 @@ import { stringifyWithdrawUri } from "@gnu-taler/taler-util"; import { + Attention, useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; -import { Attention } from "@gnu-taler/web-util/browser"; import { useBankCoreApiContext } from "../context/config.js"; -import { usePreferences } from "../hooks/preferences.js"; +import { useBankState } from "../hooks/bank-state.js"; import { WithdrawalQRCode } from "./WithdrawalQRCode.js"; const logger = new Logger("AccountPage"); @@ -44,7 +44,8 @@ export function WithdrawalOperationPage({ }); const parsedUri = parseWithdrawUri(uri); const { i18n } = useTranslationContext(); - const [settings, updateSettings] = usePreferences(); + const [, updateBankState] = useBankState(); + if (!parsedUri) { return <Attention type="danger" title={i18n.str`The Withdrawal URI is not valid`}> @@ -56,7 +57,7 @@ export function WithdrawalOperationPage({ <WithdrawalQRCode withdrawUri={parsedUri} onClose={() => { - updateSettings("currentWithdrawalOperationId", undefined) + updateBankState("currentWithdrawalOperationId", undefined) onContinue() }} /> diff --git a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx index 1bf21f62e..28875bde6 100644 --- a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx +++ b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx @@ -10,6 +10,7 @@ import { LoginForm } from "../LoginForm.js"; import { ProfileNavigation } from "../ProfileNavigation.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { AccountForm } from "../admin/AccountForm.js"; +import { useBankState } from "../../hooks/bank-state.js"; export function ShowAccountDetails({ account, @@ -30,6 +31,7 @@ export function ShowAccountDetails({ const [update, setUpdate] = useState(false); const [submitAccount, setSubmitAccount] = useState<TalerCorebankApi.AccountReconfiguration | undefined>(); const [notification, notify, handleError] = useLocalNotification() + const [, updateBankState] = useBankState() const result = useAccountDetails(account); if (!result) { @@ -97,7 +99,7 @@ export function ShowAccountDetails({ debug: resp.detail, }) case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`Cashout created but confirmation is required.`, diff --git a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx index ed074b9c4..0ff1cf725 100644 --- a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx +++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx @@ -10,6 +10,7 @@ import { ProfileNavigation } from "../ProfileNavigation.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { LocalNotificationBanner } from "@gnu-taler/web-util/browser"; import { HttpStatusCode, TalerErrorCode } from "@gnu-taler/taler-util"; +import { useBankState } from "../../hooks/bank-state.js"; export function UpdateAccountPassword({ account: accountName, @@ -30,6 +31,7 @@ export function UpdateAccountPassword({ const [current, setCurrent] = useState<string | undefined>(); const [password, setPassword] = useState<string | undefined>(); const [repeat, setRepeat] = useState<string | undefined>(); + const [, updateBankState] = useBankState() const accountIsTheCurrentUser = credentials.status === "loggedIn" ? credentials.username === accountName : false @@ -75,7 +77,7 @@ export function UpdateAccountPassword({ title: i18n.str`Your current password doesn't match, can't change to a new password.` }) case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`Cashout created but confirmation is required.`, diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx index 330ebf3a9..3f7d62935 100644 --- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx @@ -10,6 +10,7 @@ import { undefinedIfEmpty } from "../../utils.js"; import { LoginForm } from "../LoginForm.js"; import { doAutoFocus } from "../PaytoWireTransferForm.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; +import { useBankState } from "../../hooks/bank-state.js"; export function RemoveAccount({ account, @@ -30,6 +31,7 @@ export function RemoveAccount({ const token = state.status !== "loggedIn" ? undefined : state.token const { api } = useBankCoreApiContext() const [notification, notify, handleError] = useLocalNotification() + const [, updateBankState] = useBankState() if (!result) { return <Loading /> @@ -90,7 +92,7 @@ export function RemoveAccount({ debug: resp.detail, }) case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`The operation needs a confirmation to complete.`, diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx index 9ee5cbeaf..d97a00a2e 100644 --- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx +++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx @@ -50,6 +50,7 @@ import { import { LoginForm } from "../LoginForm.js"; import { InputAmount, RenderAmount, doAutoFocus } from "../PaytoWireTransferForm.js"; import { assertUnreachable } from "../WithdrawalOperationPage.js"; +import { useBankState } from "../../hooks/bank-state.js"; interface Props { account: string; @@ -83,6 +84,7 @@ export function CreateCashout({ } = useEstimator(); const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials + const [, updateBankState] = useBankState() const { api, config } = useBankCoreApiContext() const [form, setForm] = useState<Partial<FormType>>({ isDebit: true, }); @@ -199,7 +201,7 @@ export function CreateCashout({ } else { switch (resp.case) { case HttpStatusCode.Accepted: { - resp.body.challenge_id; + updateBankState("currentChallengeId", resp.body.challenge_id) return notify({ type: "info", title: i18n.str`Cashout created but confirmation is required.`, |