fix #7411, also making the backup payment visible

1 files changed, 54 insertions, 33 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index 27f05ce03..4ce81dad8 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -15,7 +15,11 @@
  */
 
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
+import {
+  Amounts,
+  TalerErrorDetail,
+  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";
@@ -32,7 +36,9 @@ export function useComponentState(
 ): RecursiveState<State> {
   const amount = Amounts.parseOrThrow(amountStr);
 
-  const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListExchanges, {}));
+  const hook = useAsyncAsHook(() =>
+    api.wallet.call(WalletApiOperation.ListExchanges, {}),
+  );
 
   if (!hook) {
     return {
@@ -51,7 +57,7 @@ export function useComponentState(
 
   return () => {
     const [subject, setSubject] = useState<string | undefined>();
-    const [timestamp, setTimestamp] = useState<string | undefined>()
+    const [timestamp, setTimestamp] = useState<string | undefined>();
 
     const [operationError, setOperationError] = useState<
       TalerErrorDetail | undefined
@@ -70,45 +76,51 @@ export function useComponentState(
     const exchange = selectedExchange.selected;
 
     const hook = useAsyncAsHook(async () => {
-      const resp = await api.wallet.call(WalletApiOperation.PreparePeerPullPayment, {
-        amount: amountStr,
-        exchangeBaseUrl: exchange.exchangeBaseUrl,
-      })
-      return resp
-    })
+      const resp = await api.wallet.call(
+        WalletApiOperation.PreparePeerPullPayment,
+        {
+          amount: amountStr,
+          exchangeBaseUrl: exchange.exchangeBaseUrl,
+        },
+      );
+      return resp;
+    });
 
     if (!hook) {
       return {
         status: "loading",
-        error: undefined
-      }
+        error: undefined,
+      };
     }
     if (hook.hasError) {
       return {
         status: "loading-uri",
-        error: hook
-      }
+        error: hook,
+      };
     }
 
-    const { amountEffective, amountRaw } = hook.response
-    const requestAmount = Amounts.parseOrThrow(amountRaw)
-    const toBeReceived = Amounts.parseOrThrow(amountEffective)
+    const { amountEffective, amountRaw } = hook.response;
+    const requestAmount = Amounts.parseOrThrow(amountRaw);
+    const toBeReceived = Amounts.parseOrThrow(amountEffective);
 
-    let purse_expiration: TalerProtocolTimestamp | undefined = undefined
+    let purse_expiration: TalerProtocolTimestamp | undefined = undefined;
     let timestampError: string | undefined = undefined;
 
-    const t = timestamp === undefined ? undefined : parse(timestamp, "dd/MM/yyyy", new Date())
+    const t =
+      timestamp === undefined
+        ? undefined
+        : parse(timestamp, "dd/MM/yyyy", new Date());
 
     if (t !== undefined) {
       if (Number.isNaN(t.getTime())) {
-        timestampError = 'Should have the format "dd/MM/yyyy"'
+        timestampError = 'Should have the format "dd/MM/yyyy"';
       } else {
         if (!isFuture(t)) {
-          timestampError = 'Should be in the future'
+          timestampError = "Should be in the future";
         } else {
           purse_expiration = {
-            t_s: t.getTime() / 1000
-          }
+            t_s: t.getTime() / 1000,
+          };
         }
       }
     }
@@ -116,14 +128,17 @@ 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) {
@@ -134,12 +149,18 @@ export function useComponentState(
         throw Error("error trying to accept");
       }
     }
-    const unableToCreate = !subject || Amounts.isZero(amount) || !purse_expiration
+    const unableToCreate =
+      !subject || Amounts.isZero(amount) || !purse_expiration;
 
     return {
       status: "ready",
       subject: {
-        error: subject === undefined ? undefined : !subject ? "Can't be empty" : undefined,
+        error:
+          subject === undefined
+            ? undefined
+            : !subject
+            ? "Can't be empty"
+            : undefined,
         value: subject ?? "",
         onInput: async (e) => setSubject(e),
       },
@@ -147,8 +168,8 @@ export function useComponentState(
         error: timestampError,
         value: timestamp === undefined ? "" : timestamp,
         onInput: async (e) => {
-          setTimestamp(e)
-        }
+          setTimestamp(e);
+        },
       },
       doSelectExchange: selectedExchange.doSelect,
       exchangeUrl: exchange.exchangeBaseUrl,