diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/menu')
3 files changed, 62 insertions, 69 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx index d618d6480..a1de8541e 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import langIcon from "../../assets/icons/languageicon.svg"; -import { useTranslationContext } from "../../context/translation.js"; -import { strings as messages } from "../../i18n/strings"; +import { strings as messages } from "../../i18n/strings.js"; type LangsNames = { [P in keyof typeof messages]: string; diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index ea49be99a..92d144b1a 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -19,13 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; -import { useCallback } from "preact/hooks"; import { useBackendContext } from "../../context/backend.js"; import { useConfigContext } from "../../context/config.js"; -import { useInstanceContext } from "../../context/instance.js"; import { useInstanceKYCDetails } from "../../hooks/instance.js"; -import { Translate } from "../../i18n/index.js"; import { LangSelector } from "./LangSelector.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; @@ -48,7 +46,7 @@ export function Sidebar({ }: Props): VNode { const config = useConfigContext(); const backend = useBackendContext(); - + const { i18n } = useTranslationContext(); const kycStatus = useInstanceKYCDetails(); const needKYC = kycStatus.ok && kycStatus.data.type === "redirect"; @@ -81,7 +79,7 @@ export function Sidebar({ {instance ? ( <Fragment> <p class="menu-label"> - <Translate>Instance</Translate> + <i18n.Translate>Instance</i18n.Translate> </p> <ul class="menu-list"> <li> @@ -90,7 +88,7 @@ export function Sidebar({ <i class="mdi mdi-square-edit-outline" /> </span> <span class="menu-item-label"> - <Translate>Settings</Translate> + <i18n.Translate>Settings</i18n.Translate> </span> </a> </li> @@ -100,7 +98,7 @@ export function Sidebar({ <i class="mdi mdi-cash-register" /> </span> <span class="menu-item-label"> - <Translate>Orders</Translate> + <i18n.Translate>Orders</i18n.Translate> </span> </a> </li> @@ -110,7 +108,7 @@ export function Sidebar({ <i class="mdi mdi-shopping" /> </span> <span class="menu-item-label"> - <Translate>Products</Translate> + <i18n.Translate>Products</i18n.Translate> </span> </a> </li> @@ -120,7 +118,7 @@ export function Sidebar({ <i class="mdi mdi-bank" /> </span> <span class="menu-item-label"> - <Translate>Transfers</Translate> + <i18n.Translate>Transfers</i18n.Translate> </span> </a> </li> @@ -130,7 +128,7 @@ export function Sidebar({ <i class="mdi mdi-newspaper" /> </span> <span class="menu-item-label"> - <Translate>Templates</Translate> + <i18n.Translate>Templates</i18n.Translate> </span> </a> </li> @@ -156,7 +154,7 @@ export function Sidebar({ </Fragment> ) : undefined} <p class="menu-label"> - <Translate>Connection</Translate> + <i18n.Translate>Connection</i18n.Translate> </p> <ul class="menu-list"> <li> @@ -190,7 +188,7 @@ export function Sidebar({ {admin && !mimic && ( <Fragment> <p class="menu-label"> - <Translate>Instances</Translate> + <i18n.Translate>Instances</i18n.Translate> </p> <li> <a href={"/instance/new"} class="has-icon"> @@ -198,7 +196,7 @@ export function Sidebar({ <i class="mdi mdi-plus" /> </span> <span class="menu-item-label"> - <Translate>New</Translate> + <i18n.Translate>New</i18n.Translate> </span> </a> </li> @@ -208,7 +206,7 @@ export function Sidebar({ <i class="mdi mdi-format-list-bulleted" /> </span> <span class="menu-item-label"> - <Translate>List</Translate> + <i18n.Translate>List</i18n.Translate> </span> </a> </li> @@ -223,7 +221,7 @@ export function Sidebar({ <i class="mdi mdi-logout default" /> </span> <span class="menu-item-label"> - <Translate>Log out</Translate> + <i18n.Translate>Log out</i18n.Translate> </span> </a> </li> diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index 23935ec98..ccbd9442f 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -15,7 +15,6 @@ */ import { ComponentChildren, Fragment, h, VNode } from "preact"; -import Match from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; import { AdminPaths } from "../../AdminRoutes.js"; import { InstancePaths } from "../../InstanceRoutes.js"; @@ -58,6 +57,7 @@ function getAdminTitle(path: string, instance: string) { interface MenuProps { title?: string; + path: string; instance: string; admin?: boolean; onLogout?: () => void; @@ -81,64 +81,59 @@ export function Menu({ onLogout, title, instance, + path, admin, setInstanceName, }: MenuProps): VNode { const [mobileOpen, setMobileOpen] = useState(false); + const titleWithSubtitle = title + ? title + : !admin + ? getInstanceTitle(path, instance) + : getAdminTitle(path, instance); + const adminInstance = instance === "default"; + const mimic = admin && !adminInstance; return ( - <Match> - {({ path }: any) => { - const titleWithSubtitle = title - ? title - : !admin - ? getInstanceTitle(path, instance) - : getAdminTitle(path, instance); - const adminInstance = instance === "default"; - const mimic = admin && !adminInstance; - return ( - <WithTitle title={titleWithSubtitle}> - <div - class={mobileOpen ? "has-aside-mobile-expanded" : ""} - onClick={() => setMobileOpen(false)} - > - <NavigationBar - onMobileMenu={() => setMobileOpen(!mobileOpen)} - title={titleWithSubtitle} - /> - - {onLogout && ( - <Sidebar - onLogout={onLogout} - admin={admin} - mimic={mimic} - instance={instance} - mobile={mobileOpen} - /> - )} - - {mimic && ( - <nav class="level"> - <div class="level-item has-text-centered has-background-warning"> - <p class="is-size-5"> - You are viewing the instance <b>"{instance}"</b>.{" "} - <a - href="#/instances" - onClick={(e) => { - setInstanceName("default"); - }} - > - go back - </a> - </p> - </div> - </nav> - )} + <WithTitle title={titleWithSubtitle}> + <div + class={mobileOpen ? "has-aside-mobile-expanded" : ""} + onClick={() => setMobileOpen(false)} + > + <NavigationBar + onMobileMenu={() => setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + {onLogout && ( + <Sidebar + onLogout={onLogout} + admin={admin} + mimic={mimic} + instance={instance} + mobile={mobileOpen} + /> + )} + + {mimic && ( + <nav class="level"> + <div class="level-item has-text-centered has-background-warning"> + <p class="is-size-5"> + You are viewing the instance <b>"{instance}"</b>.{" "} + <a + href="#/instances" + onClick={(e) => { + setInstanceName("default"); + }} + > + go back + </a> + </p> </div> - </WithTitle> - ); - }} - </Match> + </nav> + )} + </div> + </WithTitle> ); } |