web/packages/design-system/lib/components/BookingCodeChip/index.tsx

import { useIntl } from 'react-intl'

import IconChip from '../IconChip'
import FilledDiscountIcon from '../Icons/Nucleo/Benefits/FilledDiscount'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'

import styles from './bookingCodeChip.module.css'
import { cx } from 'class-variance-authority'
import { IconButton } from '../IconButton'

type BaseBookingCodeChipProps = {
  alignCenter?: boolean
  bookingCode?: string | null
  isCampaign?: boolean
  isUnavailable?: boolean
  isCampaignUnavailable?: boolean
  withText?: boolean
}
type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
  withCloseButton?: false
  onClose?: undefined
}
type BookingCodeChipWithCloseButtonProps = BaseBookingCodeChipProps & {
  withCloseButton: true
  onClose: () => void
}

type BookingCodeChipProps =
  | BookingCodeChipWithoutCloseButtonProps
  | BookingCodeChipWithCloseButtonProps

export function BookingCodeChip({
  alignCenter,
  bookingCode,
  isCampaign,
  isCampaignUnavailable,
  isUnavailable,
  withText = true,
  withCloseButton,
  onClose,
}: BookingCodeChipProps) {
  const intl = useIntl()

  const isCampaignRate = isCampaign || isCampaignUnavailable
  if (!isCampaignRate && !bookingCode) {
    return null
  }

  const color = isCampaignRate ? 'green' : 'blue'

  const iconColor = isCampaignRate
    ? 'Icon/Feedback/Success'
    : 'Icon/Feedback/Information'

  const isUnavailableRate = isCampaignRate
    ? isCampaignUnavailable
    : isUnavailable

  const label = isCampaignRate
    ? intl.formatMessage({
        id: 'booking.campaign',
        defaultMessage: 'Campaign',
      })
    : intl.formatMessage({
        id: 'booking.bookingCode',
        defaultMessage: 'Booking code',
      })

  const icon = isCampaignRate ? (
    <MaterialIcon icon="sell" color={iconColor} isFilled={false} size={20} />
  ) : (
    <FilledDiscountIcon fill={iconColor} size={20} />
  )

  return (
    <IconChip
      color={color}
      icon={icon}
      className={alignCenter ? styles.center : undefined}
    >
      <p
        className={cx(styles.bookingCodeChip, {
          [styles.unavailable]: isUnavailableRate,
        })}
      >
        {withText && (
          <Typography variant="Body/Supporting text (caption)/smBold">
            <strong>{label}</strong>
          </Typography>
        )}

        {bookingCode && (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {withText && <span className={styles.separator}>∙</span>}
              {bookingCode}
            </span>
          </Typography>
        )}
      </p>
      {withCloseButton && (
        <IconButton
          style="Muted"
          theme="Inverted"
          wrapping
          className={styles.removeButton}
          onPress={onClose}
          aria-label={intl.formatMessage({
            id: 'booking.removeBookingCode',
            defaultMessage: 'Remove booking code',
          })}
        >
          <MaterialIcon icon="close" size={16} color={iconColor} />
        </IconButton>
      )}
    </IconChip>
  )
}