diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/form/InputSearchProduct.tsx | 18 |
1 files changed, 11 insertions, 7 deletions
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) => ( |