account page
This commit is contained in:
parent
40d2aa0c11
commit
0388d31d36
60
packages/demobank-ui/src/components/CopyButton.tsx
Normal file
60
packages/demobank-ui/src/components/CopyButton.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { h, VNode } from "preact";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
|
||||
|
||||
export function CopyIcon(): VNode {
|
||||
return (
|
||||
<svg height="16" viewBox="0 0 16 16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
|
||||
export function CopiedIcon(): VNode {
|
||||
return (
|
||||
<svg height="16" viewBox="0 0 16 16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
|
||||
export function CopyButton({ getContent }: { getContent: () => string }): VNode {
|
||||
const [copied, setCopied] = useState(false);
|
||||
function copyText(): void {
|
||||
navigator.clipboard.writeText(getContent() || "");
|
||||
setCopied(true);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (copied) {
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 1000);
|
||||
}
|
||||
}, [copied]);
|
||||
|
||||
if (!copied) {
|
||||
return (
|
||||
<button onClick={copyText} style={{ width: 32, height: 32, fontSize: "initial" }}>
|
||||
<CopyIcon />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div content="Copied" style={{ display: "inline-block" }}>
|
||||
<button disabled style={{ width: 32, height: 32, fontSize: "initial" }}>
|
||||
<CopiedIcon />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
29
packages/demobank-ui/src/components/ErrorLoading.tsx
Normal file
29
packages/demobank-ui/src/components/ErrorLoading.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
/*
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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 { useTranslationContext } from "@gnu-taler/web-util/browser";
|
||||
import { h, VNode } from "preact";
|
||||
|
||||
export function ErrorLoading(): VNode {
|
||||
const { i18n } = useTranslationContext()
|
||||
return (
|
||||
<div><i18n.Translate>
|
||||
Could not complete the request
|
||||
</i18n.Translate>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -14,16 +14,15 @@
|
||||
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
||||
*/
|
||||
|
||||
import { useTranslationContext } from "@gnu-taler/web-util/browser";
|
||||
import { createHashHistory } from "history";
|
||||
import { VNode, h } from "preact";
|
||||
import { Route, Router, route } from "preact-router";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
import { BankFrame } from "./BankFrame.js";
|
||||
import { BusinessAccount } from "./BusinessAccount.js";
|
||||
import { HomePage, WithdrawalOperationPage } from "./HomePage.js";
|
||||
import { PublicHistoriesPage } from "./PublicHistoriesPage.js";
|
||||
import { RegistrationPage } from "./RegistrationPage.js";
|
||||
import { useEffect } from "preact/hooks";
|
||||
import { BankFrame } from "../pages/BankFrame.js";
|
||||
import { BusinessAccount } from "../pages/BusinessAccount.js";
|
||||
import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
|
||||
import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
|
||||
import { RegistrationPage } from "../pages/RegistrationPage.js";
|
||||
|
||||
export function Routing(): VNode {
|
||||
const history = createHashHistory();
|
@ -23,7 +23,7 @@ import { FunctionalComponent, h } from "preact";
|
||||
import { SWRConfig } from "swr";
|
||||
import { BackendStateProvider } from "../context/backend.js";
|
||||
import { strings } from "../i18n/strings.js";
|
||||
import { Routing } from "../pages/Routing.js";
|
||||
import { Routing } from "./Routing.js";
|
||||
|
||||
const WITH_LOCAL_STORAGE_CACHE = false;
|
||||
|
||||
|
@ -1,170 +0,0 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
|
||||
import {
|
||||
ErrorType,
|
||||
HttpResponsePaginated,
|
||||
useTranslationContext,
|
||||
} from "@gnu-taler/web-util/browser";
|
||||
import { Fragment, VNode, h } from "preact";
|
||||
import { Transactions } from "../components/Transactions/index.js";
|
||||
import { useBackendContext } from "../context/backend.js";
|
||||
import { useAccountDetails } from "../hooks/access.js";
|
||||
import { LoginForm } from "./LoginForm.js";
|
||||
import { PaymentOptions } from "./PaymentOptions.js";
|
||||
import { notifyError } from "../hooks/notification.js";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
interface Props {
|
||||
account: string;
|
||||
onLoadNotOk: <T>(
|
||||
error: HttpResponsePaginated<T, SandboxBackend.SandboxError>,
|
||||
) => VNode;
|
||||
}
|
||||
|
||||
export const CopyIcon = (): VNode => (
|
||||
<svg height="16" viewBox="0 0 16 16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CopiedIcon = (): VNode => (
|
||||
<svg height="16" viewBox="0 0 16 16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
function CopyButton({ getContent }: { getContent: () => string }): VNode {
|
||||
const [copied, setCopied] = useState(false);
|
||||
function copyText(): void {
|
||||
navigator.clipboard.writeText(getContent() || "");
|
||||
setCopied(true);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (copied) {
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 1000);
|
||||
}
|
||||
}, [copied]);
|
||||
|
||||
if (!copied) {
|
||||
return (
|
||||
<button onClick={copyText} style={{width:32, height:32, fontSize: "initial"}}>
|
||||
<CopyIcon />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div content="Copied" style={{display:"inline-block"}}>
|
||||
<button disabled style={{width:32, height:32 , fontSize: "initial"}}>
|
||||
<CopiedIcon />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Query account information and show QR code if there is pending withdrawal
|
||||
*/
|
||||
export function AccountPage({ account, onLoadNotOk }: Props): VNode {
|
||||
const result = useAccountDetails(account);
|
||||
const backend = useBackendContext();
|
||||
const { i18n } = useTranslationContext();
|
||||
|
||||
if (!result.ok) {
|
||||
if (result.loading || result.type === ErrorType.TIMEOUT) {
|
||||
return onLoadNotOk(result);
|
||||
}
|
||||
//logout if there is any error, not if loading
|
||||
backend.logOut();
|
||||
if (result.status === HttpStatusCode.NotFound) {
|
||||
notifyError({
|
||||
title: i18n.str`Username or account label "${account}" not found`,
|
||||
});
|
||||
return <LoginForm />;
|
||||
}
|
||||
return onLoadNotOk(result);
|
||||
}
|
||||
|
||||
const { data } = result;
|
||||
const balance = Amounts.parseOrThrow(data.balance.amount);
|
||||
const debitThreshold = Amounts.parseOrThrow(data.debitThreshold);
|
||||
const payto = parsePaytoUri(data.paytoUri);
|
||||
if (!payto || !payto.isKnown || payto.targetType !== "iban") {
|
||||
return (
|
||||
<div>Payto from server is not valid "{data.paytoUri}"</div>
|
||||
);
|
||||
}
|
||||
const balanceIsDebit = data.balance.credit_debit_indicator == "debit";
|
||||
const limit = balanceIsDebit
|
||||
? Amounts.sub(debitThreshold, balance).amount
|
||||
: Amounts.add(balance, debitThreshold).amount;
|
||||
return (
|
||||
<Fragment>
|
||||
<div>
|
||||
<h1 class="nav welcome-text">
|
||||
<i18n.Translate>
|
||||
Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
|
||||
</i18n.Translate>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<section id="assets">
|
||||
<div class="asset-summary">
|
||||
<h2>{i18n.str`Bank account balance`}</h2>
|
||||
{!balance ? (
|
||||
<div class="large-amount" style={{ color: "gray" }}>
|
||||
Waiting server response...
|
||||
</div>
|
||||
) : (
|
||||
<div class="large-amount amount">
|
||||
{balanceIsDebit ? <b>-</b> : null}
|
||||
<span class="value">{`${Amounts.stringifyValue(balance)}`}</span>
|
||||
|
||||
<span class="currency">{`${balance.currency}`}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section id="payments">
|
||||
<div class="payments">
|
||||
<h2>{i18n.str`Payments`}</h2>
|
||||
<PaymentOptions limit={limit} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ marginTop: "2em" }}>
|
||||
<div class="active">
|
||||
<h3>{i18n.str`Latest transactions`}</h3>
|
||||
<Transactions account={account} />
|
||||
</div>
|
||||
</section>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
91
packages/demobank-ui/src/pages/AccountPage/index.ts
Normal file
91
packages/demobank-ui/src/pages/AccountPage/index.ts
Normal file
@ -0,0 +1,91 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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 { HttpError, HttpResponseOk, HttpResponsePaginated, utils } from "@gnu-taler/web-util/browser";
|
||||
import { AbsoluteTime, AmountJson, PaytoUriIBAN } from "@gnu-taler/taler-util";
|
||||
import { Loading } from "../../components/Loading.js";
|
||||
import { useComponentState } from "./state.js";
|
||||
import { ReadyView, InvalidIbanView} from "./views.js";
|
||||
import { VNode } from "preact";
|
||||
import { LoginForm } from "../LoginForm.js";
|
||||
import { ErrorLoading } from "../../components/ErrorLoading.js";
|
||||
|
||||
export interface Props {
|
||||
account: string;
|
||||
onLoadNotOk: <T>(
|
||||
error: HttpResponsePaginated<T, SandboxBackend.SandboxError>,
|
||||
) => VNode;
|
||||
}
|
||||
|
||||
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: HttpError<SandboxBackend.SandboxError>;
|
||||
}
|
||||
|
||||
export interface BaseInfo {
|
||||
error: undefined;
|
||||
}
|
||||
|
||||
export interface Ready extends BaseInfo {
|
||||
status: "ready";
|
||||
error: undefined;
|
||||
account: string,
|
||||
payto: PaytoUriIBAN,
|
||||
balance: AmountJson,
|
||||
balanceIsDebit: boolean,
|
||||
limit: AmountJson,
|
||||
}
|
||||
|
||||
export interface InvalidIban {
|
||||
status: "invalid-iban",
|
||||
error: HttpResponseOk<SandboxBackend.Access.BankAccountBalanceResponse>;
|
||||
}
|
||||
|
||||
export interface UserNotFound {
|
||||
status: "error-user-not-found",
|
||||
error: HttpError<any>;
|
||||
onRegister?: () => void;
|
||||
}
|
||||
}
|
||||
|
||||
export interface Transaction {
|
||||
negative: boolean;
|
||||
counterpart: string;
|
||||
when: AbsoluteTime;
|
||||
amount: AmountJson | undefined;
|
||||
subject: string;
|
||||
}
|
||||
|
||||
const viewMapping: utils.StateViewMap<State> = {
|
||||
loading: Loading,
|
||||
"error-user-not-found": LoginForm,
|
||||
"invalid-iban": InvalidIbanView,
|
||||
"loading-error": ErrorLoading,
|
||||
ready: ReadyView,
|
||||
};
|
||||
|
||||
export const AccountPage = utils.compose(
|
||||
(p: Props) => useComponentState(p),
|
||||
viewMapping,
|
||||
);
|
87
packages/demobank-ui/src/pages/AccountPage/state.ts
Normal file
87
packages/demobank-ui/src/pages/AccountPage/state.ts
Normal file
@ -0,0 +1,87 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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, parsePaytoUri } from "@gnu-taler/taler-util";
|
||||
import { ErrorType, useTranslationContext } from "@gnu-taler/web-util/browser";
|
||||
import { useBackendContext } from "../../context/backend.js";
|
||||
import { useAccountDetails } from "../../hooks/access.js";
|
||||
import { notifyError } from "../../hooks/notification.js";
|
||||
import { Props, State } from "./index.js";
|
||||
|
||||
export function useComponentState({ account, onLoadNotOk }: Props): State {
|
||||
const result = useAccountDetails(account);
|
||||
const backend = useBackendContext();
|
||||
const { i18n } = useTranslationContext();
|
||||
|
||||
if (result.loading) {
|
||||
return {
|
||||
status: "loading",
|
||||
error: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
if (!result.ok) {
|
||||
if (result.loading || result.type === ErrorType.TIMEOUT) {
|
||||
return {
|
||||
status: "loading-error",
|
||||
error: result,
|
||||
};
|
||||
}
|
||||
//logout if there is any error, not if loading
|
||||
backend.logOut();
|
||||
if (result.status === HttpStatusCode.NotFound) {
|
||||
notifyError({
|
||||
title: i18n.str`Username or account label "${account}" not found`,
|
||||
});
|
||||
return {
|
||||
status: "error-user-not-found",
|
||||
error: result,
|
||||
};
|
||||
}
|
||||
return {
|
||||
status: "loading-error",
|
||||
error: result,
|
||||
};
|
||||
}
|
||||
|
||||
const { data } = result;
|
||||
const balance = Amounts.parseOrThrow(data.balance.amount);
|
||||
const debitThreshold = Amounts.parseOrThrow(data.debitThreshold);
|
||||
const payto = parsePaytoUri(data.paytoUri);
|
||||
|
||||
if (!payto || !payto.isKnown || payto.targetType !== "iban") {
|
||||
return {
|
||||
status: "invalid-iban",
|
||||
error: result
|
||||
};
|
||||
}
|
||||
|
||||
const balanceIsDebit = data.balance.credit_debit_indicator == "debit";
|
||||
const limit = balanceIsDebit
|
||||
? Amounts.sub(debitThreshold, balance).amount
|
||||
: Amounts.add(balance, debitThreshold).amount;
|
||||
|
||||
|
||||
return {
|
||||
status: "ready",
|
||||
error: undefined,
|
||||
account,
|
||||
balance,
|
||||
balanceIsDebit,
|
||||
limit,
|
||||
payto
|
||||
};
|
||||
}
|
29
packages/demobank-ui/src/pages/AccountPage/stories.tsx
Normal file
29
packages/demobank-ui/src/pages/AccountPage/stories.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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, {});
|
32
packages/demobank-ui/src/pages/AccountPage/test.ts
Normal file
32
packages/demobank-ui/src/pages/AccountPage/test.ts
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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 () => {
|
||||
});
|
||||
});
|
74
packages/demobank-ui/src/pages/AccountPage/views.tsx
Normal file
74
packages/demobank-ui/src/pages/AccountPage/views.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2022 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, stringifyPaytoUri } from "@gnu-taler/taler-util";
|
||||
import { useTranslationContext } from "@gnu-taler/web-util/browser";
|
||||
import { Fragment, h, VNode } from "preact";
|
||||
import { Transactions } from "../../components/Transactions/index.js";
|
||||
import { PaymentOptions } from "../PaymentOptions.js";
|
||||
import { State } from "./index.js";
|
||||
import { CopyButton } from "../../components/CopyButton.js";
|
||||
|
||||
export function InvalidIbanView({error}:State.InvalidIban) {
|
||||
return (
|
||||
<div>Payto from server is not valid "{error.data.paytoUri}"</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> {
|
||||
const { i18n } = useTranslationContext();
|
||||
return <Fragment>
|
||||
<div>
|
||||
<h1 class="nav welcome-text">
|
||||
<i18n.Translate>
|
||||
Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
|
||||
</i18n.Translate>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<section id="assets">
|
||||
<div class="asset-summary">
|
||||
<h2>{i18n.str`Bank account balance`}</h2>
|
||||
{!balance ? (
|
||||
<div class="large-amount" style={{ color: "gray" }}>
|
||||
Waiting server response...
|
||||
</div>
|
||||
) : (
|
||||
<div class="large-amount amount">
|
||||
{balanceIsDebit ? <b>-</b> : null}
|
||||
<span class="value">{`${Amounts.stringifyValue(balance)}`}</span>
|
||||
|
||||
<span class="currency">{`${balance.currency}`}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section id="payments">
|
||||
<div class="payments">
|
||||
<h2>{i18n.str`Payments`}</h2>
|
||||
<PaymentOptions limit={limit} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ marginTop: "2em" }}>
|
||||
<div class="active">
|
||||
<h3>{i18n.str`Latest transactions`}</h3>
|
||||
<Transactions account={account} />
|
||||
</div>
|
||||
</section>
|
||||
</Fragment>;
|
||||
}
|
||||
|
@ -43,7 +43,7 @@ import { ErrorBannerFloat } from "./BankFrame.js";
|
||||
import { ShowCashoutDetails } from "./BusinessAccount.js";
|
||||
import { handleNotOkResult } from "./HomePage.js";
|
||||
import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
|
||||
|
||||
const charset =
|
||||
|
@ -44,7 +44,7 @@ import {
|
||||
import { ShowAccountDetails, UpdateAccountPassword } from "./AdminPage.js";
|
||||
import { ErrorBannerFloat } from "./BankFrame.js";
|
||||
import { LoginForm } from "./LoginForm.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
import { handleNotOkResult } from "./HomePage.js";
|
||||
import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
|
||||
import { Amount } from "./WalletWithdrawForm.js";
|
||||
|
@ -32,7 +32,7 @@ import { useBackendContext } from "../context/backend.js";
|
||||
import { getInitialBackendBaseURL } from "../hooks/backend.js";
|
||||
import { notifyError, notifyInfo } from "../hooks/notification.js";
|
||||
import { useSettings } from "../hooks/settings.js";
|
||||
import { AccountPage } from "./AccountPage.js";
|
||||
import { AccountPage } from "./AccountPage/index.js";
|
||||
import { AdminPage } from "./AdminPage.js";
|
||||
import { LoginForm } from "./LoginForm.js";
|
||||
import { WithdrawalQRCode } from "./WithdrawalQRCode.js";
|
||||
|
@ -25,7 +25,7 @@ import { bankUiSettings } from "../settings.js";
|
||||
import { undefinedIfEmpty } from "../utils.js";
|
||||
import { ErrorBannerFloat } from "./BankFrame.js";
|
||||
import { USERNAME_REGEX } from "./RegistrationPage.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
|
||||
/**
|
||||
* Collect and submit login data.
|
||||
|
@ -36,7 +36,7 @@ import {
|
||||
undefinedIfEmpty,
|
||||
validateIBAN,
|
||||
} from "../utils.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
|
||||
const logger = new Logger("PaytoWireTransferForm");
|
||||
|
||||
|
@ -25,7 +25,7 @@ import { useTestingAPI } from "../hooks/access.js";
|
||||
import { notifyError } from "../hooks/notification.js";
|
||||
import { bankUiSettings } from "../settings.js";
|
||||
import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
|
||||
const logger = new Logger("RegistrationPage");
|
||||
|
||||
|
@ -30,7 +30,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import { useAccessAPI } from "../hooks/access.js";
|
||||
import { notifyError } from "../hooks/notification.js";
|
||||
import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
import { forwardRef } from "preact/compat";
|
||||
|
||||
const logger = new Logger("WalletWithdrawForm");
|
||||
|
@ -28,7 +28,7 @@ import { useMemo, useState } from "preact/hooks";
|
||||
import { useAccessAnonAPI } from "../hooks/access.js";
|
||||
import { notifyError } from "../hooks/notification.js";
|
||||
import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
|
||||
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
|
||||
import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
|
||||
|
||||
const logger = new Logger("WithdrawalConfirmationQuestion");
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user