Merged in feat/LOY-354-L7-Progress-Card (pull request #2786)

Feat/LOY-354 L7 Progress Card * feat(LOY-354): Add Trophy icon * fix(LOY-354): include new tierPoints value * feat(LOY-354): L7 Progress Level Card support * refactor(LOY-354): Refactoring of component structure * fix(LOY-354): Remove intl prop drilling * fix(LOY-354): cleanup progress section code Approved-by: Erik Tiekstra
2025-09-15 11:48:18 +00:00
parent 295e98a560
commit 0737f4fb78
29 changed files with 388 additions and 285 deletions
@@ -0,0 +1,45 @@
+import TrophyIcon from "@scandic-hotels/design-system/Icons/TrophyIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+
+import styles from "./successCard.module.css"
+
+export interface SuccessCardProps {
+  pointsEarned?: number | null
+}
+
+export default async function SuccessCard({ pointsEarned }: SuccessCardProps) {
+  const intl = await getIntl()
+  return (
+    <div className={styles.card}>
+      <TrophyIcon className={styles.icon} width={79} height={118} />
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/md">
+          <h3 className={styles.title}>
+            {intl.formatMessage({
+              defaultMessage: "Hello Best Friend!",
+            })}
+          </h3>
+        </Typography>
+        {pointsEarned && (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  defaultMessage:
+                    "You've earned {pointAmount} points this member year.",
+                },
+                {
+                  pointAmount: (
+                    <strong>{intl.formatNumber(pointsEarned)}</strong>
+                  ),
+                }
+              )}
+            </p>
+          </Typography>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+.card {
+  background: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-lg);
+  padding: var(--Space-x2) var(--Space-x4) var(--Space-x4);
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  grid-template-areas:
+    "icon"
+    "content";
+}
+
+.title {
+  color: var(--Text-Heading);
+}
+
+.content {
+  grid-area: content;
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.icon {
+  grid-area: icon;
+}
+
+@media screen and (min-width: 768px) {
+  .card {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "icon content";
+    padding: var(--Space-x1) var(--Space-x4);
+    justify-items: start;
+    text-align: left;
+    align-items: center;
+    gap: var(--Space-x4);
+  }
+}