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

import { useIntl } from "react-intl"

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

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

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
          variant="Muted"
          size="sm"
          className={styles.removeButton}
          onPress={onClose}
          aria-label={intl.formatMessage({
            id: "booking.removeBookingCode",
            defaultMessage: "Remove booking code",
          })}
          iconName="close"
        />
      )}
    </IconChip>
  )
}