From 0b7bbed99d155ba030a1328e357ab6751bdbb835 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 21 Sep 2023 13:10:16 -0300 Subject: more ui: business and admin --- packages/demobank-ui/src/components/Routing.tsx | 17 +- .../src/components/ShowInputErrorLabel.tsx | 4 +- .../demobank-ui/src/pages/AccountPage/index.ts | 5 +- .../demobank-ui/src/pages/AccountPage/state.ts | 7 +- .../demobank-ui/src/pages/AccountPage/views.tsx | 29 +- packages/demobank-ui/src/pages/BankFrame.tsx | 32 +- packages/demobank-ui/src/pages/HomePage.tsx | 6 +- packages/demobank-ui/src/pages/PaymentOptions.tsx | 131 +++--- .../src/pages/PaytoWireTransferForm.tsx | 6 +- .../demobank-ui/src/pages/RegistrationPage.tsx | 2 +- .../demobank-ui/src/pages/ShowAccountDetails.tsx | 278 ++++++------ .../src/pages/UpdateAccountPassword.tsx | 278 +++++++----- packages/demobank-ui/src/pages/admin/Account.tsx | 72 ++- .../demobank-ui/src/pages/admin/AccountForm.tsx | 494 +++++++++++++-------- .../demobank-ui/src/pages/admin/AccountList.tsx | 182 +++++--- .../src/pages/admin/CreateNewAccount.tsx | 174 ++++---- packages/demobank-ui/src/pages/admin/Home.tsx | 51 +-- .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 302 +++++++++---- packages/demobank-ui/src/pages/business/Home.tsx | 2 +- 19 files changed, 1181 insertions(+), 891 deletions(-) (limited to 'packages/demobank-ui/src') diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx index ef11af76e..b8e39948b 100644 --- a/packages/demobank-ui/src/components/Routing.tsx +++ b/packages/demobank-ui/src/components/Routing.tsx @@ -33,12 +33,7 @@ export function Routing(): VNode { const backend = useBackendContext(); if (backend.state.status === "loggedOut") { - return { - route("/business"); - }} - > + return { - route("/business"); - }} - > + { route(`/operation/${wopid}`); }} + goToBusinessAccount={() => { + route("/business"); + }} onRegister={() => { route("/register"); }} diff --git a/packages/demobank-ui/src/components/ShowInputErrorLabel.tsx b/packages/demobank-ui/src/components/ShowInputErrorLabel.tsx index dacffe20a..c5840cad9 100644 --- a/packages/demobank-ui/src/components/ShowInputErrorLabel.tsx +++ b/packages/demobank-ui/src/components/ShowInputErrorLabel.tsx @@ -24,6 +24,6 @@ export function ShowInputErrorLabel({ isDirty: boolean; }): VNode { if (message && isDirty) - return
{message}
; - return ; + return
{message}
; + return
; } diff --git a/packages/demobank-ui/src/pages/AccountPage/index.ts b/packages/demobank-ui/src/pages/AccountPage/index.ts index ed6945f84..128a6d30f 100644 --- a/packages/demobank-ui/src/pages/AccountPage/index.ts +++ b/packages/demobank-ui/src/pages/AccountPage/index.ts @@ -28,6 +28,7 @@ export interface Props { onLoadNotOk: ( error: HttpResponsePaginated, ) => VNode; + goToBusinessAccount: () => void; } export type State = State.Loading | State.LoadingError | State.Ready | State.InvalidIban | State.UserNotFound; @@ -51,10 +52,8 @@ export namespace State { status: "ready"; error: undefined; account: string, - payto: PaytoUriIBAN | PaytoUriTalerBank, - balance: AmountJson, - balanceIsDebit: boolean, limit: AmountJson, + goToBusinessAccount: () => void; } export interface InvalidIban { diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts index 2249b743e..a57e19901 100644 --- a/packages/demobank-ui/src/pages/AccountPage/state.ts +++ b/packages/demobank-ui/src/pages/AccountPage/state.ts @@ -20,7 +20,7 @@ import { useBackendContext } from "../../context/backend.js"; import { useAccountDetails } from "../../hooks/access.js"; import { Props, State } from "./index.js"; -export function useComponentState({ account, onLoadNotOk }: Props): State { +export function useComponentState({ account, goToBusinessAccount }: Props): State { const result = useAccountDetails(account); const backend = useBackendContext(); const { i18n } = useTranslationContext(); @@ -60,7 +60,6 @@ export function useComponentState({ account, onLoadNotOk }: Props): State { const payto = parsePaytoUri(data.paytoUri); if (!payto || !payto.isKnown || (payto.targetType !== "iban" && payto.targetType !== "x-taler-bank")) { - console.log(payto) return { status: "invalid-iban", error: result @@ -75,11 +74,9 @@ export function useComponentState({ account, onLoadNotOk }: Props): State { return { status: "ready", + goToBusinessAccount, error: undefined, account, - balance, - balanceIsDebit, limit, - payto }; } diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index f2cbbba6c..abd14848f 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -22,6 +22,7 @@ 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"; export function InvalidIbanView({ error }: State.InvalidIban) { return ( @@ -77,11 +78,35 @@ function ImportantMessage(): VNode { } -export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> { - const { i18n } = useTranslationContext(); +export function ReadyView({ account, limit, goToBusinessAccount }: State.Ready): VNode<{}> { return + ; } +function MaybeBusinessButton({ + account, + onClick, +}: { + account: string; + onClick: () => void; +}): VNode { + const { i18n } = useTranslationContext(); + const result = useBusinessAccountDetails(account); + if (!result.ok) return ; + return ( +
+ +
+ ); +} diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 80a8224d4..4b23686d6 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -39,36 +39,12 @@ const versionText = VERSION const logger = new Logger("BankFrame"); -function MaybeBusinessButton({ - account, - onClick, -}: { - account: string; - onClick: () => void; -}): VNode { - const { i18n } = useTranslationContext(); - const result = useBusinessAccountDetails(account); - if (!result.ok) return ; - return ( - { - e.preventDefault(); - onClick(); - }} - >{i18n.str`Business Profile`} - ); -} - export function BankFrame({ children, - goToBusinessAccount, account, }: { - account: string | undefined, + account?: string, children: ComponentChildren; - goToBusinessAccount?: () => void; }): VNode { const { i18n } = useTranslationContext(); const backend = useBackendContext(); @@ -489,5 +465,9 @@ function AccountBalance({ account }: { account: string }): VNode { const result = useAccountDetails(account); if (!result.ok) return
- return
{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.currencyOf(result.data.balance.amount)} {Amounts.stringifyValue(result.data.balance.amount)}
+ return
+ {Amounts.currencyOf(result.data.balance.amount)} +  {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} + {Amounts.stringifyValue(result.data.balance.amount)} +
} diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index a911f347c..40cc147a6 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -31,14 +31,11 @@ import { } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { Loading } from "../components/Loading.js"; -import { useBackendContext } from "../context/backend.js"; import { getInitialBackendBaseURL } from "../hooks/backend.js"; import { useSettings } from "../hooks/settings.js"; import { AccountPage } from "./AccountPage/index.js"; -import { AdminHome } from "./admin/Home.js"; import { LoginForm } from "./LoginForm.js"; import { WithdrawalQRCode } from "./WithdrawalQRCode.js"; -import { error } from "console"; const logger = new Logger("AccountPage"); @@ -56,10 +53,12 @@ export function HomePage({ onRegister, account, onPendingOperationFound, + goToBusinessAccount, }: { account: string, onPendingOperationFound: (id: string) => void; onRegister: () => void; + goToBusinessAccount: () => void; }): VNode { const [settings] = useSettings(); const { i18n } = useTranslationContext(); @@ -72,6 +71,7 @@ export function HomePage({ return ( ); diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index c82c1b28d..5cb09a5d4 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -33,76 +33,79 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); // const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(undefined); - return (
- - Send money to - + return ( +
+ + Send money to + -
- {/* */} - +
+ {tab === "charge-wallet" && ( + { + updateSettings("currentWithdrawalOperationId", id); + }} + onCancel={() => { + setTab(undefined) + }} + /> + )} + {tab === "wire-transfer" && ( + { + notifyInfo(i18n.str`Wire transfer created!`); + }} + onCancel={() => { + setTab(undefined) + }} + /> + )} -
) +
+ ) } diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index cdaf363e3..af6f7caee 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -44,10 +44,12 @@ const logger = new Logger("PaytoWireTransferForm"); export function PaytoWireTransferForm({ focus, + title, onSuccess, onCancel, limit, }: { + title: TranslatedString, focus?: boolean; onSuccess: () => void; onCancel: (() => void) | undefined; @@ -158,7 +160,9 @@ export function PaytoWireTransferForm({ return (
-

Transfer details

+

+ {title} +