8f3d203b70
fix(SW-1041): fix UI design feedback * fix(SW-1041): fix UI design feedback * fix(SW-1041): small fix * fix(SW-1041): add filter and sort badge * fix(SW-1041): update activefilter when entering map view * fix(SW-1041): create hook with activefilters * fix(SW-1041): hook only sets filter * fix(SW-1041): fix padding breadcrumbs * fix(SW-1041): rename hook * fix(SW-1041): fix double scroll Approved-by: Pontus Dreij Approved-by: Niclas Edenvin
138 lines
4.6 KiB
TypeScript
138 lines
4.6 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import Contact from "@/components/HotelReservation/Contact"
|
|
import { AccessibilityIcon } from "@/components/Icons"
|
|
import Accordion from "@/components/TempDesignSystem/Accordion"
|
|
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./hotelSidePeek.module.css"
|
|
|
|
import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
|
|
import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
|
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
|
import { IconName } from "@/types/components/icon"
|
|
import type { Amenities, Hotel } from "@/types/hotel"
|
|
|
|
function getAmenitiesList(hotel: Hotel) {
|
|
const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
|
|
// Remove Parking facilities since parking accordion is based on hotel.parking
|
|
(facility) => !facility.name.startsWith("Parking") && facility.public
|
|
)
|
|
return detailedAmenities
|
|
}
|
|
|
|
export default function HotelSidePeek({
|
|
hotel,
|
|
activeSidePeek,
|
|
close,
|
|
showCTA,
|
|
}: HotelSidePeekProps) {
|
|
const intl = useIntl()
|
|
const amenitiesList = getAmenitiesList(hotel)
|
|
|
|
return (
|
|
<SidePeek
|
|
title={hotel.name}
|
|
isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
|
|
handleClose={close}
|
|
>
|
|
<div className={styles.content}>
|
|
<Subtitle>
|
|
{intl.formatMessage({ id: "Practical information" })}
|
|
</Subtitle>
|
|
<Contact hotel={hotel} />
|
|
<Accordion>
|
|
{/* parking */}
|
|
{hotel.parking.length ? (
|
|
<AccordionItem
|
|
title={intl.formatMessage({ id: "Parking" })}
|
|
icon={IconName.Parking}
|
|
>
|
|
{hotel.parking.map((p) => (
|
|
<Parking key={p.name} parking={p} />
|
|
))}
|
|
</AccordionItem>
|
|
) : null}
|
|
<div className={styles.amenity}>
|
|
<AccessibilityIcon
|
|
width={24}
|
|
height={24}
|
|
color="uiTextMediumContrast"
|
|
/>
|
|
{intl.formatMessage({ id: "Accessibility" })}
|
|
</div>
|
|
{amenitiesList.map((amenity) => {
|
|
const Icon = mapFacilityToIcon(amenity.id)
|
|
return (
|
|
<div key={amenity.id} className={styles.amenity}>
|
|
{Icon && (
|
|
<Icon width={24} height={24} color="uiTextMediumContrast" />
|
|
)}
|
|
<Body
|
|
asChild
|
|
className={!Icon ? styles.noIcon : undefined}
|
|
color="uiTextMediumContrast"
|
|
>
|
|
<span>{amenity.name}</span>
|
|
</Body>
|
|
</div>
|
|
)
|
|
})}
|
|
</Accordion>
|
|
{showCTA && (
|
|
/* TODO: handle linking to Hotel Page */
|
|
<Button theme={"base"}>To the hotel</Button>
|
|
)}
|
|
</div>
|
|
</SidePeek>
|
|
)
|
|
}
|
|
|
|
function Parking({ parking }: ParkingProps) {
|
|
const intl = useIntl()
|
|
return (
|
|
<div>
|
|
<Body>
|
|
{`${intl.formatMessage({ id: parking.type })}${parking?.name ? ` (${parking.name})` : ""}`}
|
|
</Body>
|
|
<ul className={styles.list}>
|
|
{parking?.numberOfChargingSpaces !== undefined && (
|
|
<li>
|
|
{intl.formatMessage(
|
|
{ id: "Number of charging points for electric cars" },
|
|
{ number: parking.numberOfChargingSpaces }
|
|
)}
|
|
</li>
|
|
)}
|
|
{parking?.canMakeReservation && (
|
|
<li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
|
|
)}
|
|
{parking?.numberOfParkingSpots !== undefined && (
|
|
<li>
|
|
{intl.formatMessage(
|
|
{ id: "Number of parking spots" },
|
|
{ number: parking.numberOfParkingSpots }
|
|
)}
|
|
</li>
|
|
)}
|
|
{parking?.distanceToHotel !== undefined && (
|
|
<li>
|
|
{intl.formatMessage(
|
|
{ id: "Distance to hotel" },
|
|
{ distance: parking.distanceToHotel }
|
|
)}
|
|
</li>
|
|
)}
|
|
{parking?.address && (
|
|
<li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|