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

import { cx } from 'class-variance-authority'
import { useIntl } from 'react-intl'

import { Divider } from '../../Divider'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { Typography } from '../../Typography'
import styles from './hotelPriceCard.module.css'

type Price = {
  pricePerStay: number
  pricePerNight: number
  currency: string
}

export type PriceCardProps = {
  productTypePrices: {
    rateType: RateTypeEnum
    localPrice: Price
    requestedPrice?: Price
  }
  isMemberPrice?: boolean
  className?: string
  isCampaign?: boolean
}

export function HotelPriceCard({
  productTypePrices,
  isMemberPrice = false,
  className,
  isCampaign = false,
}: PriceCardProps) {
  const intl = useIntl()
  const isRegularOrPublicPromotionRate =
    productTypePrices.rateType === RateTypeEnum.Regular ||
    productTypePrices.rateType === RateTypeEnum.PublicPromotion

  return (
    <dl className={cx(styles.priceCard, className)}>
      {isRegularOrPublicPromotionRate &&
        (isMemberPrice ? (
          <div className={styles.priceRow}>
            <dt>
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.redColor}
              >
                <p>
                  {intl.formatMessage({
                    id: 'booking.memberPrice',
                    defaultMessage: 'Member price',
                  })}
                </p>
              </Typography>
            </dt>
          </div>
        ) : (
          <div className={styles.priceRow}>
            <dt>
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.defaultColor}
              >
                <p>
                  {intl.formatMessage({
                    id: 'booking.standardPrice',
                    defaultMessage: 'Standard price',
                  })}
                </p>
              </Typography>
            </dt>
          </div>
        ))}
      <div className={styles.priceRow}>
        <dt>
          <Typography
            variant="Body/Supporting text (caption)/smBold"
            className={isMemberPrice ? styles.redColor : styles.defaultColor}
          >
            <p>
              {intl.formatMessage({
                id: 'common.from',
                defaultMessage: 'From',
              })}
            </p>
          </Typography>
        </dt>
        <dd>
          <div className={styles.price}>
            <Typography
              variant="Title/Subtitle/md"
              className={
                isMemberPrice || isCampaign
                  ? styles.redColor
                  : styles.defaultColor
              }
            >
              <p> {productTypePrices.localPrice.pricePerNight}</p>
            </Typography>
            <Typography
              variant="Body/Paragraph/mdBold"
              className={
                isMemberPrice || isCampaign
                  ? styles.redColor
                  : styles.defaultColor
              }
            >
              <p>
                {productTypePrices.localPrice.currency}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span className={styles.perNight}>
                  /
                  {intl.formatMessage({
                    id: 'common.night',
                    defaultMessage: 'night',
                  })}
                </span>
              </p>
            </Typography>
          </div>
        </dd>
      </div>
      {productTypePrices?.requestedPrice && (
        <div className={styles.priceRow}>
          <dt>
            <Typography
              variant="Body/Supporting text (caption)/smRegular"
              className={styles.secondaryColor}
            >
              <p>
                {intl.formatMessage({
                  id: 'booking.approx',
                  defaultMessage: 'Approx.',
                })}
              </p>
            </Typography>
          </dt>
          <dd>
            <Typography
              variant="Body/Supporting text (caption)/smRegular"
              className={styles.secondaryColor}
            >
              <p>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {`${productTypePrices.requestedPrice.pricePerNight} `}
                {productTypePrices.requestedPrice.currency}
              </p>
            </Typography>
          </dd>
        </div>
      )}
      {productTypePrices.localPrice.pricePerStay !==
        productTypePrices.localPrice.pricePerNight &&
        // Handle undefined scenarios
        productTypePrices.localPrice.pricePerNight && (
          <>
            <Divider className={styles.divider} />
            <div className={styles.priceRow}>
              <dt>
                <Typography
                  variant="Body/Supporting text (caption)/smRegular"
                  className={styles.secondaryColor}
                >
                  <p>
                    {intl.formatMessage({
                      id: 'common.total',
                      defaultMessage: 'Total',
                    })}
                  </p>
                </Typography>
              </dt>
              <dd>
                <Typography
                  variant="Body/Supporting text (caption)/smRegular"
                  className={styles.secondaryColor}
                >
                  <p>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${productTypePrices.localPrice.pricePerStay} `}
                    {productTypePrices.localPrice.currency}
                  </p>
                </Typography>
              </dd>
            </div>
          </>
        )}
    </dl>
  )
}