aboutsummaryrefslogtreecommitdiff
path: root/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx')
-rw-r--r--packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx136
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>
);
generated by cgit v1.2.3 (git 2.26.2) at 2024-09-12 11:43:18 +0000