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
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -0,0 +1,37 @@
|
||||
.card {
|
||||
background: var(--Surface-Primary-Default);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
padding: var(--Space-x2) var(--Space-x4) var(--Space-x4);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
grid-template-areas:
|
||||
"icon"
|
||||
"content";
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--Text-Heading);
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
display: grid;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.card {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "icon content";
|
||||
padding: var(--Space-x1) var(--Space-x4);
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
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 styles from "./highestLevelCard.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
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<TrophyIcon className={styles.icon} width={79} height={118} />
|
||||
<div className={styles.content}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h3 className={styles.title}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Hello Best Friend!",
|
||||
})}
|
||||
</h3>
|
||||
</Typography>
|
||||
{pointsEarned && (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"you've made it to the top by earning {pointAmount} <strong>points!</strong> Continue earning points for more points to spend.",
|
||||
},
|
||||
{
|
||||
pointAmount: (
|
||||
<strong>{intl.formatNumber(pointsEarned)}</strong>
|
||||
),
|
||||
strong: (str) => <strong>{str}</strong>,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
.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;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.progressSection.hasMarker {
|
||||
padding-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.progressContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.levelMarker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.markerPin {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.markerLine {
|
||||
width: 1px;
|
||||
height: 21px;
|
||||
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.markerLabelContainer {
|
||||
position: relative;
|
||||
height: var(--Space-x3);
|
||||
margin-top: var(--Space-x15);
|
||||
}
|
||||
|
||||
.markerLabel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/* Define both edges - let browser calculate width automatically */
|
||||
inset-inline-start: var(--Space-x3); /* respects card padding */
|
||||
inset-inline-end: calc(100% - var(--marker-pos)); /* right edge under pin */
|
||||
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--Text-Secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 521px) {
|
||||
.markerLabelContainer {
|
||||
height: var(--Space-x2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.Surface-Brand-Primary-1-OnSurface-Default {
|
||||
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
||||
}
|
||||
|
||||
.Surface-Brand-Primary-1-Default {
|
||||
background: var(--Surface-Brand-Primary-1-Default);
|
||||
}
|
||||
|
||||
.Surface-Brand-Primary-1-OnSurface-Default .title {
|
||||
color: var(--Text-Brand-OnPrimary-3-Heading);
|
||||
}
|
||||
|
||||
.Surface-Brand-Primary-1-OnSurface-Default .date {
|
||||
color: var(--Text-Brand-OnPrimary-2-Accent);
|
||||
}
|
||||
|
||||
.Surface-Brand-Primary-1-Default .title,
|
||||
.Surface-Brand-Primary-1-Default .date {
|
||||
color: var(--Text-Brand-OnPrimary-1-Heading);
|
||||
}
|
||||
|
||||
.levelProgressCard {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
padding: var(--Space-x3) var(--Space-x2);
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.progressHeader {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: var(--Space-x05);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.date {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.infoButton {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.levelProgressCard {
|
||||
padding: var(--Space-x3) var(--Space-x4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
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"
|
||||
|
||||
export interface levelProgressCardProps
|
||||
extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
|
||||
VariantProps<typeof levelProgressCardVariants> {
|
||||
user: User
|
||||
}
|
||||
|
||||
export interface ProgressLevelWrapperProps {
|
||||
user: User
|
||||
}
|
||||
|
||||
export interface ProgressLevelCardProps {
|
||||
pointsEarned?: number | null
|
||||
pointsToNextLevel?: number | null
|
||||
pointsNeededToKeepLevel: number | null
|
||||
}
|
||||
|
||||
export interface HighestLevelCardProps {
|
||||
membershipLevel: MembershipLevel
|
||||
intl: IntlShape
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./levelProgressCard.module.css"
|
||||
|
||||
export const levelProgressCardVariants = cva(styles.levelProgressCard, {
|
||||
variants: {
|
||||
color: {
|
||||
"Surface/Brand/Primary 1/OnSurface/Default":
|
||||
styles["Surface-Brand-Primary-1-OnSurface-Default"],
|
||||
"Surface/Brand/Primary 1/Default":
|
||||
styles["Surface-Brand-Primary-1-Default"],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "Surface/Brand/Primary 1/OnSurface/Default",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user