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 { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Radio } from '../../Radio'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
import { useIntl } from 'react-intl'

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
                    theme="Black"
                    style="Muted"
                    wrapping
                    aria-label={intl.formatMessage({
                      id: 'selectRate.rateCard.openReservationPolicy',
                      defaultMessage: 'Open reservation policy',
                    })}
                  >
                    <MaterialIcon icon="info" size={20} color="Icon/Default" />
                  </IconButton>
                }
              >
                {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 */}
                            {`${rate.currency} ${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>
  )
}