82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { serverClient } from "@/lib/trpc/server"
|
|
|
|
import { CheckIcon } from "@/components/Icons"
|
|
import MembershipLevelIcon from "@/components/Levels/Icon"
|
|
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import SectionWrapper from "../SectionWrapper"
|
|
|
|
import styles from "./loyaltyLevels.module.css"
|
|
|
|
import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
|
|
import type { LevelCardProps } from "@/types/components/overviewTable"
|
|
|
|
export default async function LoyaltyLevels({
|
|
dynamic_content,
|
|
firstItem,
|
|
}: LoyaltyLevelsProps) {
|
|
const uniqueLevels = await serverClient().contentstack.rewards.all({
|
|
unique: true,
|
|
})
|
|
|
|
return (
|
|
<SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
|
|
<section className={styles.cardContainer}>
|
|
{uniqueLevels.map((level) => (
|
|
<LevelCard key={level.level_id} level={level} />
|
|
))}
|
|
</section>
|
|
</SectionWrapper>
|
|
)
|
|
}
|
|
|
|
async function LevelCard({ level }: LevelCardProps) {
|
|
const lang = getLang()
|
|
const intl = await getIntl()
|
|
const pointsString = `${level.required_points.toLocaleString(lang)} ${intl.formatMessage({ id: "points" })} `
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
<header>
|
|
<BiroScript
|
|
type="two"
|
|
color="primaryLightOnSurfaceAccent"
|
|
tilted="large"
|
|
>
|
|
{intl.formatMessage({ id: "Level" })} {level.user_facing_tag}
|
|
</BiroScript>
|
|
<MembershipLevelIcon level={level.level_id} color="red" />
|
|
</header>
|
|
<Title textAlign="center" level="h5">
|
|
{pointsString}
|
|
{level.required_nights ? (
|
|
<span className={styles.redText}>
|
|
{intl.formatMessage({ id: "or" })} {level.required_nights}{" "}
|
|
{intl.formatMessage({ id: "nights" })}
|
|
</span>
|
|
) : null}
|
|
</Title>
|
|
<div className={styles.textContainer}>
|
|
{level.rewards.map((reward) => (
|
|
<Caption
|
|
className={styles.levelText}
|
|
key={reward.reward_id}
|
|
textAlign="center"
|
|
color="textMediumContrast"
|
|
>
|
|
<CheckIcon
|
|
className={styles.checkIcon}
|
|
color="primaryLightOnSurfaceAccent"
|
|
/>
|
|
{reward.label}
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|