web/apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/index.tsx

import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import MoneyHandEllipsisIcon from "@scandic-hotels/design-system/Icons/MoneyHandEllipsisIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { spendPoints } from "@/constants/webHrefs"

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

import ExpiringPointsSeeAllButton from "./ExpiringPointsSeeAllButton"
import { getExpiryLabel } from "./utils"

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

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

interface PointsToSpendCardProps {
  user: User
}

export default async function PointsToSpendCard({
  user,
}: PointsToSpendCardProps) {
  const intl = await getIntl()
  const lang = await getLang()

  if (!user.membership) {
    return null
  }

  const spendablePoints = user.membership.currentPoints
  const hasPointsToSpend = spendablePoints > 0

  const expiringPoints = user.membership.pointsToExpire
  const expiryDate = user.membership.pointsExpiryDate
  const expiryDateText = getExpiryLabel(expiryDate, intl, lang)

  return (
    <section
      className={styles.card}
      aria-labelledby="points-to-spend-card-title"
    >
      <div className={styles.content}>
        <MoneyHandEllipsisIcon
          width="140"
          height="128"
          className={styles.icon}
          aria-hidden="true"
        />
        <div className={styles.textContent}>
          <Typography variant="Title/xs">
            <h2 id="points-to-spend-card-title" className={styles.title}>
              {intl.formatMessage({
                id: "common.pointsToSpend",
                defaultMessage: "Points to spend",
              })}
            </h2>
          </Typography>
          <div className={styles.pointsContainer}>
            <Typography variant="Title/lg">
              <span className={styles.pointsValue}>
                {intl.formatNumber(spendablePoints)}
              </span>
            </Typography>
            {!hasPointsToSpend && (
              <Typography variant="Title/Overline/sm">
                <span className={styles.pointsLabel}>
                  {intl.formatMessage({
                    id: "common.points",
                    defaultMessage: "Points",
                  })}
                </span>
              </Typography>
            )}
          </div>
          {hasPointsToSpend && (
            <ButtonLink href={spendPoints[lang]} target="_blank" variant="Text">
              {intl.formatMessage({
                id: "points.pointsToSpendCard.howToSpendCta",
                defaultMessage: "How to spend points",
              })}
              <MaterialIcon
                icon="chevron_right"
                color="CurrentColor"
                size={24}
              />
            </ButtonLink>
          )}
        </div>
      </div>
      {!hasPointsToSpend && (
        <div className={styles.description}>
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.descriptionText}>
              {intl.formatMessage({
                id: "points.pointsToSpendCard.description",
                defaultMessage:
                  "Earn points by staying at Scandic. Turn your points into free nights and memorable experiences.",
              })}
            </p>
          </Typography>
        </div>
      )}
      {expiringPoints && expiryDate && (
        <div className={styles.expiringPointsCard}>
          <Typography variant="Title/Overline/sm">
            <p className={styles.expiryDate}>{expiryDateText}</p>
          </Typography>
          <div className={styles.pointsRow}>
            <Typography variant="Body/Lead text">
              <p className={styles.expiringPoints}>
                {intl.formatMessage(
                  {
                    id: "points.pointsToSpendCard.expiringPointsText",
                    defaultMessage: "{expiringPoints} points expiring",
                  },
                  {
                    expiringPoints: (
                      <Typography
                        key={`expiring-points-${expiringPoints}`}
                        variant="Title/Subtitle/md"
                      >
                        <strong>{intl.formatNumber(expiringPoints)}</strong>
                      </Typography>
                    ),
                  }
                )}
              </p>
            </Typography>
            <ExpiringPointsSeeAllButton
              expiringPoints={expiringPoints}
              expiryDate={expiryDate}
            />
          </div>
        </div>
      )}
    </section>
  )
}