web/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/index.tsx

import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"

import { membershipLevels } from "@/constants/membershipLevels"

import MembershipLevelIcon from "@/components/Levels/Icon"
import { getIntl } from "@/i18n"

import SasBoostStatus from "./SasBoostStatus"

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

import type { User } from "@scandic-hotels/trpc/types/user"

interface MembershipOverviewCardProps {
  user: User
}

export default async function MembershipOverviewCard({
  user,
}: MembershipOverviewCardProps) {
  const intl = await getIntl()

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

  const pointsToSpendText =
    typeof user.membership.currentPoints === "number"
      ? intl.formatNumber(user.membership.currentPoints)
      : intl.formatMessage({ defaultMessage: "N/A" })

  const sasMembership = user.loyalty
    ? getEurobonusMembership(user.loyalty)
    : null

  return (
    <section className={styles.card} aria-labelledby="membership-level">
      <header className={styles.membershipHeader}>
        {sasMembership && (
          <MaterialIcon icon="travel" size={20} color="Icon/Accent" />
        )}
        <Typography variant="Title/Overline/sm">
          <h2 className={styles.levelText} id="membership-level">
            {intl.formatMessage(
              {
                defaultMessage: "LEVEL {level}",
              },
              { level: membershipLevels[user.membership.membershipLevel] }
            )}
          </h2>
        </Typography>
        {sasMembership && (
          <SasBoostStatus sasMembership={sasMembership} intl={intl} />
        )}
      </header>

      <MembershipLevelIcon
        level={MembershipLevelEnum[user.membership.membershipLevel]}
        height="44"
        width="268"
        rows={1}
      />

      <Divider
        className={styles.divider}
        color="Border/Divider/Brand/OnPrimary 3/Default"
      />

      <Typography variant="Title/Overline/sm">
        <h3 className={styles.pointsLabel}>
          {intl.formatMessage({
            defaultMessage: "POINTS TO SPEND",
          })}
        </h3>
      </Typography>
      <Typography variant="Title/lg">
        <p className={styles.pointsValue}>{pointsToSpendText}</p>
      </Typography>
    </section>
  )
}