1 files changed, 18 insertions, 15 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
index bca90e352..3639ae912 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx
@@ -19,12 +19,12 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { DatePicker } from "../../../../components/picker/DatePicker.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { CardTable } from "./Table.js";
 
 export interface ListPageProps {
@@ -74,8 +74,8 @@ export function ListPage({
   isNotWiredActive,
   onCreate,
 }: ListPageProps): VNode {
-  const i18n = useTranslator();
-  const dateTooltip = i18n`select date to show nearby orders`;
+  const { i18n } = useTranslationContext();
+  const dateTooltip = i18n.str`select date to show nearby orders`;
   const [pickDate, setPickDate] = useState(false);
   const [orderId, setOrderId] = useState<string>("");
 
@@ -91,13 +91,13 @@ export function ListPage({
                   type="text"
                   value={orderId}
                   onChange={(e) => setOrderId(e.currentTarget.value)}
-                  placeholder={i18n`order id`}
+                  placeholder={i18n.str`order id`}
                 />
                 {errorOrderId && <p class="help is-danger">{errorOrderId}</p>}
               </div>
               <span
                 class="has-tooltip-bottom"
-                data-tooltip={i18n`jump to order with the given order ID`}
+                data-tooltip={i18n.str`jump to order with the given order ID`}
               >
                 <button
                   class="button"
@@ -119,40 +119,40 @@ export function ListPage({
               <li class={isAllActive}>
                 <div
                   class="has-tooltip-right"
-                  data-tooltip={i18n`remove all filters`}
+                  data-tooltip={i18n.str`remove all filters`}
                 >
                   <a onClick={onShowAll}>
-                    <Translate>All</Translate>
+                    <i18n.Translate>All</i18n.Translate>
                   </a>
                 </div>
               </li>
               <li class={isPaidActive}>
                 <div
                   class="has-tooltip-right"
-                  data-tooltip={i18n`only show paid orders`}
+                  data-tooltip={i18n.str`only show paid orders`}
                 >
                   <a onClick={onShowPaid}>
-                    <Translate>Paid</Translate>
+                    <i18n.Translate>Paid</i18n.Translate>
                   </a>
                 </div>
               </li>
               <li class={isRefundedActive}>
                 <div
                   class="has-tooltip-right"
-                  data-tooltip={i18n`only show orders with refunds`}
+                  data-tooltip={i18n.str`only show orders with refunds`}
                 >
                   <a onClick={onShowRefunded}>
-                    <Translate>Refunded</Translate>
+                    <i18n.Translate>Refunded</i18n.Translate>
                   </a>
                 </div>
               </li>
               <li class={isNotWiredActive}>
                 <div
                   class="has-tooltip-left"
-                  data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`}
+                  data-tooltip={i18n.str`only show orders where customers paid, but wire payments from payment provider are still pending`}
                 >
                   <a onClick={onShowNotWired}>
-                    <Translate>Not wired</Translate>
+                    <i18n.Translate>Not wired</i18n.Translate>
                   </a>
                 </div>
               </li>
@@ -165,7 +165,10 @@ export function ListPage({
               {jumpToDate && (
                 <div class="control">
                   <a class="button" onClick={() => onSelectDate(undefined)}>
-                    <span class="icon" data-tooltip={i18n`clear date filter`}>
+                    <span
+                      class="icon"
+                      data-tooltip={i18n.str`clear date filter`}
+                    >
                       <i class="mdi mdi-close" />
                     </span>
                   </a>
@@ -178,7 +181,7 @@ export function ListPage({
                     type="text"
                     readonly
                     value={!jumpToDate ? "" : format(jumpToDate, "yyyy/MM/dd")}
-                    placeholder={i18n`date (YYYY/MM/DD)`}
+                    placeholder={i18n.str`date (YYYY/MM/DD)`}
                     onClick={() => {
                       setPickDate(true);
                     }}