web/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

import { useIntl } from "react-intl"

import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"

import styles from "./hotelChequeCard.module.css"
import { Typography } from "../../Typography"

type ProductTypeCheque = {
  localPrice: {
    numberOfCheques: number
    additionalPricePerStay: number
    currency: CurrencyEnum | null | undefined
  }
  requestedPrice?: {
    numberOfCheques: number
    additionalPricePerStay: number
    currency: CurrencyEnum | null | undefined
  }
}

export default function HotelChequeCard({
  productTypeCheque,
}: {
  productTypeCheque: ProductTypeCheque
}) {
  const intl = useIntl()
  return (
    <div className={styles.chequeCard}>
      <div className={styles.chequeRow}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <p>
            {intl.formatMessage({
              id: "common.from",
              defaultMessage: "From",
            })}
          </p>
        </Typography>
        <div className={styles.cheque}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>{CurrencyEnum.CC}</p>
          </Typography>
          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <>
              +
              <Typography variant="Title/Subtitle/md">
                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>{productTypeCheque.localPrice.currency}</p>
              </Typography>
            </>
          ) : null}
        </div>
      </div>
      {productTypeCheque.requestedPrice &&
      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
        <div className={styles.chequeRow}>
          <Typography
            variant="Body/Supporting text (caption)/smRegular"
            className={styles.secondaryText}
          >
            <p>
              {intl.formatMessage({
                id: "booking.approx",
                defaultMessage: "Approx.",
              })}
            </p>
          </Typography>
          <Typography
            variant="Body/Supporting text (caption)/smRegular"
            className={styles.secondaryText}
          >
            <p>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
              {CurrencyEnum.CC}
              {productTypeCheque.requestedPrice.additionalPricePerStay
                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                  " + "
                : ""}
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
            </p>
          </Typography>
        </div>
      ) : null}
    </div>
  )
}