diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products')
6 files changed, 64 insertions, 63 deletions
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 ( <div> @@ -56,19 +56,19 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( <button class="button" onClick={onBack}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> )} <AsyncButton onClick={submitForm} data-tooltip={ !submitForm - ? i18n`Need to complete marked fields` + ? i18n.str`Need to complete marked fields` : "confirm operation" } disabled={!submitForm} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </AsyncButton> </div> </div> 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<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -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<string | undefined>( undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="card has-table"> <header class="card-header"> @@ -65,12 +65,12 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-shopping" /> </span> - <Translate>Products</Translate> + <i18n.Translate>Products</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options"> <span class="has-tooltip-left" - data-tooltip={i18n`add product to inventory`} + data-tooltip={i18n.str`add product to inventory`} > <button class="button is-info" type="button" onClick={onCreate}> <span class="icon is-small"> @@ -121,32 +121,32 @@ function Table({ onUpdate, onDelete, }: TableProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Image</Translate> + <i18n.Translate>Image</i18n.Translate> </th> <th> - <Translate>Description</Translate> + <i18n.Translate>Description</i18n.Translate> </th> <th> - <Translate>Sell</Translate> + <i18n.Translate>Sell</i18n.Translate> </th> <th> - <Translate>Taxes</Translate> + <i18n.Translate>Taxes</i18n.Translate> </th> <th> - <Translate>Profit</Translate> + <i18n.Translate>Profit</i18n.Translate> </th> <th> - <Translate>Stock</Translate> + <i18n.Translate>Stock</i18n.Translate> </th> <th> - <Translate>Sold</Translate> + <i18n.Translate>Sold</i18n.Translate> </th> <th /> </tr> @@ -207,7 +207,7 @@ function Table({ } style={{ cursor: "pointer" }} > - {isFree ? i18n`free` : `${i.price} / ${i.unit}`} + {isFree ? i18n.str`free` : `${i.price} / ${i.unit}`} </td> <td onClick={() => @@ -245,26 +245,26 @@ function Table({ <div class="buttons is-right"> <span class="has-tooltip-bottom" - data-tooltip={i18n`go to product update page`} + data-tooltip={i18n.str`go to product update page`} > <button class="button is-small is-success " type="button" onClick={(): void => onSelect(i)} > - <Translate>Update</Translate> + <i18n.Translate>Update</i18n.Translate> </button> </span> <span class="has-tooltip-left" - data-tooltip={i18n`remove this product from the database`} + data-tooltip={i18n.str`remove this product from the database`} > <button class="button is-small is-danger" type="button" onClick={(): void => onDelete(i)} > - <Translate>Delete</Translate> + <i18n.Translate>Delete</i18n.Translate> </button> </span> </div> @@ -316,7 +316,7 @@ function FastProductWithInfiniteStockUpdateForm({ onCancel, }: FastProductUpdateFormProps) { const [value, valueHandler] = useState<UpdatePrice>({ price: product.price }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -327,18 +327,18 @@ function FastProductWithInfiniteStockUpdateForm({ > <InputCurrency<FastProductUpdate> 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`} /> </FormProvider> <div class="buttons is-right mt-5"> <button class="button" onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <span class="has-tooltip-left" - data-tooltip={i18n`update product with new price`} + data-tooltip={i18n.str`update product with new price`} > <button class="button is-info" @@ -349,7 +349,7 @@ function FastProductWithInfiniteStockUpdateForm({ }) } > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </span> </div> @@ -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 ( <Fragment> @@ -395,31 +395,31 @@ function FastProductWithManagedStockUpdateForm({ > <InputNumber<FastProductUpdate> 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`} /> <InputNumber<FastProductUpdate> 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`} /> <InputCurrency<FastProductUpdate> name="price" - label={i18n`Price`} - tooltip={i18n`new price for the product`} + label={i18n.str`Price`} + tooltip={i18n.str`new price for the product`} /> </FormProvider> <div class="buttons is-right mt-5"> <button class="button" onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <span class="has-tooltip-left" data-tooltip={ hasErrors - ? i18n`the are value with errors` - : i18n`update product with new stock and price` + ? i18n.str`the are value with errors` + : i18n.str`update product with new stock and price` } > <button @@ -434,7 +434,7 @@ function FastProductWithManagedStockUpdateForm({ }) } > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </span> </div> @@ -451,6 +451,7 @@ function FastProductUpdateForm(props: FastProductUpdateFormProps) { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -459,9 +460,9 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate> + <i18n.Translate> There is no products yet, add more pressing the + sign - </Translate> + </i18n.Translate> </p> </div> ); 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<Notification | undefined>(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 ( <div> @@ -53,7 +53,7 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { <div class="level-left"> <div class="level-item"> <span class="is-size-4"> - <Translate>Product id:</Translate> + <i18n.Translate>Product id:</i18n.Translate> <b>{product.product_id}</b> </span> </div> @@ -75,19 +75,19 @@ export function UpdatePage({ product, onUpdate, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( <button class="button" onClick={onBack}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> )} <AsyncButton onClick={submitForm} data-tooltip={ !submitForm - ? i18n`Need to complete marked fields` + ? i18n.str`Need to complete marked fields` : "confirm operation" } disabled={!submitForm} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </AsyncButton> </div> </div> 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<Notification | undefined>(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, }); |