use translation context from web-utils, don't use match react-router since is broken

1 files changed, 66 insertions, 66 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
index 145df717d..0c2e92418 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx
@@ -19,29 +19,29 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { add, isAfter, isBefore, isFuture } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { add, isAfter, isBefore, isFuture } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import {
-  FormProvider,
   FormErrors,
+  FormProvider,
 } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
+import { InputBoolean } from "../../../../components/form/InputBoolean.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputDate } from "../../../../components/form/InputDate.js";
 import { InputGroup } from "../../../../components/form/InputGroup.js";
 import { InputLocation } from "../../../../components/form/InputLocation.js";
+import { InputNumber } from "../../../../components/form/InputNumber.js";
+import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js";
+import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js";
 import { ProductList } from "../../../../components/product/ProductList.js";
 import { useConfigContext } from "../../../../context/config.js";
 import { Duration, MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { OrderCreateSchema as schema } from "../../../../schemas/index.js";
 import { rate } from "../../../../utils/amount.js";
-import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js";
-import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js";
-import { InputNumber } from "../../../../components/form/InputNumber.js";
-import { InputBoolean } from "../../../../components/form/InputBoolean.js";
 import { undefinedIfEmpty } from "../../../../utils/table.js";
 
 interface Props {
@@ -140,65 +140,65 @@ export function CreatePage({
   const inventoryList = Object.values(value.inventoryProducts || {});
   const productList = Object.values(value.products || {});
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const errors: FormErrors<Entity> = {
     pricing: undefinedIfEmpty({
-      summary: !value.pricing?.summary ? i18n`required` : undefined,
+      summary: !value.pricing?.summary ? i18n.str`required` : undefined,
       order_price: !value.pricing?.order_price
-        ? i18n`required`
+        ? i18n.str`required`
         : Amounts.isZero(value.pricing.order_price)
-        ? i18n`must be greater than 0`
+        ? i18n.str`must be greater than 0`
         : undefined,
     }),
     extra:
       value.extra && !stringIsValidJSON(value.extra)
-        ? i18n`not a valid json`
+        ? i18n.str`not a valid json`
         : undefined,
     payments: undefinedIfEmpty({
       refund_deadline: !value.payments?.refund_deadline
         ? undefined
         : !isFuture(value.payments.refund_deadline)
-        ? i18n`should be in the future`
+        ? i18n.str`should be in the future`
         : value.payments.pay_deadline &&
           isBefore(value.payments.refund_deadline, value.payments.pay_deadline)
-        ? i18n`refund deadline cannot be before pay deadline`
+        ? i18n.str`refund deadline cannot be before pay deadline`
         : value.payments.wire_transfer_deadline &&
           isBefore(
             value.payments.wire_transfer_deadline,
             value.payments.refund_deadline,
           )
-        ? i18n`wire transfer deadline cannot be before refund deadline`
+        ? i18n.str`wire transfer deadline cannot be before refund deadline`
         : undefined,
       pay_deadline: !value.payments?.pay_deadline
         ? undefined
         : !isFuture(value.payments.pay_deadline)
-        ? i18n`should be in the future`
+        ? i18n.str`should be in the future`
         : value.payments.wire_transfer_deadline &&
           isBefore(
             value.payments.wire_transfer_deadline,
             value.payments.pay_deadline,
           )
-        ? i18n`wire transfer deadline cannot be before pay deadline`
+        ? i18n.str`wire transfer deadline cannot be before pay deadline`
         : undefined,
       auto_refund_deadline: !value.payments?.auto_refund_deadline
         ? undefined
         : !isFuture(value.payments.auto_refund_deadline)
-        ? i18n`should be in the future`
+        ? i18n.str`should be in the future`
         : !value.payments?.refund_deadline
-        ? i18n`should have a refund deadline`
+        ? i18n.str`should have a refund deadline`
         : !isAfter(
             value.payments.refund_deadline,
             value.payments.auto_refund_deadline,
           )
-        ? i18n`auto refund cannot be after refund deadline`
+        ? i18n.str`auto refund cannot be after refund deadline`
         : undefined,
     }),
     shipping: undefinedIfEmpty({
       delivery_date: !value.shipping?.delivery_date
         ? undefined
         : !isFuture(value.shipping.delivery_date)
-        ? i18n`should be in the future`
+        ? i18n.str`should be in the future`
         : undefined,
     }),
   };
@@ -349,7 +349,7 @@ export function CreatePage({
             {/* // FIXME: translating plural singular */}
             <InputGroup
               name="inventory_products"
-              label={i18n`Manage products in order`}
+              label={i18n.str`Manage products in order`}
               alternative={
                 allProducts.length > 0 && (
                   <p>
@@ -358,7 +358,7 @@ export function CreatePage({
                   </p>
                 )
               }
-              tooltip={i18n`Manage list of products in the order.`}
+              tooltip={i18n.str`Manage list of products in the order.`}
             >
               <InventoryProductForm
                 currentProducts={value.inventoryProducts || {}}
@@ -379,8 +379,8 @@ export function CreatePage({
                   list={allProducts}
                   actions={[
                     {
-                      name: i18n`Remove`,
-                      tooltip: i18n`Remove this product from the order.`,
+                      name: i18n.str`Remove`,
+                      tooltip: i18n.str`Remove this product from the order.`,
                       handler: (e, index) => {
                         if (e.product_id) {
                           removeProductFromTheInventoryList(e.product_id);
@@ -404,13 +404,13 @@ export function CreatePage({
                 <Fragment>
                   <InputCurrency
                     name="pricing.products_price"
-                    label={i18n`Total price`}
+                    label={i18n.str`Total price`}
                     readonly
-                    tooltip={i18n`total product price added up`}
+                    tooltip={i18n.str`total product price added up`}
                   />
                   <InputCurrency
                     name="pricing.order_price"
-                    label={i18n`Total price`}
+                    label={i18n.str`Total price`}
                     addonAfter={
                       discountOrRise > 0 &&
                       (discountOrRise < 1
@@ -419,103 +419,103 @@ export function CreatePage({
                           )}`
                         : `rise of %${Math.round((discountOrRise - 1) * 100)}`)
                     }
-                    tooltip={i18n`Amount to be paid by the customer`}
+                    tooltip={i18n.str`Amount to be paid by the customer`}
                   />
                 </Fragment>
               ) : (
                 <InputCurrency
                   name="pricing.order_price"
-                  label={i18n`Order price`}
-                  tooltip={i18n`final order price`}
+                  label={i18n.str`Order price`}
+                  tooltip={i18n.str`final order price`}
                 />
               )}
 
               <Input
                 name="pricing.summary"
                 inputType="multiline"
-                label={i18n`Summary`}
-                tooltip={i18n`Title of the order to be shown to the customer`}
+                label={i18n.str`Summary`}
+                tooltip={i18n.str`Title of the order to be shown to the customer`}
               />
 
               <InputGroup
                 name="shipping"
-                label={i18n`Shipping and Fulfillment`}
+                label={i18n.str`Shipping and Fulfillment`}
                 initialActive
               >
                 <InputDate
                   name="shipping.delivery_date"
-                  label={i18n`Delivery date`}
-                  tooltip={i18n`Deadline for physical delivery assured by the merchant.`}
+                  label={i18n.str`Delivery date`}
+                  tooltip={i18n.str`Deadline for physical delivery assured by the merchant.`}
                 />
                 {value.shipping?.delivery_date && (
                   <InputGroup
                     name="shipping.delivery_location"
-                    label={i18n`Location`}
-                    tooltip={i18n`address where the products will be delivered`}
+                    label={i18n.str`Location`}
+                    tooltip={i18n.str`address where the products will be delivered`}
                   >
                     <InputLocation name="shipping.delivery_location" />
                   </InputGroup>
                 )}
                 <Input
                   name="shipping.fullfilment_url"
-                  label={i18n`Fulfillment URL`}
-                  tooltip={i18n`URL to which the user will be redirected after successful payment.`}
+                  label={i18n.str`Fulfillment URL`}
+                  tooltip={i18n.str`URL to which the user will be redirected after successful payment.`}
                 />
               </InputGroup>
 
               <InputGroup
                 name="payments"
-                label={i18n`Taler payment options`}
-                tooltip={i18n`Override default Taler payment settings for this order`}
+                label={i18n.str`Taler payment options`}
+                tooltip={i18n.str`Override default Taler payment settings for this order`}
               >
                 <InputDate
                   name="payments.pay_deadline"
-                  label={i18n`Payment deadline`}
-                  tooltip={i18n`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`}
+                  label={i18n.str`Payment deadline`}
+                  tooltip={i18n.str`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`}
                 />
                 <InputDate
                   name="payments.refund_deadline"
-                  label={i18n`Refund deadline`}
-                  tooltip={i18n`Time until which the order can be refunded by the merchant.`}
+                  label={i18n.str`Refund deadline`}
+                  tooltip={i18n.str`Time until which the order can be refunded by the merchant.`}
                 />
                 <InputDate
                   name="payments.wire_transfer_deadline"
-                  label={i18n`Wire transfer deadline`}
-                  tooltip={i18n`Deadline for the exchange to make the wire transfer.`}
+                  label={i18n.str`Wire transfer deadline`}
+                  tooltip={i18n.str`Deadline for the exchange to make the wire transfer.`}
                 />
                 <InputDate
                   name="payments.auto_refund_deadline"
-                  label={i18n`Auto-refund deadline`}
-                  tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`}
+                  label={i18n.str`Auto-refund deadline`}
+                  tooltip={i18n.str`Time until which the wallet will automatically check for refunds without user interaction.`}
                 />
 
                 <InputCurrency
                   name="payments.max_fee"
-                  label={i18n`Maximum deposit fee`}
-                  tooltip={i18n`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`}
+                  label={i18n.str`Maximum deposit fee`}
+                  tooltip={i18n.str`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`}
                 />
                 <InputCurrency
                   name="payments.max_wire_fee"
-                  label={i18n`Maximum wire fee`}
-                  tooltip={i18n`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`}
+                  label={i18n.str`Maximum wire fee`}
+                  tooltip={i18n.str`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`}
                 />
                 <InputNumber
                   name="payments.wire_fee_amortization"
-                  label={i18n`Wire fee amortization`}
-                  tooltip={i18n`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`}
+                  label={i18n.str`Wire fee amortization`}
+                  tooltip={i18n.str`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`}
                 />
                 <InputBoolean
                   name="payments.createToken"
-                  label={i18n`Create token`}
-                  tooltip={i18n`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`}
+                  label={i18n.str`Create token`}
+                  tooltip={i18n.str`Uncheck this option if the merchant backend generated an order ID with enough entropy to prevent adversarial claims.`}
                 />
                 <InputNumber
                   name="payments.minimum_age"
-                  label={i18n`Minimum age required`}
-                  tooltip={i18n`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`}
+                  label={i18n.str`Minimum age required`}
+                  tooltip={i18n.str`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`}
                   help={
                     minAgeByProducts > 0
-                      ? i18n`Min age defined by the producs is ${minAgeByProducts}`
+                      ? i18n.str`Min age defined by the producs is ${minAgeByProducts}`
                       : undefined
                   }
                 />
@@ -523,14 +523,14 @@ export function CreatePage({
 
               <InputGroup
                 name="extra"
-                label={i18n`Additional information`}
-                tooltip={i18n`Custom information to be included in the contract for this order.`}
+                label={i18n.str`Additional information`}
+                tooltip={i18n.str`Custom information to be included in the contract for this order.`}
               >
                 <Input
                   name="extra"
                   inputType="multiline"
                   label={`Value`}
-                  tooltip={i18n`You must enter a value in JavaScript Object Notation (JSON).`}
+                  tooltip={i18n.str`You must enter a value in JavaScript Object Notation (JSON).`}
                 />
               </InputGroup>
             </FormProvider>
@@ -538,7 +538,7 @@ export function CreatePage({
             <div class="buttons is-right mt-5">
               {onBack && (
                 <button class="button" onClick={onBack}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
               )}
               <button
@@ -546,7 +546,7 @@ export function CreatePage({
                 onClick={submit}
                 disabled={hasErrors}
               >
-                <Translate>Confirm</Translate>
+                <i18n.Translate>Confirm</i18n.Translate>
               </button>
             </div>
           </div>