diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form')
11 files changed, 162 insertions, 140 deletions
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<T> extends InputProps<T> { @@ -52,7 +52,7 @@ export function InputArray<T>({ const array: any[] = (value ? value! : []) as any; const [currentValue, setCurrentValue] = useState(""); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="field is-horizontal"> @@ -99,7 +99,7 @@ export function InputArray<T>({ 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<T>({ onChange([v, ...array] as any); setCurrentValue(""); }} - data-tooltip={i18n`add element to the list`} + data-tooltip={i18n.str`add element to the list`} > - <Translate>add</Translate> + <i18n.Translate>add</i18n.Translate> </button> </p> </div> 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<T>({ addonAfter, children, side, -}: Props<keyof T>) { +}: Props<keyof T>): VNode { const config = useConfigContext(); return ( <InputWithAddon<T> @@ -60,7 +60,8 @@ export function InputCurrency<T>({ toStr={(v?: Amount) => v?.split(":")[1] || ""} fromStr={(v: string) => (!v ? "" : `${config.currency}:${v}`)} inputExtra={{ min: 0 }} - children={children} - /> + > + {children} + </InputWithAddon> ); } 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<T>({ withTimestampSupport, }: Props<keyof T>): VNode { const [opened, setOpened] = useState(false); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { error, required, value, onChange } = useField<T>(name); @@ -120,25 +120,25 @@ export function InputDate<T>({ <span data-tooltip={ withTimestampSupport - ? i18n`change value to unknown date` - : i18n`change value to empty` + ? i18n.str`change value to unknown date` + : i18n.str`change value to empty` } > <button class="button is-info mr-3" onClick={() => onChange(undefined as any)} > - <Translate>clear</Translate> + <i18n.Translate>clear</i18n.Translate> </button> </span> )} {withTimestampSupport && ( - <span data-tooltip={i18n`change value to never`}> + <span data-tooltip={i18n.str`change value to never`}> <button class="button is-info" onClick={() => onChange({ t_s: "never" } as any)} > - <Translate>never</Translate> + <i18n.Translate>never</i18n.Translate> </button> </span> )} 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<T>({ withForever, }: Props<keyof T>): VNode { const [opened, setOpened] = useState(false); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { error, required, value, onChange } = useField<T>(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<T>({ 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<T>({ {error && <p class="help is-danger">{error}</p>} </div> {withForever && ( - <span data-tooltip={i18n`change value to never`}> + <span data-tooltip={i18n.str`change value to never`}> <button class="button is-info mr-3" onClick={() => onChange({ d_us: "forever" } as any)} > - <Translate>forever</Translate> + <i18n.Translate>forever</i18n.Translate> </button> </span> )} {!readonly && ( - <span data-tooltip={i18n`change value to empty`}> + <span data-tooltip={i18n.str`change value to empty`}> <button class="button is-info " onClick={() => onChange(undefined as any)} > - <Translate>clear</Translate> + <i18n.Translate>clear</i18n.Translate> </button> </span> )} 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<T>({ const { error, value, onChange } = useField<T>(name); const image = useRef<HTMLInputElement>(null); - + const { i18n } = useTranslationContext(); const [sizeError, setSizeError] = useState(false); return ( @@ -102,17 +102,17 @@ export function InputImage<T>({ {error && <p class="help is-danger">{error}</p>} {sizeError && ( <p class="help is-danger"> - <Translate>Image should be smaller than 1 MB</Translate> + <i18n.Translate>Image should be smaller than 1 MB</i18n.Translate> </p> )} {!value && ( <button class="button" onClick={() => image.current?.click()}> - <Translate>Add</Translate> + <i18n.Translate>Add</i18n.Translate> </button> )} {value && ( <button class="button" onClick={() => onChange(undefined!)}> - <Translate>Remove</Translate> + <i18n.Translate>Remove</i18n.Translate> </button> )} </div> 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 ( <> - <Input name={`${name}.country`} label={i18n`Country`} /> + <Input name={`${name}.country`} label={i18n.str`Country`} /> <Input name={`${name}.address_lines`} inputType="multiline" - label={i18n`Address`} + label={i18n.str`Address`} toStr={(v: string[] | undefined) => (!v ? "" : v.join("\n"))} fromStr={(v: string) => v.split("\n")} /> - <Input name={`${name}.building_number`} label={i18n`Building number`} /> - <Input name={`${name}.building_name`} label={i18n`Building name`} /> - <Input name={`${name}.street`} label={i18n`Street`} /> - <Input name={`${name}.post_code`} label={i18n`Post code`} /> - <Input name={`${name}.town_location`} label={i18n`Town location`} /> - <Input name={`${name}.town`} label={i18n`Town`} /> - <Input name={`${name}.district`} label={i18n`District`} /> + <Input + name={`${name}.building_number`} + label={i18n.str`Building number`} + /> + <Input name={`${name}.building_name`} label={i18n.str`Building name`} /> + <Input name={`${name}.street`} label={i18n.str`Street`} /> + <Input name={`${name}.post_code`} label={i18n.str`Post code`} /> + <Input name={`${name}.town_location`} label={i18n.str`Town location`} /> + <Input name={`${name}.town`} label={i18n.str`Town`} /> + <Input name={`${name}.district`} label={i18n.str`District`} /> <Input name={`${name}.country_subdivision`} - label={i18n`Country subdivision`} + label={i18n.str`Country subdivision`} /> </> ); 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<typeof useTranslationContext>["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<typeof useTranslationContext>["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<typeof useTranslationContext>["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<T>({ 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<T>({ const paytoURL = !url ? "" : url.toString(); const errors: FormErrors<Entity> = { - 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<T>({ 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<T>({ > <InputSelector<Entity> 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" && ( <Fragment> <Input<Entity> name="path1" - label={i18n`Routing`} - tooltip={i18n`Routing number.`} + label={i18n.str`Routing`} + tooltip={i18n.str`Routing number.`} /> <Input<Entity> name="path2" - label={i18n`Account`} - tooltip={i18n`Account number.`} + label={i18n.str`Account`} + tooltip={i18n.str`Account number.`} /> </Fragment> )} @@ -259,8 +269,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Code`} - tooltip={i18n`Business Identifier Code.`} + label={i18n.str`Code`} + tooltip={i18n.str`Business Identifier Code.`} /> </Fragment> )} @@ -268,8 +278,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Account`} - tooltip={i18n`Bank Account Number.`} + label={i18n.str`Account`} + tooltip={i18n.str`Bank Account Number.`} inputExtra={{ style: { textTransform: "uppercase" } }} /> </Fragment> @@ -278,8 +288,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Account`} - tooltip={i18n`Unified Payment Interface.`} + label={i18n.str`Account`} + tooltip={i18n.str`Unified Payment Interface.`} /> </Fragment> )} @@ -287,8 +297,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Address`} - tooltip={i18n`Bitcoin protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Bitcoin protocol.`} /> </Fragment> )} @@ -296,8 +306,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Address`} - tooltip={i18n`Ethereum protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Ethereum protocol.`} /> </Fragment> )} @@ -305,8 +315,8 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Address`} - tooltip={i18n`Interledger protocol.`} + label={i18n.str`Address`} + tooltip={i18n.str`Interledger protocol.`} /> </Fragment> )} @@ -315,13 +325,13 @@ export function InputPaytoForm<T>({ <Fragment> <Input<Entity> name="path1" - label={i18n`Host`} - tooltip={i18n`Bank host.`} + label={i18n.str`Host`} + tooltip={i18n.str`Bank host.`} /> <Input<Entity> name="path2" - label={i18n`Account`} - tooltip={i18n`Bank account.`} + label={i18n.str`Account`} + tooltip={i18n.str`Bank account.`} /> </Fragment> )} @@ -329,8 +339,8 @@ export function InputPaytoForm<T>({ {value.target !== noTargetValue && ( <Input name="options.receiver-name" - label={i18n`Name`} - tooltip={i18n`Bank account owner's name.`} + label={i18n.str`Name`} + tooltip={i18n.str`Bank account owner's name.`} /> )} @@ -357,7 +367,7 @@ export function InputPaytoForm<T>({ /> </div> ))} - {!paytos.length && i18n`No accounts yet.`} + {!paytos.length && i18n.str`No accounts yet.`} </div> </div> @@ -365,11 +375,11 @@ export function InputPaytoForm<T>({ <div class="buttons is-right mt-5"> <button class="button is-info" - data-tooltip={i18n`add tax to the tax list`} + data-tooltip={i18n.str`add tax to the tax list`} disabled={hasErrors} onClick={submit} > - <Translate>Add</Translate> + <i18n.Translate>Add</i18n.Translate> </button> </div> )} 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<ProductSearch> = { name: undefined, }; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); if (selected) { return ( @@ -63,10 +63,11 @@ export function InputSearchProduct({ <div class="media-content"> <div class="content"> <p class="media-meta"> - <Translate>Product id</Translate>: <b>{selected.id}</b> + <i18n.Translate>Product id</i18n.Translate>: <b>{selected.id}</b> </p> <p> - <Translate>Description</Translate>: {selected.description} + <i18n.Translate>Description</i18n.Translate>:{" "} + {selected.description} </p> <div class="buttons is-right mt-5"> <button @@ -90,8 +91,8 @@ export function InputSearchProduct({ > <InputWithAddon<ProductSearch> name="name" - label={i18n`Product`} - tooltip={i18n`search products by it's description or id`} + label={i18n.str`Product`} + tooltip={i18n.str`search products by it's description or id`} addonAfter={ <span class="icon"> <i class="mdi mdi-magnify" /> @@ -120,6 +121,7 @@ interface ProductListProps { } function ProductList({ name, onSelect, list }: ProductListProps) { + const { i18n } = useTranslationContext(); if (!name) { /* FIXME this BR is added to occupy the space that will be added when the @@ -146,7 +148,9 @@ function ProductList({ name, onSelect, list }: ProductListProps) { <div class="dropdown-content"> {!filtered.length ? ( <div class="dropdown-item"> - <Translate>no products found with that description</Translate> + <i18n.Translate> + no products found with that description + </i18n.Translate> </div> ) : ( filtered.map((p) => ( diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx index 799978683..d900168b4 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx @@ -18,14 +18,15 @@ * * @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 { Translate, useTranslator } from "../../i18n/index.js"; import { InputProps, useField } from "./useField.js"; export type Props<T> = InputProps<T>; const TokenStatus = ({ prev, post }: any) => { + const { i18n } = useTranslationContext(); if ( (prev === undefined || prev === null) && (post === undefined || post === null) @@ -33,11 +34,11 @@ const TokenStatus = ({ prev, post }: any) => { return null; return prev === post ? null : post === null ? ( <span class="tag is-danger is-align-self-center ml-2"> - <Translate>Deleting</Translate> + <i18n.Translate>Deleting</i18n.Translate> </span> ) : ( <span class="tag is-warning is-align-self-center ml-2"> - <Translate>Changing</Translate> + <i18n.Translate>Changing</i18n.Translate> </span> ); }; @@ -55,7 +56,7 @@ export function InputSecured<T>({ const [active, setActive] = useState(false); const [newValue, setNuewValue] = useState(""); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -84,7 +85,7 @@ export function InputSecured<T>({ <i class="mdi mdi-lock-reset" /> </div> <span> - <Translate>Manage access token</Translate> + <i18n.Translate>Manage access token</i18n.Translate> </span> </button> <TokenStatus prev={initial} post={value} /> @@ -125,7 +126,7 @@ export function InputSecured<T>({ <i class="mdi mdi-lock-outline" /> </div> <span> - <Translate>Update</Translate> + <i18n.Translate>Update</i18n.Translate> </span> </button> </div> @@ -154,7 +155,7 @@ export function InputSecured<T>({ <i class="mdi mdi-lock-open-variant" /> </div> <span> - <Translate>Remove</Translate> + <i18n.Translate>Remove</i18n.Translate> </span> </button> </div> @@ -171,7 +172,7 @@ export function InputSecured<T>({ <i class="mdi mdi-lock-open-variant" /> </div> <span> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </span> </button> </div> 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<T> extends InputProps<T> { alreadyExist?: boolean; @@ -64,7 +63,7 @@ export function InputStock<T>({ incoming: 0, lost: 0, }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); useLayoutEffect(() => { if (!formValue) { @@ -97,7 +96,7 @@ export function InputStock<T>({ {!alreadyExist ? ( <button class="button" - data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`} + data-tooltip={i18n.str`click here to configure the stock of the product, leave it as is and the backend will not control stock`} onClick={(): void => { valueHandler({ current: 0, @@ -107,17 +106,17 @@ export function InputStock<T>({ }} > <span> - <Translate>Manage stock</Translate> + <i18n.Translate>Manage stock</i18n.Translate> </span> </button> ) : ( <button class="button" - data-tooltip={i18n`this product has been configured without stock control`} + data-tooltip={i18n.str`this product has been configured without stock control`} disabled > <span> - <Translate>Infinite</Translate> + <i18n.Translate>Infinite</i18n.Translate> </span> </button> )} @@ -134,7 +133,7 @@ export function InputStock<T>({ const stockAddedErrors: FormErrors<typeof addedStock> = { 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<T>({ // 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<T>({ object={addedStock} valueHandler={setAddedStock as any} > - <InputNumber name="incoming" label={i18n`Incoming`} /> - <InputNumber name="lost" label={i18n`Lost`} /> + <InputNumber name="incoming" label={i18n.str`Incoming`} /> + <InputNumber name="lost" label={i18n.str`Lost`} /> </FormProvider> {/* <div class="field is-horizontal"> @@ -190,17 +189,17 @@ export function InputStock<T>({ ) : ( <InputNumber<Entity> name="current" - label={i18n`Current`} + label={i18n.str`Current`} side={ <button class="button is-danger" - data-tooltip={i18n`remove stock control for this product`} + data-tooltip={i18n.str`remove stock control for this product`} onClick={(): void => { valueHandler(undefined as any); }} > <span> - <Translate>without stock</Translate> + <i18n.Translate>without stock</i18n.Translate> </span> </button> } @@ -209,11 +208,14 @@ export function InputStock<T>({ <InputDate<Entity> name="nextRestock" - label={i18n`Next restock`} + label={i18n.str`Next restock`} withTimestampSupport /> - <InputGroup<Entity> name="address" label={i18n`Delivery address`}> + <InputGroup<Entity> + name="address" + label={i18n.str`Delivery address`} + > <InputLocation name="address" /> </InputGroup> </FormProvider> 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<T>({ valueHandler({}); }, [value]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); //FIXME: translating plural singular return ( @@ -110,34 +110,35 @@ export function InputTaxes<T>({ /> </div> ))} - {!taxes.length && i18n`No taxes configured for this product.`} + {!taxes.length && i18n.str`No taxes configured for this product.`} </div> </div> <Input<Entity> 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.`} > - <Translate> - Enter currency and value separated with a colon, e.g. "USD:2.3". - </Translate> + <i18n.Translate> + Enter currency and value separated with a colon, e.g. + "USD:2.3". + </i18n.Translate> </Input> <Input<Entity> 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.`} /> <div class="buttons is-right mt-5"> <button class="button is-info" - data-tooltip={i18n`add tax to the tax list`} + data-tooltip={i18n.str`add tax to the tax list`} disabled={hasErrors} onClick={submit} > - <Translate>Add</Translate> + <i18n.Translate>Add</i18n.Translate> </button> </div> </FormProvider> |