commit d2bba6e350a17fa56cec906d6f00c0db01a1dbbd
parent 4edc09403ea1996d908b9f0ad8701a28fc4be3c8
Author: Sebastian <sebasjm@gmail.com>
Date: Fri, 23 Aug 2024 11:58:47 -0300
if there is an operation, check the state and forget it if it's not pending
Diffstat:
2 files changed, 92 insertions(+), 37 deletions(-)
diff --git a/packages/bank-ui/src/hooks/account.ts b/packages/bank-ui/src/hooks/account.ts
@@ -72,7 +72,7 @@ export function revalidateWithdrawalDetails() {
);
}
-export function useWithdrawalDetails(wid: string) {
+export function useWithdrawalDetails(wid: string | undefined) {
const {
lib: { bank: api },
} = useBankCoreApiContext();
@@ -91,7 +91,7 @@ export function useWithdrawalDetails(wid: string) {
const { data, error } = useSWR<
TalerCoreBankResultByMethod<"getWithdrawalById">,
TalerHttpError
- >([wid, latestStatus, "getWithdrawalById"], fetcher, {
+ >(wid === undefined ? undefined : [wid, latestStatus, "getWithdrawalById"], fetcher, {
refreshInterval: 3000,
refreshWhenHidden: false,
revalidateOnFocus: false,
diff --git a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
@@ -20,6 +20,7 @@ import {
Amounts,
HttpStatusCode,
TalerCorebankApi,
+ TalerError,
TranslatedString,
assertUnreachable,
parseWithdrawUri,
@@ -33,7 +34,7 @@ import {
} from "@gnu-taler/web-util/browser";
import { VNode, h } from "preact";
import { forwardRef } from "preact/compat";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
import { useBankCoreApiContext } from "@gnu-taler/web-util/browser";
import { useSessionState } from "../hooks/session.js";
import { useBankState } from "../hooks/bank-state.js";
@@ -47,9 +48,46 @@ import {
doAutoFocus,
} from "./PaytoWireTransferForm.js";
import { useSettingsContext } from "../context/settings.js";
+import { useWithdrawalDetails } from "../hooks/account.js";
const RefAmount = forwardRef(InputAmount);
+function ThereIsAnOperationWarning({ wopid, onClose, focus, routeOperationDetails }: {
+ focus?: boolean,
+ wopid: string,
+ onClose: () => void;
+ routeOperationDetails: RouteDefinition<{ wopid: string }>;
+
+}): VNode {
+ const { i18n } = useTranslationContext();
+ const url = routeOperationDetails.url({ wopid });
+
+ return (
+ <Attention
+ type="warning"
+ title={i18n.str`There is an operation already`}
+ onClose={onClose}
+ >
+ <span ref={focus ? doAutoFocus : undefined} />
+ <i18n.Translate>Complete the operation in</i18n.Translate>{" "}
+ <a
+ class="font-semibold text-yellow-700 hover:text-yellow-600"
+ name="complete operation"
+ href={url}
+ // onClick={(e) => {
+ // e.preventDefault()
+ // walletInegrationApi.publishTalerAction(uri, () => {
+ // navigateTo(url)
+ // })
+ // }}
+ >
+ <i18n.Translate>this page</i18n.Translate>
+ </a>
+ </Attention>
+ );
+
+}
+
function OldWithdrawalForm({
onOperationCreated,
limit,
@@ -85,8 +123,16 @@ function OldWithdrawalForm({
`${settings.defaultSuggestedAmount ?? 1}`,
);
const [notification, notify, handleError] = useLocalNotification();
+ const result = useWithdrawalDetails(bankState.currentWithdrawalOperationId);
+ const loading = !result;
+ const error =
+ !loading && (result instanceof TalerError || result.type === "fail");
+ const pending =
+ !loading &&
+ !error &&
+ result.body.status === "pending";
- if (bankState.currentWithdrawalOperationId) {
+ if (pending) {
// FIXME: doing the preventDefault is not optimal
// const suri = stringifyWithdrawUri({
@@ -94,34 +140,43 @@ function OldWithdrawalForm({
// withdrawalOperationId: bankState.currentWithdrawalOperationId,
// });
// const uri = parseWithdrawUri(suri)!
- const url = routeOperationDetails.url({
- wopid: bankState.currentWithdrawalOperationId,
- });
- return (
- <Attention
- type="warning"
- title={i18n.str`There is an operation already`}
- onClose={() => {
- updateBankState("currentWithdrawalOperationId", undefined);
- }}
- >
- <span ref={focus ? doAutoFocus : undefined} />
- <i18n.Translate>Complete the operation in</i18n.Translate>{" "}
- <a
- class="font-semibold text-yellow-700 hover:text-yellow-600"
- name="complete operation"
- href={url}
- // onClick={(e) => {
- // e.preventDefault()
- // walletInegrationApi.publishTalerAction(uri, () => {
- // navigateTo(url)
- // })
- // }}
- >
- <i18n.Translate>this page</i18n.Translate>
- </a>
- </Attention>
- );
+ return <ThereIsAnOperationWarning
+ onClose={() => {
+ updateBankState("currentWithdrawalOperationId", undefined);
+ }}
+ routeOperationDetails={routeOperationDetails}
+ wopid={bankState.currentWithdrawalOperationId!}
+ focus
+
+ />
+ // const url = routeOperationDetails.url({
+ // wopid: bankState.currentWithdrawalOperationId,
+ // });
+ // return (
+ // <Attention
+ // type="warning"
+ // title={i18n.str`There is an operation already`}
+ // onClose={() => {
+ // updateBankState("currentWithdrawalOperationId", undefined);
+ // }}
+ // >
+ // <span ref={focus ? doAutoFocus : undefined} />
+ // <i18n.Translate>Complete the operation in</i18n.Translate>{" "}
+ // <a
+ // class="font-semibold text-yellow-700 hover:text-yellow-600"
+ // name="complete operation"
+ // href={url}
+ // // onClick={(e) => {
+ // // e.preventDefault()
+ // // walletInegrationApi.publishTalerAction(uri, () => {
+ // // navigateTo(url)
+ // // })
+ // // }}
+ // >
+ // <i18n.Translate>this page</i18n.Translate>
+ // </a>
+ // </Attention>
+ // );
}
const trimmedAmountStr = amountStr?.trim();
@@ -147,11 +202,11 @@ function OldWithdrawalForm({
const params: TalerCorebankApi.BankAccountCreateWithdrawalRequest =
preference.fastWithdrawalForm
? {
- suggested_amount: Amounts.stringify(parsedAmount),
- }
+ suggested_amount: Amounts.stringify(parsedAmount),
+ }
: {
- amount: Amounts.stringify(parsedAmount),
- };
+ amount: Amounts.stringify(parsedAmount),
+ };
const resp = await api.createWithdrawal(creds, params);
if (resp.type === "ok") {
const uri = parseWithdrawUri(resp.body.taler_withdraw_uri);
@@ -405,7 +460,7 @@ export function WalletWithdrawForm({
routeClose={routeCancel}
routeHere={routeOperationDetails}
onAbort={onOperationAborted}
- // route={routeCancel}
+ // route={routeCancel}
/>
)}
</div>
