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

import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import TrophyIcon from "@scandic-hotels/design-system/Icons/TrophyIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { serverClient } from "@/lib/trpc/server"

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

import type { HighestLevelCardProps } from "../types"

export default async function HighestLevelCard({
  membershipLevel,
  intl,
}: HighestLevelCardProps) {
  const caller = await serverClient()

  const highestLevel = await caller.contentstack.loyaltyLevels.byLevel({
    level: MembershipLevelEnum[membershipLevel],
  })

  const pointsEarned = highestLevel?.required_points

  return (
    <div className={styles.card}>
      <TrophyIcon className={styles.icon} width={79} height={118} />
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3 className={styles.title}>
            {intl.formatMessage({
              defaultMessage: "Hello Best Friend!",
            })}
          </h3>
        </Typography>
        {pointsEarned && (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "you've made it to the top by earning {pointAmount} <strong>points!</strong> Continue earning points for more points to spend.",
                },
                {
                  pointAmount: (
                    <strong>{intl.formatNumber(pointsEarned)}</strong>
                  ),
                  strong: (str) => <strong>{str}</strong>,
                }
              )}
            </p>
          </Typography>
        )}
      </div>
    </div>
  )
}