taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

more ui

Browse Source
This commit is contained in:
Sebastian 2023-09-22 12:41:43 -03:00
parent 56a6f47c7d
commit dfd23f63ba
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
7 changed files with 527 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
packages/demobank-ui/src/pages/OperationState/index.ts Normal file
View File

@ -0,0 +1,117 @@
/*
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, PaytoUriTalerBank, WithdrawUriResult } from "@gnu-taler/taler-util";
import { Loading } from "../../components/Loading.js";
import { useComponentState } from "./state.js";
import { ReadyView, AbortedView, ConfirmedView, InvalidPaytoView, InvalidReserveView, InvalidWithdrawalView, NeedConfirmationView } from "./views.js";
import { VNode } from "preact";
import { LoginForm } from "../LoginForm.js";
import { ErrorLoading } from "../../components/ErrorLoading.js";
export interface Props {
currency: string;
onClose: () => void;
}
export type State = State.Loading |
State.LoadingError |
State.Ready |
State.Aborted |
State.Confirmed |
State.InvalidPayto |
State.InvalidWithdrawal |
State.InvalidReserve |
State.NeedConfirmation;
export namespace State {
export interface Loading {
status: "loading";
error: undefined;
}
export interface LoadingError {
status: "loading-error";
error: HttpError<SandboxBackend.SandboxError>;
}
/**
* Need to open the wallet
*/
export interface Ready {
status: "ready";
error: undefined;
uri: WithdrawUriResult,
onClose: () => void;
}
export interface InvalidPayto {
status: "invalid-payto",
error: undefined;
payto: string | null;
}
export interface InvalidWithdrawal {
status: "invalid-withdrawal",
error: undefined;
uri: string,
}
export interface InvalidReserve {
status: "invalid-reserve",
error: undefined;
reserve: string | null;
}
export interface NeedConfirmation {
status: "need-confirmation",
error: undefined;
}
export interface Aborted {
status: "aborted",
error: undefined;
onClose: () => void;
}
export interface Confirmed {
status: "confirmed",
error: undefined;
onClose: () => void;
}
}
export interface Transaction {
negative: boolean;
counterpart: string;
when: AbsoluteTime;
amount: AmountJson | undefined;
subject: string;
}
const viewMapping: utils.StateViewMap<State> = {
loading: Loading,
"invalid-payto": InvalidPaytoView,
"invalid-withdrawal": InvalidWithdrawalView,
"invalid-reserve": InvalidReserveView,
"need-confirmation": NeedConfirmationView,
"aborted": AbortedView,
"confirmed": ConfirmedView,
"loading-error": ErrorLoading,
ready: ReadyView,
};
export const AccountPage = utils.compose(
(p: Props) => useComponentState(p),
viewMapping,
);

162
packages/demobank-ui/src/pages/OperationState/state.ts Normal file
View File

