"use client" import { useSession } from "next-auth/react" import { useState } from "react" import { useIntl } from "react-intl" import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import { isValidClientSession } from "@/utils/clientSession" import { trackEvent } from "@/utils/tracking/base" import HotelPointsRow from "../../HotelCard/HotelPointsRow" import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard" import HotelCardDialogImage from "../HotelCardDialogImage" import styles from "./standaloneHotelCardDialog.module.css" import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map" interface StandaloneHotelCardProps { data: HotelPin handleClose: () => void } export default function StandaloneHotelCardDialog({ data, handleClose, }: StandaloneHotelCardProps) { const intl = useIntl() const lang = useLang() const [imageError, setImageError] = useState(false) const { data: session } = useSession() const isUserLoggedIn = isValidClientSession(session) const { name, chequePrice, publicPrice, memberPrice, redemptionPrice, voucherPrice, currency, amenities, images, ratings, operaId, hasEnoughPoints, } = data const firstImage = images[0]?.imageSizes?.small const altText = images[0]?.metaData?.altText const notEnoughPointsLabel = intl.formatMessage({ defaultMessage: "Not enough points", }) const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints return (
{name}
{amenities.slice(0, 3).map((facility) => { const Icon = ( ) return (
{Icon && 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}
) : ( )} ) : ( )}
) }