Merged in feat/LOY-316-Level-Progress-Card (pull request #2739)

Feat/LOY-316 Level Progress Card

* feat(LOY-315): Add MembershipOverviewCard

* refactor(LOY-315): abstract sasbooststatus

* feat(LOY-316): build out LevelProgressCard skeleton & variant styling

* feat(LOY-316): Add HighesMembershipCard

* feat(LOY-316): ProgressBarCard base

* refactor(LOY-315): highest level card misc fixes

* feat(LOY-316): Add progress component to design system

* fix(LOY-316): type check

* refactor(LOY-316): calculate currentEarnings correctly

* fix(LOY-316): sas icon showing when not boosted

* fix(LOY-316): css module

* refactor(LOY-316): Restructure components

* feat(LOY-316): Add marker pin 📍

* fix(LOY-316): strict equality checks

* fix(LOY-316): code review fixes

* chore(LOY-316): conditionally hide old section under flag

* feat(LOY-316): Add level progress card to my points page

* chore(LOY-316): marker label container height


Approved-by: Matilda Landström

apps/scandic-web/components/MyPages/LevelProgressCard/HighestLevelCard/highestLevelCard.module.css

@@ -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);
+  }
+}

apps/scandic-web/components/MyPages/LevelProgressCard/HighestLevelCard/index.tsx

@@ -0,0 +1,55 @@
+import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
+import TrophyIcon from "@scandic-hotels/design-system/Icons/TrophyIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { serverClient } from "@/lib/trpc/server"
+
+import styles from "./highestLevelCard.module.css"
+
+import type { HighestLevelCardProps } from "../types"
+
+export default async function HighestLevelCard({
+  membershipLevel,
+  intl,
+}: HighestLevelCardProps) {
+  const caller = await serverClient()
+
+  const highestLevel = await caller.contentstack.loyaltyLevels.byLevel({
+    level: MembershipLevelEnum[membershipLevel],
+  })
+
+  const pointsEarned = highestLevel?.required_points
+
+  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 made it to the top by earning {pointAmount} <strong>points!</strong> Continue earning points for more points to spend.",
+                },
+                {
+                  pointAmount: (
+                    <strong>{intl.formatNumber(pointsEarned)}</strong>
+                  ),
+                  strong: (str) => <strong>{str}</strong>,
+                }
+              )}
+            </p>
+          </Typography>
+        )}
+      </div>
+    </div>
+  )
+}