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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-09-15 11:48:18 +00:00
parent 295e98a560
commit 0737f4fb78
29 changed files with 388 additions and 285 deletions

View File

@@ -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(
{

View File

@@ -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">

View File

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

View File

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

View File

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

View File

@@ -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;

View File

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

View File

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

View File

@@ -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 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 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} />
@@ -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>

View File

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

View File

@@ -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}
/>
)
}

View File

@@ -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 ProgressLevelWrapper from "./ProgressLevelWrapper"
import ProgressCardHighestLevel from "./InnerCard/ProgressCardHighestLevel"
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
membershipLevel={user.membership.membershipLevel}
intl={intl}
{data.type === "highest-complete" && (
<SuccessCard pointsEarned={data.earned} />
)}
{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>
)

View File

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

View File

@@ -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 {
user: User
}
export type LevelProgressData =
| { 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 {
pointsEarned?: number | null
pointsToNextLevel?: number | null
pointsNeededToKeepLevel: number | null
}
export interface HighestLevelCardProps {
membershipLevel: MembershipLevel
intl: IntlShape
export interface ProgressCalculation {
percentage: number
markerPosition?: number
total: number
}

View File

@@ -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 }
}

View File

@@ -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 (

View File

@@ -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:

View File

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

View File

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

View File

@@ -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,

View File

@@ -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)

View File

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