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)
+30
@@ -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>
|
||||
)
|
||||
}
|
||||
+30
@@ -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>
|
||||
)
|
||||
}
|
||||
+97
@@ -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>
|
||||
)
|
||||
}
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
+69
@@ -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>
|
||||
)
|
||||
}
|
||||
+30
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import TrophyIcon from "@scandic-hotels/design-system/Icons/TrophyIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./successCard.module.css"
|
||||
|
||||
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} />
|
||||
<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 earned {pointAmount} points this member year.",
|
||||
},
|
||||
{
|
||||
pointAmount: (
|
||||
<strong>{intl.formatNumber(pointsEarned)}</strong>
|
||||
),
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+37
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user