de4b3c1c3c
Chore/eslint curly braces * Add eslint rule for curly braces * run eslint --fix for all files Approved-by: Linus Flood
128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
|
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@scandic-hotels/common/dt"
|
|
import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Modal from "@scandic-hotels/design-system/Modal"
|
|
import Link from "@scandic-hotels/design-system/OldDSLink"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { compareAllLevels, faq } from "@/constants/webHrefs"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./LevelProgressModal.module.css"
|
|
|
|
type LevelProgressModalProps = {
|
|
color: string | null
|
|
tierExpires: string | null
|
|
}
|
|
|
|
export default function LevelProgressModal({
|
|
color,
|
|
tierExpires,
|
|
}: LevelProgressModalProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
// calculate tierStarts by tierExpires
|
|
let tierStarts: string | null = null
|
|
|
|
if (tierExpires) {
|
|
const date = new Date(tierExpires)
|
|
date.setFullYear(date.getFullYear() - 1)
|
|
tierStarts = date.toISOString().split("T")[0]
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
className={styles.dialog}
|
|
trigger={
|
|
<IconButton theme="Black">
|
|
<MaterialIcon
|
|
className={styles.infoButton}
|
|
icon="info"
|
|
color={
|
|
color === "Surface/Brand/Primary 1/OnSurface/Default"
|
|
? "Icon/Inverted"
|
|
: "Icon/Interactive/Default"
|
|
}
|
|
/>
|
|
</IconButton>
|
|
}
|
|
>
|
|
<div className={styles.levelProgressModal}>
|
|
<Typography variant="Title/Subtitle/lg">
|
|
<h2 id="level-progress-modal-title" className={styles.title}>
|
|
{intl.formatMessage({
|
|
id: "myPages.yourMemberYearAndLevelProgress",
|
|
defaultMessage: "Your member year and level progress",
|
|
})}
|
|
</h2>
|
|
</Typography>
|
|
<span>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<h3 id="level-progress-modal-subtitle">
|
|
{intl.formatMessage({
|
|
id: "myPages.currentMemberYear",
|
|
defaultMessage: "Current member year",
|
|
})}
|
|
</h3>
|
|
</Typography>
|
|
<div>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<span className={styles.dates}>
|
|
<time id="level-progress-modal-start-date">
|
|
{dt(tierStarts).locale(lang).format("MMM, YYYY")}
|
|
</time>
|
|
→
|
|
<time id="level-progress-modal-end-date">
|
|
{dt(tierExpires).locale(lang).format("MMM D, YYYY")}
|
|
</time>
|
|
</span>
|
|
</Typography>
|
|
</div>
|
|
</span>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p id="level-progress-modal-text">
|
|
{intl.formatMessage({
|
|
id: "myPages.pointsYouEarnDetermineYourLevel",
|
|
defaultMessage:
|
|
"The points you earn this year determine your level for both this and the next member year.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<Link
|
|
size="large"
|
|
href={compareAllLevels[lang]}
|
|
color="Text/Interactive/Secondary"
|
|
className={styles.link}
|
|
textDecoration="underline"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "myPages.compareAllLevels",
|
|
defaultMessage: "Compare all levels",
|
|
})}
|
|
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
|
|
</Link>
|
|
<Link
|
|
size="large"
|
|
href={faq[lang]}
|
|
color="Text/Interactive/Secondary"
|
|
className={styles.link}
|
|
textDecoration="underline"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "common.scandicFriendsFaq",
|
|
defaultMessage: "Scandic Friends FAQ",
|
|
})}
|
|
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
|
|
</Link>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|