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

import { Button as ButtonRAC } from 'react-aria-components'
import { useIntl } from 'react-intl'

import IconChip from '../IconChip'
import DiscountIcon from '../Icons/Nucleo/Benefits/discount-2-2'
import FilledDiscountIcon from '../Icons/Nucleo/Benefits/FilledDiscount'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'

import styles from './bookingCodeChip.module.css'

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

type BookingCodeChipProps =
  | BookingCodeChipWithoutCloseButtonProps
  | BookingCodeChipWithCloseButtonProps

export function BookingCodeChip({
  alignCenter,
  bookingCode,
  isCampaign,
  isUnavailable,
  withText = true,
  filledIcon = false,
  ...props
}: BookingCodeChipProps) {
  const intl = useIntl()

  if (isCampaign) {
    return (
      <IconChip
        color="green"
        icon={
          filledIcon ? (
            <FilledDiscountIcon color="Icon/Feedback/Success" />
          ) : (
            <DiscountIcon color="Icon/Feedback/Success" />
          )
        }
        className={alignCenter ? styles.center : undefined}
      >
        <p className={styles.bookingCodeChip}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <strong>
              {intl.formatMessage({
                id: 'booking.campaign',
                defaultMessage: 'Campaign',
              })}
            </strong>
          </Typography>
          {bookingCode && (
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <span>{bookingCode}</span>
            </Typography>
          )}
        </p>
      </IconChip>
    )
  }

  if (!bookingCode) {
    return null
  }

  return (
    <IconChip
      color="blue"
      icon={
        filledIcon ? (
          <FilledDiscountIcon fill="Icon/Feedback/Information" />
        ) : (
          <DiscountIcon color="Icon/Feedback/Information" />
        )
      }
      className={alignCenter ? styles.center : undefined}
    >
      <p
        className={`${styles.bookingCodeChip} ${isUnavailable ? styles.unavailable : ''}`}
      >
        {withText && (
          <Typography variant="Body/Supporting text (caption)/smBold">
            <strong>
              {intl.formatMessage({
                id: 'booking.bookingCode',
                defaultMessage: 'Booking code',
              })}
            </strong>
          </Typography>
        )}
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>{bookingCode}</span>
        </Typography>
      </p>
      {props.withCloseButton && (
        <>
          <ButtonRAC className={styles.removeButton} onPress={props.onClose}>
            <MaterialIcon icon="close" size={16} color="CurrentColor" />
          </ButtonRAC>
        </>
      )}
    </IconChip>
  )
}