web/apps/scandic-web/components/BookingCodeChip/index.tsx

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

import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import FilledDiscountIcon from "@scandic-hotels/design-system/Icons/FilledDiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

type BaseBookingCodeChipProps = {
  alignCenter?: boolean
  bookingCode?: string | null
  isBreakfastIncluded?: boolean
  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 default function BookingCodeChip({
  alignCenter,
  bookingCode,
  isBreakfastIncluded,
  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({ defaultMessage: "Campaign" })}
            </strong>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {isBreakfastIncluded
                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                  `${bookingCode ?? ""} ${intl.formatMessage({
                    defaultMessage: "Breakfast included",
                  })}`
                : // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                  `${bookingCode ?? ""} ${intl.formatMessage({
                    defaultMessage: "Breakfast excluded",
                  })}`}
            </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({ 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>
  )
}