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

import { dt } from "@scandic-hotels/common/dt"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isHighestMembership } from "@/utils/user"

import HighestLevelCard from "./HighestLevelCard"
import ProgressLevelWrapper from "./ProgressLevelWrapper"
import { levelProgressCardVariants } from "./variants"

import styles from "./levelProgressCard.module.css"

import type { levelProgressCardProps } from "./types"

export default async function LevelProgressCard({
  user,
  className,
  color = "Surface/Brand/Primary 1/OnSurface/Default",
}: levelProgressCardProps) {
  const intl = await getIntl()
  const lang = await getLang()

  if (!user.membership?.membershipLevel) {
    return null
  }

  const classNames = levelProgressCardVariants({ className, color })

  return (
    <section aria-labelledby="level-progress-card-title" className={classNames}>
      <header className={styles.progressHeader}>
        <Typography variant="Title/xs">
          <h2 id="level-progress-card-title" className={styles.title}>
            {intl.formatMessage({
              defaultMessage: "Your Level Progress",
            })}
          </h2>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.date}>
            {intl.formatMessage(
              { defaultMessage: "Valid until {date}" },
              {
                date: dt(user.membership.tierExpirationDate)
                  .locale(lang)
                  .format("D MMM YYYY"),
              }
            )}
          </p>
        </Typography>
        <MaterialIcon
          className={styles.infoButton}
          icon="info"
          color={
            color === "Surface/Brand/Primary 1/OnSurface/Default"
              ? "Icon/Inverted"
              : "Icon/Interactive/Default"
          }
        />
      </header>
      {isHighestMembership(user.membership.membershipLevel) ? (
        <HighestLevelCard
          membershipLevel={user.membership.membershipLevel}
          intl={intl}
        />
      ) : (
        <ProgressLevelWrapper user={user} />
      )}
    </section>
  )
}