fix #7152

4 files changed, 32 insertions, 35 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Payment/index.ts b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
index 2dc6b6741..e844c1706 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
@@ -21,12 +21,13 @@ import {
   PreparePayResultInsufficientBalance,
   PreparePayResultPaymentPossible,
 } from "@gnu-taler/taler-util";
+import { ErrorAlertView } from "../../components/CurrentAlerts.js";
 import { Loading } from "../../components/Loading.js";
-import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ErrorAlert } from "../../context/alert.js";
 import { ButtonHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
-import { BaseView, LoadingUriView } from "./views.js";
+import { BaseView } from "./views.js";
 
 export interface Props {
   talerPayUri?: string;
@@ -49,8 +50,8 @@ export namespace State {
     error: undefined;
   }
   export interface LoadingUriError {
-    status: "loading-uri";
-    error: HookError;
+    status: "error";
+    error: ErrorAlert;
   }
 
   interface BaseInfo {
@@ -86,7 +87,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "no-balance-for-currency": BaseView,
   "no-enough-balance": BaseView,
   confirmed: BaseView,
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
index d4adf4bcb..6d7ef6b20 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
@@ -23,7 +23,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
+import { alertFromError } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
+import { useTranslationContext } from "../../context/translation.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";
@@ -36,6 +38,7 @@ export function useComponentState({
 }: Props): State {
   const [payErrMsg, setPayErrMsg] = useState<TalerError | undefined>(undefined);
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
 
   const hook = useAsyncAsHook(async () => {
     if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");
@@ -80,10 +83,19 @@ export function useComponentState({
   if (!hook) return { status: "loading", error: undefined };
   if (hook.hasError) {
     return {
-      status: "loading-uri",
-      error: hook,
+      status: "error",
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
   const { payStatus } = hook.response;
 
   const amount = Amounts.parseOrThrow(payStatus.amountRaw);
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/test.ts b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
index 077930972..123e95a87 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
@@ -54,10 +54,10 @@ describe("Payment CTA states", () => {
           expect(error).undefined;
         },
         ({ status, error }) => {
-          expect(status).equals("loading-uri");
+          expect(status).equals("error");
           if (error === undefined) expect.fail();
-          expect(error.hasError).true;
-          expect(error.operational).false;
+          // expect(error.hasError).true;
+          // expect(error.operational).false;
         },
       ],
       TestingContext,
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index efc8bcfc4..244ac5886 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -19,28 +19,17 @@ import {
   Amounts,
   MerchantContractTerms as ContractTerms,
   PreparePayResultType,
+  TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { LoadingError } from "../../components/LoadingError.js";
 import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
-import { Link, SuccessBox, WarningBox } from "../../components/styled/index.js";
+import { SuccessBox, WarningBox } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { MerchantDetails, PurchaseDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load pay status</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 type SupportedStates =
   | State.Ready
   | State.Confirmed
@@ -66,17 +55,17 @@ export function BaseView(state: SupportedStates): VNode {
 
       <section style={{ textAlign: "left" }}>
         <Part
-          title={<i18n.Translate>Purchase</i18n.Translate>}
-          text={contractTerms.summary}
+          title={i18n.str`Purchase`}
+          text={contractTerms.summary as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Merchant</i18n.Translate>}
+          title={i18n.str`Merchant`}
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <PurchaseDetails
               price={price}
@@ -93,14 +82,14 @@ export function BaseView(state: SupportedStates): VNode {
         />
         {contractTerms.order_id && (
           <Part
-            title={<i18n.Translate>Receipt</i18n.Translate>}
-            text={`#${contractTerms.order_id}`}
+            title={i18n.str`Receipt`}
+            text={`#${contractTerms.order_id}` as TranslatedString}
             kind="neutral"
           />
         )}
         {contractTerms.pay_deadline && (
           <Part
-            title={<i18n.Translate>Valid until</i18n.Translate>}
+            title={i18n.str`Valid until`}
             text={
               <Time
                 timestamp={AbsoluteTime.fromTimestamp(
@@ -121,11 +110,6 @@ export function BaseView(state: SupportedStates): VNode {
         payHandler={state.status === "ready" ? state.payHandler : undefined}
         goToWalletManualWithdraw={state.goToWalletManualWithdraw}
       />
-      <section>
-        <Link upperCased onClick={state.cancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </Fragment>
   );
 }