Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)
SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
@@ -0,0 +1,263 @@
|
||||
'use client'
|
||||
|
||||
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 Link from '@scandic-hotels/design-system/Link'
|
||||
import { OldDSButton as Button } from '@scandic-hotels/design-system/OldDSButton'
|
||||
import Subtitle from '@scandic-hotels/design-system/Subtitle'
|
||||
import { Typography } from '@scandic-hotels/design-system/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 '@scandic-hotels/design-system/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 (
|
||||
<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={image?.url}
|
||||
altText={image?.alt}
|
||||
rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
|
||||
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}
|
||||
<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={onClick}
|
||||
>
|
||||
<Link
|
||||
href={`${selectRate(lang)}?hotel=${operaId}`}
|
||||
color="none"
|
||||
keepSearchParams
|
||||
>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: 'See rooms',
|
||||
})}
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<NoPriceAvailableCard />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user