55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Card from "./Card"
|
|
|
|
import styles from "./surprises.module.css"
|
|
|
|
import type { SlideProps } from "@/types/components/blocks/surprises"
|
|
|
|
export default function Slide({ surprise, membershipNumber }: SlideProps) {
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
|
|
const earliestExpirationDate = surprise.coupons?.reduce(
|
|
(earliestDate, coupon) => {
|
|
const expiresAt = dt(coupon.expiresAt)
|
|
return earliestDate.isBefore(expiresAt) ? earliestDate : expiresAt
|
|
},
|
|
dt()
|
|
)
|
|
|
|
return (
|
|
<Card title={surprise.label}>
|
|
<Body textAlign="center">{surprise.description}</Body>
|
|
<div className={styles.badge}>
|
|
<Caption>
|
|
{intl.formatMessage(
|
|
{ id: "Expires at the earliest {expirationDate}" },
|
|
{
|
|
expirationDate: dt(earliestExpirationDate)
|
|
.locale(lang)
|
|
.format("D MMM YYYY"),
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Caption>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Membership ID {id}",
|
|
},
|
|
{
|
|
id: membershipNumber,
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|