web/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/index.tsx

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

import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
import { getProfile } from "@/lib/trpc/memoizedRequests"

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

import { ProgressSection } from "./ProgressSection"

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

const MAX_NIGHTS = 100

export async function L6Progress() {
  const user = await getProfile()
  const intl = await getIntl()
  const lang = await getLang()

  if (
    !user ||
    "error" in user ||
    user?.membership?.membershipLevel !== MembershipLevelEnum.L6
  ) {
    return null
  }

  const nightsToTopTier = user?.membership?.nightsToTopTier

  // A simple falsy check won't work here as we want to pass through 0.
  if (nightsToTopTier === null || nightsToTopTier === undefined) {
    return null
  }

  const nightsStayed = MAX_NIGHTS - nightsToTopTier
  // Cap progress at 100 to prevent overflow.
  const progressValue = Math.min(nightsStayed, MAX_NIGHTS)

  const tierStartDate = getTierStartDate(user.membership.tierExpirationDate)
  const formattedStartDate = tierStartDate
    ? dt(tierStartDate).locale(lang).format("D MMMM YYYY")
    : null

  const bestFriendLabel = TIER_TO_FRIEND_MAP[MembershipLevelEnum.L7]

  return (
    <div className={styles.l6Progress}>
      <header className={styles.header}>
        <Typography variant="Title/Subtitle/md">
          <h3 className={styles.title}>
            {intl.formatMessage({
              id: "previousStays.totalStays",
              defaultMessage: "Total stays",
            })}
          </h3>
        </Typography>
        {formattedStartDate && (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.since}>
              {intl.formatMessage(
                {
                  id: "previousStays.sinceDate",
                  defaultMessage: "Since {date}",
                },
                { date: formattedStartDate }
              )}
            </p>
          </Typography>
        )}
      </header>

      <ProgressSection
        nightsStayed={nightsStayed}
        progressValue={progressValue}
        maxNights={MAX_NIGHTS}
        bestFriendLabel={bestFriendLabel}
      />
    </div>
  )
}