diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx | 136 |
1 files changed, 79 insertions, 57 deletions
diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx index 478d631fb..589e29793 100644 --- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx +++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx @@ -17,93 +17,99 @@ import { Amounts, HttpStatusCode, TalerError, - TalerErrorCode, - TranslatedString + assertUnreachable, } from "@gnu-taler/taler-util"; import { Attention, Loading, - LocalNotificationBanner, - ShowInputErrorLabel, - useLocalNotification, - useTranslationContext + useTranslationContext, } from "@gnu-taler/web-util/browser"; import { format } from "date-fns"; -import { Fragment, VNode, h } from "preact"; -import { useState } from "preact/hooks"; -import { mutate } from "swr"; +import { VNode, h } from "preact"; import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js"; -import { useBankCoreApiContext } from "../../context/config.js"; -import { useBackendState } from "../../hooks/backend.js"; -import { - useCashoutDetails, useConversionInfo -} from "../../hooks/circuit.js"; -import { - undefinedIfEmpty -} from "../../utils.js"; +import { useCashoutDetails, useConversionInfo } from "../../hooks/circuit.js"; +import { RouteDefinition } from "../../route.js"; import { RenderAmount } from "../PaytoWireTransferForm.js"; -import { assertUnreachable } from "../WithdrawalOperationPage.js"; interface Props { id: string; - onCancel: () => void; + routeClose: RouteDefinition<Record<string, never>>; } -export function ShowCashoutDetails({ - id, - onCancel, -}: Props): VNode { +export function ShowCashoutDetails({ id, routeClose }: Props): VNode { const { i18n, dateLocale } = useTranslationContext(); - const { state } = useBackendState(); - const cid = Number.parseInt(id, 10) + const cid = Number.parseInt(id, 10); const result = useCashoutDetails(Number.isNaN(cid) ? undefined : cid); const info = useConversionInfo(); if (Number.isNaN(cid)) { - return <Attention type="danger" title={i18n.str`cashout id should be a number`} /> + return ( + <Attention + type="danger" + title={i18n.str`cashout id should be a number`} + /> + ); } if (!result) { - return <Loading /> + return <Loading />; } if (result instanceof TalerError) { - return <ErrorLoadingWithDebug error={result} /> + return <ErrorLoadingWithDebug error={result} />; } if (result.type === "fail") { switch (result.case) { - case HttpStatusCode.NotFound: return <Attention type="warning" title={i18n.str`This cashout not found. Maybe already aborted.`}> - </Attention> - case HttpStatusCode.NotImplemented: return <Attention type="warning" title={i18n.str`Cashouts are not supported`}> - </Attention> - default: assertUnreachable(result) + case HttpStatusCode.NotFound: + return ( + <Attention + type="warning" + title={i18n.str`This cashout not found. Maybe already aborted.`} + ></Attention> + ); + case HttpStatusCode.NotImplemented: + return ( + <Attention + type="warning" + title={i18n.str`Cashouts are not supported`} + ></Attention> + ); + default: + assertUnreachable(result); } } if (!info) { - return <Loading /> + return <Loading />; } if (info instanceof TalerError) { - return <ErrorLoadingWithDebug error={info} /> + return <ErrorLoadingWithDebug error={info} />; } if (info.type === "fail") { switch (info.case) { case HttpStatusCode.NotImplemented: { - return <Attention type="danger" title={i18n.str`Cashout not implemented`} /> + return ( + <Attention type="danger" title={i18n.str`Cashout not implemented`} /> + ); } - default: assertUnreachable(info.case) + default: + assertUnreachable(info.case); } } - const { fiat_currency_specification, regional_currency_specification } = info.body + const { fiat_currency_specification, regional_currency_specification } = + info.body; return ( <div> <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg"> - <section class="rounded-sm px-4"> - <h2 id="summary-heading" class="font-medium text-lg"><i18n.Translate>Cashout detail</i18n.Translate></h2> + <h2 id="summary-heading" class="font-medium text-lg"> + <i18n.Translate>Cashout detail</i18n.Translate> + </h2> <dl class="mt-8 space-y-4"> <div class="justify-between items-center flex"> - <dt class="text-sm text-gray-600"><i18n.Translate>Subject</i18n.Translate></dt> + <dt class="text-sm text-gray-600"> + <i18n.Translate>Subject</i18n.Translate> + </dt> <dd class="text-sm ">{result.body.subject}</dd> </div> </dl> @@ -113,48 +119,64 @@ export function ShowCashoutDetails({ <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <div class="sm:col-span-5"> <dl class="space-y-4"> - - {result.body.creation_time.t_s !== "never" ? + {result.body.creation_time.t_s !== "never" ? ( <div class="justify-between items-center flex "> - <dt class=" text-gray-600"><i18n.Translate>Created</i18n.Translate></dt> + <dt class=" text-gray-600"> + <i18n.Translate>Created</i18n.Translate> + </dt> <dd class="text-sm "> - {format(result.body.creation_time.t_s * 1000, "dd/MM/yyyy HH:mm:ss", { locale: dateLocale })} + {format( + result.body.creation_time.t_s * 1000, + "dd/MM/yyyy HH:mm:ss", + { locale: dateLocale }, + )} </dd> </div> - : undefined} + ) : undefined} <div class="flex justify-between items-center border-t-2 afu pt-4"> - <dt class="text-gray-600"><i18n.Translate>Debited</i18n.Translate></dt> + <dt class="text-gray-600"> + <i18n.Translate>Debited</i18n.Translate> + </dt> <dd class=" font-medium"> - <RenderAmount value={Amounts.parseOrThrow(result.body.amount_debit)} negative withColor spec={regional_currency_specification} /> + <RenderAmount + value={Amounts.parseOrThrow(result.body.amount_debit)} + negative + withColor + spec={regional_currency_specification} + /> </dd> </div> <div class="flex items-center justify-between border-t-2 afu pt-4"> <dt class="flex items-center text-gray-600"> - <span><i18n.Translate>Credited</i18n.Translate></span> - + <span> + <i18n.Translate>Credited</i18n.Translate> + </span> </dt> <dd class="text-sm "> - <RenderAmount value={Amounts.parseOrThrow(result.body.amount_credit)} withColor spec={fiat_currency_specification} /> + <RenderAmount + value={Amounts.parseOrThrow(result.body.amount_credit)} + withColor + spec={fiat_currency_specification} + /> </dd> </div> - </dl> </div> </div> </div> - </div> - </div> <br /> <div style={{ display: "flex", justifyContent: "space-between" }}> - <button type="button" class="text-sm font-semibold leading-6 text-gray-900" - onClick={onCancel} + <a + href={routeClose.url({})} + class="text-sm font-semibold leading-6 text-gray-900" > - <i18n.Translate>Cancel</i18n.Translate></button> + <i18n.Translate>Close</i18n.Translate> + </a> </div> </div> ); |