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

---
 .../paths/instance/orders/details/DetailPage.tsx   | 151 +++++++++++----------
 1 file changed, 77 insertions(+), 74 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx')

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
index e8927dd70..1fba3c3e9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -20,6 +20,7 @@
  */
 
 import { AmountJson, Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -34,7 +35,6 @@ import { TextField } from "../../../../components/form/TextField.js";
 import { ProductList } from "../../../../components/product/ProductList.js";
 import { useBackendContext } from "../../../../context/backend.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { mergeRefunds } from "../../../../utils/amount.js";
 import { RefundModal } from "../list/Table.js";
 import { Event, Timeline } from "./Timeline.js";
@@ -56,84 +56,84 @@ type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse;
 type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse;
 
 function ContractTerms({ value }: { value: CT }) {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
-    <InputGroup name="contract_terms" label={i18n`Contract Terms`}>
+    <InputGroup name="contract_terms" label={i18n.str`Contract Terms`}>
       <FormProvider<CT> object={value} valueHandler={null}>
         <Input<CT>
           readonly
           name="summary"
-          label={i18n`Summary`}
-          tooltip={i18n`human-readable description of the whole purchase`}
+          label={i18n.str`Summary`}
+          tooltip={i18n.str`human-readable description of the whole purchase`}
         />
         <InputCurrency<CT>
           readonly
           name="amount"
-          label={i18n`Amount`}
-          tooltip={i18n`total price for the transaction`}
+          label={i18n.str`Amount`}
+          tooltip={i18n.str`total price for the transaction`}
         />
         {value.fulfillment_url && (
           <Input<CT>
             readonly
             name="fulfillment_url"
-            label={i18n`Fulfillment URL`}
-            tooltip={i18n`URL for this purchase`}
+            label={i18n.str`Fulfillment URL`}
+            tooltip={i18n.str`URL for this purchase`}
           />
         )}
         <Input<CT>
           readonly
           name="max_fee"
-          label={i18n`Max fee`}
-          tooltip={i18n`maximum total deposit fee accepted by the merchant for this contract`}
+          label={i18n.str`Max fee`}
+          tooltip={i18n.str`maximum total deposit fee accepted by the merchant for this contract`}
         />
         <Input<CT>
           readonly
           name="max_wire_fee"
-          label={i18n`Max wire fee`}
-          tooltip={i18n`maximum wire fee accepted by the merchant`}
+          label={i18n.str`Max wire fee`}
+          tooltip={i18n.str`maximum wire fee accepted by the merchant`}
         />
         <Input<CT>
           readonly
           name="wire_fee_amortization"
-          label={i18n`Wire fee amortization`}
-          tooltip={i18n`over how many customer transactions does the merchant expect to amortize wire fees on average`}
+          label={i18n.str`Wire fee amortization`}
+          tooltip={i18n.str`over how many customer transactions does the merchant expect to amortize wire fees on average`}
         />
         <InputDate<CT>
           readonly
           name="timestamp"
-          label={i18n`Created at`}
-          tooltip={i18n`time when this contract was generated`}
+          label={i18n.str`Created at`}
+          tooltip={i18n.str`time when this contract was generated`}
         />
         <InputDate<CT>
           readonly
           name="refund_deadline"
-          label={i18n`Refund deadline`}
-          tooltip={i18n`after this deadline has passed no refunds will be accepted`}
+          label={i18n.str`Refund deadline`}
+          tooltip={i18n.str`after this deadline has passed no refunds will be accepted`}
         />
         <InputDate<CT>
           readonly
           name="pay_deadline"
-          label={i18n`Payment deadline`}
-          tooltip={i18n`after this deadline, the merchant won't accept payments for the contract`}
+          label={i18n.str`Payment deadline`}
+          tooltip={i18n.str`after this deadline, the merchant won't accept payments for the contract`}
         />
         <InputDate<CT>
           readonly
           name="wire_transfer_deadline"
-          label={i18n`Wire transfer deadline`}
-          tooltip={i18n`transfer deadline for the exchange`}
+          label={i18n.str`Wire transfer deadline`}
+          tooltip={i18n.str`transfer deadline for the exchange`}
         />
         <InputDate<CT>
           readonly
           name="delivery_date"
-          label={i18n`Delivery date`}
-          tooltip={i18n`time indicating when the order should be delivered`}
+          label={i18n.str`Delivery date`}
+          tooltip={i18n.str`time indicating when the order should be delivered`}
         />
         {value.delivery_date && (
           <InputGroup
             name="delivery_location"
-            label={i18n`Location`}
-            tooltip={i18n`where the order will be delivered`}
+            label={i18n.str`Location`}
+            tooltip={i18n.str`where the order will be delivered`}
           >
             <InputLocation name="payments.delivery_location" />
           </InputGroup>
@@ -141,14 +141,14 @@ function ContractTerms({ value }: { value: CT }) {
         <InputDuration<CT>
           readonly
           name="auto_refund"
-          label={i18n`Auto-refund delay`}
-          tooltip={i18n`how long the wallet should try to get an automatic refund for the purchase`}
+          label={i18n.str`Auto-refund delay`}
+          tooltip={i18n.str`how long the wallet should try to get an automatic refund for the purchase`}
         />
         <Input<CT>
           readonly
           name="extra"
-          label={i18n`Extra info`}
-          tooltip={i18n`extra data that is only interpreted by the merchant frontend`}
+          label={i18n.str`Extra info`}
+          tooltip={i18n.str`extra data that is only interpreted by the merchant frontend`}
         />
       </FormProvider>
     </InputGroup>
@@ -203,7 +203,7 @@ function ClaimedPage({
   }
 
   const [value, valueHandler] = useState<Partial<Claimed>>(order);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div>
@@ -216,9 +216,9 @@ function ClaimedPage({
                 <div class="level">
                   <div class="level-left">
                     <div class="level-item">
-                      <Translate>Order</Translate> #{id}
+                      <i18n.Translate>Order</i18n.Translate> #{id}
                       <div class="tag is-info ml-4">
-                        <Translate>claimed</Translate>
+                        <i18n.Translate>claimed</i18n.Translate>
                       </div>
                     </div>
                   </div>
@@ -244,7 +244,7 @@ function ClaimedPage({
                       >
                         <p>
                           <b>
-                            <Translate>claimed at</Translate>:
+                            <i18n.Translate>claimed at</i18n.Translate>:
                           </b>{" "}
                           {format(
                             new Date(order.contract_terms.timestamp.t_s * 1000),
@@ -262,13 +262,13 @@ function ClaimedPage({
               <div class="columns">
                 <div class="column is-4">
                   <div class="title">
-                    <Translate>Timeline</Translate>
+                    <i18n.Translate>Timeline</i18n.Translate>
                   </div>
                   <Timeline events={events} />
                 </div>
                 <div class="column is-8">
                   <div class="title">
-                    <Translate>Payment details</Translate>
+                    <i18n.Translate>Payment details</i18n.Translate>
                   </div>
                   <FormProvider<Claimed>
                     object={value}
@@ -278,17 +278,17 @@ function ClaimedPage({
                       name="contract_terms.summary"
                       readonly
                       inputType="multiline"
-                      label={i18n`Summary`}
+                      label={i18n.str`Summary`}
                     />
                     <InputCurrency
                       name="contract_terms.amount"
                       readonly
-                      label={i18n`Amount`}
+                      label={i18n.str`Amount`}
                     />
                     <Input<Claimed>
                       name="order_status"
                       readonly
-                      label={i18n`Order status`}
+                      label={i18n.str`Order status`}
                     />
                   </FormProvider>
                 </div>
@@ -298,7 +298,7 @@ function ClaimedPage({
             {order.contract_terms.products.length ? (
               <Fragment>
                 <div class="title">
-                  <Translate>Product list</Translate>
+                  <i18n.Translate>Product list</i18n.Translate>
                 </div>
                 <ProductList list={order.contract_terms.products} />
               </Fragment>
@@ -426,7 +426,7 @@ function PaidPage({
   const refundurl = `${proto}://refund/${refundHost}/${order.contract_terms.order_id}/`;
   const refundable =
     new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000;
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const amount = Amounts.parseOrThrow(order.contract_terms.amount);
   const refund_taken = order.refund_details.reduce((prev, cur) => {
@@ -446,18 +446,18 @@ function PaidPage({
                 <div class="level">
                   <div class="level-left">
                     <div class="level-item">
-                      <Translate>Order</Translate> #{id}
+                      <i18n.Translate>Order</i18n.Translate> #{id}
                       <div class="tag is-success ml-4">
-                        <Translate>paid</Translate>
+                        <i18n.Translate>paid</i18n.Translate>
                       </div>
                       {order.wired ? (
                         <div class="tag is-success ml-4">
-                          <Translate>wired</Translate>
+                          <i18n.Translate>wired</i18n.Translate>
                         </div>
                       ) : null}
                       {order.refunded ? (
                         <div class="tag is-danger ml-4">
-                          <Translate>refunded</Translate>
+                          <i18n.Translate>refunded</i18n.Translate>
                         </div>
                       ) : null}
                     </div>
@@ -477,8 +477,8 @@ function PaidPage({
                             class="has-tooltip-left"
                             data-tooltip={
                               refundable
-                                ? i18n`refund order`
-                                : i18n`not refundable`
+                                ? i18n.str`refund order`
+                                : i18n.str`not refundable`
                             }
                           >
                             <button
@@ -486,7 +486,7 @@ function PaidPage({
                               disabled={!refundable}
                               onClick={() => onRefund(id)}
                             >
-                              <Translate>refund</Translate>
+                              <i18n.Translate>refund</i18n.Translate>
                             </button>
                           </span>
                         </div>
@@ -533,41 +533,41 @@ function PaidPage({
               <div class="columns">
                 <div class="column is-4">
                   <div class="title">
-                    <Translate>Timeline</Translate>
+                    <i18n.Translate>Timeline</i18n.Translate>
                   </div>
                   <Timeline events={events} />
                 </div>
                 <div class="column is-8">
                   <div class="title">
-                    <Translate>Payment details</Translate>
+                    <i18n.Translate>Payment details</i18n.Translate>
                   </div>
                   <FormProvider<Paid>
                     object={value}
                     valueHandler={valueHandler}
                   >
-                    {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n`Deposit total`} /> */}
+                    {/* <InputCurrency<Paid> name="deposit_total" readonly label={i18n.str`Deposit total`} /> */}
                     {order.refunded && (
                       <InputCurrency<Paid>
                         name="refund_amount"
                         readonly
-                        label={i18n`Refunded amount`}
+                        label={i18n.str`Refunded amount`}
                       />
                     )}
                     {order.refunded && (
                       <InputCurrency<Paid>
                         name="refund_taken"
                         readonly
-                        label={i18n`Refund taken`}
+                        label={i18n.str`Refund taken`}
                       />
                     )}
                     <Input<Paid>
                       name="order_status"
                       readonly
-                      label={i18n`Order status`}
+                      label={i18n.str`Order status`}
                     />
                     <TextField<Paid>
                       name="order_status_url"
-                      label={i18n`Status URL`}
+                      label={i18n.str`Status URL`}
                     >
                       <a
                         target="_blank"
@@ -580,7 +580,7 @@ function PaidPage({
                     {order.refunded && (
                       <TextField<Paid>
                         name="order_status_url"
-                        label={i18n`Refund URI`}
+                        label={i18n.str`Refund URI`}
                       >
                         <a target="_blank" rel="noreferrer" href={refundurl}>
                           {refundurl}
@@ -595,7 +595,7 @@ function PaidPage({
             {order.contract_terms.products.length ? (
               <Fragment>
                 <div class="title">
-                  <Translate>Product list</Translate>
+                  <i18n.Translate>Product list</i18n.Translate>
                 </div>
                 <ProductList list={order.contract_terms.products} />
               </Fragment>
@@ -620,7 +620,7 @@ function UnpaidPage({
   order: MerchantBackend.Orders.CheckPaymentUnpaidResponse;
 }) {
   const [value, valueHandler] = useState<Partial<Unpaid>>(order);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div>
       <section class="hero is-hero-bar">
@@ -629,11 +629,11 @@ function UnpaidPage({
             <div class="level-left">
               <div class="level-item">
                 <h1 class="title">
-                  <Translate>Order</Translate> #{id}
+                  <i18n.Translate>Order</i18n.Translate> #{id}
                 </h1>
               </div>
               <div class="tag is-dark">
-                <Translate>unpaid</Translate>
+                <i18n.Translate>unpaid</i18n.Translate>
               </div>
             </div>
           </div>
@@ -651,7 +651,7 @@ function UnpaidPage({
                 >
                   <p>
                     <b>
-                      <Translate>pay at</Translate>:
+                      <i18n.Translate>pay at</i18n.Translate>:
                     </b>{" "}
                     <a
                       href={order.order_status_url}
@@ -663,7 +663,7 @@ function UnpaidPage({
                   </p>
                   <p>
                     <b>
-                      <Translate>created at</Translate>:
+                      <i18n.Translate>created at</i18n.Translate>:
                     </b>{" "}
                     {order.creation_time.t_s === "never"
                       ? "never"
@@ -687,26 +687,29 @@ function UnpaidPage({
               <Input<Unpaid>
                 readonly
                 name="summary"
-                label={i18n`Summary`}
-                tooltip={i18n`human-readable description of the whole purchase`}
+                label={i18n.str`Summary`}
+                tooltip={i18n.str`human-readable description of the whole purchase`}
               />
               <InputCurrency<Unpaid>
                 readonly
                 name="total_amount"
-                label={i18n`Amount`}
-                tooltip={i18n`total price for the transaction`}
+                label={i18n.str`Amount`}
+                tooltip={i18n.str`total price for the transaction`}
               />
               <Input<Unpaid>
                 name="order_status"
                 readonly
-                label={i18n`Order status`}
+                label={i18n.str`Order status`}
               />
               <Input<Unpaid>
                 name="order_status_url"
                 readonly
-                label={i18n`Order status URL`}
+                label={i18n.str`Order status URL`}
               />
-              <TextField<Unpaid> name="taler_pay_uri" label={i18n`Payment URI`}>
+              <TextField<Unpaid>
+                name="taler_pay_uri"
+                label={i18n.str`Payment URI`}
+              >
                 <a target="_blank" rel="noreferrer" href={value.taler_pay_uri}>
                   {value.taler_pay_uri}
                 </a>
@@ -722,7 +725,7 @@ function UnpaidPage({
 
 export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
   const [showRefund, setShowRefund] = useState<string | undefined>(undefined);
-
+  const { i18n } = useTranslationContext();
   const DetailByStatus = function () {
     switch (selected.order_status) {
       case "claimed":
@@ -734,10 +737,10 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
       default:
         return (
           <div>
-            <Translate>
+            <i18n.Translate>
               Unknown order status. This is an error, please contact the
               administrator.
-            </Translate>
+            </i18n.Translate>
           </div>
         );
     }
@@ -761,7 +764,7 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode {
         <div class="column is-four-fifths">
           <div class="buttons is-right mt-5">
             <button class="button" onClick={onBack}>
-              <Translate>Back</Translate>
+              <i18n.Translate>Back</i18n.Translate>
             </button>
           </div>
         </div>
-- 
cgit v1.2.3

