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,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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user