923206ee4c
chore(SW-3145): Move Title and Subtitle to design-system * Move Title and Subtitle to design-system * Fix export Approved-by: Linus Flood
277 lines
9.2 KiB
TypeScript
277 lines
9.2 KiB
TypeScript
"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 Body from "@scandic-hotels/design-system/Body"
|
|
import Caption from "@scandic-hotels/design-system/Caption"
|
|
import Footnote from "@scandic-hotels/design-system/Footnote"
|
|
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
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 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 (
|
|
<div className={styles.container}>
|
|
<IconButton
|
|
theme="Black"
|
|
style="Muted"
|
|
className={styles.closeButton}
|
|
onPress={handleClose}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Close",
|
|
})}
|
|
>
|
|
<MaterialIcon icon="close" size={22} color="CurrentColor" />
|
|
</IconButton>
|
|
<HotelCardDialogImage
|
|
firstImage={firstImage}
|
|
altText={altText}
|
|
rating={ratings}
|
|
imageError={imageError}
|
|
setImageError={setImageError}
|
|
position="left"
|
|
/>
|
|
<div className={styles.content}>
|
|
<div className={styles.name}>
|
|
<Body textTransform="bold">{name}</Body>
|
|
</div>
|
|
<div className={styles.facilities}>
|
|
{amenities.slice(0, 3).map((facility) => {
|
|
const Icon = (
|
|
<FacilityToIcon id={facility.id} size={16} color="Icon/Default" />
|
|
)
|
|
return (
|
|
<div className={styles.facilitiesItem} key={facility.id}>
|
|
{Icon && Icon}
|
|
<Footnote color="uiTextMediumContrast">
|
|
{facility.name}
|
|
</Footnote>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className={styles.pricesContainer}>
|
|
{publicPrice ||
|
|
memberPrice ||
|
|
redemptionPrice ||
|
|
voucherPrice ||
|
|
chequePrice ? (
|
|
<>
|
|
<div className={styles.priceCard}>
|
|
{redemptionPrice ? (
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Available rates",
|
|
})}
|
|
</Caption>
|
|
) : (
|
|
<Caption type="bold">
|
|
{intl.formatMessage({
|
|
defaultMessage: "From",
|
|
})}
|
|
</Caption>
|
|
)}
|
|
{chequePrice && (
|
|
<Subtitle type="two">
|
|
{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}
|
|
<Body asChild>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>
|
|
/
|
|
{intl.formatMessage({
|
|
defaultMessage: "night",
|
|
})}
|
|
</span>
|
|
</Body>
|
|
</Subtitle>
|
|
)}
|
|
{voucherPrice && (
|
|
<Subtitle type="two">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{price} {currency}",
|
|
},
|
|
{
|
|
price: voucherPrice,
|
|
currency,
|
|
}
|
|
)}
|
|
<Body asChild>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>
|
|
/
|
|
{intl.formatMessage({
|
|
defaultMessage: "night",
|
|
})}
|
|
</span>
|
|
</Body>
|
|
</Subtitle>
|
|
)}
|
|
{publicPrice && !isUserLoggedIn && (
|
|
<Subtitle type="two">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{price} {currency}",
|
|
},
|
|
{
|
|
price: publicPrice,
|
|
currency,
|
|
}
|
|
)}
|
|
<Body asChild>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>
|
|
/
|
|
{intl.formatMessage({
|
|
defaultMessage: "night",
|
|
})}
|
|
</span>
|
|
</Body>
|
|
</Subtitle>
|
|
)}
|
|
{memberPrice && (
|
|
<Subtitle type="two" color="red">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{price} {currency}",
|
|
},
|
|
{
|
|
price: memberPrice,
|
|
currency,
|
|
}
|
|
)}
|
|
<Body asChild color="red">
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span>
|
|
/
|
|
{intl.formatMessage({
|
|
defaultMessage: "night",
|
|
})}
|
|
</span>
|
|
</Body>
|
|
</Subtitle>
|
|
)}
|
|
{redemptionPrice && (
|
|
<HotelPointsRow pointsPerStay={redemptionPrice} />
|
|
)}
|
|
</div>
|
|
{shouldShowNotEnoughPoints ? (
|
|
<div className={styles.notEnoughPointsButton}>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<span>{notEnoughPointsLabel}</span>
|
|
</Typography>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
asChild
|
|
theme="base"
|
|
size="small"
|
|
className={styles.button}
|
|
onClick={() =>
|
|
trackEvent({
|
|
event: "hotelClickMap",
|
|
map: {
|
|
action: "hotel click - map",
|
|
},
|
|
hotelInfo: {
|
|
hotelId: operaId,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<Link
|
|
href={`${selectRate(lang)}?hotel=${operaId}`}
|
|
color="none"
|
|
keepSearchParams
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "See rooms",
|
|
})}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</>
|
|
) : (
|
|
<NoPriceAvailableCard />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|