@ -0,0 +1,162 @@
/*
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, TranslatedString, parsePaytoUri, parseWithdrawUri, stringifyWithdrawUri } from "@gnu-taler/taler-util";
import { ErrorType, RequestError, notify, notifyError, useTranslationContext, utils } from "@gnu-taler/web-util/browser";
import { useBackendContext } from "../../context/backend.js";
import { useAccessAPI, useAccountDetails, useWithdrawalDetails } from "../../hooks/access.js";
import { Props, State } from "./index.js";
import { useSettings } from "../../hooks/settings.js";
import { buildRequestErrorMessage } from "../../utils.js";
import { useEffect } from "preact/hooks";
import { getInitialBackendBaseURL } from "../../hooks/backend.js";
export function useComponentState({ currency, onClose }: Props): utils.RecursiveState<State> {
const { i18n } = useTranslationContext();
const [settings, updateSettings] = useSettings()
const { createWithdrawal } = useAccessAPI();
const amount = settings.maxWithdrawalAmount
async function doSilentStart() {
//FIXME: if amount is not enough use balance
const parsedAmount = Amounts.parseOrThrow(`${currency}:${amount}`)
try {
const result = await createWithdrawal({
amount: Amounts.stringify(parsedAmount),
});
const uri = parseWithdrawUri(result.data.taler_withdraw_uri);
if (!uri) {
return notifyError(
i18n.str`Server responded with an invalid withdraw URI`,
i18n.str`Withdraw URI: ${result.data.taler_withdraw_uri}`);
} else {
updateSettings("currentWithdrawalOperationId", uri.withdrawalOperationId)
}
} catch (error) {
if (error instanceof RequestError) {
notify(
buildRequestErrorMessage(i18n, error.cause, {
onClientError: (status) =>
status === HttpStatusCode.Forbidden
? i18n.str`The operation was rejected due to insufficient funds`
: undefined,
}),
);
} else {
notifyError(
i18n.str`Operation failed, please report`,
(error instanceof Error
? error.message
: JSON.stringify(error)) as TranslatedString
)
}
}
}
useEffect(() => {
doSilentStart()
}, [settings.fastWithdrawal, amount])
const baseUrl = getInitialBackendBaseURL()
const withdrawalOperationId = settings.currentWithdrawalOperationId
if (!withdrawalOperationId) {
return {
status: "loading",
error: undefined
}
}
const bankIntegrationApiBaseUrl = `${baseUrl}/integration-api`
const uri = stringifyWithdrawUri({
bankIntegrationApiBaseUrl,
withdrawalOperationId,
});
const parsedUri = parseWithdrawUri(uri);
if (!parsedUri) {
return {
status: "invalid-withdrawal",
error: undefined,
uri,
}
}
return (): utils.RecursiveState<State> => {
const result = useWithdrawalDetails(withdrawalOperationId);
if (!result.ok) {
if (result.loading) {
return {
status: "loading",
error: undefined
}
}
return {
status: "loading-error",
error: result
}
}
const { data } = result;
if (data.aborted) {
return {
status: "aborted",
error: undefined,
onClose,
}
}
if (data.confirmation_done) {
return {
status: "confirmed",
error: undefined,
onClose,
}
}
if (!data.selection_done) {
return {
status: "ready",
error: undefined,
uri: parsedUri,
onClose
}
}
if (!data.selected_reserve_pub) {
return {
status: "invalid-reserve",
error: undefined,
reserve: data.selected_reserve_pub
}
}
const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)
if (!account) {
return {
status: "invalid-payto",
error: undefined,
payto: data.selected_exchange_account
}
}
return {
status: "need-confirmation",
error: undefined,
}
}
}

29
packages/demobank-ui/src/pages/OperationState/stories.tsx Normal file
View 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: "operation status page",
};
export const Ready = tests.createExample(ReadyView, {});

32
packages/demobank-ui/src/pages/OperationState/test.ts Normal file
View 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("Withdrawal operation states", () => {
it("should do some tests", async () => {
});
});

65
packages/demobank-ui/src/pages/OperationState/views.tsx Normal file
View File

@ -0,0 +1,65 @@
/*
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";
import { bankUiSettings } from "../../settings.js";
import { useBusinessAccountDetails } from "../../hooks/circuit.js";
import { useSettings } from "../../hooks/settings.js";
export function InvalidPaytoView({ error }: State.InvalidPayto) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function InvalidWithdrawalView({ error }: State.InvalidWithdrawal) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function InvalidReserveView({ error }: State.InvalidReserve) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function NeedConfirmationView({ error }: State.NeedConfirmation) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function AbortedView({ error }: State.Aborted) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function ConfirmedView({ error }: State.Confirmed) {
return (
<div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
);
}
export function ReadyView({ account, limit, goToBusinessAccount }: State.Ready): VNode<{}> {
const { i18n } = useTranslationContext();
return <div />
}

53
packages/demobank-ui/src/pages/admin/AccountList.tsx
View File

@ -70,7 +70,16 @@ export function AccountList({ account, onAction, onCreateAccount, onRegister }:
return <tr key={idx}>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
<a href="#" class="text-indigo-600 hover:text-indigo-900"
onClick={(e) => {
e.preventDefault();
onAction("show-details", item.username)
}}
>
{item.username}
</a>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{item.name}
@ -98,7 +107,7 @@ export function AccountList({ account, onAction, onCreateAccount, onRegister }:
>
change password
</a>
<br/>
<br />
<a href="#" class="text-indigo-600 hover:text-indigo-900" onClick={(e) => {
e.preventDefault();
onAction("show-cashout", item.username)
@ -106,7 +115,7 @@ export function AccountList({ account, onAction, onCreateAccount, onRegister }:
>
cashouts
</a>
<br/>
<br />
<a href="#" class="text-indigo-600 hover:text-indigo-900" onClick={(e) => {
e.preventDefault();
onAction("remove-account", item.username)
@ -118,7 +127,6 @@ export function AccountList({ account, onAction, onCreateAccount, onRegister }:
</tr>
})}
{/* <!-- More people... --> */}
</tbody>
</table>
)}
@ -126,43 +134,4 @@ export function AccountList({ account, onAction, onCreateAccount, onRegister }:
</div>
</div>
</div>
// return <section
// id="main"
// style={{ width: 600, marginLeft: "auto", marginRight: "auto" }}
// >
// <article>
// <h2>{i18n.str`Accounts:`}</h2>
// <div class="results">
// <table class="pure-table pure-table-striped">
// <tbody>
// return (
// <tr key={idx}>
// <td>
// <a
// href="#"
// onClick={(e) => {
// e.preventDefault();
// onAction("show-details", item.username)
// }}
// >
// {item.username}
// </a>
// </td>
// <td>{item.name}</td>
// <td>
//
// </td>
// <td>
// </td>
// </tr>
// );
// })}
// </tbody>
// </table>
// </div>
// </article>
// )}
// </section>
}

4
packages/demobank-ui/src/pages/admin/Home.tsx
View File

@ -35,7 +35,7 @@ export function AdminHome({ onRegister }: Props): VNode {
if (action) {
switch (action.type) {
case "show-details": return <ShowCashoutDetails
case "show-cashouts-details": return <ShowCashoutDetails
id={action.account}
onLoadNotOk={handleNotOkResult(i18n, onRegister)}
onCancel={() => {
@ -93,7 +93,7 @@ export function AdminHome({ onRegister }: Props): VNode {
setAction(undefined);
}}
/>
case "show-cashouts-details": return <ShowAccountDetails
case "show-details": return <ShowAccountDetails
account={action.account}
onLoadNotOk={handleNotOkResult(i18n, onRegister)}
onChangePassword={() => {