fix(SW-696): split up surprises into more components for readability

add tsparticles for confetti
2024-11-14 17:08:55 +01:00
parent 0824f7ce26
commit 3aedc4ff25
13 changed files with 760 additions and 358 deletions
--- a/components/MyPages/Surprises/Slide.tsx
+++ b/components/MyPages/Surprises/Slide.tsx
@@ -0,0 +1,49 @@
+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" },
+            {
+              date: dt(earliestExpirationDate)
+                .locale(lang)
+                .format("D MMM YYYY"),
+            }
+          )}
+        </Caption>
+        <Caption>
+          {intl.formatMessage({
+            id: "Membership ID",
+          })}{" "}
+          {membershipNumber}
+        </Caption>
+      </div>
+    </Card>
+  )
+}