2 files changed, 26 insertions, 37 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index 7dcda4c52..ee5375859 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -15,15 +15,11 @@
  */
 
 /* eslint-disable react-hooks/rules-of-hooks */
-import {
-  Amounts,
-  TalerErrorDetail,
-  TalerProtocolTimestamp,
-} from "@gnu-taler/taler-util";
+import { Amounts, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 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 { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
@@ -71,6 +67,7 @@ export function useComponentState({
   return () => {
     const [subject, setSubject] = useState<string | undefined>();
     const [timestamp, setTimestamp] = useState<string | undefined>();
+    const { pushAlertOnError } = useAlertContext();
 
     const selectedExchange = useSelectedExchange({
       currency: amount.currency,
@@ -144,27 +141,20 @@ export function useComponentState({
 
     async function accept(): Promise<void> {
       if (!subject || !purse_expiration) return;
-      try {
-        const resp = await api.wallet.call(
-          WalletApiOperation.InitiatePeerPullPayment,
-          {
-            exchangeBaseUrl: exchange.exchangeBaseUrl,
-            partialContractTerms: {
-              amount: Amounts.stringify(amount),
-              summary: subject,
-              purse_expiration,
-            },
+
+      const resp = await api.wallet.call(
+        WalletApiOperation.InitiatePeerPullPayment,
+        {
+          exchangeBaseUrl: exchange.exchangeBaseUrl,
+          partialContractTerms: {
+            amount: Amounts.stringify(amount),
+            summary: subject,
+            purse_expiration,
           },
-        );
+        },
+      );
 
-        onSuccess(resp.transactionId);
-      } catch (e) {
-        if (e instanceof TalerError) {
-          // setOperationError(e.errorDetail);
-        }
-        console.error(e);
-        throw Error("error trying to accept");
-      }
+      onSuccess(resp.transactionId);
     }
     const unableToCreate =
       !subject || Amounts.isZero(amount) || !purse_expiration;
@@ -176,25 +166,25 @@ export function useComponentState({
           subject === undefined
             ? undefined
             : !subject
-              ? "Can't be empty"
-              : undefined,
+            ? "Can't be empty"
+            : undefined,
         value: subject ?? "",
-        onInput: async (e) => setSubject(e),
+        onInput: pushAlertOnError(async (e) => setSubject(e)),
       },
       expiration: {
         error: timestampError,
         value: timestamp === undefined ? "" : timestamp,
-        onInput: async (e) => {
+        onInput: pushAlertOnError(async (e) => {
           setTimestamp(e);
-        },
+        }),
       },
       doSelectExchange: selectedExchange.doSelect,
       exchangeUrl: exchange.exchangeBaseUrl,
       create: {
-        onClick: unableToCreate ? undefined : accept,
+        onClick: unableToCreate ? undefined : pushAlertOnError(accept),
       },
       cancel: {
-        onClick: onClose,
+        onClick: pushAlertOnError(onClose),
       },
       requestAmount,
       toBeReceived,
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
index 05b923c9e..4ab4dc8f6 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
@@ -19,14 +19,15 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { nullFunction } from "../../mui/handlers.js";
 import { ReadyView } from "./views.js";
 
 export default {
   title: "invoice create",
 };
 
-export const Ready = createExample(ReadyView, {
+export const Ready = tests.createExample(ReadyView, {
   requestAmount: {
     currency: "ARS",
     value: 1,
@@ -45,9 +46,7 @@ export const Ready = createExample(ReadyView, {
   exchangeUrl: "https://exchange.taler.ar",
   subject: {
     value: "some subject",
-    onInput: async () => {
-      null;
-    },
+    onInput: nullFunction,
   },
   create: {},
 });