Merged in feat/LOY-315-Membership-Status-Card (pull request #2712)

Feat(LOY-315): Membership Overview Card * fix(LOY-315): new divider variants * feat(LOY-315): Add MembershipOverviewCard * refactor(LOY-315): abstract sasbooststatus * fix(LOY-315): correct space vars * fix(LOY-315): date formatting fixes Approved-by: Erik Tiekstra
2025-09-01 13:42:50 +00:00
parent 9e3294b113
commit 914871607d
7 changed files with 205 additions and 16 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/index.tsx
@@ -0,0 +1,85 @@
+import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
+
+import { membershipLevels } from "@/constants/membershipLevels"
+
+import MembershipLevelIcon from "@/components/Levels/Icon"
+import { getIntl } from "@/i18n"
+
+import SasBoostStatus from "./SasBoostStatus"
+
+import styles from "./membershipOverviewCard.module.css"
+
+import type { User } from "@scandic-hotels/trpc/types/user"
+
+interface MembershipOverviewCardProps {
+  user: User
+}
+
+export default async function MembershipOverviewCard({
+  user,
+}: MembershipOverviewCardProps) {
+  const intl = await getIntl()
+
+  if (!user.membership?.membershipLevel) {
+    return null
+  }
+
+  const pointsToSpendText =
+    typeof user.membership.currentPoints === "number"
+      ? intl.formatNumber(user.membership.currentPoints)
+      : intl.formatMessage({ defaultMessage: "N/A" })
+
+  const sasMembership = user.loyalty
+    ? getEurobonusMembership(user.loyalty)
+    : null
+
+  return (
+    <section className={styles.card} aria-labelledby="membership-level">
+      <header className={styles.membershipHeader}>
+        {sasMembership && (
+          <MaterialIcon icon="travel" size={20} color="Icon/Accent" />
+        )}
+        <Typography variant="Title/Overline/sm">
+          <h2 className={styles.levelText} id="membership-level">
+            {intl.formatMessage(
+              {
+                defaultMessage: "LEVEL {level}",
+              },
+              { level: membershipLevels[user.membership.membershipLevel] }
+            )}
+          </h2>
+        </Typography>
+        {sasMembership && (
+          <SasBoostStatus sasMembership={sasMembership} intl={intl} />
+        )}
+      </header>
+
+      <MembershipLevelIcon
+        level={MembershipLevelEnum[user.membership.membershipLevel]}
+        height="44"
+        width="268"
+        rows={1}
+      />
+
+      <Divider
+        className={styles.divider}
+        color="Border/Divider/Brand/OnPrimary 3/Default"
+      />
+
+      <Typography variant="Title/Overline/sm">
+        <h3 className={styles.pointsLabel}>
+          {intl.formatMessage({
+            defaultMessage: "POINTS TO SPEND",
+          })}
+        </h3>
+      </Typography>
+      <Typography variant="Title/lg">
+        <p className={styles.pointsValue}>{pointsToSpendText}</p>
+      </Typography>
+    </section>
+  )
+}