fix #7152

3 files changed, 38 insertions, 57 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
index 0569e8e5f..f39ab6794 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
@@ -14,16 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AmountJson } 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 { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js";
 import { NoExchangesView } from "../../wallet/ExchangeSelection/views.js";
 import { useComponentState } from "./state.js";
-import { LoadingUriView, ReadyView } from "./views.js";
+import { ReadyView } from "./views.js";
 
 export interface Props {
   amount: string;
@@ -45,8 +46,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
-    error: HookError;
+    status: "error";
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -63,13 +64,12 @@ export namespace State {
     requestAmount: AmountJson;
     exchangeUrl: string;
     error: undefined;
-    operationError?: TalerErrorDetail;
   }
 }
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "no-exchange": NoExchangesView,
   "selecting-exchange": ExchangeSelectionPage,
   ready: ReadyView,
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index 998270e53..46b1262b1 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -23,7 +23,9 @@ import {
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { isFuture, parse } from "date-fns";
 import { 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 { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";
@@ -40,6 +42,7 @@ export function useComponentState({
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListExchanges, {}),
   );
+  const { i18n } = useTranslationContext();
 
   if (!hook) {
     return {
@@ -49,10 +52,19 @@ export function useComponentState({
   }
   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 exchangeList = hook.response.exchanges;
 
@@ -60,10 +72,6 @@ export function useComponentState({
     const [subject, setSubject] = useState<string | undefined>();
     const [timestamp, setTimestamp] = useState<string | undefined>();
 
-    const [operationError, setOperationError] = useState<
-      TalerErrorDetail | undefined
-    >(undefined);
-
     const selectedExchange = useSelectedExchange({
       currency: amount.currency,
       defaultExchange: undefined,
@@ -93,11 +101,19 @@ export function useComponentState({
         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,
+        ),
       };
+      // return {
+      //   status: "loading-uri",
+      //   error: hook,
+      // };
     }
 
     const { amountEffective, amountRaw } = hook.response;
@@ -160,8 +176,8 @@ export function useComponentState({
           subject === undefined
             ? undefined
             : !subject
-            ? "Can't be empty"
-            : undefined,
+              ? "Can't be empty"
+              : undefined,
         value: subject ?? "",
         onInput: async (e) => setSubject(e),
       },
@@ -183,7 +199,6 @@ export function useComponentState({
       requestAmount,
       toBeReceived,
       error: undefined,
-      operationError,
     };
   };
 }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index 0ef5c697e..10e0e68d5 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -17,41 +17,24 @@
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { QR } from "../../components/QR.js";
 import {
-  Link,
   SubTitle,
   SvgIcon,
   WalletAction,
 } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { Grid } from "../../mui/Grid.js";
 import { TextField } from "../../mui/TextField.js";
 import editIcon from "../../svg/edit_24px.svg";
 import { ExchangeDetails, InvoiceDetails } 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</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 export function ReadyView({
   exchangeUrl,
   subject,
   expiration,
-  cancel,
-  operationError,
   create,
   toBeReceived,
   requestAmount,
@@ -59,7 +42,7 @@ export function ReadyView({
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
-  async function oneDayExpiration() {
+  async function oneDayExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24, "dd/MM/yyyy"),
@@ -67,14 +50,14 @@ export function ReadyView({
     }
   }
 
-  async function oneWeekExpiration() {
+  async function oneWeekExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24 * 7, "dd/MM/yyyy"),
       );
     }
   }
-  async function _20DaysExpiration() {
+  async function _20DaysExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24 * 20, "dd/MM/yyyy"),
@@ -87,16 +70,6 @@ export function ReadyView({
       <SubTitle>
         <i18n.Translate>Digital invoice</i18n.Translate>
       </SubTitle>
-      {operationError && (
-        <ErrorTalerOperation
-          title={
-            <i18n.Translate>
-              Could not finish the invoice creation
-            </i18n.Translate>
-          }
-          error={operationError}
-        />
-      )}
       <section style={{ textAlign: "left" }}>
         <Part
           title={
@@ -125,9 +98,7 @@ export function ReadyView({
             label="Subject"
             variant="filled"
             error={subject.error}
-            helperText={
-              <i18n.Translate>Short description of the invoice</i18n.Translate>
-            }
+            helperText={i18n.str`Short description of the invoice`}
             required
             fullWidth
             value={subject.value}
@@ -171,7 +142,7 @@ export function ReadyView({
         </p>
 
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <InvoiceDetails
               amount={{
@@ -187,11 +158,6 @@ export function ReadyView({
           <i18n.Translate>Create</i18n.Translate>
         </Button>
       </section>
-      <section>
-        <Link upperCased onClick={cancel.onClick}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }