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

import { Typography } from "../../Typography"
import { RatePointsOption, RateTermDetails } from "../types"

import { RadioGroup } from "react-aria-components"
import { useIntl } from "react-intl"
import { IconButton } from "../../IconButton"

import { Radio } from "../../Radio"
import Modal from "../Modal"
import styles from "../rate-card.module.css"
import { variants } from "../variants"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { getCurrencyText } from "../../currency-utils"

interface PointsRateCardProps {
  rateTitle: string
  paymentTerm: string
  bannerText: string
  rates: RatePointsOption[]
  selectedRate: string | undefined
  onRateSelect: (value: string) => void
  isNotEnoughPoints?: boolean
  notEnoughPointsText?: string
  rateTermDetails: RateTermDetails[]
  id: string
  roomTypeCode: string
}

export default function PointsRateCard({
  rateTitle,
  paymentTerm,
  bannerText,
  id,
  rates,
  selectedRate,
  isNotEnoughPoints,
  notEnoughPointsText,
  onRateSelect,
  roomTypeCode,
  rateTermDetails,
}: PointsRateCardProps) {
  const classNames = variants({
    variant: "Points",
  })
  const intl = useIntl()

  return (
    <div className={classNames}>
      <Typography variant="Label/xsBold">
        <p className={styles.banner}>{bannerText}</p>
      </Typography>
      <div className={styles.container}>
        <header>
          <Typography variant="Tag/sm">
            <h3 className={styles.title}>
              <Modal
                title={rateTitle}
                subtitle={paymentTerm}
                trigger={
                  <IconButton
                    variant="Muted"
                    emphasis
                    size="sm"
                    aria-label={intl.formatMessage({
                      id: "selectRate.rateCard.openReservationPolicy",
                      defaultMessage: "Open reservation policy",
                    })}
                    iconName="info"
                  />
                }
              >
                {rateTermDetails.map((termGroup) => (
                  <div key={termGroup.title} className={styles.terms}>
                    <Typography variant="Body/Paragraph/mdBold">
                      <p>{termGroup.title}</p>
                    </Typography>
                    {termGroup.terms.map((term) => (
                      <Typography key={term}>
                        <p className={styles.term}>
                          <MaterialIcon
                            icon="check"
                            color="Icon/Feedback/Success"
                            size={20}
                            className={styles.termsIcon}
                          />
                          {term}
                        </p>
                      </Typography>
                    ))}
                  </div>
                ))}
              </Modal>
              {rateTitle}
              <span className={styles.textSecondary}>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {` / ${paymentTerm}`}
              </span>
            </h3>
          </Typography>
        </header>
        <div className={styles.content}>
          <RadioGroup
            /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
            aria-label={`${rateTitle} / ${paymentTerm}`}
            aria-describedby={roomTypeCode}
            value={selectedRate ? selectedRate : null} // default to null for focus to land on the first radio on tab, undefined set tabIndex to -1
            onChange={onRateSelect}
          >
            {rates.map((rate, index) => (
              <div key={index} className={styles.rateRow}>
                <Radio
                  value={rate.rateCode}
                  isDisabled={rate.isDisabled || isNotEnoughPoints}
                  id={`${id}-${rate.rateCode}`}
                >
                  <div className={styles.pointsRow}>
                    <Typography variant="Title/Subtitle/md">
                      <p>
                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                        {`${rate.points} `}
                        <Typography variant="Body/Supporting text (caption)/smBold">
                          <span>
                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                            {`${getCurrencyText(intl, rate.currency, rate.points, rate.pointsType)} ${rate.additionalPrice ? " + " : ""}`}
                          </span>
                        </Typography>
                      </p>
                    </Typography>
                    {rate.additionalPrice && (
                      <Typography variant="Title/Subtitle/md">
                        <p>
                          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                          {`${rate.additionalPrice.price} `}
                          <Typography variant="Body/Supporting text (caption)/smBold">
                            <span>{rate.additionalPrice.currency}</span>
                          </Typography>
                        </p>
                      </Typography>
                    )}
                  </div>
                </Radio>
              </div>
            ))}
          </RadioGroup>
        </div>
        {isNotEnoughPoints ? (
          <footer className={styles.footer}>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <p className={styles.notEnoughPoints}>
                <span className={styles.filledIcon}>
                  <MaterialIcon icon="info" isFilled size={20} />
                </span>
                {notEnoughPointsText}
              </p>
            </Typography>
          </footer>
        ) : null}
      </div>
    </div>
  )
}