1 files changed, 14 insertions, 12 deletions

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 <http://www.gnu.org/licenses/>
  */
+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<Partial<Form>>(initialState);
   const [errors, setErrors] = useState<FormErrors<Form>>({});
 
-  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 && (
               <InputNumber<Form>
                 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`}
               />
             )}
           </div>
           <div class="column">
             <div class="buttons is-right">
               <button class="button is-success" onClick={submit}>
-                <Translate>Add from inventory</Translate>
+                <i18n.Translate>Add from inventory</i18n.Translate>
               </button>
             </div>
           </div>