web/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx

/* 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 { getTierStartDate } from "@/utils/getTierStartDate"

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()

  const tierStarts = getTierStartDate(tierExpires)

  return (
    <Modal
      className={styles.dialog}
      trigger={
        <IconButton
          variant="Muted"
          emphasis={color !== "Surface/Brand/Primary 1/OnSurface/Default"}
          iconName="info"
        />
      }
    >
      <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>
  )
}