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

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/SasBoostStatus.tsx

@@ -20,7 +20,9 @@ export default async function SasBoostStatus({
 }: SasBoostStatusProps) {
   const lang = await getLang()
 
-  if (!sasMembership.boostedTierExpires) return null
+  if (!sasMembership.boostedTierExpires || sasMembership.boostedByScandic) {
+    return null
+  }
 
   const sasBoostExpiryText = intl.formatMessage(
     {

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/index.tsx

@@ -37,10 +37,13 @@ export default async function MembershipOverviewCard({
     ? getEurobonusMembership(user.loyalty)
     : null
 
+  const showSasBoostIcon =
+    sasMembership?.boostedTierExpires && !sasMembership.boostedByScandic
+
   return (
     <section className={styles.card} aria-labelledby="membership-level">
       <header className={styles.membershipHeader}>
-        {sasMembership?.boostedTierExpires && (
+        {showSasBoostIcon && (
           <MaterialIcon icon="travel" size={20} color="Icon/Accent" />
         )}
         <Typography variant="Title/Overline/sm">

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressCardHighestLevel.tsx

@@ -0,0 +1,30 @@
+import { calculateProgress } from "../utils"
+import ProgressSection from "./ProgressSection"
+import StatsSection from "./StatsSection"
+
+import styles from "../levelProgressCard.module.css"
+
+interface ProgressCardHighestLevelProps {
+  earned: number
+  required: number
+  toKeepCurrent?: number
+}
+
+export default function ProgressCardHighestLevel({
+  earned,
+  required,
+  toKeepCurrent,
+}: ProgressCardHighestLevelProps) {
+  const progress = calculateProgress(earned, required, toKeepCurrent)
+
+  return (
+    <div className={styles.innerCard}>
+      <StatsSection earned={earned} showTrophy />
+      <ProgressSection
+        earned={earned}
+        progress={progress}
+        toKeepCurrent={toKeepCurrent}
+      />
+    </div>
+  )
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressCardLowerLevel.tsx

@@ -0,0 +1,30 @@
+import { calculateProgress } from "../utils"
+import ProgressSection from "./ProgressSection"
+import StatsSection from "./StatsSection"
+
+import styles from "../levelProgressCard.module.css"
+
+interface ProgressCardLowerLevelProps {
+  earned: number
+  toNext: number
+  toKeepCurrent?: number
+}
+
+export default function ProgressCardLowerLevel({
+  earned,
+  toNext,
+  toKeepCurrent,
+}: ProgressCardLowerLevelProps) {
+  const progress = calculateProgress(earned, earned + toNext, toKeepCurrent)
+
+  return (
+    <div className={styles.innerCard}>
+      <StatsSection earned={earned} remaining={toNext} />
+      <ProgressSection
+        earned={earned}
+        progress={progress}
+        toKeepCurrent={toKeepCurrent}
+      />
+    </div>
+  )
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { Progress } from "@scandic-hotels/design-system/Progress"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./progressSection.module.css"
+
+import type { ProgressCalculation } from "../../types"
+
+export interface ProgressSectionProps {
+  earned: number
+  progress: ProgressCalculation
+  toKeepCurrent?: number
+}
+
+export default function ProgressSection({
+  earned,
+  progress,
+  toKeepCurrent,
+}: ProgressSectionProps) {
+  const intl = useIntl()
+  const hasMarkerPosition = progress.markerPosition !== undefined
+
+  return (
+    <div
+      className={cx(styles.progressSection, {
+        [styles.hasMarker]: hasMarkerPosition,
+      })}
+    >
+      <div className={styles.progressContainer}>
+        <Progress
+          value={progress.percentage}
+          aria-label={intl.formatMessage(
+            {
+              defaultMessage:
+                "Level progress: {earned} of {total} points earned",
+            },
+            {
+              earned: intl.formatNumber(earned),
+              total: intl.formatNumber(progress.total),
+            }
+          )}
+        />
+
+        {hasMarkerPosition && toKeepCurrent && (
+          <div
+            className={styles.levelMarker}
+            style={{ left: `${progress.markerPosition}%` }}
+          >
+            <div className={styles.markerPin} />
+            <div className={styles.markerLine} />
+          </div>
+        )}
+      </div>
+
+      {hasMarkerPosition && toKeepCurrent && (
+        <div className={styles.markerLabelContainer}>
+          <span
+            className={styles.markerLabel}
+            style={
+              {
+                "--marker-pos": `${progress.markerPosition}%`,
+              } as React.CSSProperties
+            }
+          >
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  "{pointsAmount} <points>POINTS</points> <support>left to keep level</support>",
+              },
+              {
+                pointsAmount: (
+                  <Typography variant="Title/Overline/sm">
+                    <span>{intl.formatNumber(toKeepCurrent)}</span>
+                  </Typography>
+                ),
+                points: (str) => (
+                  <Typography variant="Title/Overline/sm">
+                    <span>{str}</span>
+                  </Typography>
+                ),
+                support: (str) => (
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <span>{str}</span>
+                  </Typography>
+                ),
+              }
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css

@@ -1,39 +1,3 @@
-.card {
-  background: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
-  padding: var(--Space-x3) 0;
-}
-
-.statsContainer {
-  display: flex;
-  padding: 0 var(--Space-x3);
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-}
-
-.statItem {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x05);
-}
-
-.statItem:last-child {
-  text-align: right;
-}
-
-.label {
-  color: var(--Text-Secondary);
-}
-
-.value {
-  color: var(--Text-Accent-Primary);
-  word-break: break-all;
-}
-
 .progressSection {
   padding: 0 var(--Space-x3);
   display: flex;

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/StatsSection/index.tsx

@@ -0,0 +1,69 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+
+import styles from "./statsSection.module.css"
+
+interface StatsSectionProps {
+  earned: number
+  remaining?: number
+  showTrophy?: boolean
+}
+
+export default async function StatsSection({
+  earned,
+  remaining,
+  showTrophy = false,
+}: StatsSectionProps) {
+  const intl = await getIntl()
+  return (
+    <div className={styles.statsContainer}>
+      <div className={styles.statItem}>
+        <Typography variant="Title/Overline/sm">
+          <span className={styles.label}>
+            {intl.formatMessage({
+              defaultMessage: "Points Earned",
+            })}
+          </span>
+        </Typography>
+
+        <Typography variant="Title/md">
+          <span className={styles.value} aria-describedby="points-earned-desc">
+            {intl.formatNumber(earned)}
+          </span>
+        </Typography>
+      </div>
+
+      <div className={styles.statItem}>
+        {showTrophy ? (
+          <MaterialIcon
+            icon="trophy"
+            color="Icon/Interactive/Default"
+            size={36}
+            className={styles.trophyIcon}
+          />
+        ) : (
+          <>
+            <Typography variant="Title/Overline/sm">
+              <span className={styles.label}>
+                {intl.formatMessage({
+                  defaultMessage: "Left to level up",
+                })}
+              </span>
+            </Typography>
+
+            <Typography variant="Title/md">
+              <span
+                className={styles.value}
+                aria-describedby="points-remaining-desc"
+              >
+                {intl.formatNumber(remaining ?? 0)}
+              </span>
+            </Typography>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/StatsSection/statsSection.module.css

@@ -0,0 +1,30 @@
+.statsContainer {
+  display: flex;
+  padding: 0 var(--Space-x3);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.statItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.statItem:last-child {
+  text-align: right;
+}
+
+.statItem:has(.trophyIcon) {
+  align-self: end;
+}
+
+.label {
+  color: var(--Text-Secondary);
+}
+
+.value {
+  color: var(--Text-Accent-Primary);
+  word-break: break-all;
+}

apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/SuccessCard/index.tsx

@@ -1,25 +1,16 @@
-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 { getIntl } from "@/i18n"
 
-import styles from "./highestLevelCard.module.css"
+import styles from "./successCard.module.css"
 
-import type { HighestLevelCardProps } from "../types"
+export interface SuccessCardProps {
-
+  pointsEarned?: number | null
-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
 
+export default async function SuccessCard({ pointsEarned }: SuccessCardProps) {
+  const intl = await getIntl()
   return (
     <div className={styles.card}>
       <TrophyIcon className={styles.icon} width={79} height={118} />
@@ -37,13 +28,12 @@ export default async function HighestLevelCard({
               {intl.formatMessage(
                 {
                   defaultMessage:
-                    "you've made it to the top by earning {pointAmount} <strong>points!</strong> Continue earning points for more points to spend.",
+                    "You've earned {pointAmount} points this member year.",
                 },
                 {
                   pointAmount: (
                     <strong>{intl.formatNumber(pointsEarned)}</strong>
                   ),
-                  strong: (str) => <strong>{str}</strong>,
                 }
               )}
             </p>

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

@@ -1,144 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { Progress } from "@scandic-hotels/design-system/Progress"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./progressLevelCard.module.css"
-
-import type { ProgressLevelCardProps } from "../types"
-
-export default function ProgressLevelCard({
-  pointsEarned,
-  pointsToNextLevel,
-  pointsNeededToKeepLevel,
-}: ProgressLevelCardProps) {
-  const intl = useIntl()
-
-  // TODO: Awaiting proper UX/UI specs on missing point data scenarios.
-  if (
-    typeof pointsEarned !== "number" ||
-    typeof pointsToNextLevel !== "number"
-  ) {
-    return null
-  }
-
-  const totalPointsForCurrentLevel = pointsEarned + pointsToNextLevel
-  const progressPercentage = (pointsEarned / totalPointsForCurrentLevel) * 100
-
-  // Calculate marker position (minimum threshold to keep current level)
-  const markerPosition = pointsNeededToKeepLevel
-    ? ((pointsEarned + pointsNeededToKeepLevel) / totalPointsForCurrentLevel) *
-      100
-    : null
-
-  return (
-    <div className={styles.card}>
-      <div className={styles.statsContainer}>
-        <div className={styles.statItem}>
-          <Typography variant="Title/Overline/sm">
-            <span className={styles.label}>
-              {intl.formatMessage({
-                defaultMessage: "Points Earned",
-              })}
-            </span>
-          </Typography>
-
-          <Typography variant="Title/md">
-            <span
-              className={styles.value}
-              aria-describedby="points-earned-desc"
-            >
-              {intl.formatNumber(pointsEarned)}
-            </span>
-          </Typography>
-        </div>
-
-        <div className={styles.statItem}>
-          <Typography variant="Title/Overline/sm">
-            <span className={styles.label}>
-              {intl.formatMessage({
-                defaultMessage: "Left to level up",
-              })}
-            </span>
-          </Typography>
-
-          <Typography variant="Title/md">
-            <span
-              className={styles.value}
-              aria-describedby="points-remaining-desc"
-            >
-              {intl.formatNumber(pointsToNextLevel)}
-            </span>
-          </Typography>
-        </div>
-      </div>
-
-      <div
-        className={`${styles.progressSection} ${markerPosition !== null ? styles.hasMarker : ""}`}
-      >
-        <div className={styles.progressContainer}>
-          <Progress
-            value={progressPercentage}
-            aria-label={intl.formatMessage(
-              {
-                defaultMessage:
-                  "Level progress: {earned} of {total} points earned",
-              },
-              {
-                earned: intl.formatNumber(pointsEarned),
-                total: intl.formatNumber(totalPointsForCurrentLevel),
-              }
-            )}
-          />
-
-          {markerPosition !== null && pointsNeededToKeepLevel && (
-            <div
-              className={styles.levelMarker}
-              style={{ left: `${markerPosition}%` }}
-            >
-              <div className={styles.markerPin} />
-              <div className={styles.markerLine} />
-            </div>
-          )}
-        </div>
-
-        {markerPosition !== null && pointsNeededToKeepLevel && (
-          <div className={styles.markerLabelContainer}>
-            <span
-              className={styles.markerLabel}
-              style={
-                { "--marker-pos": `${markerPosition}%` } as React.CSSProperties
-              }
-            >
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    "{pointsAmount} <points>POINTS</points> <support>left to keep level</support>",
-                },
-                {
-                  pointsAmount: (
-                    <Typography variant="Title/Overline/sm">
-                      <span>{intl.formatNumber(pointsNeededToKeepLevel)}</span>
-                    </Typography>
-                  ),
-                  points: (str) => (
-                    <Typography variant="Title/Overline/sm">
-                      <span>{str}</span>
-                    </Typography>
-                  ),
-                  support: (str) => (
-                    <Typography variant="Body/Supporting text (caption)/smRegular">
-                      <span>{str}</span>
-                    </Typography>
-                  ),
-                }
-              )}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

apps/scandic-web/components/MyPages/LevelProgressCard/ProgressLevelWrapper.tsx

@@ -1,58 +0,0 @@
-import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
-
-import { serverClient } from "@/lib/trpc/server"
-
-import ProgressLevelCard from "./ProgressLevelCard"
-
-import type { ProgressLevelWrapperProps } from "./types"
-
-export default async function ProgressLevelWrapper({
-  user,
-}: ProgressLevelWrapperProps) {
-  const caller = await serverClient()
-
-  if (!user.membership || !user.membership.membershipLevel) {
-    return null
-  }
-
-  // NOTE: We currently rely on the CMS to get "required_points" for a given level,
-  // but API is working on including them in the Profile endpoint.
-  const [currentLevel, nextLevel] = await Promise.all([
-    caller.contentstack.loyaltyLevels.byLevel({
-      level: MembershipLevelEnum[user.membership.membershipLevel],
-    }),
-
-    user.membership.nextLevel && MembershipLevelEnum[user.membership.nextLevel]
-      ? caller.contentstack.loyaltyLevels.byLevel({
-          level: MembershipLevelEnum[user.membership.nextLevel],
-        })
-      : null,
-  ])
-
-  const pointsToNextLevel = user.membership.pointsRequiredToNextlevel
-
-  // Relying on user.loyalty.points.earned isn't suffice here as it isn't limited to loyalty-level specific earnings,
-  // nor limited to earnings in the current member year.
-  // TODO: API is working on adding a tierEarnings field which we'll be able to use for this.
-  // Once that's out we won't need the nextLevel call above.
-  const currentEarnings =
-    nextLevel?.required_points && pointsToNextLevel
-      ? nextLevel?.required_points - pointsToNextLevel
-      : null
-
-  let pointsNeededToKeepLevel = null
-
-  if (currentEarnings !== null && currentLevel?.required_points) {
-    if (currentEarnings < currentLevel.required_points) {
-      pointsNeededToKeepLevel = currentLevel.required_points - currentEarnings
-    }
-  }
-
-  return (
-    <ProgressLevelCard
-      pointsToNextLevel={pointsToNextLevel}
-      pointsEarned={currentEarnings}
-      pointsNeededToKeepLevel={pointsNeededToKeepLevel}
-    />
-  )
-}

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

@@ -4,10 +4,11 @@ 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 ProgressCardHighestLevel from "./InnerCard/ProgressCardHighestLevel"
-import ProgressLevelWrapper from "./ProgressLevelWrapper"
+import ProgressCardLowerLevel from "./InnerCard/ProgressCardLowerLevel"
+import SuccessCard from "./InnerCard/SuccessCard"
+import { getLevelProgressData } from "./utils"
 import { levelProgressCardVariants } from "./variants"
 
 import styles from "./levelProgressCard.module.css"
@@ -19,13 +20,13 @@ export default async function LevelProgressCard({
   className,
   color = "Surface/Brand/Primary 1/OnSurface/Default",
 }: levelProgressCardProps) {
-  const intl = await getIntl()
-  const lang = await getLang()
-
   if (!user.membership?.membershipLevel) {
     return null
   }
 
+  const intl = await getIntl()
+  const lang = await getLang()
+  const data = await getLevelProgressData(user.membership)
   const classNames = levelProgressCardVariants({ className, color })
 
   return (
@@ -60,13 +61,25 @@ export default async function LevelProgressCard({
           }
         />
       </header>
-      {isHighestMembership(user.membership.membershipLevel) ? (
+
-        <HighestLevelCard
+      {data.type === "highest-complete" && (
-          membershipLevel={user.membership.membershipLevel}
+        <SuccessCard pointsEarned={data.earned} />
-          intl={intl}
+      )}
+
+      {data.type === "highest-incomplete" && (
+        <ProgressCardHighestLevel
+          earned={data.earned}
+          required={data.required}
+          toKeepCurrent={data.toKeepCurrent}
+        />
+      )}
+
+      {data.type === "lower-level" && (
+        <ProgressCardLowerLevel
+          earned={data.earned}
+          toNext={data.toNext}
+          toKeepCurrent={data.toKeepCurrent}
         />
-      ) : (
-        <ProgressLevelWrapper user={user} />
       )}
     </section>
   )

apps/scandic-web/components/MyPages/LevelProgressCard/levelProgressCard.module.css

@@ -54,6 +54,15 @@
   align-self: start;
 }
 
+.innerCard {
+  background: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+  padding: var(--Space-x3) 0;
+}
+
 @media screen and (min-width: 1367px) {
   .levelProgressCard {
     padding: var(--Space-x3) var(--Space-x4);

apps/scandic-web/components/MyPages/LevelProgressCard/types.ts

@@ -1,7 +1,5 @@
-import type { MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
 import type { User } from "@scandic-hotels/trpc/types/user"
 import type { VariantProps } from "class-variance-authority"
-import type { IntlShape } from "react-intl"
 
 import type { levelProgressCardVariants } from "./variants"
 
@@ -11,17 +9,23 @@ export interface levelProgressCardProps
   user: User
 }
 
-export interface ProgressLevelWrapperProps {
+export type LevelProgressData =
-  user: User
+  | { type: "highest-complete"; earned: number }
-}
+  | {
+      type: "highest-incomplete"
+      earned: number
+      toKeepCurrent?: number
+      required: number
+    }
+  | {
+      type: "lower-level"
+      earned: number
+      toNext: number
+      toKeepCurrent?: number
+    }
 
-export interface ProgressLevelCardProps {
+export interface ProgressCalculation {
-  pointsEarned?: number | null
+  percentage: number
-  pointsToNextLevel?: number | null
+  markerPosition?: number
-  pointsNeededToKeepLevel: number | null
+  total: number
-}
-
-export interface HighestLevelCardProps {
-  membershipLevel: MembershipLevel
-  intl: IntlShape
 }

apps/scandic-web/components/MyPages/LevelProgressCard/utils.ts

@@ -0,0 +1,57 @@
+import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
+
+import { serverClient } from "@/lib/trpc/server"
+
+import { isHighestMembership } from "@/utils/user"
+
+import { type LevelProgressData, type ProgressCalculation } from "./types"
+
+import type { FriendsMembership } from "@scandic-hotels/trpc/types/user"
+
+export async function getLevelProgressData(
+  membership: NonNullable<FriendsMembership>
+): Promise<LevelProgressData> {
+  const caller = await serverClient()
+  const currentLevel = await caller.contentstack.loyaltyLevels.byLevel({
+    level: MembershipLevelEnum[membership.membershipLevel],
+  })
+
+  const earned = membership.tierPoints ?? 0
+
+  // Check if user has points left to retain their current level.
+  const toKeepCurrent =
+    currentLevel?.required_points && earned < currentLevel.required_points
+      ? currentLevel.required_points - earned
+      : undefined
+
+  if (isHighestMembership(membership.membershipLevel)) {
+    return toKeepCurrent
+      ? {
+          type: "highest-incomplete",
+          earned,
+          toKeepCurrent,
+          required: currentLevel!.required_points,
+        }
+      : { type: "highest-complete", earned }
+  }
+
+  return {
+    type: "lower-level",
+    earned,
+    toNext: membership.pointsRequiredToNextlevel ?? 0,
+    toKeepCurrent,
+  }
+}
+
+export function calculateProgress(
+  earned: number,
+  total: number,
+  keepThreshold?: number
+): ProgressCalculation {
+  const percentage = (earned / total) * 100
+  const markerPosition = keepThreshold
+    ? ((earned + keepThreshold) / total) * 100
+    : undefined
+
+  return { percentage, markerPosition, total }
+}

packages/design-system/lib/components/Icons/IconByCSSelect.tsx

@@ -71,6 +71,7 @@ export default function IconByCSSelect({
     case 'tram':
     case 'transit_ticket':
     case 'travel':
+    case 'trophy':
     case 'travel_luggage_and_bags':
     case 'favorite':
       return (

packages/design-system/lib/components/Icons/IconByIconName.tsx

@@ -347,6 +347,8 @@ export function IconByIconName({
       return <MaterialIcon icon="train" {...props} />
     case IconName.Tripadvisor:
       return <TripadvisorIcon {...props} />
+    case IconName.Trophy:
+      return <MaterialIcon icon="trophy" {...props} />
     case IconName.TshirtWash:
       return <MaterialIcon icon="laundry" {...props} />
     case IconName.TvCasting:

packages/design-system/lib/components/Icons/MaterialIcon/MaterialSymbol/consts.ts

@@ -3177,6 +3177,7 @@ export const SymbolCodepointsArray = [
   'train',
   'tram',
   'transit_ticket',
+  'trophy',
   'transcribe',
   'transfer_within_a_station',
   'transform',

packages/design-system/lib/fonts.css

@@ -269,7 +269,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-93de53b3.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-f2d895e1.woff2)
     format('woff2');
 }
 

packages/trpc/lib/routers/user/helpers.ts

@@ -40,6 +40,7 @@ export function getFriendsMembership(userLoyalty: UserLoyalty) {
     nightsToTopTier: friendsMembership.nightsToTopTier,
     pointsRequiredToNextlevel: friendsMembership.pointsToNextTier,
     tierExpirationDate: loyalty.tierExpires,
+    tierPoints: friendsMembership.tierPoints,
     pointsExpiryDate: pointExpiration?.expires,
     pointsToExpire: pointExpiration?.points,
     memberSince: friendsMembership.memberSince,

packages/trpc/lib/routers/user/output.ts

@@ -47,6 +47,7 @@ export const friendsMembershipSchema = z
     tier: scandicFriendsTier,
     nextTier: scandicFriendsTier.nullish(),
     pointsToNextTier: z.number().nullish(),
+    tierPoints: z.number().nullish(),
     nightsToTopTier: z.number().nullish(),
   })
   .merge(commonMembershipSchema)

scripts/material-symbols-update.mjs

@@ -209,6 +209,7 @@ const icons = [
   'tram',
   'transit_ticket',
   'travel',
+  'trophy',
   'travel_luggage_and_bags',
   'tv_guide',
   'tv_remote',