1 files changed, 36 insertions, 32 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
index a1ec8d291..b0a836f81 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx
@@ -20,6 +20,7 @@
  */
 
 import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { StateUpdater, useState } from "preact/hooks";
@@ -34,7 +35,6 @@ import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { ConfirmModal } from "../../../../components/modal/index.js";
 import { useConfigContext } from "../../../../context/config.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { mergeRefunds } from "../../../../utils/amount.js";
 
 type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId;
@@ -63,7 +63,7 @@ export function CardTable({
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="card has-table">
@@ -72,13 +72,13 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-cash-register" />
           </span>
-          <Translate>Orders</Translate>
+          <i18n.Translate>Orders</i18n.Translate>
         </p>
 
         <div class="card-header-icon" aria-label="more options" />
 
         <div class="card-header-icon" aria-label="more options">
-          <span class="has-tooltip-left" data-tooltip={i18n`create order`}>
+          <span class="has-tooltip-left" data-tooltip={i18n.str`create order`}>
             <button class="button is-info" type="button" onClick={onCreate}>
               <span class="icon is-small">
                 <i class="mdi mdi-plus mdi-36px" />
@@ -135,6 +135,7 @@ function Table({
   hasMoreAfter,
   hasMoreBefore,
 }: TableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       {onLoadMoreBefore && (
@@ -143,20 +144,20 @@ function Table({
           disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
-          <Translate>load newer orders</Translate>
+          <i18n.Translate>load newer orders</i18n.Translate>
         </button>
       )}
       <table class="table is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th style={{ minWidth: 100 }}>
-              <Translate>Date</Translate>
+              <i18n.Translate>Date</i18n.Translate>
             </th>
             <th style={{ minWidth: 100 }}>
-              <Translate>Amount</Translate>
+              <i18n.Translate>Amount</i18n.Translate>
             </th>
             <th style={{ minWidth: 400 }}>
-              <Translate>Summary</Translate>
+              <i18n.Translate>Summary</i18n.Translate>
             </th>
             <th style={{ minWidth: 50 }} />
           </tr>
@@ -196,7 +197,7 @@ function Table({
                         type="button"
                         onClick={(): void => onRefund(i)}
                       >
-                        <Translate>Refund</Translate>
+                        <i18n.Translate>Refund</i18n.Translate>
                       </button>
                     )}
                     {!i.paid && (
@@ -205,7 +206,7 @@ function Table({
                         type="button"
                         onClick={(): void => onCopyURL(i)}
                       >
-                        <Translate>copy url</Translate>
+                        <i18n.Translate>copy url</i18n.Translate>
                       </button>
                     )}
                   </div>
@@ -221,7 +222,7 @@ function Table({
           disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
-          <Translate>load older orders</Translate>
+          <i18n.Translate>load older orders</i18n.Translate>
         </button>
       )}
     </div>
@@ -229,6 +230,7 @@ function Table({
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -237,7 +239,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>No orders have been found matching your query!</Translate>
+        <i18n.Translate>
+          No orders have been found matching your query!
+        </i18n.Translate>
       </p>
     </div>
   );
@@ -256,7 +260,7 @@ export function RefundModal({
 }: RefundModalProps): VNode {
   type State = { mainReason?: string; description?: string; refund?: string };
   const [form, setValue] = useState<State>({});
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   // const [errors, setErrors] = useState<FormErrors<State>>({});
 
   const refunds = (
@@ -281,20 +285,20 @@ export function RefundModal({
     : orderPrice;
 
   const isRefundable = Amounts.isNonZero(totalRefundable);
-  const duplicatedText = i18n`duplicated`;
+  const duplicatedText = i18n.str`duplicated`;
 
   const errors: FormErrors<State> = {
-    mainReason: !form.mainReason ? i18n`required` : undefined,
+    mainReason: !form.mainReason ? i18n.str`required` : undefined,
     description:
       !form.description && form.mainReason !== duplicatedText
-        ? i18n`required`
+        ? i18n.str`required`
         : undefined,
     refund: !form.refund
-      ? i18n`required`
+      ? i18n.str`required`
       : !Amounts.parse(form.refund)
-      ? i18n`invalid format`
+      ? i18n.str`invalid format`
       : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1
-      ? i18n`this value exceed the refundable amount`
+      ? i18n.str`this value exceed the refundable amount`
       : undefined,
   };
   const hasErrors = Object.keys(errors).some(
@@ -339,13 +343,13 @@ export function RefundModal({
                 <thead>
                   <tr>
                     <th>
-                      <Translate>date</Translate>
+                      <i18n.Translate>date</i18n.Translate>
                     </th>
                     <th>
-                      <Translate>amount</Translate>
+                      <i18n.Translate>amount</i18n.Translate>
                     </th>
                     <th>
-                      <Translate>reason</Translate>
+                      <i18n.Translate>reason</i18n.Translate>
                     </th>
                   </tr>
                 </thead>
@@ -381,28 +385,28 @@ export function RefundModal({
         >
           <InputCurrency<State>
             name="refund"
-            label={i18n`Refund`}
-            tooltip={i18n`amount to be refunded`}
+            label={i18n.str`Refund`}
+            tooltip={i18n.str`amount to be refunded`}
           >
-            <Translate>Max refundable:</Translate>{" "}
+            <i18n.Translate>Max refundable:</i18n.Translate>{" "}
             {Amounts.stringify(totalRefundable)}
           </InputCurrency>
           <InputSelector
             name="mainReason"
-            label={i18n`Reason`}
+            label={i18n.str`Reason`}
             values={[
-              i18n`Choose one...`,
+              i18n.str`Choose one...`,
               duplicatedText,
-              i18n`requested by the customer`,
-              i18n`other`,
+              i18n.str`requested by the customer`,
+              i18n.str`other`,
             ]}
-            tooltip={i18n`why this order is being refunded`}
+            tooltip={i18n.str`why this order is being refunded`}
           />
           {form.mainReason && form.mainReason !== duplicatedText ? (
             <Input<State>
-              label={i18n`Description`}
+              label={i18n.str`Description`}
               name="description"
-              tooltip={i18n`more information to give context`}
+              tooltip={i18n.str`more information to give context`}
             />
           ) : undefined}
         </FormProvider>