From c59f9a2556731ad95ab8bd7eefe7fa8a41629834 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 20 Dec 2022 17:45:24 -0300
Subject: use translation context from web-utils, don't use match react-router
 since is broken

---
 .../src/paths/instance/products/list/Table.tsx     | 79 +++++++++++-----------
 1 file changed, 40 insertions(+), 39 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx')

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>
   );
-- 
cgit v1.2.3