diff options
Diffstat (limited to 'packages/bank-ui/src/pages/AccountPage')
| -rw-r--r-- | packages/bank-ui/src/pages/AccountPage/index.ts | 135 | ||||
| -rw-r--r-- | packages/bank-ui/src/pages/AccountPage/state.ts | 122 | ||||
| -rw-r--r-- | packages/bank-ui/src/pages/AccountPage/stories.tsx | 29 | ||||
| -rw-r--r-- | packages/bank-ui/src/pages/AccountPage/test.ts | 31 | ||||
| -rw-r--r-- | packages/bank-ui/src/pages/AccountPage/views.tsx | 156 |
5 files changed, 473 insertions, 0 deletions
diff --git a/packages/bank-ui/src/pages/AccountPage/index.ts b/packages/bank-ui/src/pages/AccountPage/index.ts new file mode 100644 index 000000000..8a9471ef4 --- /dev/null +++ b/packages/bank-ui/src/pages/AccountPage/index.ts @@ -0,0 +1,135 @@ +/* + 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 { + AbsoluteTime, + AmountJson, + TalerCorebankApi, + TalerError, +} from "@gnu-taler/taler-util"; +import { Loading, utils } from "@gnu-taler/web-util/browser"; +import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js"; +import { LoginForm } from "../LoginForm.js"; +import { useComponentState } from "./state.js"; +import { InvalidIbanView, ReadyView } from "./views.js"; +import { RouteDefinition } from "@gnu-taler/web-util/browser"; + +export interface Props { + account: string; + onAuthorizationRequired: () => void; + onOperationCreated: (wopid: string) => void; + onClose: () => void; + tab: "charge-wallet" | "wire-transfer" | undefined; + routeClose: RouteDefinition; + routeCashout: RouteDefinition; + routeChargeWallet: RouteDefinition; + routeWireTransfer: RouteDefinition<{ + account?: string; + subject?: string; + amount?: string; + }>; + routePublicAccounts: RouteDefinition; + routeCreateWireTransfer: RouteDefinition<{ + account?: string; + subject?: string; + amount?: string; + }>; + routeOperationDetails: RouteDefinition<{ wopid: string }>; + routeSolveSecondFactor: RouteDefinition; +} + +export type State = + | State.Loading + | State.LoadingError + | State.Ready + | State.InvalidIban + | State.UserNotFound; + +export namespace State { + export interface Loading { + status: "loading"; + error: undefined; + } + + export interface LoadingError { + status: "loading-error"; + error: TalerError; + } + + export interface BaseInfo { + error: undefined; + } + + export interface Ready extends BaseInfo { + status: "ready"; + error: undefined; + account: string; + tab: "charge-wallet" | "wire-transfer" | undefined; + limit: AmountJson; + balance: AmountJson; + onAuthorizationRequired: () => void; + onOperationCreated: (wopid: string) => void; + onClose: () => void; + routeClose: RouteDefinition; + routeCashout: RouteDefinition; + routeChargeWallet: RouteDefinition; + routePublicAccounts: RouteDefinition; + routeWireTransfer: RouteDefinition<{ + account?: string; + subject?: string; + amount?: string; + }>; + routeCreateWireTransfer: RouteDefinition<{ + account?: string; + subject?: string; + amount?: string; + }>; + routeOperationDetails: RouteDefinition<{ wopid: string }>; + routeSolveSecondFactor: RouteDefinition; + } + + export interface InvalidIban { + status: "invalid-iban"; + error: TalerCorebankApi.AccountData; + } + + export interface UserNotFound { + status: "login"; + reason: "not-found" | "forbidden"; + routeRegister?: RouteDefinition; + } +} + +export interface Transaction { + negative: boolean; + counterpart: string; + when: AbsoluteTime; + amount: AmountJson | undefined; + subject: string; +} + +const viewMapping: utils.StateViewMap<State> = { + loading: Loading, + login: LoginForm, + "invalid-iban": InvalidIbanView, + "loading-error": ErrorLoadingWithDebug, + ready: ReadyView, +}; + +export const AccountPage = utils.compose( + (p: Props) => useComponentState(p), + viewMapping, +); diff --git a/packages/bank-ui/src/pages/AccountPage/state.ts b/packages/bank-ui/src/pages/AccountPage/state.ts new file mode 100644 index 000000000..f8b91a2ce --- /dev/null +++ b/packages/bank-ui/src/pages/AccountPage/state.ts @@ -0,0 +1,122 @@ +/* + 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 { + Amounts, + HttpStatusCode, + TalerError, + assertUnreachable, + parsePaytoUri, +} from "@gnu-taler/taler-util"; +import { useAccountDetails } from "../../hooks/account.js"; +import { Props, State } from "./index.js"; + +export function useComponentState({ + account, + tab, + routeChargeWallet, + routeCreateWireTransfer, + routePublicAccounts, + routeSolveSecondFactor, + routeOperationDetails, + routeWireTransfer, + routeCashout, + onOperationCreated, + onClose, + routeClose, + onAuthorizationRequired, +}: Props): State { + const result = useAccountDetails(account); + + if (!result) { + return { + status: "loading", + error: undefined, + }; + } + + if (result instanceof TalerError) { + return { + status: "loading-error", + error: result, + }; + } + + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.Unauthorized: + return { + status: "login", + reason: "forbidden", + }; + case HttpStatusCode.NotFound: + return { + status: "login", + reason: "not-found", + }; + default: { + assertUnreachable(result); + } + } + } + + const { body: data } = result; + + const balance = Amounts.parseOrThrow(data.balance.amount); + + const debitThreshold = Amounts.parseOrThrow(data.debit_threshold); + const payto = parsePaytoUri(data.payto_uri); + + if ( + !payto || + !payto.isKnown || + (payto.targetType !== "iban" && payto.targetType !== "x-taler-bank") + ) { + return { + status: "invalid-iban", + error: data, + }; + } + + const balanceIsDebit = data.balance.credit_debit_indicator == "debit"; + const limit = balanceIsDebit + ? Amounts.sub(debitThreshold, balance).amount + : Amounts.add(balance, debitThreshold).amount; + + const positiveBalance = balanceIsDebit + ? Amounts.zeroOfAmount(balance) + : balance; + + return { + status: "ready", + onOperationCreated, + error: undefined, + tab, + routeCashout, + routeOperationDetails, + routeCreateWireTransfer, + routePublicAccounts, + routeSolveSecondFactor, + onAuthorizationRequired, + onClose, + routeClose, + routeChargeWallet, + routeWireTransfer, + account, + limit, + balance: positiveBalance, + }; +} diff --git a/packages/bank-ui/src/pages/AccountPage/stories.tsx b/packages/bank-ui/src/pages/AccountPage/stories.tsx new file mode 100644 index 000000000..fe09a4f89 --- /dev/null +++ b/packages/bank-ui/src/pages/AccountPage/stories.tsx @@ -0,0 +1,29 @@ +/* + 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/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import * as tests from "@gnu-taler/web-util/testing"; +import { ReadyView } from "./views.js"; + +export default { + title: "account page", +}; + +export const Ready = tests.createExample(ReadyView, {}); diff --git a/packages/bank-ui/src/pages/AccountPage/test.ts b/packages/bank-ui/src/pages/AccountPage/test.ts new file mode 100644 index 000000000..14c8be948 --- /dev/null +++ b/packages/bank-ui/src/pages/AccountPage/test.ts @@ -0,0 +1,31 @@ +/* + 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/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +// import * as tests from "@gnu-taler/web-util/testing"; +// import { SwrMockEnvironment } from "@gnu-taler/web-util/testing"; +// import { expect } from "chai"; +// import { CASHOUT_API_EXAMPLE } from "../../endpoints.js"; +// import { Props } from "./index.js"; +// import { useComponentState } from "./state.js"; + +describe("Account states", () => { + it("should do some tests", async () => {}); +}); diff --git a/packages/bank-ui/src/pages/AccountPage/views.tsx b/packages/bank-ui/src/pages/AccountPage/views.tsx new file mode 100644 index 000000000..42892f536 --- /dev/null +++ b/packages/bank-ui/src/pages/AccountPage/views.tsx @@ -0,0 +1,156 @@ +/* + 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 { TranslatedString } from "@gnu-taler/taler-util"; +import { Attention, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; +import { Transactions } from "../../components/Transactions/index.js"; +import { useBankState } from "../../hooks/bank-state.js"; +import { usePreferences } from "../../hooks/preferences.js"; +import { PaymentOptions } from "../PaymentOptions.js"; +import { State } from "./index.js"; +import { RouteDefinition } from "@gnu-taler/web-util/browser"; + +export function InvalidIbanView({ error }: State.InvalidIban) { + return ( + <div>Payto from server is not valid "{error.payto_uri}"</div> + ); +} + +const IS_PUBLIC_ACCOUNT_ENABLED = false; + +function ShowDemoInfo({ + routePublicAccounts, +}: { + routePublicAccounts: RouteDefinition; +}): VNode { + const { i18n } = useTranslationContext(); + const [settings, updateSettings] = usePreferences(); + if (!settings.showDemoDescription) return <Fragment />; + return ( + <Attention + title={i18n.str`This is a demo bank`} + onClose={() => { + updateSettings("showDemoDescription", false); + }} + > + {IS_PUBLIC_ACCOUNT_ENABLED ? ( + <i18n.Translate> + This part of the demo shows how a bank that supports Taler directly + would work. In addition to using your own bank account, you can also + see the transaction history of some{" "} + <a name="public account" href={routePublicAccounts.url({})}> + Public Accounts + </a> + . + </i18n.Translate> + ) : ( + <i18n.Translate> + This part of the demo shows how a bank that supports Taler directly + would work. + </i18n.Translate> + )} + </Attention> + ); +} + +function ShowPedingOperation({ + routeSolveSecondFactor, +}: { + routeSolveSecondFactor: RouteDefinition; +}): VNode { + const { i18n } = useTranslationContext(); + const [bankState, updateBankState] = useBankState(); + if (!bankState.currentChallenge) return <Fragment />; + const title = ((op): TranslatedString => { + switch (op) { + case "delete-account": + return i18n.str`Pending account delete operation`; + case "update-account": + return i18n.str`Pending account update operation`; + case "update-password": + return i18n.str`Pending password update operation`; + case "create-transaction": + return i18n.str`Pending transaction operation`; + case "confirm-withdrawal": + return i18n.str`Pending withdrawal operation`; + case "create-cashout": + return i18n.str`Pending cashout operation`; + } + })(bankState.currentChallenge.operation); + return ( + <Attention + title={title} + type="warning" + onClose={() => { + updateBankState("currentChallenge", undefined); + }} + > + <i18n.Translate> + You can complete or cancel the operation in + </i18n.Translate>{" "} + <a + class="font-semibold text-yellow-700 hover:text-yellow-600" + name="complete operation" + href={routeSolveSecondFactor.url({})} + > + <i18n.Translate>this page</i18n.Translate> + </a> + </Attention> + ); +} + +export function ReadyView({ + tab, + account, + routeChargeWallet, + routeWireTransfer, + limit, + balance, + routeCashout, + routeCreateWireTransfer, + routePublicAccounts, + routeOperationDetails, + routeSolveSecondFactor, + onClose, + routeClose, + onOperationCreated, + onAuthorizationRequired, +}: State.Ready): VNode { + return ( + <Fragment> + <ShowPedingOperation routeSolveSecondFactor={routeSolveSecondFactor} /> + <ShowDemoInfo routePublicAccounts={routePublicAccounts} /> + <PaymentOptions + tab={tab} + routeOperationDetails={routeOperationDetails} + routeCashout={routeCashout} + routeChargeWallet={routeChargeWallet} + routeWireTransfer={routeWireTransfer} + limit={limit} + balance={balance} + routeClose={routeClose} + onClose={onClose} + onOperationCreated={onOperationCreated} + onAuthorizationRequired={onAuthorizationRequired} + /> + <Transactions + account={account} + routeCreateWireTransfer={routeCreateWireTransfer} + /> + </Fragment> + ); +} |