fix #7343

4 files changed, 151 insertions, 37 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
index 2521ee69c..71aedc638 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime, AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AbsoluteTime, AmountJson, PreparePayResult, TalerErrorDetail } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
@@ -26,11 +26,14 @@ import { LoadingUriView, ReadyView } from "./views.js";
 export interface Props {
   talerPayPullUri: string;
   onClose: () => Promise<void>;
+  goToWalletManualWithdraw: (amount?: string) => Promise<void>;
 }
 
 export type State =
   | State.Loading
   | State.LoadingUriError
+  | State.NoEnoughBalance
+  | State.NoBalanceForCurrency
   | State.Ready;
 
 export namespace State {
@@ -47,22 +50,38 @@ export namespace State {
 
   export interface BaseInfo {
     error: undefined;
+    uri: string;
     cancel: ButtonHandler;
-  }
-  export interface Ready extends BaseInfo {
-    status: "ready";
     amount: AmountJson,
+    goToWalletManualWithdraw: (currency: string) => Promise<void>;
     summary: string | undefined,
     expiration: AbsoluteTime | undefined,
+    operationError?: TalerErrorDetail;
+    payStatus: PreparePayResult;
+  }
+
+  export interface NoBalanceForCurrency extends BaseInfo {
+    status: "no-balance-for-currency"
+    balance: undefined;
+  }
+  export interface NoEnoughBalance extends BaseInfo {
+    status: "no-enough-balance"
+    balance: AmountJson;
+  }
+
+  export interface Ready extends BaseInfo {
+    status: "ready";
     error: undefined;
+    balance: AmountJson;
     accept: ButtonHandler;
-    operationError?: TalerErrorDetail;
   }
 }
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
   "loading-uri": LoadingUriView,
+  "no-balance-for-currency": ReadyView,
+  "no-enough-balance": ReadyView,
   "ready": ReadyView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
index 27be1e424..f87cdf8e1 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
@@ -14,22 +14,31 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime, Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Amounts, NotificationType, PreparePayResult, PreparePayResultType, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerPayPullUri, onClose }: Props,
+  { talerPayPullUri, onClose, goToWalletManualWithdraw }: Props,
   api: typeof wxApi,
 ): State {
   const hook = useAsyncAsHook(async () => {
-    return await api.checkPeerPullPayment({
+    const p2p = await api.checkPeerPullPayment({
       talerUri: talerPayPullUri
     })
-  }, [])
+    const balance = await api.getBalance();
+    return { p2p, balance }
+  })
+
+  useEffect(() => {
+    api.onUpdateNotification([NotificationType.CoinWithdrawn], () => {
+      hook?.retry();
+    });
+  });
+
   const [operationError, setOperationError] = useState<TalerErrorDetail | undefined>(undefined)
 
   if (!hook) {
@@ -45,12 +54,84 @@ export function useComponentState(
     };
   }
 
-  const { amount: purseAmount, contractTerms, peerPullPaymentIncomingId } = hook.response
+  // const { payStatus } = hook.response.p2p;
+
+  const { amount: purseAmount, contractTerms, peerPullPaymentIncomingId } = hook.response.p2p
 
-  const amount: string = contractTerms?.amount
+
+  const amountStr: string = contractTerms?.amount
+  const amount = Amounts.parseOrThrow(amountStr)
   const summary: string | undefined = contractTerms?.summary
   const expiration: TalerProtocolTimestamp | undefined = contractTerms?.purse_expiration
 
+  const foundBalance = hook.response.balance.balances.find(
+    (b) => Amounts.parseOrThrow(b.available).currency === amount.currency,
+  );
+
+  const paymentPossible: PreparePayResult = {
+    status: PreparePayResultType.PaymentPossible,
+    proposalId: "fakeID",
+    contractTerms: {
+    } as any,
+    contractTermsHash: "asd",
+    amountRaw: hook.response.p2p.amount,
+    amountEffective: hook.response.p2p.amount,
+    noncePriv: "",
+  } as PreparePayResult
+
+  const insufficientBalance: PreparePayResult = {
+    status: PreparePayResultType.InsufficientBalance,
+    proposalId: "fakeID",
+    contractTerms: {
+    } as any,
+    amountRaw: hook.response.p2p.amount,
+    noncePriv: "",
+  }
+
+
+  const baseResult = {
+    uri: talerPayPullUri,
+    cancel: {
+      onClick: onClose
+    },
+    amount,
+    goToWalletManualWithdraw,
+    summary,
+    expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined,
+    operationError,
+  }
+
+  if (!foundBalance) {
+    return {
+      status: "no-balance-for-currency",
+      error: undefined,
+      balance: undefined,
+      ...baseResult,
+      payStatus: insufficientBalance,
+    }
+  }
+
+  const foundAmount = Amounts.parseOrThrow(foundBalance.available);
+
+  //FIXME: should use pay result type since it check for coins exceptions
+  if (Amounts.cmp(foundAmount, amount) < 0) { //payStatus.status === PreparePayResultType.InsufficientBalance) {
+    return {
+      status: 'no-enough-balance',
+      error: undefined,
+      balance: foundAmount,
+      ...baseResult,
+      payStatus: insufficientBalance,
+    }
+  }
+
+  // if (payStatus.status === PreparePayResultType.AlreadyConfirmed) {
+  //   return {
+  //     status: "confirmed",
+  //     balance: foundAmount,
+  //     ...baseResult,
+  //   };
+  // }
+
   async function accept(): Promise<void> {
     try {
       const resp = await api.acceptPeerPullPayment({
@@ -69,16 +150,12 @@ export function useComponentState(
 
   return {
     status: "ready",
-    amount: Amounts.parseOrThrow(amount),
     error: undefined,
+    ...baseResult,
+    payStatus: paymentPossible,
+    balance: foundAmount,
     accept: {
       onClick: accept
     },
-    summary,
-    expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined,
-    cancel: {
-      onClick: onClose
-    },
-    operationError
   }
 }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
index 81b79a208..5a8a51932 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { PreparePayResult, PreparePayResultType } from "@gnu-taler/taler-util";
 import { createExample } from "../../test-utils.js";
 import { ReadyView } from "./views.js";
 
@@ -32,6 +33,10 @@ export const Ready = createExample(ReadyView, {
     value: 1,
     fraction: 0,
   },
+  payStatus: {
+    status: PreparePayResultType.PaymentPossible,
+    amountEffective: "ARS:1",
+  } as PreparePayResult,
   accept: {},
   cancel: {},
 });
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 71bdb20b8..21b666abd 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -14,16 +14,23 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { h, VNode } from "preact";
+import { Amounts, PreparePayResultType } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
 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 { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
+import {
+  Link,
+  SubTitle,
+  WalletAction,
+  WarningBox,
+} from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
+import { ButtonsSection, PayWithMobile } from "../Payment/views.js";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -37,16 +44,21 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ReadyView({
-  operationError,
-  cancel,
-  accept,
-  expiration,
-  summary,
-  amount,
-}: State.Ready): VNode {
+export function ReadyView(
+  state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance,
+): VNode {
   const { i18n } = useTranslationContext();
-
+  const {
+    operationError,
+    summary,
+    amount,
+    expiration,
+    uri,
+    status,
+    balance,
+    payStatus,
+    cancel,
+  } = state;
   return (
     <WalletAction>
       <LogoHeader />
@@ -78,13 +90,14 @@ export function ReadyView({
           kind="neutral"
         />
       </section>
-      <section>
-        <Button variant="contained" color="success" onClick={accept.onClick}>
-          <i18n.Translate>
-            Pay &nbsp; {<Amount value={amount} />}
-          </i18n.Translate>
-        </Button>
-      </section>
+      <ButtonsSection
+        amount={amount}
+        balance={balance}
+        payStatus={payStatus}
+        uri={uri}
+        payHandler={status === "ready" ? state.accept : undefined}
+        goToWalletManualWithdraw={state.goToWalletManualWithdraw}
+      />
       <section>
         <Link upperCased onClick={cancel.onClick}>
           <i18n.Translate>Cancel</i18n.Translate>