diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/InstanceRoutes.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/InstanceRoutes.tsx | 58 |
1 files changed, 33 insertions, 25 deletions
diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx index 817de5f7b..8ac5c698b 100644 --- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx +++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx @@ -19,6 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { format } from "date-fns"; import { Fragment, FunctionComponent, h, VNode } from "preact"; import { Route, route, Router } from "preact-router"; import { useCallback, useEffect, useMemo, useState } from "preact/hooks"; @@ -26,39 +28,37 @@ import { Loading } from "./components/exception/loading.js"; import { Menu, NotificationCard } from "./components/menu/index.js"; import { useBackendContext } from "./context/backend.js"; import { InstanceContextProvider } from "./context/instance.js"; +import { HttpError } from "./hooks/backend.js"; import { useBackendDefaultToken, useBackendInstanceToken, useLocalStorage, } from "./hooks/index.js"; -import { HttpError } from "./hooks/backend.js"; -import { Translate, useTranslator } from "./i18n/index.js"; +import { useInstanceKYCDetails } from "./hooks/instance.js"; import InstanceCreatePage from "./paths/admin/create/index.js"; import InstanceListPage from "./paths/admin/list/index.js"; +import ListKYCPage from "./paths/instance/kyc/list/index.js"; import OrderCreatePage from "./paths/instance/orders/create/index.js"; import OrderDetailsPage from "./paths/instance/orders/details/index.js"; import OrderListPage from "./paths/instance/orders/list/index.js"; import ProductCreatePage from "./paths/instance/products/create/index.js"; import ProductListPage from "./paths/instance/products/list/index.js"; import ProductUpdatePage from "./paths/instance/products/update/index.js"; -import TransferListPage from "./paths/instance/transfers/list/index.js"; -import TransferCreatePage from "./paths/instance/transfers/create/index.js"; -import TemplateListPage from "./paths/instance/templates/list/index.js"; -import TemplateUpdatePage from "./paths/instance/templates/update/index.js"; -import TemplateCreatePage from "./paths/instance/templates/create/index.js"; import ReservesCreatePage from "./paths/instance/reserves/create/index.js"; import ReservesDetailsPage from "./paths/instance/reserves/details/index.js"; import ReservesListPage from "./paths/instance/reserves/list/index.js"; -import ListKYCPage from "./paths/instance/kyc/list/index.js"; +import TemplateCreatePage from "./paths/instance/templates/create/index.js"; +import TemplateListPage from "./paths/instance/templates/list/index.js"; +import TemplateUpdatePage from "./paths/instance/templates/update/index.js"; +import TransferCreatePage from "./paths/instance/transfers/create/index.js"; +import TransferListPage from "./paths/instance/transfers/list/index.js"; import InstanceUpdatePage, { - Props as InstanceUpdatePageProps, AdminUpdate as InstanceAdminUpdatePage, + Props as InstanceUpdatePageProps, } from "./paths/instance/update/index.js"; import LoginPage from "./paths/login/index.js"; import NotFoundPage from "./paths/notfound/index.js"; import { Notification } from "./utils/types.js"; -import { useInstanceKYCDetails } from "./hooks/instance.js"; -import { format } from "date-fns"; export enum InstancePaths { // details = '/', @@ -99,10 +99,16 @@ export enum AdminPaths { export interface Props { id: string; admin?: boolean; + path: string; setInstanceName: (s: string) => void; } -export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { +export function InstanceRoutes({ + id, + admin, + path, + setInstanceName, +}: Props): VNode { const [_, updateDefaultToken] = useBackendDefaultToken(); const [token, updateToken] = useBackendInstanceToken(id); const { @@ -113,7 +119,7 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { const cleaner = useCallback(() => { updateToken(undefined); }, [id]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); type GlobalNotifState = (Notification & { to: string }) | undefined; const [globalNotification, setGlobalNotification] = @@ -144,8 +150,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { function ServerErrorRedirectTo(to: InstancePaths | AdminPaths) { return function ServerErrorRedirectToImpl(error: HttpError) { setGlobalNotification({ - message: i18n`The backend reported a problem: HTTP status #${error.status}`, - description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`, + message: i18n.str`The backend reported a problem: HTTP status #${error.status}`, + description: i18n.str`Diagnostic from ${error.info?.url} is "${error.message}"`, details: error.clientError || error.serverError ? error.error?.detail @@ -161,8 +167,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { <Fragment> <NotificationCard notification={{ - message: i18n`Access denied`, - description: i18n`The access token provided is invalid.`, + message: i18n.str`Access denied`, + description: i18n.str`The access token provided is invalid.`, type: "ERROR", }} /> @@ -177,8 +183,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { <Fragment> <NotificationCard notification={{ - message: i18n`No 'default' instance configured yet.`, - description: i18n`Create a 'default' instance to begin using the merchant backoffice.`, + message: i18n.str`No 'default' instance configured yet.`, + description: i18n.str`Create a 'default' instance to begin using the merchant backoffice.`, type: "INFO", }} /> @@ -208,6 +214,7 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { <Menu instance={id} admin={admin} + path={path} onLogout={clearTokenAndGoToRoot} setInstanceName={setInstanceName} /> @@ -488,7 +495,7 @@ function AdminInstanceUpdatePage({ () => ({ id, token, admin: true, changeToken }), [id, token], ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <InstanceContextProvider value={value}> @@ -500,8 +507,8 @@ function AdminInstanceUpdatePage({ <Fragment> <NotificationCard notification={{ - message: i18n`The backend reported a problem: HTTP status #${error.status}`, - description: i18n`Diagnostic from ${error.info?.url} is "${error.message}"`, + message: i18n.str`The backend reported a problem: HTTP status #${error.status}`, + description: i18n.str`Diagnostic from ${error.info?.url} is "${error.message}"`, details: error.clientError || error.serverError ? error.error?.detail @@ -518,8 +525,8 @@ function AdminInstanceUpdatePage({ <Fragment> <NotificationCard notification={{ - message: i18n`Access denied`, - description: i18n`The access token provided is invalid`, + message: i18n.str`Access denied`, + description: i18n.str`The access token provided is invalid`, type: "ERROR", }} /> @@ -534,6 +541,7 @@ function AdminInstanceUpdatePage({ function KycBanner(): VNode { const kycStatus = useInstanceKYCDetails(); + const { i18n } = useTranslationContext(); const today = format(new Date(), "yyyy-MM-dd"); const [lastHide, setLastHide] = useLocalStorage("kyc-last-hide"); const hasBeenHidden = today === lastHide; @@ -552,7 +560,7 @@ function KycBanner(): VNode { </p> <div class="buttons is-right"> <button class="button" onClick={() => setLastHide(today)}> - <Translate>Hide for today</Translate> + <i18n.Translate>Hide for today</i18n.Translate> </button> </div> </div> |