web/packages/design-system/lib/components/RateCard/Code/index.tsx

import { Rate, RateTermDetails } from "../types"

import { cx } from "class-variance-authority"
import { Button as ButtonRAC } from "react-aria-components"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { Typography } from "../../Typography"
import styles from "../rate-card.module.css"
import { variants } from "../variants"
import TermModal from "../TermModal"

interface CodeRateCardProps {
  id: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
  rate: Rate
  bannerText: string
  comparisonRate?: Omit<Rate, "label">
  approximateRate?: Rate
  roomTypeCode: string
  isHighlightedRate?: boolean
  handleChange: () => void
  handleTermsClick?: () => void
  rateTermDetails: RateTermDetails[]
}

export default function CodeRateCard({
  id,
  isSelected,
  rateTitle,
  paymentTerm,
  rate,
  roomTypeCode,
  approximateRate,
  comparisonRate,
  bannerText,
  isHighlightedRate,
  handleChange,
  rateTermDetails,
}: CodeRateCardProps) {
  const classNames = variants({
    variant: "Code",
  })

  return (
    <div
      className={cx(classNames, {
        [styles.selected]: isSelected,
      })}
    >
      <ButtonRAC
        onPress={handleChange}
        className={styles.buttonOverlay}
        aria-pressed={isSelected}
        aria-describedby={`${roomTypeCode} ${id}-title`}
        aria-labelledby={`${id}-details`}
      />
      <Typography variant="Label/xsBold">
        <p className={styles.banner}>{bannerText}</p>
      </Typography>
      <div className={styles.container}>
        <Typography variant="Tag/sm">
          <h3 className={styles.title}>
            <TermModal
              rateTitle={rateTitle}
              paymentTerm={paymentTerm}
              rateTermDetails={rateTermDetails}
            />
            <span id={`${id}-title`}>
              {rateTitle}
              <span className={styles.textSecondary}>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {` / ${paymentTerm}`}
              </span>
            </span>
          </h3>
        </Typography>
        <div className={styles.content} id={`${id}-details`}>
          <div
            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ""}`}
          >
            <Typography variant="Body/Supporting text (caption)/smBold">
              <p>{rate.label}</p>
            </Typography>
            <Typography variant="Title/Subtitle/md">
              <p>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {`${rate.price} `}
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <span>{rate.unit}</span>
                </Typography>
              </p>
            </Typography>
          </div>
          {comparisonRate ? (
            <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
              <Typography variant="Title/Subtitle/md">
                <p>
                  <span className={styles.strikethrough}>
                    {comparisonRate.price}
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  </span>{" "}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span className={styles.strikethrough}>
                      {comparisonRate.unit}
                    </span>
                  </Typography>
                </p>
              </Typography>
            </div>
          ) : null}
          {approximateRate ? (
            <div className={`${styles.rateRow} ${styles.approximateRate}`}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>{approximateRate.label}</p>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>
                  {approximateRate.price} {approximateRate.unit}
                </p>
              </Typography>
            </div>
          ) : null}
        </div>
      </div>
      {isSelected && (
        <MaterialIcon
          icon="check"
          size={22}
          color="Icon/Inverted"
          className={styles.checkIcon}
        />
      )}
    </div>
  )
}