scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(LOY-154): add expiration date to rewards

Browse Source
This commit is contained in:
Christian Andolf
2025-03-10 13:18:54 +01:00
parent 7563db9dbc
commit b45157818f
8 changed files with 139 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/scandic-web/components/MyPages/Surprises/Slide.tsx
View File

@@ -1,51 +1,19 @@
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import ExpirationDate from "@/components/Rewards/ExpirationDate"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { getEarliestExpirationDate } from "@/utils/rewards"
import Card from "./Card"
import styles from "./surprises.module.css"
import type { Dayjs } from "dayjs"
import type { SlideProps } from "@/types/components/blocks/surprises"
export default function Slide({ surprise }: SlideProps) {
const lang = useLang()
const intl = useIntl()
const earliestExpirationDate = surprise.coupons
.map(({ expiresAt }) => expiresAt)
.filter((expiresAt): expiresAt is string => !!expiresAt)
.reduce((earliestDate: Dayjs | null, expiresAt) => {
const expiresAtDate = dt(expiresAt)
if (!earliestDate) {
return expiresAtDate
}
return earliestDate.isBefore(expiresAtDate) ? earliestDate : expiresAtDate
}, null)
const earliestExpirationDate = getEarliestExpirationDate(surprise.coupons)
return (
<Card title={surprise.label}>
<Body textAlign="center">{surprise.description}</Body>
{earliestExpirationDate ? (
<div className={styles.badge}>
<Caption>
{intl.formatMessage(
{ id: "Valid through {expirationDate}" },
{
expirationDate: dt(earliestExpirationDate)
.locale(lang)
.format("D MMM YYYY"),
}
)}
</Caption>
</div>
<ExpirationDate expirationDate={earliestExpirationDate} />
) : null}
</Card>
)

10
apps/scandic-web/components/MyPages/Surprises/surprises.module.css
View File

@@ -125,16 +125,6 @@
transform: rotate(180deg);
}
.badge {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x-half);
background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-Small);
}
.close {
background: none;
border: none;