web/components/Blocks/DynamicContent/SAS/LinkedAccounts/Card/TierLevelCard.tsx

import { cva, type VariantProps } from "class-variance-authority"
import Image from "next/image"

import RocketLaunch from "@/components/Icons/RocketLaunch"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

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

import type { ComponentProps, ReactNode } from "react"

type BoostState = "boostedInOtherSystem" | "boostedInThisSystem" | "notBoosted"

type BaseProps = {
  points: number
  tier: string
  boostState: BoostState
}

type BoostedInOther = BaseProps & {
  boostState: "boostedInOtherSystem"
  boostedTier: string
  boostExpiration: Date
}

type BoostedInThis = BaseProps & {
  boostState: "boostedInThisSystem"
}

type NotBoosted = BaseProps & {
  boostState: "notBoosted"
}

const variants = cva(styles.tierlevelcard, {
  variants: {
    bonusSystem: {
      scandic: styles.scandic,
      sas: styles.sas,
    },
  },
})

type Props = VariantProps<typeof variants> &
  (BoostedInOther | BoostedInThis | NotBoosted)
export async function TierLevelCard({
  points,
  tier,
  bonusSystem,
  ...boosted
}: Props) {
  const intl = await getIntl()

  const className = variants({ bonusSystem })

  return (
    <article className={className}>
      {boosted.boostState === "boostedInOtherSystem" && (
        <section className={styles.boostedInfo}>
          <div className={styles.boostedTier}>
            <Caption
              uppercase
              type="bold"
              color={bonusSystemSpecifics[bonusSystem!].color}
            >
              {boosted.boostedTier}
            </Caption>
            <Caption
              type="bold"
              color={bonusSystemSpecifics[bonusSystem!].color}
            >
              {intl.formatMessage({ id: "Level upgrade" })}
            </Caption>
          </div>
          <Caption color={bonusSystemSpecifics[bonusSystem!].color}>
            {intl.formatMessage(
              {
                id: "Upgrade expires {upgradeExpires, date, short}",
              },
              { upgradeExpires: boosted.boostExpiration }
            )}
          </Caption>
        </section>
      )}
      <section className={styles.baseInfo}>
        <div className={styles.header}>
          <div className={styles.tierInfo}>
            <span>
              <Caption
                uppercase
                type="bold"
                color={bonusSystemSpecifics[bonusSystem!].color}
              >
                {tier}
              </Caption>
            </span>
            <div className={styles.logoContainer}>
              {bonusSystemSpecifics[bonusSystem!].logo}
            </div>
          </div>

          {boosted.boostState === "boostedInThisSystem" && (
            <Footnote className={styles.footnote}>
              <RocketLaunch
                color={bonusSystemSpecifics[bonusSystem!].rocketLaunchColor}
              />
              <span>
                {intl.formatMessage({
                  id: bonusSystemSpecifics[bonusSystem!].boostTextId,
                })}
              </span>
            </Footnote>
          )}
        </div>

        <Subtitle>
          {intl.formatMessage(
            { id: "{points, number} Bonus points" },
            { points }
          )}
        </Subtitle>
      </section>
    </article>
  )
}

export function TierLevelCardSkeleton({
  bonusSystem,
}: {
  bonusSystem?: NonNullable<Props["bonusSystem"]>
}) {
  const className = variants({ bonusSystem })

  return (
    <article className={className}>
      <section className={styles.baseInfo}>
        <div className={styles.header}>
          <div className={styles.tierInfo}>
            <span>
              <SkeletonShimmer width={"50px"} height={"16px"} />
            </span>

            {bonusSystem && (
              <div className={styles.eurobonusLogo}>
                {bonusSystemSpecifics[bonusSystem!].logo}
              </div>
            )}
            {!bonusSystem && <SkeletonShimmer width={"74px"} height={"16px"} />}
          </div>
        </div>

        <Subtitle>
          <SkeletonShimmer width={"240px"} height={"26px"} />
        </Subtitle>
      </section>
    </article>
  )
}

type BonusSystemSpecifics = {
  boostTextId: string
  logo: ReactNode
  rocketLaunchColor: ComponentProps<typeof RocketLaunch>["color"]
  color: ComponentProps<typeof Caption>["color"]
}

type BonusSystemMapping = {
  [bonusSystem in NonNullable<
    VariantProps<typeof variants>["bonusSystem"]
  >]: BonusSystemSpecifics
}

const bonusSystemSpecifics: BonusSystemMapping = {
  scandic: {
    boostTextId: "Your Friends level has upgraded your Eurobonus level",
    rocketLaunchColor: "red",
    color: "burgundy",
    logo: (
      <Image
        alt="Scandic logo"
        height={16}
        src="/_static/img/scandic-logotype.svg"
        width={74}
      />
    ),
  },
  sas: {
    boostTextId: "Your Eurobonus level has upgraded your friends level",
    rocketLaunchColor: "blue",
    color: "uiTextActive",
    logo: (
      <>
        <Image
          alt="SAS logo"
          height={16}
          src="/_static/img/sas/sas-logotype.svg"
          width={44}
        />
        <Caption uppercase type="bold">
          Eurobonus
        </Caption>
      </>
    ),
  },
}