From 9b04d8bf3581d162cbd631892ca115df811c46f8 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 9 Jan 2023 08:38:48 -0300
Subject: fix #7152

---
 .../src/wallet/Transaction.tsx                     | 119 ++++++++++-----------
 1 file changed, 59 insertions(+), 60 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index b7eb4a947..542694490 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -32,6 +32,7 @@ import {
   TransactionRefund,
   TransactionTip,
   TransactionType,
+  TranslatedString,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
@@ -43,9 +44,8 @@ import emptyImg from "../../static/img/empty.png";
 import { Amount } from "../components/Amount.js";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
 import { CopyButton } from "../components/CopyButton.js";
-import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
+import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
 import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
 import { QR } from "../components/QR.js";
 import { ShowFullContractTermPopup } from "../components/ShowFullContractTermPopup.js";
@@ -60,6 +60,7 @@ import {
   WarningBox,
 } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
+import { alertFromError } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
@@ -98,13 +99,11 @@ export function TransactionPage({
 
   if (state.hasError) {
     return (
-      <LoadingError
-        title={
-          <i18n.Translate>
-            Could not load the transaction information
-          </i18n.Translate>
-        }
-        error={state}
+      <AlertView
+        alert={alertFromError(
+          i18n.str`Could not load transaction information`,
+          state,
+        )}
       />
     );
   }
@@ -199,14 +198,14 @@ export function TransactionView({
     return (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
-          <ErrorTalerOperation
-            title={
-              <i18n.Translate>
-                There was an error trying to complete the transaction
-              </i18n.Translate>
-            }
-            error={transaction?.error}
-          />
+          {transaction?.error ? (
+            <ErrorAlertView
+              error={alertFromError(
+                i18n.str`There was an error trying to complete the transaction`,
+                transaction.error,
+              )}
+            />
+          ) : undefined}
           {transaction.pending && (
             <WarningBox>
               <i18n.Translate>This transaction is not completed</i18n.Translate>
@@ -367,7 +366,7 @@ export function TransactionView({
           </Fragment>
         )}
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <WithdrawDetails
               amount={{
@@ -420,7 +419,7 @@ export function TransactionView({
         <br />
         {transaction.refunds.length > 0 ? (
           <Part
-            title={<i18n.Translate>Refunds</i18n.Translate>}
+            title={i18n.str`Refunds`}
             text={
               <table>
                 {transaction.refunds.map((r, i) => {
@@ -462,7 +461,7 @@ export function TransactionView({
               picked up.
             </i18n.Translate>
             <Part
-              title={<i18n.Translate>Offer</i18n.Translate>}
+              title={i18n.str`Offer`}
               text={<Amount value={pendingRefund} />}
               kind="positive"
             />
@@ -480,17 +479,17 @@ export function TransactionView({
           </InfoBox>
         )}
         <Part
-          title={<i18n.Translate>Merchant</i18n.Translate>}
+          title={i18n.str`Merchant`}
           text={<MerchantDetails merchant={transaction.info.merchant} />}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Invoice ID</i18n.Translate>}
-          text={transaction.info.orderId}
+          title={i18n.str`Invoice ID`}
+          text={transaction.info.orderId as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <PurchaseDetails
               price={price}
@@ -520,12 +519,12 @@ export function TransactionView({
         </Header>
         {payto && <PartPayto payto={payto} kind="neutral" />}
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={<DepositDetails transaction={transaction} />}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Wire transfer deadline</i18n.Translate>}
+          title={i18n.str`Wire transfer deadline`}
           text={
             <Time
               timestamp={AbsoluteTime.fromTimestamp(
@@ -557,7 +556,7 @@ export function TransactionView({
           {transaction.exchangeBaseUrl}
         </Header>
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={<RefreshDetails transaction={transaction} />}
         />
       </TransactionTemplate>
@@ -578,12 +577,12 @@ export function TransactionView({
           {transaction.merchantBaseUrl}
         </Header>
         {/* <Part
-          title={<i18n.Translate>Merchant</i18n.Translate>}
+          title={i18n.str`Merchant`}
           text={<MerchantDetails merchant={transaction.merchant} />}
           kind="neutral"
         /> */}
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={<TipDetails transaction={transaction} />}
         />
       </TransactionTemplate>
@@ -604,12 +603,12 @@ export function TransactionView({
         </Header>
 
         <Part
-          title={<i18n.Translate>Merchant</i18n.Translate>}
-          text={transaction.info.merchant.name}
+          title={i18n.str`Merchant`}
+          text={transaction.info.merchant.name as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Original order ID</i18n.Translate>}
+          title={i18n.str`Original order ID`}
           text={
             <a
               href={Pages.balanceTransaction({
@@ -622,12 +621,12 @@ export function TransactionView({
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Purchase summary</i18n.Translate>}
-          text={transaction.info.summary}
+          title={i18n.str`Purchase summary`}
+          text={transaction.info.summary as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={<RefundDetails transaction={transaction} />}
         />
       </TransactionTemplate>
@@ -683,25 +682,25 @@ export function TransactionView({
 
         {transaction.info.summary ? (
           <Part
-            title={<i18n.Translate>Subject</i18n.Translate>}
-            text={transaction.info.summary}
+            title={i18n.str`Subject`}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
-          text={transaction.exchangeBaseUrl}
+          title={i18n.str`Exchange`}
+          text={transaction.exchangeBaseUrl as TranslatedString}
           kind="neutral"
         />
         {transaction.pending /** pending is not-pay */ && (
           <Part
-            title={<i18n.Translate>URI</i18n.Translate>}
+            title={i18n.str`URI`}
             text={<ShowQrWithCopy text={transaction.talerUri} />}
             kind="neutral"
           />
         )}
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <InvoiceDetails
               amount={{
@@ -730,18 +729,18 @@ export function TransactionView({
 
         {transaction.info.summary ? (
           <Part
-            title={<i18n.Translate>Subject</i18n.Translate>}
-            text={transaction.info.summary}
+            title={i18n.str`Subject`}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
-          text={transaction.exchangeBaseUrl}
+          title={i18n.str`Exchange`}
+          text={transaction.exchangeBaseUrl as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <InvoiceDetails
               amount={{
@@ -769,25 +768,25 @@ export function TransactionView({
 
         {transaction.info.summary ? (
           <Part
-            title={<i18n.Translate>Subject</i18n.Translate>}
-            text={transaction.info.summary}
+            title={i18n.str`Subject`}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
-          text={transaction.exchangeBaseUrl}
+          title={i18n.str`Exchange`}
+          text={transaction.exchangeBaseUrl as TranslatedString}
           kind="neutral"
         />
         {/* {transaction.pending && ( //pending is not-received 
             )} */}
         <Part
-          title={<i18n.Translate>URI</i18n.Translate>}
+          title={i18n.str`URI`}
           text={<ShowQrWithCopy text={transaction.talerUri} />}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <TransferDetails
               amount={{
@@ -816,18 +815,18 @@ export function TransactionView({
 
         {transaction.info.summary ? (
           <Part
-            title={<i18n.Translate>Subject</i18n.Translate>}
-            text={transaction.info.summary}
+            title={i18n.str`Subject`}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
-          text={transaction.exchangeBaseUrl}
+          title={i18n.str`Exchange`}
+          text={transaction.exchangeBaseUrl as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <TransferDetails
               amount={{
@@ -1245,7 +1244,7 @@ export function PurchaseDetails({
           <td colSpan={2}>
             <PartCollapsible
               big
-              title={<i18n.Translate>Products</i18n.Translate>}
+              title={i18n.str`Products`}
               text={
                 <ListOfProducts>
                   {info.products?.map((p, k) => (
@@ -1274,7 +1273,7 @@ export function PurchaseDetails({
           <td colSpan={2}>
             <PartCollapsible
               big
-              title={<i18n.Translate>Delivery</i18n.Translate>}
+              title={i18n.str`Delivery`}
               text={
                 <DeliveryDetails
                   date={info.delivery_date}
@@ -1508,7 +1507,7 @@ function Header({
   total: AmountJson;
   children: ComponentChildren;
   kind: Kind;
-  type: string;
+  type: TranslatedString;
 }): VNode {
   return (
     <div
-- 
cgit v1.2.3