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

import { useIntl } from "react-intl"

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

import IconChip from "../TempDesignSystem/IconChip"

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

type BookingCodeChipProps = {
  alignCenter?: boolean
  bookingCode?: string | null
  isBreakfastIncluded?: boolean
  isCampaign?: boolean
  isUnavailable?: boolean
}

export default function BookingCodeChip({
  alignCenter,
  bookingCode,
  isBreakfastIncluded,
  isCampaign,
  isUnavailable,
}: BookingCodeChipProps) {
  const intl = useIntl()

  if (isCampaign) {
    return (
      <IconChip
        color="green"
        icon={<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={<DiscountIcon color="Icon/Feedback/Information" />}
      className={alignCenter ? styles.center : undefined}
    >
      <p className={styles.bookingCodeChip}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <strong>
            {intl.formatMessage({ defaultMessage: "Booking code" })}
          </strong>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span className={`${isUnavailable ? styles.unavailable : ""}`}>
            {isUnavailable
              ? intl.formatMessage(
                  { defaultMessage: "{code} unavailable" },
                  { code: bookingCode }
                )
              : intl.formatMessage(
                  { defaultMessage: "{code} applied" },
                  { code: bookingCode }
                )}
          </span>
        </Typography>
      </p>
    </IconChip>
  )
}