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

2025-03-10 13:18:54 +01:00
parent 7563db9dbc
commit b45157818f
8 changed files with 139 additions and 86 deletions
--- a/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css
+++ b/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css
@@ -0,0 +1,9 @@
+.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);
+}
--- a/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
+++ b/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import styles from "./expirationDate.module.css"
+
+import type { Dayjs } from "dayjs"
+
+export default function ExpirationDate({
+  expirationDate,
+}: {
+  expirationDate: Dayjs | string
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.badge}>
+      <Body textTransform="bold">
+        {intl.formatMessage(
+          { id: "Valid through {expirationDate}" },
+          {
+            expirationDate: dt(expirationDate)
+              .locale(lang)
+              .format("D MMM YYYY"),
+          }
+        )}
+      </Body>
+    </div>
+  )
+}