'use client' import { useState } from 'react' import { useIntl } from 'react-intl' import { selectRate } from '@scandic-hotels/common/constants/routes/hotelReservation' import Body from '../../../Body' import Caption from '../../../Caption' import Footnote from '../../../Footnote' import { IconButton } from '../../../IconButton' import { MaterialIcon } from '../../../Icons/MaterialIcon' import Link from '../../../Link' import { OldDSButton as Button } from '../../../OldDSButton' import Subtitle from '../../../Subtitle' import { Typography } from '../../../Typography' import { NoPriceAvailableCard } from '../../NoPriceAvailableCard' import { HotelCardDialogImage } from '../../HotelCardDialogImage' import styles from './standaloneHotelCardDialog.module.css' import { Lang } from '@scandic-hotels/common/constants/language' import { HotelPin } from '../../../Map/types' import { FacilityToIcon } from '../../../FacilityToIcon' import { HotelPointsRow } from '../../HotelPointsRow' interface StandaloneHotelCardProps { data: HotelPin lang: Lang isUserLoggedIn: boolean handleClose: () => void onClick?: () => void } export function StandaloneHotelCardDialog({ data, lang, handleClose, isUserLoggedIn, onClick, }: StandaloneHotelCardProps) { const intl = useIntl() const [imageError, setImageError] = useState(false) const { name, chequePrice, publicPrice, memberPrice, redemptionPrice, voucherPrice, currency, amenities, image, ratings, operaId, hasEnoughPoints, } = data const notEnoughPointsLabel = intl.formatMessage({ defaultMessage: 'Not enough points', }) const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints return (
{name}
{amenities.slice(0, 3).map((facility) => { const Icon = ( ) return (
{Icon} {facility.name}
) })}
{publicPrice || memberPrice || redemptionPrice || voucherPrice || chequePrice ? ( <>
{redemptionPrice ? ( {intl.formatMessage({ defaultMessage: 'Available rates', })} ) : ( {intl.formatMessage({ defaultMessage: 'From', })} )} {chequePrice && ( {intl.formatMessage( { defaultMessage: '{price} {currency}', }, { price: chequePrice.numberOfCheques, currency: 'CC', } )} {chequePrice.additionalPricePerStay > 0 ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx ' + ' + intl.formatMessage( { defaultMessage: '{price} {currency}', }, { price: chequePrice.additionalPricePerStay, currency: chequePrice.currency, } ) : null} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} / {intl.formatMessage({ defaultMessage: 'night', })} )} {voucherPrice && ( {intl.formatMessage( { defaultMessage: '{price} {currency}', }, { price: voucherPrice, currency, } )} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} / {intl.formatMessage({ defaultMessage: 'night', })} )} {publicPrice && !isUserLoggedIn && ( {intl.formatMessage( { defaultMessage: '{price} {currency}', }, { price: publicPrice, currency, } )} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} / {intl.formatMessage({ defaultMessage: 'night', })} )} {memberPrice && ( {intl.formatMessage( { defaultMessage: '{price} {currency}', }, { price: memberPrice, currency, } )} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} / {intl.formatMessage({ defaultMessage: 'night', })} )} {redemptionPrice && ( )}
{shouldShowNotEnoughPoints ? (
{notEnoughPointsLabel}
) : ( )} ) : ( )}
) }