scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: we showed duplicate rooms because every bed represents a room

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-03-19 10:01:05 +01:00
parent 200ed55a2c
commit cf91d3d947
12 changed files with 356 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -17,94 +17,89 @@ import styles from "./hotelInfoCard.module.css"
import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
export default async function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
const hotel = hotelData?.hotel
export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
const intl = await getIntl()
const sortedFacilities = hotel?.detailedFacilities
const sortedFacilities = hotel.detailedFacilities
.sort((a, b) => b.sortOrder - a.sortOrder)
.slice(0, 5)
const galleryImages = mapApiImagesToGalleryImages(hotel?.galleryImages || [])
const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
return (
<article className={styles.container}>
{hotel && (
<section className={styles.wrapper}>
<div className={styles.imageWrapper}>
<ImageGallery title={hotel.name} images={galleryImages} fill />
{hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)}
</div>
<div className={styles.hotelContent}>
<div className={styles.hotelInformation}>
<Title as="h2" textTransform="uppercase">
{hotel.name}
</Title>
<div className={styles.hotelAddressDescription}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
},
{
address: hotel.address.streetAddress,
city: hotel.address.city,
distanceToCityCenterInKm: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
<Body color="uiTextHighContrast">
{hotel.hotelContent.texts.descriptions?.medium}
</Body>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Body textTransform="bold" className={styles.facilityTitle}>
{intl.formatMessage({ id: "At the hotel" })}
</Body>
{sortedFacilities?.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent
className={styles.facilitiesIcon}
color="grey80"
/>
)}
<Body color="uiTextHighContrast">{facility.name}</Body>
</div>
)
})}
</div>
<ReadMore
label={intl.formatMessage({ id: "See all amenities" })}
hotelId={hotel.operaId}
hotel={hotel}
showCTA={false}
/>
<section className={styles.wrapper}>
<div className={styles.imageWrapper}>
<ImageGallery title={hotel.name} images={galleryImages} fill />
{hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)}
</div>
<div className={styles.hotelContent}>
<div className={styles.hotelInformation}>
<Title as="h2" textTransform="uppercase">
{hotel.name}
</Title>
<div className={styles.hotelAddressDescription}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
},
{
address: hotel.address.streetAddress,
city: hotel.address.city,
distanceToCityCenterInKm: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
<Body color="uiTextHighContrast">
{hotel.hotelContent.texts.descriptions?.medium}
</Body>
</div>
</div>
</section>
)}
{hotel?.specialAlerts.map((alert) => {
return (
<div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
<Alert
key={alert.id}
type={alert.type}
heading={alert.heading}
text={alert.text}
<Divider color="subtle" variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Body textTransform="bold" className={styles.facilityTitle}>
{intl.formatMessage({ id: "At the hotel" })}
</Body>
{sortedFacilities?.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent
className={styles.facilitiesIcon}
color="grey80"
/>
)}
<Body color="uiTextHighContrast">{facility.name}</Body>
</div>
)
})}
</div>
<ReadMore
label={intl.formatMessage({ id: "See all amenities" })}
hotelId={hotel.operaId}
hotel={hotel}
showCTA={false}
/>
</div>
)
})}
</div>
</section>
{hotel.specialAlerts.map((alert) => (
<div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
<Alert
key={alert.id}
type={alert.type}
heading={alert.heading}
text={alert.text}
/>
</div>
))}
</article>
)
}