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:
Binary file not shown.
Binary file not shown.
@@ -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(
|
||||
{
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -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 (
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -3177,6 +3177,7 @@ export const SymbolCodepointsArray = [
|
||||
'train',
|
||||
'tram',
|
||||
'transit_ticket',
|
||||
'trophy',
|
||||
'transcribe',
|
||||
'transfer_within_a_station',
|
||||
'transform',
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -209,6 +209,7 @@ const icons = [
|
||||
'tram',
|
||||
'transit_ticket',
|
||||
'travel',
|
||||
'trophy',
|
||||
'travel_luggage_and_bags',
|
||||
'tv_guide',
|
||||
'tv_remote',
|
||||
|
||||
Reference in New Issue
Block a user