diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx new file mode 100644 index 000000000..da4ccc45e --- /dev/null +++ b/packages/demobank-ui/src/pages/home/TalerWithdrawalQRCode.tsx @@ -0,0 +1,97 @@ +import { Fragment, h, VNode } from "preact"; +import useSWR from "swr"; +import { PageStateType, usePageContext } from "../../context/pageState.js"; +import { useTranslationContext } from "../../context/translation.js"; +import { QrCodeSection } from "./QrCodeSection.js"; +import { TalerWithdrawalConfirmationQuestion } from "./TalerWithdrawalConfirmationQuestion.js"; + +/** + * Offer the QR code (and a clickable taler://-link) to + * permit the passing of exchange and reserve details to + * the bank. Poll the backend until such operation is done. + */ +export function TalerWithdrawalQRCode(Props: any): VNode { + // turns true when the wallet POSTed the reserve details: + const { pageState, pageStateSetter } = usePageContext(); + const { withdrawalId, talerWithdrawUri, backendState } = Props; + const { i18n } = useTranslationContext(); + const abortButton = ( + <a + class="pure-button btn-cancel" + onClick={() => { + pageStateSetter((prevState: PageStateType) => { + return { + ...prevState, + withdrawalId: undefined, + talerWithdrawUri: undefined, + withdrawalInProgress: false, + }; + }); + }} + >{i18n.str`Abort`}</a> + ); + + console.log(`Showing withdraw URI: ${talerWithdrawUri}`); + // waiting for the wallet: + + const { data, error } = useSWR( + `integration-api/withdrawal-operation/${withdrawalId}`, + { refreshInterval: 1000 }, + ); + + if (typeof error !== "undefined") { + console.log( + `withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, + error, + ); + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + + error: { + title: i18n.str`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, + }, + })); + return ( + <Fragment> + <br /> + <br /> + {abortButton} + </Fragment> + ); + } + + // data didn't arrive yet and wallet didn't communicate: + if (typeof data === "undefined") + return <p>{i18n.str`Waiting the bank to create the operation...`}</p>; + + /** + * Wallet didn't communicate withdrawal details yet: + */ + console.log("withdrawal status", data); + if (data.aborted) + pageStateSetter((prevState: PageStateType) => { + const { withdrawalId, talerWithdrawUri, ...rest } = prevState; + return { + ...rest, + withdrawalInProgress: false, + + error: { + title: i18n.str`This withdrawal was aborted!`, + }, + }; + }); + + if (!data.selection_done) { + return ( + <QrCodeSection + talerWithdrawUri={talerWithdrawUri} + abortButton={abortButton} + /> + ); + } + /** + * Wallet POSTed the withdrawal details! Ask the + * user to authorize the operation (here CAPTCHA). + */ + return <TalerWithdrawalConfirmationQuestion backendState={backendState} />; +} |