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
2025-09-10 06:53:22 +00:00
parent e95d316f52
commit c6da0fb8cb
24 changed files with 797 additions and 12 deletions
--- a/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx
+++ b/apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx
@@ -0,0 +1,73 @@
+import { dt } from "@scandic-hotels/common/dt"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import { isHighestMembership } from "@/utils/user"
+
+import HighestLevelCard from "./HighestLevelCard"
+import ProgressLevelWrapper from "./ProgressLevelWrapper"
+import { levelProgressCardVariants } from "./variants"
+
+import styles from "./levelProgressCard.module.css"
+
+import type { levelProgressCardProps } from "./types"
+
+export default async function LevelProgressCard({
+  user,
+  className,
+  color = "Surface/Brand/Primary 1/OnSurface/Default",
+}: levelProgressCardProps) {
+  const intl = await getIntl()
+  const lang = await getLang()
+
+  if (!user.membership?.membershipLevel) {
+    return null
+  }
+
+  const classNames = levelProgressCardVariants({ className, color })
+
+  return (
+    <section aria-labelledby="level-progress-card-title" className={classNames}>
+      <header className={styles.progressHeader}>
+        <Typography variant="Title/xs">
+          <h2 id="level-progress-card-title" className={styles.title}>
+            {intl.formatMessage({
+              defaultMessage: "Your Level Progress",
+            })}
+          </h2>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.date}>
+            {intl.formatMessage(
+              { defaultMessage: "Valid until {date}" },
+              {
+                date: dt(user.membership.tierExpirationDate)
+                  .locale(lang)
+                  .format("D MMM YYYY"),
+              }
+            )}
+          </p>
+        </Typography>
+        <MaterialIcon
+          className={styles.infoButton}
+          icon="info"
+          color={
+            color === "Surface/Brand/Primary 1/OnSurface/Default"
+              ? "Icon/Inverted"
+              : "Icon/Interactive/Default"
+          }
+        />
+      </header>
+      {isHighestMembership(user.membership.membershipLevel) ? (
+        <HighestLevelCard
+          membershipLevel={user.membership.membershipLevel}
+          intl={intl}
+        />
+      ) : (
+        <ProgressLevelWrapper user={user} />
+      )}
+    </section>
+  )
+}