diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx index 23510c456..f6a81ff8d 100644 --- a/packages/merchant-backoffice-ui/src/Application.tsx +++ b/packages/merchant-backoffice-ui/src/Application.tsx @@ -26,7 +26,7 @@ import { } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { route } from "preact-router"; -import { useMemo } from "preact/hooks"; +import { useMemo, useState } from "preact/hooks"; import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes.js"; import { Loading } from "./components/exception/loading.js"; import { @@ -42,6 +42,7 @@ import { useBackendConfig } from "./hooks/backend.js"; import { strings } from "./i18n/strings.js"; import LoginPage from "./paths/login/index.js"; import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { Settings } from "./paths/settings/index.js"; export function Application(): VNode { return ( @@ -70,10 +71,19 @@ function ApplicationStatusRoutes(): VNode { : { currency: "unknown", version: "unknown" }; const ctx = useMemo(() => ({ currency, version }), [currency, version]); + const [showSettings, setShowSettings] = useState(false) + + if (showSettings) { + return + setShowSettings(true)} title="UI Settings" /> + + + } + if (!triedToLog) { return ( - + setShowSettings(true)} /> ); @@ -87,7 +97,7 @@ function ApplicationStatusRoutes(): VNode { ) { return ( - + setShowSettings(true)} /> ); @@ -98,7 +108,7 @@ function ApplicationStatusRoutes(): VNode { ) { return ( - + setShowSettings(true)} /> - + setShowSettings(true)} /> - + setShowSettings(true)} /> - + setShowSettings(true)} /> ; + if (showSettings) { + return + setShowSettings(true)} title="UI Settings" onLogout={clearTokenAndGoToRoot} /> + + + } + if (result.loading) return setShowSettings(true)} title="Loading..." />; let admin = true; let instanceNameByBackendURL; @@ -61,7 +69,7 @@ export function ApplicationReadyRoutes(): VNode { ) { return ( - + setShowSettings(true)} title="Login" onLogout={clearTokenAndGoToRoot} /> - + setShowSettings(true)} title="Error" onLogout={clearTokenAndGoToRoot} /> { + route("/settings") + }} path={path} onLogout={clearTokenAndGoToRoot} setInstanceName={setInstanceName} @@ -558,6 +564,7 @@ export function InstanceRoutes({ }} /> + {/** * Example pages */} diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx index 984b6fe06..f2f94a7c5 100644 --- a/packages/merchant-backoffice-ui/src/components/exception/login.tsx +++ b/packages/merchant-backoffice-ui/src/components/exception/login.tsx @@ -229,7 +229,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode { ); } -function AsyncButton({onClick, children}:{onClick: () => Promise, children: ComponentChildren}):VNode { +function AsyncButton({ onClick, children }: { onClick: () => Promise, children: ComponentChildren }): VNode { const [running, setRunning] = useState(false) return { setRunning(true) diff --git a/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx index 9624a2c38..9f1b33893 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/NavigationBar.tsx @@ -20,7 +20,6 @@ */ import { h, VNode } from "preact"; -import { LangSelector } from "./LangSelector.js"; import logo from "../../assets/logo-2021.svg"; interface Props { @@ -65,7 +64,6 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode { - diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index 6fee600eb..f3cf80b92 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -31,6 +31,7 @@ const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; interface Props { onLogout: () => void; + onShowSettings: () => void; mobile?: boolean; instance: string; admin?: boolean; @@ -40,6 +41,7 @@ interface Props { export function Sidebar({ mobile, instance, + onShowSettings, onLogout, admin, mimic, @@ -78,21 +80,8 @@ export function Sidebar({ {instance ? ( - - Instance - - - - - - - - Settings - - - - + @@ -132,6 +121,31 @@ export function Sidebar({ + {needKYC && ( + + + + + + KYC Status + + + )} + + + Configuration + + + + + + + + + Account + + + @@ -150,16 +164,6 @@ export function Sidebar({ - {needKYC && ( - - - - - - KYC Status - - - )} ) : undefined} @@ -167,6 +171,18 @@ export function Sidebar({ Connection + + onShowSettings()} + > + + + + + Settings + + + diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index 2beaf6956..cdbae4ae0 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -75,6 +75,7 @@ interface MenuProps { instance: string; admin?: boolean; onLogout?: () => void; + onShowSettings: () => void; setInstanceName: (s: string) => void; } @@ -93,6 +94,7 @@ function WithTitle({ export function Menu({ onLogout, + onShowSettings, title, instance, path, @@ -121,6 +123,7 @@ export function Menu({ {onLogout && ( void; + onShowSettings: () => void; } interface NotifProps { @@ -199,6 +203,7 @@ export function NotificationCard({ export function NotYetReadyAppMenu({ onLogout, + onShowSettings, title, }: NotYetReadyAppMenuProps): VNode { const [mobileOpen, setMobileOpen] = useState(false); @@ -217,7 +222,7 @@ export function NotYetReadyAppMenu({ title={title} /> {onLogout && ( - + )} ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx index 56d9dda74..37770d273 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx @@ -164,7 +164,7 @@ export function ListPage({ {jumpToDate && ( - onSelectDate(undefined)}> + onSelectDate(undefined)}> { setPickDate(true); }} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx index 4dde202c4..e20b9bc27 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx @@ -85,34 +85,34 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { template_contract: !state.template_contract ? undefined : undefinedIfEmpty({ - amount: !state.template_contract?.amount - ? undefined - : !parsedPrice + amount: !state.template_contract?.amount + ? undefined + : !parsedPrice ? i18n.str`not valid` : Amounts.isZero(parsedPrice) - ? i18n.str`must be greater than 0` - : undefined, - minimum_age: - state.template_contract.minimum_age < 0 - ? i18n.str`should be greater that 0` + ? i18n.str`must be greater than 0` : undefined, - pay_duration: !state.template_contract.pay_duration - ? i18n.str`can't be empty` - : state.template_contract.pay_duration.d_us === "forever" + minimum_age: + state.template_contract.minimum_age < 0 + ? i18n.str`should be greater that 0` + : undefined, + pay_duration: !state.template_contract.pay_duration + ? i18n.str`can't be empty` + : state.template_contract.pay_duration.d_us === "forever" ? undefined : state.template_contract.pay_duration.d_us < 1000 * 1000 //less than one second - ? i18n.str`to short` - : undefined, - } as Partial), + ? i18n.str`to short` + : undefined, + } as Partial), pos_key: !state.pos_key ? !state.pos_algorithm ? undefined : i18n.str`required` : !isBase32RFC3548Charset(state.pos_key) - ? i18n.str`just letters and numbers from 2 to 7` - : state.pos_key.length !== 32 - ? i18n.str`size of the key should be 32` - : undefined, + ? i18n.str`just letters and numbers from 2 to 7` + : state.pos_key.length !== 32 + ? i18n.str`size of the key should be 32` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -139,7 +139,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { > name="template_id" - addonBefore={`${backend.url}/instances/templates/`} + help={`${backend.url}/instances/templates/${state.template_id ?? ""}`} label={i18n.str`Identifier`} tooltip={i18n.str`Name of the template in URLs.`} /> diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx new file mode 100644 index 000000000..1d0b4128a --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx @@ -0,0 +1,15 @@ +import { VNode, h } from "preact"; + +export function Settings(): VNode { + return + + + + + settings view + + + + + +} \ No newline at end of file
- Instance -
+ Configuration +