scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update loyalty cards and join loyalty sidebar design

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-27 16:44:40 +02:00
parent 33771a0608
commit 5be118d9e5
20 changed files with 166 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { useParams } from "next/navigation"
import { notFound, useParams } from "next/navigation"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
@@ -15,7 +15,8 @@ import {
NewFriend,
TrueFriend,
} from "@/components/Levels"
import Body from "@/components/TempDesignSystem/Text/Body"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data"
@@ -45,7 +46,7 @@ export default function LoyaltyLevels() {
}
function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
const qualifications = level.requiredNights
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
: pointsString
@@ -73,20 +74,40 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
case 7:
Level = BestFriend
break
default: {
const loyaltyLevel = level.level as never
console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
notFound()
}
}
return (
<article className={styles.card}>
<Title className={styles.levelHeading} level="h4">
{level.level}
<section>
<BiroScript
type="two"
color="primaryLightOnSurfaceAccent"
tilted="large"
>
{formatMessage({ id: "Level" })} {level.level}
</BiroScript>
<Level color="red" />
</section>
<Title textAlign="center" level="h5">
{qualifications}
</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} />
<Footnote
key={benefit.title}
textAlign="center"
color="textMediumContrast"
>
<CheckIcon
className={styles.checkIcon}
color="primaryLightOnSurfaceAccent"
/>
{benefit.title}
</Body>
</Footnote>
))}
</div>
</article>