diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/QrCodeSection.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/QrCodeSection.tsx | 72 |
1 files changed, 25 insertions, 47 deletions
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index d20b269a8..7091214e0 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -15,16 +15,15 @@ */ import { - assertUnreachable, HttpStatusCode, stringifyWithdrawUri, - TranslatedString, - WithdrawUriResult, + WithdrawUriResult } from "@gnu-taler/taler-util"; import { + Button, LocalNotificationBanner, - useLocalNotification, - useTranslationContext, + useLocalNotificationHandler, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { useEffect } from "preact/hooks"; @@ -50,47 +49,27 @@ export function QrCodeSection({ walletInegrationApi.publishTalerAction(withdrawUri); }, []); - const [notification, notify, handleError] = useLocalNotification(); + const [notification, handleError] = useLocalNotificationHandler(); const { api } = useBankCoreApiContext(); - async function doAbort() { - await handleError(async () => { - if (!creds) return; - const resp = await api.abortWithdrawalById( + const onAbortHandler = handleError( + async () => { + if (!creds) return undefined; + return api.abortWithdrawalById( creds, withdrawUri.withdrawalOperationId, - ); - if (resp.type === "ok") { - onAborted(); - } else { - switch (resp.case) { - case HttpStatusCode.Conflict: - return notify({ - type: "error", - title: i18n.str`The reserve operation has been confirmed previously and can't be aborted`, - }); - case HttpStatusCode.BadRequest: - return notify({ - type: "error", - title: i18n.str`The operation id is invalid.`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - case HttpStatusCode.NotFound: - return notify({ - type: "error", - title: i18n.str`The operation was not found.`, - description: resp.detail.hint as TranslatedString, - debug: resp.detail, - }); - default: { - assertUnreachable(resp); - } - } + ) + }, + onAborted, + (fail) => { + switch (fail.case) { + case HttpStatusCode.BadRequest: return i18n.str`The operation id is invalid.`; + case HttpStatusCode.NotFound: return i18n.str`The operation was not found.`; + case HttpStatusCode.Conflict: return i18n.str`The reserve operation has been confirmed previously and can't be aborted`; } - }); - } + } + ) return ( <Fragment> @@ -120,15 +99,14 @@ export function QrCodeSection({ </p> </div> <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 pt-2 mt-2 "> - <button + <Button type="button" name="cancel" - // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600" class="text-sm font-semibold leading-6 text-gray-900" - onClick={doAbort} + handler={onAbortHandler} > <i18n.Translate>Cancel</i18n.Translate> - </button> + </Button> <a href={talerWithdrawUri} name="withdraw" @@ -157,14 +135,14 @@ export function QrCodeSection({ </div> </div> <div class="flex items-center justify-center gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> - <button + <Button type="button" // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600" class="text-sm font-semibold leading-6 text-gray-900" - onClick={doAbort} + handler={onAbortHandler} > <i18n.Translate>Cancel</i18n.Translate> - </button> + </Button> </div> </div> </Fragment> |