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

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'
import { IconButton } from '../IconButton'

type BaseBookingCodeChipProps = {
  alignCenter?: boolean
  bookingCode?: string | null
  isCampaign?: boolean
  isUnavailable?: boolean
  withText?: boolean
  filledIcon?: 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,
  isUnavailable,
  withText = true,
  filledIcon = false,
  withCloseButton,
  onClose,
}: BookingCodeChipProps) {
  const intl = useIntl()

  if (isCampaign) {
    return (
      <IconChip
        color="green"
        icon={
          filledIcon ? (
            <MaterialIcon
              icon="sell"
              color="Icon/Feedback/Success"
              isFilled={!!filledIcon}
            />
          ) : (
            <MaterialIcon icon="sell" 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">
              {/*eslint-disable-next-line formatjs/no-literal-string-in-jsx*/}
              <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="Icon/Feedback/Success"
            />
          </IconButton>
        )}
      </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>
      {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="Icon/Feedback/Information"
          />
        </IconButton>
      )}
    </IconChip>
  )
}