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/Initial.tsx
+++ b/components/MyPages/Surprises/Initial.tsx
@@ -0,0 +1,62 @@
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Card from "./Card"
+
+import type { InitialProps } from "@/types/components/blocks/surprises"
+
+export default function Initial({ totalSurprises, onOpen }: InitialProps) {
+  const intl = useIntl()
+
+  return (
+    <Card title={intl.formatMessage({ id: "Surprise!" })}>
+      <Body textAlign="center">
+        {totalSurprises > 1 ? (
+          <>
+            {intl.formatMessage<React.ReactNode>(
+              {
+                id: "You have <b>#</b> gifts waiting for you!",
+              },
+              {
+                amount: totalSurprises,
+                b: (str) => <b>{str}</b>,
+              }
+            )}
+            <br />
+            {intl.formatMessage({
+              id: "Hurry up and use them before they expire!",
+            })}
+          </>
+        ) : (
+          intl.formatMessage({
+            id: "We have a special gift waiting for you!",
+          })
+        )}
+      </Body>
+      <Caption>
+        {intl.formatMessage({
+          id: "You'll find all your gifts in 'My benefits'",
+        })}
+      </Caption>
+
+      <Button
+        intent="primary"
+        onPress={onOpen}
+        size="medium"
+        theme="base"
+        fullWidth
+        autoFocus
+      >
+        {intl.formatMessage(
+          {
+            id: "Open gift(s)",
+          },
+          { amount: totalSurprises }
+        )}
+      </Button>
+    </Card>
+  )
+}