show next expiration

This commit is contained in:
Sebastian 2023-08-07 08:13:47 -03:00
parent 7d53aa2755
commit b1cea84ca8
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
2 changed files with 24 additions and 27 deletions

View File

@ -21,7 +21,7 @@
import { AmountJson, Amounts } from "@gnu-taler/taler-util";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { format } from "date-fns";
import { format, formatDistance } from "date-fns";
import { Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import { FormProvider } from "../../../../components/form/FormProvider.js";
@ -223,6 +223,7 @@ function ClaimedPage({
</div>
</div>
</div>
<div class="level">
<div class="level-left">
<div class="level-item">
@ -419,6 +420,11 @@ function PaidPage({
}
}
const now = new Date()
const nextEvent = events.find((e) => {
return e.when.getTime() > now.getTime()
})
const [value, valueHandler] = useState<Partial<Paid>>(order);
const { url } = useBackendContext();
const refundHost = url.replace(/.*:\/\//, ""); // remove protocol part
@ -504,22 +510,13 @@ function PaidPage({
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
// maxWidth: '100%',
}}
>
<p>
<a
href={order.contract_terms.fulfillment_url}
rel="nofollow"
target="new"
>
{order.contract_terms.fulfillment_url}
</a>
</p>
<p>
{format(
new Date(order.contract_terms.timestamp.t_s * 1000),
"yyyy/MM/dd HH:mm:ss",
<i18n.Translate>Next event in </i18n.Translate> {formatDistance(
nextEvent!.when,
new Date(),
// "yyyy/MM/dd HH:mm:ss",
)}
</p>
</div>
@ -668,9 +665,9 @@ function UnpaidPage({
{order.creation_time.t_s === "never"
? "never"
: format(
new Date(order.creation_time.t_s * 1000),
"yyyy-MM-dd HH:mm:ss",
)}
new Date(order.creation_time.t_s * 1000),
"yyyy-MM-dd HH:mm:ss",
)}
</p>
</div>
</div>

View File

@ -67,7 +67,7 @@ export function Timeline({ events: e }: Props) {
);
case "start":
return (
<div class="timeline-marker is-icon is-success">
<div class="timeline-marker is-icon">
<i class="mdi mdi-flag " />
</div>
);
@ -104,7 +104,7 @@ export function Timeline({ events: e }: Props) {
}
})()}
<div class="timeline-content">
<p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>
{e.description !== "now" && <p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>}
<p>{e.description}</p>
</div>
</div>
@ -117,12 +117,12 @@ export interface Event {
when: Date;
description: string;
type:
| "start"
| "refund"
| "refund-taken"
| "wired"
| "wired-range"
| "deadline"
| "delivery"
| "now";
| "start"
| "refund"
| "refund-taken"
| "wired"
| "wired-range"
| "deadline"
| "delivery"
| "now";
}