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

View File

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