diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/OperationState')
3 files changed, 43 insertions, 48 deletions
diff --git a/packages/demobank-ui/src/pages/OperationState/index.ts b/packages/demobank-ui/src/pages/OperationState/index.ts index 32302f272..b347fd942 100644 --- a/packages/demobank-ui/src/pages/OperationState/index.ts +++ b/packages/demobank-ui/src/pages/OperationState/index.ts @@ -14,19 +14,16 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { HttpError, HttpResponseOk, HttpResponsePaginated, utils } from "@gnu-taler/web-util/browser"; -import { AbsoluteTime, AmountJson, PaytoUriIBAN, PaytoUriTalerBank, WithdrawUriResult } from "@gnu-taler/taler-util"; +import { AbsoluteTime, AmountJson, WithdrawUriResult } from "@gnu-taler/taler-util"; +import { HttpError, utils } from "@gnu-taler/web-util/browser"; +import { ErrorLoading } from "../../components/ErrorLoading.js"; import { Loading } from "../../components/Loading.js"; import { useComponentState } from "./state.js"; -import { ReadyView, AbortedView, ConfirmedView, InvalidPaytoView, InvalidReserveView, InvalidWithdrawalView, NeedConfirmationView } from "./views.js"; -import { VNode } from "preact"; -import { LoginForm } from "../LoginForm.js"; -import { ErrorLoading } from "../../components/ErrorLoading.js"; +import { AbortedView, ConfirmedView, InvalidPaytoView, InvalidReserveView, InvalidWithdrawalView, NeedConfirmationView, ReadyView } from "./views.js"; export interface Props { currency: string; onClose: () => void; - goToConfirmOperation: (id: string) => void; } export type State = State.Loading | diff --git a/packages/demobank-ui/src/pages/OperationState/state.ts b/packages/demobank-ui/src/pages/OperationState/state.ts index ae03ed529..56e79f9ab 100644 --- a/packages/demobank-ui/src/pages/OperationState/state.ts +++ b/packages/demobank-ui/src/pages/OperationState/state.ts @@ -15,16 +15,15 @@ */ import { Amounts, HttpStatusCode, TranslatedString, parsePaytoUri, parseWithdrawUri, stringifyWithdrawUri } from "@gnu-taler/taler-util"; -import { ErrorType, RequestError, notify, notifyError, notifyInfo, useTranslationContext, utils } from "@gnu-taler/web-util/browser"; -import { useBackendContext } from "../../context/backend.js"; -import { useAccessAPI, useAccessAnonAPI, useAccountDetails, useWithdrawalDetails } from "../../hooks/access.js"; -import { Props, State } from "./index.js"; -import { useSettings } from "../../hooks/settings.js"; -import { buildRequestErrorMessage, undefinedIfEmpty } from "../../utils.js"; -import { useEffect, useMemo, useState } from "preact/hooks"; +import { RequestError, notify, notifyError, notifyInfo, useTranslationContext, utils } from "@gnu-taler/web-util/browser"; +import { useEffect, useState } from "preact/hooks"; +import { useAccessAPI, useAccessAnonAPI, useWithdrawalDetails } from "../../hooks/access.js"; import { getInitialBackendBaseURL } from "../../hooks/backend.js"; +import { useSettings } from "../../hooks/settings.js"; +import { buildRequestErrorMessage } from "../../utils.js"; +import { Props, State } from "./index.js"; -export function useComponentState({ currency, onClose,goToConfirmOperation }: Props): utils.RecursiveState<State> { +export function useComponentState({ currency, onClose }: Props): utils.RecursiveState<State> { const { i18n } = useTranslationContext(); const [settings, updateSettings] = useSettings() const { createWithdrawal } = useAccessAPI(); @@ -142,8 +141,8 @@ export function useComponentState({ currency, onClose,goToConfirmOperation }: Pr } } setBusy(undefined) - } - const bankIntegrationApiBaseUrl = `${baseUrl}/integration-api` + } + const bankIntegrationApiBaseUrl = `${baseUrl}/taler-integration` const uri = stringifyWithdrawUri({ bankIntegrationApiBaseUrl, withdrawalOperationId, @@ -160,7 +159,13 @@ export function useComponentState({ currency, onClose,goToConfirmOperation }: Pr return (): utils.RecursiveState<State> => { const result = useWithdrawalDetails(withdrawalOperationId); + const shouldCreateNewOperation = !result.ok && !result.loading && result.info.status === HttpStatusCode.NotFound + useEffect(() => { + if (shouldCreateNewOperation) { + doSilentStart() + } + }, []) if (!result.ok) { if (result.loading) { return { @@ -168,6 +173,12 @@ export function useComponentState({ currency, onClose,goToConfirmOperation }: Pr error: undefined } } + if (result.info.status === HttpStatusCode.NotFound) { + return { + status: "loading", + error: undefined, + } + } return { status: "loading-error", error: result @@ -178,7 +189,10 @@ export function useComponentState({ currency, onClose,goToConfirmOperation }: Pr return { status: "aborted", error: undefined, - onClose, + onClose: async () => { + updateSettings("currentWithdrawalOperationId", undefined) + onClose() + }, } } diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx index 17f1d8457..681a3b94d 100644 --- a/packages/demobank-ui/src/pages/OperationState/views.tsx +++ b/packages/demobank-ui/src/pages/OperationState/views.tsx @@ -256,6 +256,7 @@ export function AbortedView({ error, onClose }: State.Aborted) { <div>aborted</div> ); } + export function ConfirmedView({ error, onClose }: State.Confirmed) { const { i18n } = useTranslationContext(); const [settings, updateSettings] = useSettings() @@ -325,8 +326,17 @@ export function ReadyView({ uri, onClose }: State.Ready): VNode<{}> { document.title = `${document.title} ${uri.withdrawalOperationId}`; }, []); const talerWithdrawUri = stringifyWithdrawUri(uri); - const [show, setShow] = useState(false) return <Fragment> + <div class="flex justify-end mt-4"> + <button type="button" + class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500" + onClick={() => { + onClose() + }} + > + Cancel + </button> + </div> <div class="bg-white shadow sm:rounded-lg mt-4"> <div class="p-4"> @@ -360,39 +370,13 @@ export function ReadyView({ uri, onClose }: State.Ready): VNode<{}> { <i18n.Translate>Scan the QR code with your mobile device.</i18n.Translate> </p> </div> - <div class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center"> - <button type="button" - class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500" - onClick={() => { - setShow(!show) - }} - > - {!show ? - <i18n.Translate>Show QR</i18n.Translate> - : - <i18n.Translate>Hide QR</i18n.Translate> - } - </button> - </div> </div> - {show && - <div class="mt-2 max-w-md ml-auto mr-auto"> - <QR text={talerWithdrawUri} /> - </div> - } + <div class="mt-2 max-w-md ml-auto mr-auto"> + <QR text={talerWithdrawUri} /> + </div> </div> </div> - <div class="flex justify-end mt-4"> - <button type="button" - class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500" - onClick={() => { - onClose() - }} - > - Cancel - </button> - </div> </Fragment> } |