From c59f9a2556731ad95ab8bd7eefe7fa8a41629834 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 20 Dec 2022 17:45:24 -0300 Subject: use translation context from web-utils, don't use match react-router since is broken --- packages/merchant-backoffice-ui/build.mjs | 3 +- packages/merchant-backoffice-ui/package.json | 24 +-- .../merchant-backoffice-ui/src/Application.tsx | 23 ++- .../src/ApplicationReadyRoutes.tsx | 32 +-- .../merchant-backoffice-ui/src/InstanceRoutes.tsx | 58 +++--- .../src/components/exception/AsyncButton.tsx | 6 +- .../src/components/exception/login.tsx | 12 +- .../src/components/form/InputArray.tsx | 10 +- .../src/components/form/InputCurrency.tsx | 9 +- .../src/components/form/InputDate.tsx | 14 +- .../src/components/form/InputDuration.tsx | 28 +-- .../src/components/form/InputImage.tsx | 10 +- .../src/components/form/InputLocation.tsx | 27 +-- .../src/components/form/InputPaytoForm.tsx | 98 +++++----- .../src/components/form/InputSearchProduct.tsx | 18 +- .../src/components/form/InputSecured.tsx | 17 +- .../src/components/form/InputStock.tsx | 46 ++--- .../src/components/form/InputTaxes.tsx | 25 +-- .../instance/DefaultInstanceFormFields.tsx | 56 +++--- .../src/components/menu/LangSelector.tsx | 4 +- .../src/components/menu/SideBar.tsx | 28 ++- .../src/components/menu/index.tsx | 99 +++++----- .../src/components/modal/index.tsx | 96 ++++----- .../src/components/picker/DurationPicker.tsx | 12 +- .../components/product/InventoryProductForm.tsx | 26 +-- .../components/product/NonInventoryProductForm.tsx | 44 ++--- .../src/components/product/ProductForm.tsx | 38 ++-- .../src/components/product/ProductList.tsx | 13 +- .../merchant-backoffice-ui/src/context/fetch.ts | 2 +- .../merchant-backoffice-ui/src/context/listener.ts | 35 ---- .../src/context/translation.ts | 66 ------- packages/merchant-backoffice-ui/src/i18n/index.tsx | 215 --------------------- .../src/paths/admin/create/Create.stories.tsx | 12 +- .../src/paths/admin/create/CreatePage.tsx | 53 ++--- .../src/paths/admin/create/index.tsx | 6 +- .../src/paths/admin/create/stories.ts | 48 ----- .../src/paths/admin/create/stories.tsx | 52 +++++ .../src/paths/admin/list/TableActive.tsx | 29 +-- .../src/paths/admin/list/View.tsx | 18 +- .../src/paths/admin/list/index.tsx | 12 +- .../src/paths/instance/details/DetailPage.tsx | 8 +- .../src/paths/instance/details/stories.tsx | 17 +- .../src/paths/instance/index.stories.ts | 1 - .../src/paths/instance/kyc/list/ListPage.tsx | 25 +-- .../paths/instance/orders/create/CreatePage.tsx | 132 ++++++------- .../orders/create/OrderCreatedSuccessfully.tsx | 12 +- .../paths/instance/orders/details/DetailPage.tsx | 151 ++++++++------- .../src/paths/instance/orders/details/index.tsx | 10 +- .../src/paths/instance/orders/list/ListPage.tsx | 33 ++-- .../src/paths/instance/orders/list/Table.tsx | 68 ++++--- .../src/paths/instance/orders/list/index.tsx | 20 +- .../paths/instance/products/create/CreatePage.tsx | 10 +- .../src/paths/instance/products/create/index.tsx | 6 +- .../src/paths/instance/products/list/Table.tsx | 79 ++++---- .../src/paths/instance/products/list/index.tsx | 12 +- .../paths/instance/products/update/UpdatePage.tsx | 14 +- .../src/paths/instance/products/update/index.tsx | 6 +- .../paths/instance/reserves/create/CreatePage.tsx | 55 +++--- .../reserves/create/CreatedSuccessfully.tsx | 14 +- .../src/paths/instance/reserves/create/index.tsx | 6 +- .../paths/instance/reserves/details/DetailPage.tsx | 53 ++--- .../instance/reserves/list/AutorizeTipModal.tsx | 18 +- .../src/paths/instance/reserves/list/Table.tsx | 44 +++-- .../src/paths/instance/reserves/list/index.tsx | 8 +- .../paths/instance/templates/create/CreatePage.tsx | 44 ++--- .../src/paths/instance/templates/create/index.tsx | 8 +- .../src/paths/instance/templates/list/ListPage.tsx | 4 +- .../src/paths/instance/templates/list/Table.tsx | 32 +-- .../src/paths/instance/templates/list/index.tsx | 8 +- .../paths/instance/templates/update/UpdatePage.tsx | 44 ++--- .../src/paths/instance/templates/update/index.tsx | 7 +- .../paths/instance/transfers/create/CreatePage.tsx | 42 ++-- .../src/paths/instance/transfers/create/index.tsx | 6 +- .../src/paths/instance/transfers/list/ListPage.tsx | 22 +-- .../src/paths/instance/transfers/list/Table.tsx | 50 ++--- .../src/paths/instance/update/UpdatePage.tsx | 53 ++--- .../src/paths/instance/update/index.tsx | 6 +- .../merchant-backoffice-ui/src/stories.test.ts | 13 +- .../tests/functions/regex.test.ts | 32 +-- .../merchant-backoffice-ui/tests/header.test.tsx | 18 +- packages/web-util/src/tests/hook.ts | 2 + 81 files changed, 1191 insertions(+), 1426 deletions(-) delete mode 100644 packages/merchant-backoffice-ui/src/context/listener.ts delete mode 100644 packages/merchant-backoffice-ui/src/context/translation.ts delete mode 100644 packages/merchant-backoffice-ui/src/i18n/index.tsx delete mode 100644 packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts create mode 100644 packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx (limited to 'packages') diff --git a/packages/merchant-backoffice-ui/build.mjs b/packages/merchant-backoffice-ui/build.mjs index 611ef7044..4097e4e9a 100755 --- a/packages/merchant-backoffice-ui/build.mjs +++ b/packages/merchant-backoffice-ui/build.mjs @@ -64,8 +64,7 @@ function getFilesInDirectory(startPath, regex) { return result } -const allTestFiles = getFilesInDirectory(path.join(BASE, 'tests'), /.test.tsx?$/) - +const allTestFiles = getFilesInDirectory(path.join(BASE, 'src'), /.test.tsx?$/) const entryPoints = ["src/index.tsx", "src/stories.tsx", ...allTestFiles]; let GIT_ROOT = BASE; diff --git a/packages/merchant-backoffice-ui/package.json b/packages/merchant-backoffice-ui/package.json index 085f92d76..ca8923e05 100644 --- a/packages/merchant-backoffice-ui/package.json +++ b/packages/merchant-backoffice-ui/package.json @@ -3,12 +3,13 @@ "name": "@gnu-taler/merchant-backoffice", "version": "0.0.4", "license": "MIT", + "type": "module", "scripts": { "build": "./build.mjs", "check": "tsc", "compile": "tsc && ./build.mjs", "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm", - "test": "pnpm compile && mocha --require source-map-support/register '*.test.js' 'dist/**/test.js'", + "test": "pnpm compile && mocha --require source-map-support/register 'dist/**/*.test.js' 'dist/**/test.js'", "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", "i18n:extract": "pogen extract", "i18n:merge": "pogen merge", @@ -38,7 +39,7 @@ "date-fns": "2.29.3", "history": "4.10.1", "jed": "1.1.1", - "preact": "10.6.5", + "preact": "10.11.3", "preact-router": "3.2.1", "qrcode-generator": "1.4.4", "swr": "1.3.0", @@ -79,22 +80,5 @@ "sass": "1.56.1", "typedoc": "^0.20.36", "typescript": "4.8.4" - }, - "jest": { - "preset": "jest-preset-preact", - "transformIgnorePatterns": [ - "node_modules/.pnpm/(?!(@gnu-taler\\+taler-util))", - "\\.pnp\\.[^\\/]+$" - ], - "setupFiles": [ - "/tests/__mocks__/browserMocks.ts", - "/tests/__mocks__/setupTests.ts" - ], - "moduleNameMapper": { - "\\.(css|less)$": "identity-obj-proxy" - }, - "transform": { - "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "/tests/__mocks__/fileTransformer.js" - } } -} +} \ No newline at end of file diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx index 0b92375c1..84536396d 100644 --- a/packages/merchant-backoffice-ui/src/Application.tsx +++ b/packages/merchant-backoffice-ui/src/Application.tsx @@ -19,6 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { + TranslationProvider, + useTranslationContext, +} from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { route } from "preact-router"; import { useMemo } from "preact/hooks"; @@ -33,16 +37,15 @@ import { useBackendContext, } from "./context/backend.js"; import { ConfigContextProvider } from "./context/config.js"; -import { TranslationProvider } from "./context/translation.js"; import { useBackendConfig } from "./hooks/backend.js"; -import { useTranslator } from "./i18n/index.js"; +import { strings } from "./i18n/strings.js"; import LoginPage from "./paths/login/index.js"; export function Application(): VNode { return ( // - + @@ -53,7 +56,7 @@ export function Application(): VNode { function ApplicationStatusRoutes(): VNode { const { updateLoginStatus, triedToLog } = useBackendContext(); const result = useBackendConfig(); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const updateLoginInfoAndGoToRoot = (url: string, token?: string) => { updateLoginStatus(url, token); @@ -88,7 +91,7 @@ function ApplicationStatusRoutes(): VNode { @@ -120,9 +123,9 @@ function ApplicationStatusRoutes(): VNode { @@ -130,7 +133,7 @@ function ApplicationStatusRoutes(): VNode { ); return ( -
+
diff --git a/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx b/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx index fe4493bff..4390ef877 100644 --- a/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx +++ b/packages/merchant-backoffice-ui/src/ApplicationReadyRoutes.tsx @@ -18,23 +18,23 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { createHashHistory } from "history"; import { Fragment, h, VNode } from "preact"; import Router, { Route, route } from "preact-router"; +import { useState } from "preact/hooks"; +import { + NotificationCard, + NotYetReadyAppMenu, +} from "./components/menu/index.js"; import { useBackendContext } from "./context/backend.js"; import { useBackendInstancesTestForAdmin } from "./hooks/backend.js"; import { InstanceRoutes } from "./InstanceRoutes.js"; import LoginPage from "./paths/login/index.js"; import { INSTANCE_ID_LOOKUP } from "./utils/constants.js"; -import { - NotYetReadyAppMenu, - NotificationCard, -} from "./components/menu/index.js"; -import { useTranslator } from "./i18n/index.js"; -import { createHashHistory } from "history"; -import { useState } from "preact/hooks"; export function ApplicationReadyRoutes(): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { url: backendURL, updateLoginStatus, @@ -54,8 +54,8 @@ export function ApplicationReadyRoutes(): VNode { @@ -81,8 +81,8 @@ export function ApplicationReadyRoutes(): VNode { @@ -108,7 +108,12 @@ export function ApplicationReadyRoutes(): VNode { ); } -function DefaultMainRoute({ instance, admin, instanceNameByBackendURL }: any) { +function DefaultMainRoute({ + instance, + admin, + instanceNameByBackendURL, + url, //from preact-router +}: any): VNode { const [instanceName, setInstanceName] = useState( instanceNameByBackendURL || instance || "default", ); @@ -116,6 +121,7 @@ function DefaultMainRoute({ instance, admin, instanceNameByBackendURL }: any) { return ( 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 { @@ -177,8 +183,8 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { @@ -208,6 +214,7 @@ export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode { @@ -488,7 +495,7 @@ function AdminInstanceUpdatePage({ () => ({ id, token, admin: true, changeToken }), [id, token], ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( @@ -500,8 +507,8 @@ function AdminInstanceUpdatePage({ @@ -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 {

diff --git a/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx index 510bc29b8..aa50dfa91 100644 --- a/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx +++ b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx @@ -22,7 +22,7 @@ import { ComponentChildren, h } from "preact"; import { LoadingModal } from "../modal/index.js"; import { useAsync } from "../../hooks/async.js"; -import { Translate } from "../../i18n/index.js"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; type Props = { children: ComponentChildren; @@ -33,14 +33,14 @@ type Props = { export function AsyncButton({ onClick, disabled, children, ...rest }: Props) { const { isSlow, isLoading, request, cancel } = useAsync(onClick); - + const { i18n } = useTranslationContext(); if (isSlow) { return ; } if (isLoading) { return ( ); } diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx index d1898915d..552e76ed6 100644 --- a/packages/merchant-backoffice-ui/src/components/exception/login.tsx +++ b/packages/merchant-backoffice-ui/src/components/exception/login.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 { useBackendContext } from "../../context/backend.js"; import { useInstanceContext } from "../../context/instance.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { Notification } from "../../utils/types.js"; interface Props { @@ -51,7 +51,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode { const [token, setToken] = useState(currentToken); const [url, setURL] = useState(backendUrl); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
@@ -61,13 +61,13 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode { class="modal-card-head" style={{ border: "1px solid", borderBottom: 0 }} > -

{i18n`Login required`}

+

{i18n.str`Login required`}

- Please enter your access token. + Please enter your access token.
@@ -95,7 +95,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
@@ -133,7 +133,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode { onConfirm(url, normalizeToken(token)); }} > - Confirm + Confirm
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx index b5da1117a..8f0249bb2 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx @@ -18,9 +18,9 @@ * * @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 { Translate, useTranslator } from "../../i18n/index.js"; import { InputProps, useField } from "./useField.js"; export interface Props extends InputProps { @@ -52,7 +52,7 @@ export function InputArray({ const array: any[] = (value ? value! : []) as any; const [currentValue, setCurrentValue] = useState(""); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
@@ -99,7 +99,7 @@ export function InputArray({ const v = fromStr(currentValue); if (!isValid(v)) { setLocalError( - i18n`The value ${v} is invalid for a payment url`, + i18n.str`The value ${v} is invalid for a payment url`, ); return; } @@ -107,9 +107,9 @@ export function InputArray({ onChange([v, ...array] as any); setCurrentValue(""); }} - data-tooltip={i18n`add element to the list`} + data-tooltip={i18n.str`add element to the list`} > - add + add

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx b/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx index 57a5163b7..3b84855da 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputCurrency.tsx @@ -18,7 +18,7 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { ComponentChildren, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import { useConfigContext } from "../../context/config.js"; import { Amount } from "../../declaration.js"; import { InputWithAddon } from "./InputWithAddon.js"; @@ -42,7 +42,7 @@ export function InputCurrency({ addonAfter, children, side, -}: Props) { +}: Props): VNode { const config = useConfigContext(); return ( @@ -60,7 +60,8 @@ export function InputCurrency({ toStr={(v?: Amount) => v?.split(":")[1] || ""} fromStr={(v: string) => (!v ? "" : `${config.currency}:${v}`)} inputExtra={{ min: 0 }} - children={children} - /> + > + {children} + ); } diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx index 4704b3312..fba798bd5 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx @@ -18,10 +18,10 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { DatePicker } from "../picker/DatePicker.js"; import { InputProps, useField } from "./useField.js"; @@ -43,7 +43,7 @@ export function InputDate({ withTimestampSupport, }: Props): VNode { const [opened, setOpened] = useState(false); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { error, required, value, onChange } = useField(name); @@ -120,25 +120,25 @@ export function InputDate({ )} {withTimestampSupport && ( - + )} diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx index 658cc4db7..3f25d1dc7 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx @@ -18,10 +18,10 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { intervalToDuration, formatDuration } from "date-fns"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { formatDuration, intervalToDuration } from "date-fns"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { SimpleModal } from "../modal/index.js"; import { DurationPicker } from "../picker/DurationPicker.js"; import { InputProps, useField } from "./useField.js"; @@ -43,14 +43,14 @@ export function InputDuration({ withForever, }: Props): VNode { const [opened, setOpened] = useState(false); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { error, required, value, onChange } = useField(name); let strValue = ""; if (!value) { strValue = ""; } else if (value.d_us === "forever") { - strValue = i18n`forever`; + strValue = i18n.str`forever`; } else { strValue = formatDuration( intervalToDuration({ start: 0, end: value.d_us / 1000 }), @@ -59,17 +59,17 @@ export function InputDuration({ formatDistance: (name, value) => { switch (name) { case "xMonths": - return i18n`${value}M`; + return i18n.str`${value}M`; case "xYears": - return i18n`${value}Y`; + return i18n.str`${value}Y`; case "xDays": - return i18n`${value}d`; + return i18n.str`${value}d`; case "xHours": - return i18n`${value}h`; + return i18n.str`${value}h`; case "xMinutes": - return i18n`${value}min`; + return i18n.str`${value}min`; case "xSeconds": - return i18n`${value}sec`; + return i18n.str`${value}sec`; } }, localize: { @@ -134,22 +134,22 @@ export function InputDuration({ {error &&

{error}

}
{withForever && ( - + )} {!readonly && ( - + )} diff --git a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx index d5b2aadb6..43a7af1a3 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx @@ -18,9 +18,9 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { ComponentChildren, h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; -import { Translate } from "../../i18n/index.js"; import { MAX_IMAGE_SIZE as MAX_IMAGE_UPLOAD_SIZE } from "../../utils/constants.js"; import { InputProps, useField } from "./useField.js"; @@ -43,7 +43,7 @@ export function InputImage({ const { error, value, onChange } = useField(name); const image = useRef(null); - + const { i18n } = useTranslationContext(); const [sizeError, setSizeError] = useState(false); return ( @@ -102,17 +102,17 @@ export function InputImage({ {error &&

{error}

} {sizeError && (

- Image should be smaller than 1 MB + Image should be smaller than 1 MB

)} {!value && ( )} {value && ( )}
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx b/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx index 613b2f1e6..ef5a0995c 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputLocation.tsx @@ -19,31 +19,34 @@ * @author Sebastian Javier Marchano (sebasjm) */ import { Fragment, h } from "preact"; -import { useTranslator } from "../../i18n/index.js"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Input } from "./Input.js"; export function InputLocation({ name }: { name: string }) { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <> - + (!v ? "" : v.join("\n"))} fromStr={(v: string) => v.split("\n")} /> - - - - - - - + + + + + + + ); diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx index 085febea4..7bf39152b 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx @@ -18,9 +18,9 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { Fragment, h, VNode } from "preact"; import { useCallback, useState } from "preact/hooks"; -import { Translate, Translator, useTranslator } from "../../i18n/index.js"; import { COUNTRY_TABLE } from "../../utils/constants.js"; import { undefinedIfEmpty } from "../../utils/table.js"; import { FormErrors, FormProvider } from "./FormProvider.js"; @@ -69,24 +69,30 @@ function checkAddressChecksum(address: string) { return true; } -function validateBitcoin(addr: string, i18n: Translator): string | undefined { +function validateBitcoin( + addr: string, + i18n: ReturnType["i18n"], +): string | undefined { try { const valid = /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/.test(addr); if (valid) return undefined; } catch (e) { console.log(e); } - return i18n`This is not a valid bitcoin address.`; + return i18n.str`This is not a valid bitcoin address.`; } -function validateEthereum(addr: string, i18n: Translator): string | undefined { +function validateEthereum( + addr: string, + i18n: ReturnType["i18n"], +): string | undefined { try { const valid = isEthereumAddress(addr); if (valid) return undefined; } catch (e) { console.log(e); } - return i18n`This is not a valid Ethereum address.`; + return i18n.str`This is not a valid Ethereum address.`; } /** @@ -103,12 +109,15 @@ function validateEthereum(addr: string, i18n: Translator): string | undefined { * If the remainder is 1, the check digit test is passed and the IBAN might be valid. * */ -function validateIBAN(iban: string, i18n: Translator): string | undefined { +function validateIBAN( + iban: string, + i18n: ReturnType["i18n"], +): string | undefined { // Check total length if (iban.length < 4) - return i18n`IBAN numbers usually have more that 4 digits`; + return i18n.str`IBAN numbers usually have more that 4 digits`; if (iban.length > 34) - return i18n`IBAN numbers usually have less that 34 digits`; + return i18n.str`IBAN numbers usually have less that 34 digits`; const A_code = "A".charCodeAt(0); const Z_code = "Z".charCodeAt(0); @@ -116,7 +125,7 @@ function validateIBAN(iban: string, i18n: Translator): string | undefined { // check supported country const code = IBAN.substr(0, 2); const found = code in COUNTRY_TABLE; - if (!found) return i18n`IBAN country code not found`; + if (!found) return i18n.str`IBAN country code not found`; // 2.- Move the four initial characters to the end of the string const step2 = IBAN.substr(4) + iban.substr(0, 4); @@ -140,7 +149,8 @@ function validateIBAN(iban: string, i18n: Translator): string | undefined { } const checksum = calculate_iban_checksum(step3); - if (checksum !== 1) return i18n`IBAN number is not valid, checksum is wrong`; + if (checksum !== 1) + return i18n.str`IBAN number is not valid, checksum is wrong`; return undefined; } @@ -175,7 +185,7 @@ export function InputPaytoForm({ payToPath = `/${value.path1}`; } } - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const ops = value.options!; const url = tryUrl(`payto://${value.target}${payToPath}`); @@ -188,9 +198,9 @@ export function InputPaytoForm({ const paytoURL = !url ? "" : url.toString(); const errors: FormErrors = { - target: value.target === noTargetValue ? i18n`required` : undefined, + target: value.target === noTargetValue ? i18n.str`required` : undefined, path1: !value.path1 - ? i18n`required` + ? i18n.str`required` : value.target === "iban" ? validateIBAN(value.path1, i18n) : value.target === "bitcoin" @@ -201,12 +211,12 @@ export function InputPaytoForm({ path2: value.target === "x-taler-bank" ? !value.path2 - ? i18n`required` + ? i18n.str`required` : undefined : undefined, options: undefinedIfEmpty({ "receiver-name": !value.options?.["receiver-name"] - ? i18n`required` + ? i18n.str`required` : undefined, }), }; @@ -235,23 +245,23 @@ export function InputPaytoForm({ > name="target" - label={i18n`Target type`} - tooltip={i18n`Method to use for wire transfer`} + label={i18n.str`Target type`} + tooltip={i18n.str`Method to use for wire transfer`} values={targets} - toStr={(v) => (v === noTargetValue ? i18n`Choose one...` : v)} + toStr={(v) => (v === noTargetValue ? i18n.str`Choose one...` : v)} /> {value.target === "ach" && ( name="path1" - label={i18n`Routing`} - tooltip={i18n`Routing number.`} + label={i18n.str`Routing`} + tooltip={i18n.str`Routing number.`} /> name="path2" - label={i18n`Account`} - tooltip={i18n`Account number.`} + label={i18n.str`Account`} + tooltip={i18n.str`Account number.`} /> )} @@ -259,8 +269,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Code`} - tooltip={i18n`Business Identifier Code.`} + label={i18n.str`Code`} + tooltip={i18n.str`Business Identifier Code.`} /> )} @@ -268,8 +278,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Account`} - tooltip={i18n`Bank Account Number.`} + label={i18n.str`Account`} + tooltip={i18n.str`Bank Account Number.`} inputExtra={{ style: { textTransform: "uppercase" } }} /> @@ -278,8 +288,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Account`} - tooltip={i18n`Unified Payment Interface.`} + label={i18n.str`Account`} + tooltip={i18n.str`Unified Payment Interface.`} /> )} @@ -287,8 +297,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Address`} - tooltip={i18n`Bitcoin protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Bitcoin protocol.`} /> )} @@ -296,8 +306,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Address`} - tooltip={i18n`Ethereum protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Ethereum protocol.`} /> )} @@ -305,8 +315,8 @@ export function InputPaytoForm({ name="path1" - label={i18n`Address`} - tooltip={i18n`Interledger protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Interledger protocol.`} /> )} @@ -315,13 +325,13 @@ export function InputPaytoForm({ name="path1" - label={i18n`Host`} - tooltip={i18n`Bank host.`} + label={i18n.str`Host`} + tooltip={i18n.str`Bank host.`} /> name="path2" - label={i18n`Account`} - tooltip={i18n`Bank account.`} + label={i18n.str`Account`} + tooltip={i18n.str`Bank account.`} /> )} @@ -329,8 +339,8 @@ export function InputPaytoForm({ {value.target !== noTargetValue && ( )} @@ -357,7 +367,7 @@ export function InputPaytoForm({ />
))} - {!paytos.length && i18n`No accounts yet.`} + {!paytos.length && i18n.str`No accounts yet.`}
@@ -365,11 +375,11 @@ export function InputPaytoForm({
)} diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx index fceee9d56..7f65fb8ae 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx @@ -18,11 +18,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 emptyImage from "../../assets/empty.png"; import { MerchantBackend, WithId } from "../../declaration.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { FormErrors, FormProvider } from "./FormProvider.js"; import { InputWithAddon } from "./InputWithAddon.js"; @@ -50,7 +50,7 @@ export function InputSearchProduct({ const errors: FormErrors = { name: undefined, }; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (selected) { return ( @@ -63,10 +63,11 @@ export function InputSearchProduct({

- Product id: {selected.id} + Product id: {selected.id}

- Description: {selected.description} + Description:{" "} + {selected.description}

@@ -125,7 +126,7 @@ export function InputSecured({
- Update + Update
@@ -154,7 +155,7 @@ export function InputSecured({
- Remove + Remove @@ -171,7 +172,7 @@ export function InputSecured({ - Cancel + Cancel diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx index 57aa5968d..1052aaaae 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx @@ -18,17 +18,16 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h } from "preact"; -import { MerchantBackend, Timestamp } from "../../declaration.js"; -import { InputProps, useField } from "./useField.js"; -import { FormProvider, FormErrors } from "./FormProvider.js"; import { useLayoutEffect, useState } from "preact/hooks"; -import { Input } from "./Input.js"; -import { InputGroup } from "./InputGroup.js"; -import { InputNumber } from "./InputNumber.js"; +import { MerchantBackend, Timestamp } from "../../declaration.js"; +import { FormErrors, FormProvider } from "./FormProvider.js"; import { InputDate } from "./InputDate.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; +import { InputGroup } from "./InputGroup.js"; import { InputLocation } from "./InputLocation.js"; +import { InputNumber } from "./InputNumber.js"; +import { InputProps, useField } from "./useField.js"; export interface Props extends InputProps { alreadyExist?: boolean; @@ -64,7 +63,7 @@ export function InputStock({ incoming: 0, lost: 0, }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); useLayoutEffect(() => { if (!formValue) { @@ -97,7 +96,7 @@ export function InputStock({ {!alreadyExist ? ( ) : ( )} @@ -134,7 +133,7 @@ export function InputStock({ const stockAddedErrors: FormErrors = { lost: currentStock + addedStock.incoming < addedStock.lost - ? i18n`lost cannot be greater than current and incoming (max ${ + ? i18n.str`lost cannot be greater than current and incoming (max ${ currentStock + addedStock.incoming })` : undefined, @@ -142,8 +141,8 @@ export function InputStock({ // const stockUpdateDescription = stockAddedErrors.lost ? '' : ( // !!addedStock.incoming || !!addedStock.lost ? - // i18n`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` : - // i18n`current stock will stay at ${currentStock}` + // i18n.str`current stock will change from ${currentStock} to ${currentStock + addedStock.incoming - addedStock.lost}` : + // i18n.str`current stock will stay at ${currentStock}` // ) return ( @@ -174,8 +173,8 @@ export function InputStock({ object={addedStock} valueHandler={setAddedStock as any} > - - + + {/*
@@ -190,17 +189,17 @@ export function InputStock({ ) : ( name="current" - label={i18n`Current`} + label={i18n.str`Current`} side={ } @@ -209,11 +208,14 @@ export function InputStock({ name="nextRestock" - label={i18n`Next restock`} + label={i18n.str`Next restock`} withTimestampSupport /> - name="address" label={i18n`Delivery address`}> + + name="address" + label={i18n.str`Delivery address`} + > diff --git a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx index d95463790..552ee73e2 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx @@ -18,11 +18,11 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useCallback, useState } from "preact/hooks"; import * as yup from "yup"; import { MerchantBackend } from "../../declaration.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { TaxSchema as schema } from "../../schemas/index.js"; import { FormErrors, FormProvider } from "./FormProvider.js"; import { Input } from "./Input.js"; @@ -67,7 +67,7 @@ export function InputTaxes({ valueHandler({}); }, [value]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); //FIXME: translating plural singular return ( @@ -110,34 +110,35 @@ export function InputTaxes({ />
))} - {!taxes.length && i18n`No taxes configured for this product.`} + {!taxes.length && i18n.str`No taxes configured for this product.`} name="tax" - label={i18n`Amount`} - tooltip={i18n`Taxes can be in currencies that differ from the main currency used by the merchant.`} + label={i18n.str`Amount`} + tooltip={i18n.str`Taxes can be in currencies that differ from the main currency used by the merchant.`} > - - Enter currency and value separated with a colon, e.g. "USD:2.3". - + + Enter currency and value separated with a colon, e.g. + "USD:2.3". + name="name" - label={i18n`Description`} - tooltip={i18n`Legal name of the tax, e.g. VAT or import duties.`} + label={i18n.str`Description`} + tooltip={i18n.str`Legal name of the tax, e.g. VAT or import duties.`} />
diff --git a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx index 9dfa33840..c497773d9 100644 --- a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx +++ b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx @@ -19,9 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useBackendContext } from "../../context/backend.js"; -import { useTranslator } from "../../i18n/index.js"; import { Entity } from "../../paths/admin/create/CreatePage.js"; import { Input } from "../form/Input.js"; import { InputCurrency } from "../form/InputCurrency.js"; @@ -39,7 +39,7 @@ export function DefaultInstanceFormFields({ readonlyId?: boolean; showId: boolean; }): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const backend = useBackendContext(); return ( @@ -48,86 +48,86 @@ export function DefaultInstanceFormFields({ name="id" addonBefore={`${backend.url}/instances/`} readonly={readonlyId} - label={i18n`Identifier`} - tooltip={i18n`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`} + label={i18n.str`Identifier`} + tooltip={i18n.str`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`} /> )} name="name" - label={i18n`Business name`} - tooltip={i18n`Legal name of the business represented by this instance.`} + label={i18n.str`Business name`} + tooltip={i18n.str`Legal name of the business represented by this instance.`} /> name="email" - label={i18n`Email`} - tooltip={i18n`Contact email`} + label={i18n.str`Email`} + tooltip={i18n.str`Contact email`} /> name="website" - label={i18n`Website URL`} - tooltip={i18n`URL.`} + label={i18n.str`Website URL`} + tooltip={i18n.str`URL.`} /> name="logo" - label={i18n`Logo`} - tooltip={i18n`Logo image.`} + label={i18n.str`Logo`} + tooltip={i18n.str`Logo image.`} /> name="payto_uris" - label={i18n`Bank account`} - tooltip={i18n`URI specifying bank account for crediting revenue.`} + label={i18n.str`Bank account`} + tooltip={i18n.str`URI specifying bank account for crediting revenue.`} /> name="default_max_deposit_fee" - label={i18n`Default max deposit fee`} - tooltip={i18n`Maximum deposit fees this merchant is willing to pay per order by default.`} + label={i18n.str`Default max deposit fee`} + tooltip={i18n.str`Maximum deposit fees this merchant is willing to pay per order by default.`} /> name="default_max_wire_fee" - label={i18n`Default max wire fee`} - tooltip={i18n`Maximum wire fees this merchant is willing to pay per wire transfer by default.`} + label={i18n.str`Default max wire fee`} + tooltip={i18n.str`Maximum wire fees this merchant is willing to pay per wire transfer by default.`} /> name="default_wire_fee_amortization" - label={i18n`Default wire fee amortization`} - tooltip={i18n`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`} + label={i18n.str`Default wire fee amortization`} + tooltip={i18n.str`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`} /> name="default_pay_delay" - label={i18n`Default payment delay`} + label={i18n.str`Default payment delay`} withForever - tooltip={i18n`Time customers have to pay an order before the offer expires by default.`} + tooltip={i18n.str`Time customers have to pay an order before the offer expires by default.`} /> name="default_wire_transfer_delay" - label={i18n`Default wire transfer delay`} - tooltip={i18n`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`} + label={i18n.str`Default wire transfer delay`} + tooltip={i18n.str`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`} withForever /> 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 ? (

- Instance + Instance

  • @@ -90,7 +88,7 @@ export function Sidebar({ - Settings + Settings
    • @@ -100,7 +98,7 @@ export function Sidebar({ - Orders + Orders @@ -110,7 +108,7 @@ export function Sidebar({ - Products + Products @@ -120,7 +118,7 @@ export function Sidebar({ - Transfers + Transfers @@ -130,7 +128,7 @@ export function Sidebar({ - Templates + Templates @@ -156,7 +154,7 @@ export function Sidebar({ ) : undefined}

    - Connection + Connection

    • @@ -190,7 +188,7 @@ export function Sidebar({ {admin && !mimic && (

      - Instances + Instances

    • @@ -198,7 +196,7 @@ export function Sidebar({ - New + New
      • @@ -208,7 +206,7 @@ export function Sidebar({ - List + List @@ -223,7 +221,7 @@ export function Sidebar({ - Log out + Log out 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 ( - - {({ path }: any) => { - const titleWithSubtitle = title - ? title - : !admin - ? getInstanceTitle(path, instance) - : getAdminTitle(path, instance); - const adminInstance = instance === "default"; - const mimic = admin && !adminInstance; - return ( - -
      setMobileOpen(false)} - > - setMobileOpen(!mobileOpen)} - title={titleWithSubtitle} - /> - - {onLogout && ( - - )} - - {mimic && ( - - )} + +
      setMobileOpen(false)} + > + setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + {onLogout && ( + + )} + + {mimic && ( + + )} +
      +       ); } diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx index 6e5575f63..c9c7d0ce5 100644 --- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { ComponentChildren, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useInstanceContext } from "../../context/instance.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js"; -import { Loading, Spinner } from "../exception/loading.js"; +import { Spinner } from "../exception/loading.js"; import { FormProvider } from "../form/FormProvider.js"; import { Input } from "../form/Input.js"; @@ -49,6 +49,7 @@ export function ConfirmModal({ disabled, label = "Confirm", }: Props): VNode { + const { i18n } = useTranslationContext(); return (
      @@ -65,14 +66,14 @@ export function ConfirmModal({
      @@ -94,6 +95,7 @@ export function ContinueModal({ children, disabled, }: Props): VNode { + const { i18n } = useTranslationContext(); return (
      @@ -110,7 +112,7 @@ export function ContinueModal({ disabled={disabled} onClick={onConfirm} > - Continue + Continue
      @@ -147,6 +149,7 @@ export function ClearConfirmModal({ onConfirm, children, }: Props & { onClear?: () => void }): VNode { + const { i18n } = useTranslationContext(); return (
      @@ -163,19 +166,19 @@ export function ClearConfirmModal({ onClick={onClear} disabled={onClear === undefined} > - Clear + Clear )}
      @@ -210,7 +213,7 @@ export function DeleteModal({ onConfirm={() => onConfirm(element.id)} >

      - If you delete the instance named "{element.name}" (ID:{" "} + If you delete the instance named "{element.name}" (ID:{" "} {element.id}), the merchant will no longer be able to process orders or refunds

      @@ -241,12 +244,13 @@ export function PurgeModal({ onConfirm={() => onConfirm(element.id)} >

      - If you purge the instance named "{element.name}" (ID:{" "} - {element.id}), you will also delete all it's transaction data. + If you purge the instance named "{element.name}" (ID:{" "} + {element.id}), you will also delete all it's transaction + data.

      The instance will disappear from your list, and you will no longer be - able to access it's data. + able to access it's data.

      Purging an instance cannot be undone. @@ -275,20 +279,22 @@ export function UpdateTokenModal({ new_token: "", repeat_token: "", }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token; const errors = { old_token: hasInputTheCorrectOldToken - ? i18n`is not the same as the current access token` + ? i18n.str`is not the same as the current access token` : undefined, new_token: !form.new_token - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : form.new_token === form.old_token - ? i18n`cannot be the same as the old token` + ? i18n.str`cannot be the same as the old token` : undefined, repeat_token: - form.new_token !== form.repeat_token ? i18n`is not the same` : undefined, + form.new_token !== form.repeat_token + ? i18n.str`is not the same` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -297,7 +303,7 @@ export function UpdateTokenModal({ const instance = useInstanceContext(); - const text = i18n`You are updating the access token from instance with id ${instance.id}`; + const text = i18n.str`You are updating the access token from instance with id ${instance.id}`; return ( name="old_token" - label={i18n`Old access token`} - tooltip={i18n`access token currently in use`} + label={i18n.str`Old access token`} + tooltip={i18n.str`access token currently in use`} inputType="password" /> )} name="new_token" - label={i18n`New access token`} - tooltip={i18n`next access token to be used`} + label={i18n.str`New access token`} + tooltip={i18n.str`next access token to be used`} inputType="password" /> name="repeat_token" - label={i18n`Repeat access token`} - tooltip={i18n`confirm the same access token`} + label={i18n.str`Repeat access token`} + tooltip={i18n.str`confirm the same access token`} inputType="password" />

      - + Clearing the access token will mean public access to the instance - +

      @@ -353,16 +359,18 @@ export function SetTokenNewInstanceModal({ new_token: "", repeat_token: "", }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const errors = { new_token: !form.new_token - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : form.new_token === form.old_token - ? i18n`cannot be the same as the old access token` + ? i18n.str`cannot be the same as the old access token` : undefined, repeat_token: - form.new_token !== form.repeat_token ? i18n`is not the same` : undefined, + form.new_token !== form.repeat_token + ? i18n.str`is not the same` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -374,7 +382,7 @@ export function SetTokenNewInstanceModal({
      -

      {i18n`You are setting the access token for the new instance`}

      +

      {i18n.str`You are setting the access token for the new instance`}

      @@ -388,22 +396,22 @@ export function SetTokenNewInstanceModal({ > name="new_token" - label={i18n`New access token`} - tooltip={i18n`next access token to be used`} + label={i18n.str`New access token`} + tooltip={i18n.str`next access token to be used`} inputType="password" /> name="repeat_token" - label={i18n`Repeat access token`} - tooltip={i18n`confirm the same access token`} + label={i18n.str`Repeat access token`} + tooltip={i18n.str`confirm the same access token`} inputType="password" />

      - + With external authorization method no check will be done by the merchant backend - +

      @@ -416,19 +424,19 @@ export function SetTokenNewInstanceModal({ onClick={onClear} disabled={onClear === undefined} > - Set external authorization + Set external authorization )}
      @@ -443,14 +451,14 @@ export function SetTokenNewInstanceModal({ } export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (

      - Operation in progress... + Operation in progress...

      @@ -459,12 +467,12 @@ export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
      -

      {i18n`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}

      +

      {i18n.str`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}

      diff --git a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx index 629e50b8c..0e8baac06 100644 --- a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx +++ b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx @@ -19,9 +19,9 @@ * @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 { useTranslator } from "../../i18n/index.js"; import "../../scss/DurationPicker.scss"; export interface Props { @@ -46,13 +46,13 @@ export function DurationPicker({ const ms = ss * 60; const hs = ms * 60; const ds = hs * 24; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      {days && ( = ds ? () => onChange(value - ds) : undefined} @@ -62,7 +62,7 @@ export function DurationPicker({ )} {hours && ( = ss ? () => onChange(value - ss) : undefined} diff --git a/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx index da47f1be3..0cb2d555e 100644 --- a/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/InventoryProductForm.tsx @@ -13,14 +13,14 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { FormProvider, FormErrors } from "../form/FormProvider.js"; -import { InputNumber } from "../form/InputNumber.js"; -import { InputSearchProduct } from "../form/InputSearchProduct.js"; import { MerchantBackend, WithId } from "../../declaration.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { ProductMap } from "../../paths/instance/orders/create/CreatePage.js"; +import { FormErrors, FormProvider } from "../form/FormProvider.js"; +import { InputNumber } from "../form/InputNumber.js"; +import { InputSearchProduct } from "../form/InputSearchProduct.js"; type Form = { product: MerchantBackend.Products.ProductDetail & WithId; @@ -45,21 +45,23 @@ export function InventoryProductForm({ const [state, setState] = useState>(initialState); const [errors, setErrors] = useState>({}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const productWithInfiniteStock = state.product && state.product.total_stock === -1; const submit = (): void => { if (!state.product) { - setErrors({ product: i18n`You must enter a valid product identifier.` }); + setErrors({ + product: i18n.str`You must enter a valid product identifier.`, + }); return; } if (productWithInfiniteStock) { onAddProduct(state.product, 1); } else { if (!state.quantity || state.quantity <= 0) { - setErrors({ quantity: i18n`Quantity must be greater than 0!` }); + setErrors({ quantity: i18n.str`Quantity must be greater than 0!` }); return; } const currentStock = @@ -71,7 +73,7 @@ export function InventoryProductForm({ if (state.quantity + p.quantity > currentStock) { const left = currentStock - p.quantity; setErrors({ - quantity: i18n`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.`, + quantity: i18n.str`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.`, }); return; } @@ -80,7 +82,7 @@ export function InventoryProductForm({ if (state.quantity > currentStock) { const left = currentStock; setErrors({ - quantity: i18n`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.`, + quantity: i18n.str`This quantity exceeds remaining stock. Currently, only ${left} units remain unreserved in stock.`, }); return; } @@ -104,15 +106,15 @@ export function InventoryProductForm({ {!productWithInfiniteStock && ( name="quantity" - label={i18n`Quantity`} - tooltip={i18n`how many products will be added`} + label={i18n.str`Quantity`} + tooltip={i18n.str`how many products will be added`} /> )}
      diff --git a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx index fe9692c02..3e7262657 100644 --- a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx @@ -13,19 +13,19 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useCallback, useEffect, useState } from "preact/hooks"; import * as yup from "yup"; +import { MerchantBackend } from "../../declaration.js"; +import { useListener } from "../../hooks/listener.js"; +import { NonInventoryProductSchema as schema } from "../../schemas/index.js"; import { FormErrors, FormProvider } from "../form/FormProvider.js"; import { Input } from "../form/Input.js"; import { InputCurrency } from "../form/InputCurrency.js"; import { InputImage } from "../form/InputImage.js"; import { InputNumber } from "../form/InputNumber.js"; import { InputTaxes } from "../form/InputTaxes.js"; -import { MerchantBackend } from "../../declaration.js"; -import { useListener } from "../../hooks/listener.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; -import { NonInventoryProductSchema as schema } from "../../schemas/index.js"; type Entity = MerchantBackend.Product; @@ -62,17 +62,17 @@ export function NonInventoryProductFrom({ return Promise.resolve(); }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      {showCreateProduct && ( @@ -83,7 +83,7 @@ export function NonInventoryProductFrom({ />
      -

      {i18n`Complete information of the product`}

      +

      {i18n.str`Complete information of the product`}

      @@ -170,7 +170,7 @@ export function ProductForm({ onSubscribe, initial }: ProductProps): VNode { onSubscribe(hasErrors ? undefined : submit); }, [submit, hasErrors]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -182,33 +182,33 @@ export function ProductForm({ onSubscribe, initial }: ProductProps): VNode { > name="image" - label={i18n`Image`} - tooltip={i18n`photo of the product`} + label={i18n.str`Image`} + tooltip={i18n.str`photo of the product`} /> name="description" inputType="multiline" - label={i18n`Description`} - tooltip={i18n`full product description`} + label={i18n.str`Description`} + tooltip={i18n.str`full product description`} /> name="unit" - label={i18n`Unit`} - tooltip={i18n`name of the product unit`} + label={i18n.str`Unit`} + tooltip={i18n.str`name of the product unit`} /> name="price" - label={i18n`Price`} - tooltip={i18n`amount in the current currency`} + label={i18n.str`Price`} + tooltip={i18n.str`amount in the current currency`} /> name="quantity" - label={i18n`Quantity`} - tooltip={i18n`how many products will be added`} + label={i18n.str`Quantity`} + tooltip={i18n.str`how many products will be added`} /> - name="taxes" label={i18n`Taxes`} /> + name="taxes" label={i18n.str`Taxes`} />
      ); diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx index a6bb090a5..973f88677 100644 --- a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx @@ -19,17 +19,17 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h } from "preact"; import { useCallback, useEffect, useState } from "preact/hooks"; import * as yup from "yup"; import { useBackendContext } from "../../context/backend.js"; import { MerchantBackend } from "../../declaration.js"; -import { useTranslator } from "../../i18n/index.js"; import { ProductCreateSchema as createSchema, ProductUpdateSchema as updateSchema, } from "../../schemas/index.js"; -import { FormProvider, FormErrors } from "../form/FormProvider.js"; +import { FormErrors, FormProvider } from "../form/FormProvider.js"; import { Input } from "../form/Input.js"; import { InputCurrency } from "../form/InputCurrency.js"; import { InputImage } from "../form/InputImage.js"; @@ -115,7 +115,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { }, [submit, hasErrors]); const backend = useBackendContext(); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -129,46 +129,46 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) { name="product_id" addonBefore={`${backend.url}/product/`} - label={i18n`ID`} - tooltip={i18n`product identification to use in URLs (for internal use only)`} + label={i18n.str`ID`} + tooltip={i18n.str`product identification to use in URLs (for internal use only)`} /> )} name="image" - label={i18n`Image`} - tooltip={i18n`illustration of the product for customers`} + label={i18n.str`Image`} + tooltip={i18n.str`illustration of the product for customers`} /> name="description" inputType="multiline" - label={i18n`Description`} - tooltip={i18n`product description for customers`} + label={i18n.str`Description`} + tooltip={i18n.str`product description for customers`} /> name="minimum_age" - label={i18n`Age restricted`} - tooltip={i18n`is this product restricted for customer below certain age?`} + label={i18n.str`Age restricted`} + tooltip={i18n.str`is this product restricted for customer below certain age?`} /> name="unit" - label={i18n`Unit`} - tooltip={i18n`unit describing quantity of product sold (e.g. 2 kilograms, 5 liters, 3 items, 5 meters) for customers`} + label={i18n.str`Unit`} + tooltip={i18n.str`unit describing quantity of product sold (e.g. 2 kilograms, 5 liters, 3 items, 5 meters) for customers`} /> name="price" - label={i18n`Price`} - tooltip={i18n`sale price for customers, including taxes, for above units of the product`} + label={i18n.str`Price`} + tooltip={i18n.str`sale price for customers, including taxes, for above units of the product`} /> name="taxes" - label={i18n`Taxes`} - tooltip={i18n`taxes included in the product price, exposed to customers`} + label={i18n.str`Taxes`} + tooltip={i18n.str`taxes included in the product price, exposed to customers`} />
      diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx index 774da8975..29556ea70 100644 --- a/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx +++ b/packages/merchant-backoffice-ui/src/components/product/ProductList.tsx @@ -16,8 +16,8 @@ import { Amounts } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import emptyImage from "../../assets/empty.png"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { MerchantBackend } from "../../declaration.js"; -import { Translate } from "../../i18n/index.js"; interface Props { list: MerchantBackend.Product[]; @@ -28,25 +28,26 @@ interface Props { }[]; } export function ProductList({ list, actions = [] }: Props): VNode { + const { i18n } = useTranslationContext(); return (
      diff --git a/packages/merchant-backoffice-ui/src/context/fetch.ts b/packages/merchant-backoffice-ui/src/context/fetch.ts index 3106a6abe..88c9bc30c 100644 --- a/packages/merchant-backoffice-ui/src/context/fetch.ts +++ b/packages/merchant-backoffice-ui/src/context/fetch.ts @@ -29,7 +29,7 @@ interface Type { useSWRInfinite: typeof useSWRInfinite; } -const Context = createContext({} as any); +const Context = createContext({} as Type); export const useFetchContext = (): Type => useContext(Context); export const FetchContextProvider = ({ diff --git a/packages/merchant-backoffice-ui/src/context/listener.ts b/packages/merchant-backoffice-ui/src/context/listener.ts deleted file mode 100644 index cf51bb718..000000000 --- a/packages/merchant-backoffice-ui/src/context/listener.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createContext } from "preact"; -import { useContext } from "preact/hooks"; - -interface Type { - id: string; - token?: string; - admin?: boolean; - changeToken: (t?: string) => void; -} - -const Context = createContext({} as any); - -export const ListenerContextProvider = Context.Provider; -export const useListenerContext = (): Type => useContext(Context); diff --git a/packages/merchant-backoffice-ui/src/context/translation.ts b/packages/merchant-backoffice-ui/src/context/translation.ts deleted file mode 100644 index 027eac14c..000000000 --- a/packages/merchant-backoffice-ui/src/context/translation.ts +++ /dev/null @@ -1,66 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createContext, h, VNode } from "preact"; -import { useContext, useEffect } from "preact/hooks"; -import { useLang } from "../hooks"; -import * as jedLib from "jed"; -import { strings } from "../i18n/strings"; - -interface Type { - lang: string; - handler: any; - changeLanguage: (l: string) => void; -} -const initial = { - lang: "en", - handler: null, - changeLanguage: () => { - // do not change anything - }, -}; -const Context = createContext(initial); - -interface Props { - initial?: string; - children: any; - forceLang?: string; -} - -export const TranslationProvider = ({ - initial, - children, - forceLang, -}: Props): VNode => { - const [lang, changeLanguage] = useLang(initial); - useEffect(() => { - if (forceLang) { - changeLanguage(forceLang); - } - }); - const handler = new jedLib.Jed(strings[lang]); - return h(Context.Provider, { - value: { lang, handler, changeLanguage }, - children, - }); -}; - -export const useTranslationContext = (): Type => useContext(Context); diff --git a/packages/merchant-backoffice-ui/src/i18n/index.tsx b/packages/merchant-backoffice-ui/src/i18n/index.tsx deleted file mode 100644 index da8d2dece..000000000 --- a/packages/merchant-backoffice-ui/src/i18n/index.tsx +++ /dev/null @@ -1,215 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 - */ - -/** - * Translation helpers for React components and template literals. - */ - -/** - * Imports - */ -import { ComponentChild, ComponentChildren, h, Fragment, VNode } from "preact"; - -import { useTranslationContext } from "../context/translation.js"; - -export type Translator = ( - stringSeq: TemplateStringsArray, - ...values: any[] -) => string; -export function useTranslator(): Translator { - const ctx = useTranslationContext(); - const jed = ctx.handler; - return function str( - stringSeq: TemplateStringsArray, - ...values: any[] - ): string { - const s = toI18nString(stringSeq); - if (!s) return s; - const tr = jed - .translate(s) - .ifPlural(1, s) - .fetch(...values); - return tr; - }; -} - -/** - * Convert template strings to a msgid - */ -function toI18nString(stringSeq: ReadonlyArray): string { - let s = ""; - for (let i = 0; i < stringSeq.length; i++) { - s += stringSeq[i]; - if (i < stringSeq.length - 1) { - s += `%${i + 1}$s`; - } - } - return s; -} - -interface TranslateSwitchProps { - target: number; - children: ComponentChildren; -} - -function stringifyChildren(children: ComponentChildren): string { - let n = 1; - const ss = (children instanceof Array ? children : [children]).map((c) => { - if (typeof c === "string") { - return c; - } - return `%${n++}$s`; - }); - const s = ss.join("").replace(/ +/g, " ").trim(); - return s; -} - -interface TranslateProps { - children: ComponentChildren; - /** - * Component that the translated element should be wrapped in. - * Defaults to "div". - */ - wrap?: any; - - /** - * Props to give to the wrapped component. - */ - wrapProps?: any; -} - -function getTranslatedChildren( - translation: string, - children: ComponentChildren, -): ComponentChild[] { - const tr = translation.split(/%(\d+)\$s/); - const childArray = children instanceof Array ? children : [children]; - // Merge consecutive string children. - const placeholderChildren = Array(); - for (let i = 0; i < childArray.length; i++) { - const x = childArray[i]; - if (x === undefined) { - continue; - } else if (typeof x === "string") { - continue; - } else { - placeholderChildren.push(x); - } - } - const result = Array(); - for (let i = 0; i < tr.length; i++) { - if (i % 2 == 0) { - // Text - result.push(tr[i]); - } else { - const childIdx = Number.parseInt(tr[i], 10) - 1; - result.push(placeholderChildren[childIdx]); - } - } - return result; -} - -/** - * Translate text node children of this component. - * If a child component might produce a text node, it must be wrapped - * in a another non-text element. - * - * Example: - * ``` - * - * Hello. Your score is - * - * ``` - */ -export function Translate({ children }: TranslateProps): VNode { - const s = stringifyChildren(children); - const ctx = useTranslationContext(); - const translation: string = ctx.handler.ngettext(s, s, 1); - const result = getTranslatedChildren(translation, children); - return {result}; -} - -/** - * Switch translation based on singular or plural based on the target prop. - * Should only contain TranslateSingular and TransplatePlural as children. - * - * Example: - * ``` - * - * I have {n} apple. - * I have {n} apples. - * - * ``` - */ -export function TranslateSwitch({ children, target }: TranslateSwitchProps) { - let singular: VNode | undefined; - let plural: VNode | undefined; - // const children = this.props.children; - if (children) { - (children instanceof Array ? children : [children]).forEach( - (child: any) => { - if (child.type === TranslatePlural) { - plural = child; - } - if (child.type === TranslateSingular) { - singular = child; - } - }, - ); - } - if (!singular || !plural) { - console.error("translation not found"); - return h("span", {}, ["translation not found"]); - } - singular.props.target = target; - plural.props.target = target; - // We're looking up the translation based on the - // singular, even if we must use the plural form. - return singular; -} - -interface TranslationPluralProps { - children: ComponentChildren; - target: number; -} - -/** - * See [[TranslateSwitch]]. - */ -export function TranslatePlural({ - children, - target, -}: TranslationPluralProps): VNode { - const s = stringifyChildren(children); - const ctx = useTranslationContext(); - const translation = ctx.handler.ngettext(s, s, 1); - const result = getTranslatedChildren(translation, children); - return {result}; -} - -/** - * See [[TranslateSwitch]]. - */ -export function TranslateSingular({ - children, - target, -}: TranslationPluralProps): VNode { - const s = stringifyChildren(children); - const ctx = useTranslationContext(); - const translation = ctx.handler.ngettext(s, s, target); - const result = getTranslatedChildren(translation, children); - return {result}; -} diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx index 052d61544..91b6b4b56 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/Create.stories.tsx @@ -20,6 +20,7 @@ */ import { h, VNode, FunctionalComponent } from "preact"; +import { ConfigContextProvider } from "../../../context/config.js"; import { CreatePage as TestedComponent } from "./CreatePage.js"; export default { @@ -35,7 +36,16 @@ function createExample( Component: FunctionalComponent, props: Partial, ) { - const r = (args: any) => ; + const r = (args: any) => ( + + + + ); r.args = props; return r; } diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx index 6fcabb18b..bf5f5d7c9 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx @@ -19,20 +19,19 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import * as yup from "yup"; import { AsyncButton } from "../../../components/exception/AsyncButton.js"; import { FormErrors, FormProvider, } from "../../../components/form/FormProvider.js"; +import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js"; import { SetTokenNewInstanceModal } from "../../../components/modal/index.js"; import { MerchantBackend } from "../../../declaration.js"; -import { Translate, useTranslator } from "../../../i18n/index.js"; -import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js"; import { INSTANCE_ID_REGEX, PAYTO_REGEX } from "../../../utils/constants.js"; -import { Amounts } from "@gnu-taler/taler-util"; import { undefinedIfEmpty } from "../../../utils/table.js"; export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & { @@ -61,55 +60,57 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode { const [isTokenDialogActive, updateIsTokenDialogActive] = useState(false); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const errors: FormErrors = { id: !value.id - ? i18n`required` + ? i18n.str`required` : !INSTANCE_ID_REGEX.test(value.id) - ? i18n`is not valid` + ? i18n.str`is not valid` : undefined, - name: !value.name ? i18n`required` : undefined, + name: !value.name ? i18n.str`required` : undefined, payto_uris: !value.payto_uris || !value.payto_uris.length - ? i18n`required` + ? i18n.str`required` : undefinedIfEmpty( value.payto_uris.map((p) => { - return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined; + return !PAYTO_REGEX.test(p) ? i18n.str`is not valid` : undefined; }), ), default_max_deposit_fee: !value.default_max_deposit_fee - ? i18n`required` + ? i18n.str`required` : !Amounts.parse(value.default_max_deposit_fee) - ? i18n`invalid format` + ? i18n.str`invalid format` : undefined, default_max_wire_fee: !value.default_max_wire_fee - ? i18n`required` + ? i18n.str`required` : !Amounts.parse(value.default_max_wire_fee) - ? i18n`invalid format` + ? i18n.str`invalid format` : undefined, default_wire_fee_amortization: value.default_wire_fee_amortization === undefined - ? i18n`required` + ? i18n.str`required` : isNaN(value.default_wire_fee_amortization) - ? i18n`is not a number` + ? i18n.str`is not a number` : value.default_wire_fee_amortization < 1 - ? i18n`must be 1 or greater` + ? i18n.str`must be 1 or greater` : undefined, - default_pay_delay: !value.default_pay_delay ? i18n`required` : undefined, + default_pay_delay: !value.default_pay_delay + ? i18n.str`required` + : undefined, default_wire_transfer_delay: !value.default_wire_transfer_delay - ? i18n`required` + ? i18n.str`required` : undefined, address: undefinedIfEmpty({ address_lines: value.address?.address_lines && value.address?.address_lines.length > 7 - ? i18n`max 7 lines` + ? i18n.str`max 7 lines` : undefined, }), jurisdiction: undefinedIfEmpty({ address_lines: value.address?.address_lines && value.address?.address_lines.length > 7 - ? i18n`max 7 lines` + ? i18n.str`max 7 lines` : undefined, }), }; @@ -174,14 +175,14 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {

      @@ -205,7 +206,7 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
      {onBack && ( )} - Confirm + Confirm
      diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx index ed2f3f068..4da6916a0 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/index.tsx @@ -17,12 +17,12 @@ * * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../components/menu/index.js"; import { MerchantBackend } from "../../../declaration.js"; import { useAdminAPI } from "../../../hooks/instance.js"; -import { useTranslator } from "../../../i18n/index.js"; import { Notification } from "../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; import { InstanceCreatedSuccessfully } from "./InstanceCreatedSuccessfully.js"; @@ -38,7 +38,7 @@ export default function Create({ onBack, onConfirm, forceId }: Props): VNode { const { createInstance } = useAdminAPI(); const [notif, setNotif] = useState(undefined); const [createdOk, setCreatedOk] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (createdOk) { return ( @@ -62,7 +62,7 @@ export default function Create({ onBack, onConfirm, forceId }: Props): VNode { }) .catch((error) => { setNotif({ - message: i18n`Failed to create instance`, + message: i18n.str`Failed to create instance`, type: "ERROR", description: error.message, }); diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts b/packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts deleted file mode 100644 index 45b94ec8c..000000000 --- a/packages/merchant-backoffice-ui/src/paths/admin/create/stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { h, VNode, FunctionalComponent } from "preact"; -import { CreatePage as TestedComponent } from "./CreatePage.js"; - -export default { - title: "Pages/Instance/Create", - component: TestedComponent, - argTypes: { - onCreate: { action: "onCreate" }, - goBack: { action: "goBack" }, - }, -}; - -function createExample( - Component: FunctionalComponent, - props: Partial, -) { - const r = (args: any) => h(Component, args); - // const r = (args: any) => ; - r.args = props; - return r; -} - -export const Example = createExample(TestedComponent, {}); -// export const Example = (a: any): VNode => ; -// Example.args = { -// isLoading: false -// } diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx new file mode 100644 index 000000000..0012f9b9b --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/admin/create/stories.tsx @@ -0,0 +1,52 @@ +/* + This file is part of GNU Taler + (C) 2021-2023 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { h, VNode, FunctionalComponent } from "preact"; +import { ConfigContextProvider } from "../../../context/config.js"; +import { CreatePage as TestedComponent } from "./CreatePage.js"; + +export default { + title: "Pages/Instance/Create", + component: TestedComponent, + argTypes: { + onCreate: { action: "onCreate" }, + goBack: { action: "goBack" }, + }, +}; + +function createExample( + Internal: FunctionalComponent, + props: Partial, +) { + const component = (args: any) => ( + + + + ); + return { component, props }; +} + +export const Example = createExample(TestedComponent, {}); diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx index 546f34f3a..223db2fed 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx @@ -19,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; import { MerchantBackend } from "../../../declaration.js"; -import { Translate, useTranslator } from "../../../i18n/index.js"; interface Props { instances: MerchantBackend.Instances.Instance[]; @@ -68,7 +68,7 @@ export function CardTable({ } }, [actionQueue, selected, onUpdate]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -77,7 +77,7 @@ export function CardTable({ - Instances + Instances

      @@ -90,11 +90,14 @@ export function CardTable({ ) } > - Delete + Delete
      - +
      - image + image - description + description - quantity + quantity - unit price + unit price - total price + total price
      @@ -171,10 +175,10 @@ function Table({ @@ -213,7 +217,7 @@ function Table({ type="button" onClick={(): void => onUpdate(i.id)} > - Edit + Edit {!i.deleted && ( )} {i.deleted && ( @@ -230,7 +234,7 @@ function Table({ type="button" onClick={(): void => onPurge(i)} > - Purge + Purge )} @@ -245,6 +249,7 @@ function Table({ } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return (

      @@ -253,9 +258,9 @@ function EmptyTable(): VNode {

      - + There is no instances yet, add more pressing the + sign - +

      ); diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx index 5180c671c..7376a88cb 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.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 { MerchantBackend } from "../../../declaration.js"; import { CardTable as CardTableActive } from "./TableActive.js"; -import { useState } from "preact/hooks"; -import { Translate, useTranslator } from "../../../i18n/index.js"; interface Props { instances: MerchantBackend.Instances.Instance[]; @@ -48,7 +48,7 @@ export function View({ const showIsActive = show === "active" ? "is-active" : ""; const showIsDeleted = show === "deleted" ? "is-active" : ""; const showAll = show === null ? "is-active" : ""; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const showingInstances = showIsDeleted ? instances.filter((i) => i.deleted) @@ -66,30 +66,30 @@ export function View({
    • setShow("active")}> - Active + Active
    • setShow("deleted")}> - Deleted + Deleted
    • setShow(null)}> - All + All
      • diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx index 36d58dd41..9a81b72d4 100644 --- a/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/admin/list/index.tsx @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../components/exception/loading.js"; @@ -27,7 +28,6 @@ import { DeleteModal, PurgeModal } from "../../../components/modal/index.js"; import { MerchantBackend } from "../../../declaration.js"; import { HttpError } from "../../../hooks/backend.js"; import { useAdminAPI, useBackendInstances } from "../../../hooks/instance.js"; -import { useTranslator } from "../../../i18n/index.js"; import { Notification } from "../../../utils/types.js"; import { View } from "./View.js"; @@ -56,7 +56,7 @@ export default function Instances({ useState(null); const { deleteInstance, purgeInstance } = useAdminAPI(); const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); @@ -84,12 +84,12 @@ export default function Instances({ await deleteInstance(deleting.id); // pushNotification({ message: 'delete_success', type: 'SUCCESS' }) setNotif({ - message: i18n`Instance "${deleting.name}" (ID: ${deleting.id}) has been deleted`, + message: i18n.str`Instance "${deleting.name}" (ID: ${deleting.id}) has been deleted`, type: "SUCCESS", }); } catch (error) { setNotif({ - message: i18n`Failed to delete instance`, + message: i18n.str`Failed to delete instance`, type: "ERROR", description: error instanceof Error ? error.message : undefined, }); @@ -107,12 +107,12 @@ export default function Instances({ try { await purgeInstance(purging.id); setNotif({ - message: i18n`Instance "${purging.name}" (ID: ${purging.id}) has been disabled`, + message: i18n.str`Instance "${purging.name}" (ID: ${purging.id}) has been disabled`, type: "SUCCESS", }); } catch (error) { setNotif({ - message: i18n`Failed to purge instance`, + message: i18n.str`Failed to purge instance`, type: "ERROR", description: error instanceof Error ? error.message : undefined, }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx index 59aa7a1d2..4ab415e85 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx @@ -19,12 +19,12 @@ * @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 { FormProvider } from "../../../components/form/FormProvider.js"; import { Input } from "../../../components/form/Input.js"; import { MerchantBackend } from "../../../declaration.js"; -import { useTranslator } from "../../../i18n/index.js"; type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage; interface Props { @@ -49,7 +49,7 @@ function convert( export function DetailPage({ selected }: Props): VNode { const [value, valueHandler] = useState>(convert(selected)); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -73,11 +73,11 @@ export function DetailPage({ selected }: Props): VNode {
      object={value} valueHandler={valueHandler}> - name="name" readonly label={i18n`Name`} /> + name="name" readonly label={i18n.str`Name`} /> name="payto_uris" readonly - label={i18n`Account address`} + label={i18n.str`Account address`} />
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx index 9ac1c4381..cdbe732a4 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx @@ -20,6 +20,7 @@ */ import { h, VNode, FunctionalComponent } from "preact"; +import { ConfigContextProvider } from "../../../context/config.js"; import { DetailPage as TestedComponent } from "./DetailPage.js"; export default { @@ -32,12 +33,20 @@ export default { }; function createExample( - Component: FunctionalComponent, + Internal: FunctionalComponent, props: Partial, ) { - const r = (args: any) => ; - r.args = props; - return r; + const component = (args: any) => ( + + + + ); + return { component, props }; } export const Example = createExample(TestedComponent, { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts b/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts index 3670c2807..fcb75cd7c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts +++ b/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts @@ -15,4 +15,3 @@ */ export * as details from "./details/stories.js"; - diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx index c10121fb3..7966a2cdd 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx @@ -19,16 +19,16 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; export interface Props { status: MerchantBackend.Instances.AccountKycRedirects; } export function ListPage({ status }: Props): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -38,7 +38,7 @@ export function ListPage({ status }: Props): VNode { - Pending KYC verification + Pending KYC verification

      @@ -63,7 +63,7 @@ export function ListPage({ status }: Props): VNode { - Timed out + Timed out

      @@ -93,19 +93,20 @@ interface TimedOutTableProps { } function PendingTable({ entries }: PendingTableProps): VNode { + const { i18n } = useTranslationContext(); return (
      - ID + ID - Name + Name
      @@ -130,19 +131,20 @@ function PendingTable({ entries }: PendingTableProps): VNode { } function TimedOutTable({ entries }: TimedOutTableProps): VNode { + const { i18n } = useTranslationContext(); return (
      - Exchange + Exchange - Target account + Target account - KYC URL + KYC URL
      @@ -163,6 +165,7 @@ function TimedOutTable({ entries }: TimedOutTableProps): VNode { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return (

      @@ -171,7 +174,7 @@ function EmptyTable(): VNode {

      - No pending kyc verification! + No pending kyc verification!

      ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx index 145df717d..0c2e92418 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx @@ -19,29 +19,29 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { add, isAfter, isBefore, isFuture } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { add, isAfter, isBefore, isFuture } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { - FormProvider, FormErrors, + FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; +import { InputBoolean } from "../../../../components/form/InputBoolean.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDate } from "../../../../components/form/InputDate.js"; import { InputGroup } from "../../../../components/form/InputGroup.js"; import { InputLocation } from "../../../../components/form/InputLocation.js"; +import { InputNumber } from "../../../../components/form/InputNumber.js"; +import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js"; +import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js"; import { ProductList } from "../../../../components/product/ProductList.js"; import { useConfigContext } from "../../../../context/config.js"; import { Duration, MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { OrderCreateSchema as schema } from "../../../../schemas/index.js"; import { rate } from "../../../../utils/amount.js"; -import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js"; -import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js"; -import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { InputBoolean } from "../../../../components/form/InputBoolean.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; interface Props { @@ -140,65 +140,65 @@ export function CreatePage({ const inventoryList = Object.values(value.inventoryProducts || {}); const productList = Object.values(value.products || {}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const errors: FormErrors = { pricing: undefinedIfEmpty({ - summary: !value.pricing?.summary ? i18n`required` : undefined, + summary: !value.pricing?.summary ? i18n.str`required` : undefined, order_price: !value.pricing?.order_price - ? i18n`required` + ? i18n.str`required` : Amounts.isZero(value.pricing.order_price) - ? i18n`must be greater than 0` + ? i18n.str`must be greater than 0` : undefined, }), extra: value.extra && !stringIsValidJSON(value.extra) - ? i18n`not a valid json` + ? i18n.str`not a valid json` : undefined, payments: undefinedIfEmpty({ refund_deadline: !value.payments?.refund_deadline ? undefined : !isFuture(value.payments.refund_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : value.payments.pay_deadline && isBefore(value.payments.refund_deadline, value.payments.pay_deadline) - ? i18n`refund deadline cannot be before pay deadline` + ? i18n.str`refund deadline cannot be before pay deadline` : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, value.payments.refund_deadline, ) - ? i18n`wire transfer deadline cannot be before refund deadline` + ? i18n.str`wire transfer deadline cannot be before refund deadline` : undefined, pay_deadline: !value.payments?.pay_deadline ? undefined : !isFuture(value.payments.pay_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : value.payments.wire_transfer_deadline && isBefore( value.payments.wire_transfer_deadline, value.payments.pay_deadline, ) - ? i18n`wire transfer deadline cannot be before pay deadline` + ? i18n.str`wire transfer deadline cannot be before pay deadline` : undefined, auto_refund_deadline: !value.payments?.auto_refund_deadline ? undefined : !isFuture(value.payments.auto_refund_deadline) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : !value.payments?.refund_deadline - ? i18n`should have a refund deadline` + ? i18n.str`should have a refund deadline` : !isAfter( value.payments.refund_deadline, value.payments.auto_refund_deadline, ) - ? i18n`auto refund cannot be after refund deadline` + ? i18n.str`auto refund cannot be after refund deadline` : undefined, }), shipping: undefinedIfEmpty({ delivery_date: !value.shipping?.delivery_date ? undefined : !isFuture(value.shipping.delivery_date) - ? i18n`should be in the future` + ? i18n.str`should be in the future` : undefined, }), }; @@ -349,7 +349,7 @@ export function CreatePage({ {/* // FIXME: translating plural singular */} 0 && (

      @@ -358,7 +358,7 @@ export function CreatePage({

      ) } - tooltip={i18n`Manage list of products in the order.`} + tooltip={i18n.str`Manage list of products in the order.`} > { if (e.product_id) { removeProductFromTheInventoryList(e.product_id); @@ -404,13 +404,13 @@ export function CreatePage({ 0 && (discountOrRise < 1 @@ -419,103 +419,103 @@ export function CreatePage({ )}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } - tooltip={i18n`Amount to be paid by the customer`} + tooltip={i18n.str`Amount to be paid by the customer`} /> ) : ( )} {value.shipping?.delivery_date && ( )} 0 - ? i18n`Min age defined by the producs is ${minAgeByProducts}` + ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` : undefined } /> @@ -523,14 +523,14 @@ export function CreatePage({ @@ -538,7 +538,7 @@ export function CreatePage({
      {onBack && ( )}
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx index 6d3ac311a..88c33e2f8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx @@ -13,11 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully.js"; import { useOrderAPI } from "../../../../hooks/order.js"; -import { Translate } from "../../../../i18n/index.js"; import { Entity } from "./index.js"; interface Props { @@ -33,7 +33,7 @@ export function OrderCreatedSuccessfully({ }: Props): VNode { const { getPaymentURL } = useOrderAPI(); const [url, setURL] = useState(undefined); - + const { i18n } = useTranslationContext(); useEffect(() => { getPaymentURL(entity.response.order_id).then((response) => { setURL(response.data); @@ -48,7 +48,7 @@ export function OrderCreatedSuccessfully({
      @@ -66,7 +66,7 @@ export function OrderCreatedSuccessfully({
      @@ -84,7 +84,7 @@ export function OrderCreatedSuccessfully({
      @@ -98,7 +98,7 @@ export function OrderCreatedSuccessfully({
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx index e8927dd70..1fba3c3e9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -20,6 +20,7 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -34,7 +35,6 @@ import { TextField } from "../../../../components/form/TextField.js"; import { ProductList } from "../../../../components/product/ProductList.js"; import { useBackendContext } from "../../../../context/backend.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { mergeRefunds } from "../../../../utils/amount.js"; import { RefundModal } from "../list/Table.js"; import { Event, Timeline } from "./Timeline.js"; @@ -56,84 +56,84 @@ type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse; type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse; function ContractTerms({ value }: { value: CT }) { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( - + object={value} valueHandler={null}> readonly name="summary" - label={i18n`Summary`} - tooltip={i18n`human-readable description of the whole purchase`} + label={i18n.str`Summary`} + tooltip={i18n.str`human-readable description of the whole purchase`} /> readonly name="amount" - label={i18n`Amount`} - tooltip={i18n`total price for the transaction`} + label={i18n.str`Amount`} + tooltip={i18n.str`total price for the transaction`} /> {value.fulfillment_url && ( readonly name="fulfillment_url" - label={i18n`Fulfillment URL`} - tooltip={i18n`URL for this purchase`} + label={i18n.str`Fulfillment URL`} + tooltip={i18n.str`URL for this purchase`} /> )} readonly name="max_fee" - label={i18n`Max fee`} - tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`} + label={i18n.str`Max fee`} + tooltip={i18n.str`maximum total deposit fee accepted by the merchant for this contract`} /> readonly name="max_wire_fee" - label={i18n`Max wire fee`} - tooltip={i18n`maximum wire fee accepted by the merchant`} + label={i18n.str`Max wire fee`} + tooltip={i18n.str`maximum wire fee accepted by the merchant`} /> readonly name="wire_fee_amortization" - label={i18n`Wire fee amortization`} - tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`} + label={i18n.str`Wire fee amortization`} + tooltip={i18n.str`over how many customer transactions does the merchant expect to amortize wire fees on average`} /> readonly name="timestamp" - label={i18n`Created at`} - tooltip={i18n`time when this contract was generated`} + label={i18n.str`Created at`} + tooltip={i18n.str`time when this contract was generated`} /> readonly name="refund_deadline" - label={i18n`Refund deadline`} - tooltip={i18n`after this deadline has passed no refunds will be accepted`} + label={i18n.str`Refund deadline`} + tooltip={i18n.str`after this deadline has passed no refunds will be accepted`} /> readonly name="pay_deadline" - label={i18n`Payment deadline`} - tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`} + label={i18n.str`Payment deadline`} + tooltip={i18n.str`after this deadline, the merchant won't accept payments for the contract`} /> readonly name="wire_transfer_deadline" - label={i18n`Wire transfer deadline`} - tooltip={i18n`transfer deadline for the exchange`} + label={i18n.str`Wire transfer deadline`} + tooltip={i18n.str`transfer deadline for the exchange`} /> readonly name="delivery_date" - label={i18n`Delivery date`} - tooltip={i18n`time indicating when the order should be delivered`} + label={i18n.str`Delivery date`} + tooltip={i18n.str`time indicating when the order should be delivered`} /> {value.delivery_date && ( @@ -141,14 +141,14 @@ function ContractTerms({ value }: { value: CT }) { readonly name="auto_refund" - label={i18n`Auto-refund delay`} - tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`} + label={i18n.str`Auto-refund delay`} + tooltip={i18n.str`how long the wallet should try to get an automatic refund for the purchase`} /> readonly name="extra" - label={i18n`Extra info`} - tooltip={i18n`extra data that is only interpreted by the merchant frontend`} + label={i18n.str`Extra info`} + tooltip={i18n.str`extra data that is only interpreted by the merchant frontend`} /> @@ -203,7 +203,7 @@ function ClaimedPage({ } const [value, valueHandler] = useState>(order); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -216,9 +216,9 @@ function ClaimedPage({
      - Order #{id} + Order #{id}
      - claimed + claimed
      @@ -244,7 +244,7 @@ function ClaimedPage({ >

      - claimed at: + claimed at: {" "} {format( new Date(order.contract_terms.timestamp.t_s * 1000), @@ -262,13 +262,13 @@ function ClaimedPage({

      - Timeline + Timeline
      - Payment details + Payment details
      object={value} @@ -278,17 +278,17 @@ function ClaimedPage({ name="contract_terms.summary" readonly inputType="multiline" - label={i18n`Summary`} + label={i18n.str`Summary`} /> name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} />
      @@ -298,7 +298,7 @@ function ClaimedPage({ {order.contract_terms.products.length ? (
      - Product list + Product list
      @@ -426,7 +426,7 @@ function PaidPage({ const refundurl = `${proto}://refund/${refundHost}/${order.contract_terms.order_id}/`; const refundable = new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const amount = Amounts.parseOrThrow(order.contract_terms.amount); const refund_taken = order.refund_details.reduce((prev, cur) => { @@ -446,18 +446,18 @@ function PaidPage({
      - Order #{id} + Order #{id}
      - paid + paid
      {order.wired ? (
      - wired + wired
      ) : null} {order.refunded ? (
      - refunded + refunded
      ) : null}
      @@ -477,8 +477,8 @@ function PaidPage({ class="has-tooltip-left" data-tooltip={ refundable - ? i18n`refund order` - : i18n`not refundable` + ? i18n.str`refund order` + : i18n.str`not refundable` } >
      @@ -533,41 +533,41 @@ function PaidPage({
      - Timeline + Timeline
      - Payment details + Payment details
      object={value} valueHandler={valueHandler} > - {/* name="deposit_total" readonly label={i18n`Deposit total`} /> */} + {/* name="deposit_total" readonly label={i18n.str`Deposit total`} /> */} {order.refunded && ( name="refund_amount" readonly - label={i18n`Refunded amount`} + label={i18n.str`Refunded amount`} /> )} {order.refunded && ( name="refund_taken" readonly - label={i18n`Refund taken`} + label={i18n.str`Refund taken`} /> )} name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} /> name="order_status_url" - label={i18n`Status URL`} + label={i18n.str`Status URL`} > name="order_status_url" - label={i18n`Refund URI`} + label={i18n.str`Refund URI`} > {refundurl} @@ -595,7 +595,7 @@ function PaidPage({ {order.contract_terms.products.length ? (
      - Product list + Product list
      @@ -620,7 +620,7 @@ function UnpaidPage({ order: MerchantBackend.Orders.CheckPaymentUnpaidResponse; }) { const [value, valueHandler] = useState>(order); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -629,11 +629,11 @@ function UnpaidPage({

      - Order #{id} + Order #{id}

      - unpaid + unpaid
      @@ -651,7 +651,7 @@ function UnpaidPage({ >

      - pay at: + pay at: {" "}

      - created at: + created at: {" "} {order.creation_time.t_s === "never" ? "never" @@ -687,26 +687,29 @@ function UnpaidPage({ readonly name="summary" - label={i18n`Summary`} - tooltip={i18n`human-readable description of the whole purchase`} + label={i18n.str`Summary`} + tooltip={i18n.str`human-readable description of the whole purchase`} /> readonly name="total_amount" - label={i18n`Amount`} - tooltip={i18n`total price for the transaction`} + label={i18n.str`Amount`} + tooltip={i18n.str`total price for the transaction`} /> name="order_status" readonly - label={i18n`Order status`} + label={i18n.str`Order status`} /> name="order_status_url" readonly - label={i18n`Order status URL`} + label={i18n.str`Order status URL`} /> - name="taler_pay_uri" label={i18n`Payment URI`}> + + name="taler_pay_uri" + label={i18n.str`Payment URI`} + > {value.taler_pay_uri} @@ -722,7 +725,7 @@ function UnpaidPage({ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { const [showRefund, setShowRefund] = useState(undefined); - + const { i18n } = useTranslationContext(); const DetailByStatus = function () { switch (selected.order_status) { case "claimed": @@ -734,10 +737,10 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { default: return (

      - + Unknown order status. This is an error, please contact the administrator. - +
      ); } @@ -761,7 +764,7 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx index 4633688ba..bb0240982 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx @@ -13,13 +13,13 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { useOrderDetails, useOrderAPI } from "../../../../hooks/order.js"; -import { useTranslator } from "../../../../i18n/index.js"; +import { useOrderAPI, useOrderDetails } from "../../../../hooks/order.js"; import { Notification } from "../../../../utils/types.js"; import { DetailPage } from "./DetailPage.js"; @@ -43,7 +43,7 @@ export default function Update({ const result = useOrderDetails(oid); const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); @@ -61,13 +61,13 @@ export default function Update({ refundOrder(id, value) .then(() => setNotif({ - message: i18n`refund created successfully`, + message: i18n.str`refund created successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }), 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 bca90e352..3639ae912 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 @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { DatePicker } from "../../../../components/picker/DatePicker.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface ListPageProps { @@ -74,8 +74,8 @@ export function ListPage({ isNotWiredActive, onCreate, }: ListPageProps): VNode { - const i18n = useTranslator(); - const dateTooltip = i18n`select date to show nearby orders`; + const { i18n } = useTranslationContext(); + const dateTooltip = i18n.str`select date to show nearby orders`; const [pickDate, setPickDate] = useState(false); const [orderId, setOrderId] = useState(""); @@ -91,13 +91,13 @@ export function ListPage({ type="text" value={orderId} onChange={(e) => setOrderId(e.currentTarget.value)} - placeholder={i18n`order id`} + placeholder={i18n.str`order id`} /> {errorOrderId &&

      {errorOrderId}

      }
      )}
      - Exchange + Exchange - Code + Code - Http Status + Http Status
      @@ -196,7 +197,7 @@ function Table({ type="button" onClick={(): void => onRefund(i)} > - Refund + Refund )} {!i.paid && ( @@ -205,7 +206,7 @@ function Table({ type="button" onClick={(): void => onCopyURL(i)} > - copy url + copy url )} @@ -221,7 +222,7 @@ function Table({ disabled={!hasMoreAfter} onClick={onLoadMoreAfter} > - load older orders + load older orders )} @@ -229,6 +230,7 @@ function Table({ } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return (

      @@ -237,7 +239,9 @@ function EmptyTable(): VNode {

      - No orders have been found matching your query! + + No orders have been found matching your query! +

      ); @@ -256,7 +260,7 @@ export function RefundModal({ }: RefundModalProps): VNode { type State = { mainReason?: string; description?: string; refund?: string }; const [form, setValue] = useState({}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); // const [errors, setErrors] = useState>({}); const refunds = ( @@ -281,20 +285,20 @@ export function RefundModal({ : orderPrice; const isRefundable = Amounts.isNonZero(totalRefundable); - const duplicatedText = i18n`duplicated`; + const duplicatedText = i18n.str`duplicated`; const errors: FormErrors = { - mainReason: !form.mainReason ? i18n`required` : undefined, + mainReason: !form.mainReason ? i18n.str`required` : undefined, description: !form.description && form.mainReason !== duplicatedText - ? i18n`required` + ? i18n.str`required` : undefined, refund: !form.refund - ? i18n`required` + ? i18n.str`required` : !Amounts.parse(form.refund) - ? i18n`invalid format` + ? i18n.str`invalid format` : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1 - ? i18n`this value exceed the refundable amount` + ? i18n.str`this value exceed the refundable amount` : undefined, }; const hasErrors = Object.keys(errors).some( @@ -339,13 +343,13 @@ export function RefundModal({       @@ -381,28 +385,28 @@ export function RefundModal({ > name="refund" - label={i18n`Refund`} - tooltip={i18n`amount to be refunded`} + label={i18n.str`Refund`} + tooltip={i18n.str`amount to be refunded`} > - Max refundable:{" "} + Max refundable:{" "} {Amounts.stringify(totalRefundable)} {form.mainReason && form.mainReason !== duplicatedText ? ( - label={i18n`Description`} + label={i18n.str`Description`} name="description" - tooltip={i18n`more information to give context`} + tooltip={i18n.str`more information to give context`} /> ) : undefined} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx index 315d78c63..e29c57a7c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx @@ -19,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, Fragment } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; @@ -31,10 +32,9 @@ import { useOrderAPI, useOrderDetails, } from "../../../../hooks/order.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; -import { RefundModal } from "./Table.js"; import { ListPage } from "./ListPage.js"; +import { RefundModal } from "./Table.js"; interface Props { onUnauthorized: () => VNode; @@ -64,7 +64,7 @@ export default function OrderList({ const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [errorOrderId, setErrorOrderId] = useState( undefined, ); @@ -86,7 +86,7 @@ export default function OrderList({ async function testIfOrderExistAndSelect(orderId: string): Promise { if (!orderId) { - setErrorOrderId(i18n`Enter an order id`); + setErrorOrderId(i18n.str`Enter an order id`); return; } try { @@ -94,7 +94,7 @@ export default function OrderList({ onSelect(orderId); setErrorOrderId(undefined); } catch { - setErrorOrderId(i18n`order not found`); + setErrorOrderId(i18n.str`order not found`); } } @@ -136,13 +136,13 @@ export default function OrderList({ refundOrder(orderToBeRefunded.order_id, value) .then(() => setNotif({ - message: i18n`refund created successfully`, + message: i18n.str`refund created successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }), @@ -151,7 +151,7 @@ export default function OrderList({ } onLoadError={(error) => { setNotif({ - message: i18n`could not create the refund`, + message: i18n.str`could not create the refund`, type: "ERROR", description: error.message, }); @@ -161,7 +161,7 @@ export default function OrderList({ onUnauthorized={onUnauthorized} onNotFound={() => { setNotif({ - message: i18n`could not get the order to refund`, + message: i18n.str`could not get the order to refund`, type: "ERROR", // description: error.message }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx index f6d7000ef..c18646be0 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { ProductForm } from "../../../../components/product/ProductForm.js"; import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; type Entity = MerchantBackend.Products.ProductAddDetail & { product_id: string; @@ -43,7 +43,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { }, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -56,19 +56,19 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
      {onBack && ( )} - Confirm + Confirm
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx index 62ecaf512..f82d85e94 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { useProductAPI } from "../../../../hooks/product.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; @@ -36,7 +36,7 @@ interface Props { export default function CreateProduct({ onConfirm, onBack }: Props): VNode { const { createProduct } = useProductAPI(); const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( @@ -48,7 +48,7 @@ export default function CreateProduct({ onConfirm, onBack }: Props): VNode { .then(() => onConfirm()) .catch((error) => { setNotif({ - message: i18n`could not create product`, + message: i18n.str`could not create product`, type: "ERROR", description: error.message, }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index 515b36895..97d5afee5 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -19,19 +19,19 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; +import emptyImage from "../../../../assets/empty.png"; import { - FormProvider, FormErrors, + FormProvider, } from "../../../../components/form/FormProvider.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import emptyImage from "../../../../assets/empty.png"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; -import { Amounts } from "@gnu-taler/taler-util"; type Entity = MerchantBackend.Products.ProductDetail & WithId; @@ -57,7 +57,7 @@ export function CardTable({ const [rowSelection, rowSelectionHandler] = useState( undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -65,12 +65,12 @@ export function CardTable({ - Products + Products

      - Date + Date - Amount + Amount - Summary + Summary
      - date + date - amount + amount - reason + reason
      @@ -207,7 +207,7 @@ function Table({ } style={{ cursor: "pointer" }} > - {isFree ? i18n`free` : `${i.price} / ${i.unit}`} + {isFree ? i18n.str`free` : `${i.price} / ${i.unit}`}
      - Image + Image - Description + Description - Sell + Sell - Taxes + Taxes - Profit + Profit - Stock + Stock - Sold + Sold
      @@ -245,26 +245,26 @@ function Table({
      @@ -316,7 +316,7 @@ function FastProductWithInfiniteStockUpdateForm({ onCancel, }: FastProductUpdateFormProps) { const [value, valueHandler] = useState({ price: product.price }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( @@ -327,18 +327,18 @@ function FastProductWithInfiniteStockUpdateForm({ > name="price" - label={i18n`Price`} - tooltip={i18n`update the product with new price`} + label={i18n.str`Price`} + tooltip={i18n.str`update the product with new price`} />
      @@ -383,7 +383,7 @@ function FastProductWithManagedStockUpdateForm({ const hasErrors = Object.keys(errors).some( (k) => (errors as any)[k] !== undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( @@ -395,31 +395,31 @@ function FastProductWithManagedStockUpdateForm({ > name="incoming" - label={i18n`Incoming`} - tooltip={i18n`add more elements to the inventory`} + label={i18n.str`Incoming`} + tooltip={i18n.str`add more elements to the inventory`} /> name="lost" - label={i18n`Lost`} - tooltip={i18n`report elements lost in the inventory`} + label={i18n.str`Lost`} + tooltip={i18n.str`report elements lost in the inventory`} /> name="price" - label={i18n`Price`} - tooltip={i18n`new price for the product`} + label={i18n.str`Price`} + tooltip={i18n.str`new price for the product`} />
      @@ -451,6 +451,7 @@ function FastProductUpdateForm(props: FastProductUpdateFormProps) { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return (

      @@ -459,9 +460,9 @@ function EmptyTable(): VNode {

      - + There is no products yet, add more pressing the + sign - +

      ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx index 7e9118d24..41a07a7aa 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx @@ -19,6 +19,7 @@ * @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 { Loading } from "../../../../components/exception/loading.js"; @@ -29,7 +30,6 @@ import { useInstanceProducts, useProductAPI, } from "../../../../hooks/product.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CardTable } from "./Table.js"; @@ -51,7 +51,7 @@ export default function ProductList({ const { deleteProduct, updateProduct } = useProductAPI(); const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); @@ -69,13 +69,13 @@ export default function ProductList({ updateProduct(id, prod) .then(() => setNotif({ - message: i18n`product updated successfully`, + message: i18n.str`product updated successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not update the product`, + message: i18n.str`could not update the product`, type: "ERROR", description: error.message, }), @@ -86,13 +86,13 @@ export default function ProductList({ deleteProduct(prod.id) .then(() => setNotif({ - message: i18n`product delete successfully`, + message: i18n.str`product delete successfully`, type: "SUCCESS", }), ) .catch((error) => setNotif({ - message: i18n`could not delete the product`, + message: i18n.str`could not delete the product`, type: "ERROR", description: error.message, }), diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx index 841c0222f..d179ef87c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { ProductForm } from "../../../../components/product/ProductForm.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }; @@ -42,7 +42,7 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { }, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return (
      @@ -53,7 +53,7 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode {
      - Product id: + Product id: {product.product_id}
      @@ -75,19 +75,19 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode {
      {onBack && ( )} - Confirm + Confirm
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx index 3988fc9f0..e141dc52c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; @@ -26,7 +27,6 @@ import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; import { useProductAPI, useProductDetails } from "../../../../hooks/product.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { UpdatePage } from "./UpdatePage.js"; @@ -51,7 +51,7 @@ export default function UpdateProduct({ const result = useProductDetails(pid); const [notif, setNotif] = useState(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (result.clientError && result.isUnauthorized) return onUnauthorized(); if (result.clientError && result.isNotfound) return onNotFound(); @@ -69,7 +69,7 @@ export default function UpdateProduct({ .then(onConfirm) .catch((error) => { setNotif({ - message: i18n`could not create product`, + message: i18n.str`could not create product`, type: "ERROR", description: error.message, }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx index 2c3e963b8..de2319636 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx @@ -19,24 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; +import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { FormErrors, FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; import { ExchangeBackend, MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; -import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; -import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util"; +import { request } from "../../../../hooks/backend.js"; import { PAYTO_WIRE_METHOD_LOOKUP, URL_REGEX, } from "../../../../utils/constants.js"; -import { request } from "../../../../hooks/backend.js"; -import { InputSelector } from "../../../../components/form/InputSelector.js"; type Entity = MerchantBackend.Tips.ReserveCreateRequest; @@ -66,7 +65,7 @@ function ViewStep({ submitForm, setReserve, }: ViewProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [wireMethods, setWireMethods] = useState>([]); const [exchangeQueryError, setExchangeQueryError] = useState< string | undefined @@ -82,12 +81,12 @@ function ViewStep({ initial_balance: !reserve.initial_balance ? "cannot be empty" : !(parseInt(reserve.initial_balance.split(":")[1], 10) > 0) - ? i18n`it should be greater than 0` + ? i18n.str`it should be greater than 0` : undefined, exchange_url: !reserve.exchange_url - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : !URL_REGEX.test(reserve.exchange_url) - ? i18n`must be a valid URL` + ? i18n.str`must be a valid URL` : !exchangeQueryError ? undefined : exchangeQueryError, @@ -106,20 +105,20 @@ function ViewStep({ > name="initial_balance" - label={i18n`Initial balance`} - tooltip={i18n`balance prior to deposit`} + label={i18n.str`Initial balance`} + tooltip={i18n.str`balance prior to deposit`} /> name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`URL of exchange`} + label={i18n.str`Exchange URL`} + tooltip={i18n.str`URL of exchange`} />
      {onBack && ( )} - Next + Next
      @@ -157,7 +156,9 @@ function ViewStep({ case Steps.WIRE_METHOD: { const errors: FormErrors = { - wire_method: !reserve.wire_method ? i18n`cannot be empty` : undefined, + wire_method: !reserve.wire_method + ? i18n.str`cannot be empty` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -172,22 +173,22 @@ function ViewStep({ > name="initial_balance" - label={i18n`Initial balance`} - tooltip={i18n`balance prior to deposit`} + label={i18n.str`Initial balance`} + tooltip={i18n.str`balance prior to deposit`} readonly /> name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`URL of exchange`} + label={i18n.str`Exchange URL`} + tooltip={i18n.str`URL of exchange`} readonly /> name="wire_method" - label={i18n`Wire method`} - tooltip={i18n`method to use for wire transfer`} + label={i18n.str`Wire method`} + tooltip={i18n.str`method to use for wire transfer`} values={wireMethods} - placeholder={i18n`Select one wire method`} + placeholder={i18n.str`Select one wire method`} />
      @@ -196,19 +197,19 @@ function ViewStep({ class="button" onClick={() => setCurrentStep(Steps.EXCHANGE)} > - Back + Back )} - Confirm + Confirm
      diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx index 9bb228e1f..92427f3dc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx @@ -14,11 +14,11 @@ GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; +import { QR } from "../../../../components/exception/QR.js"; import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate } from "../../../../i18n/index.js"; -import { QR } from "../../../../components/exception/QR.js"; type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest; @@ -37,7 +37,7 @@ export function CreatedSuccessfully({ onCreateAnother, }: Props): VNode { const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`; - + const { i18n } = useTranslationContext(); return (