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 --- .../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 +-- 23 files changed, 381 insertions(+), 355 deletions(-) (limited to 'packages/merchant-backoffice-ui/src/components') 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 (
      -- cgit v1.2.3
      - image + image - description + description - quantity + quantity - unit price + unit price - total price + total price