9931d9edef
Feat(WEB-307) Display correct membership information * fix: fix typo * chore: update fetch of user membership * chore: update components to use api data * chore: remove lang as static value * fix: adapt to dev updates * fix: adapt to code from dev * fix: break out MembershipLevel into its a React component * fix: add enum to zod validation * refactor: rename tier to level * refactor: remove unnecessary casts * refactor: change toString() to hideEmpty=false * refactor: remove toString() * refactor: remove hideEmpty from title and subtitle * fix: update currentLevel with data * fix: fix from rebase Approved-by: Michael Zetterberg
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useParams } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
|
|
import { CheckIcon } from "@/components/Icons"
|
|
import {
|
|
BestFriend,
|
|
CloseFriend,
|
|
DearFriend,
|
|
GoodFriend,
|
|
LoyalFriend,
|
|
NewFriend,
|
|
TrueFriend,
|
|
} from "@/components/Levels"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import levelsData from "./data"
|
|
|
|
import styles from "./loyaltyLevels.module.css"
|
|
|
|
import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
|
|
|
|
export default function LoyaltyLevels() {
|
|
const params = useParams()
|
|
const lang = params.lang as Lang
|
|
const { formatMessage } = useIntl()
|
|
|
|
const { levels } = levelsData[lang]
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles.cardContainer}>
|
|
{levels.map((level: Level) => (
|
|
<LevelCard
|
|
key={level.level}
|
|
formatMessage={formatMessage}
|
|
lang={lang}
|
|
level={level}
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button asChild intent="primary">
|
|
<Link className={styles.link} href={`/${lang}/compare-all-levels`}>
|
|
{formatMessage({ id: "Compare all levels" })}
|
|
</Link>
|
|
</Button>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
|
|
const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
|
|
const qualifications = level.requiredNights
|
|
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
|
|
: pointsString
|
|
|
|
let Level = null
|
|
switch (level.level) {
|
|
case 1:
|
|
Level = NewFriend
|
|
break
|
|
case 2:
|
|
Level = GoodFriend
|
|
break
|
|
case 3:
|
|
Level = CloseFriend
|
|
break
|
|
case 4:
|
|
Level = DearFriend
|
|
break
|
|
case 5:
|
|
Level = LoyalFriend
|
|
break
|
|
case 6:
|
|
Level = TrueFriend
|
|
break
|
|
case 7:
|
|
Level = BestFriend
|
|
break
|
|
}
|
|
return (
|
|
<article className={styles.card}>
|
|
<Title className={styles.tierHeading} level="h4">
|
|
{level.level}
|
|
</Title>
|
|
{Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
|
|
<div className={styles.textContainer}>
|
|
<Body textTransform="bold">{qualifications}</Body>
|
|
{level.benefits.map((benefit) => (
|
|
<Body key={benefit.title} textAlign="center">
|
|
<CheckIcon className={styles.checkIcon} />
|
|
{benefit.title}
|
|
</Body>
|
|
))}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|