127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { notFound, 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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import levelsData from "@/data/loyaltyLevels"
|
|
|
|
import SectionWrapper from "../SectionWrapper"
|
|
|
|
import styles from "./loyaltyLevels.module.css"
|
|
|
|
import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
|
|
import type { Level, LevelCardProps } from "@/types/components/overviewTable"
|
|
|
|
export default function LoyaltyLevels({
|
|
dynamic_content,
|
|
firstItem,
|
|
}: LoyaltyLevelsProps) {
|
|
const params = useParams()
|
|
const lang = params.lang as Lang
|
|
const { formatMessage } = useIntl()
|
|
|
|
const { levels } = levelsData[lang]
|
|
return (
|
|
<SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
|
|
<section className={styles.cardContainer}>
|
|
{levels.map((level: Level) => (
|
|
<LevelCard
|
|
key={level.level}
|
|
formatMessage={formatMessage}
|
|
lang={lang}
|
|
level={level}
|
|
/>
|
|
))}
|
|
</section>
|
|
</SectionWrapper>
|
|
)
|
|
}
|
|
|
|
function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
|
|
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
|
|
default: {
|
|
const loyaltyLevel = level.level as never
|
|
console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
|
|
notFound()
|
|
}
|
|
}
|
|
const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "points" })} `
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
<header>
|
|
<BiroScript
|
|
type="two"
|
|
color="primaryLightOnSurfaceAccent"
|
|
tilted="large"
|
|
>
|
|
{formatMessage({ id: "Level" })} {level.level}
|
|
</BiroScript>
|
|
<Level color="red" />
|
|
</header>
|
|
<Title textAlign="center" level="h5">
|
|
{pointsString}
|
|
{level.requiredNights ? (
|
|
<span className={styles.redText}>
|
|
{formatMessage({ id: "or" })} {level.requiredNights}{" "}
|
|
{formatMessage({ id: "nights" })}
|
|
</span>
|
|
) : null}
|
|
</Title>
|
|
<div className={styles.textContainer}>
|
|
{level.benefits.map((benefit) => (
|
|
<Caption
|
|
className={styles.levelText}
|
|
key={benefit.title}
|
|
textAlign="center"
|
|
color="textMediumContrast"
|
|
>
|
|
<CheckIcon
|
|
className={styles.checkIcon}
|
|
color="primaryLightOnSurfaceAccent"
|
|
/>
|
|
{benefit.title}
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|