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