116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Accordion from "@scandic-hotels/design-system/Accordion"
|
|
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
|
|
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents"
|
|
|
|
import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
|
|
import { routeToScandicWebUrl } from "../../../utils/routeToScandicWebUrl"
|
|
import AdditionalAmenities from "../../AdditionalAmenities"
|
|
import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem"
|
|
import CheckInCheckOutAccordionItem from "../../SidePeekAccordions/CheckInCheckOutAccordionItem"
|
|
import ParkingAccordionItem from "../../SidePeekAccordions/ParkingAccordionItem"
|
|
import { ContactInformation } from "../ContactInformation"
|
|
|
|
import styles from "./hotelSidePeek.module.css"
|
|
|
|
import type {
|
|
AdditionalData,
|
|
Hotel,
|
|
Restaurant,
|
|
} from "@scandic-hotels/trpc/types/hotel"
|
|
|
|
interface HotelSidePeekContentProps {
|
|
hotel: Hotel & { url: string | null }
|
|
restaurants: Restaurant[]
|
|
additionalHotelData: AdditionalData | undefined
|
|
}
|
|
|
|
export function HotelSidePeekContent({
|
|
hotel,
|
|
restaurants,
|
|
additionalHotelData,
|
|
}: HotelSidePeekContentProps) {
|
|
const intl = useIntl()
|
|
const isScandicPartner = useBookingFlowConfig().variant !== "scandic"
|
|
const hotelUrl =
|
|
isScandicPartner && hotel.url ? routeToScandicWebUrl(hotel.url) : hotel.url
|
|
|
|
return (
|
|
<div className={styles.content}>
|
|
<ContactInformation
|
|
hotelAddress={hotel.address}
|
|
contact={hotel.contactInformation}
|
|
socials={hotel.socialMedia}
|
|
ecoLabels={hotel.hotelFacts.ecoLabels}
|
|
hotelName={hotel.name}
|
|
/>
|
|
|
|
<Accordion type="sidepeek">
|
|
<ParkingAccordionItem
|
|
parking={hotel.parking}
|
|
elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
|
|
/>
|
|
<BreakfastAccordionItem
|
|
restaurants={restaurants}
|
|
hotelType={hotel.hotelType}
|
|
/>
|
|
<CheckInCheckOutAccordionItem checkInData={hotel.hotelFacts.checkin} />
|
|
<AccessibilityAccordionItem
|
|
elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
|
|
/>
|
|
<AdditionalAmenities amenities={hotel.detailedFacilities} />
|
|
</Accordion>
|
|
{hotelUrl ? (
|
|
<ButtonLink
|
|
href={hotelUrl}
|
|
variant="Secondary"
|
|
size="Medium"
|
|
typography="Body/Paragraph/mdBold"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "hotelSidePeek.readMore.buttonText",
|
|
defaultMessage: "Read more about the hotel",
|
|
})}
|
|
</ButtonLink>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type AccessibilityAccordionItemProps = {
|
|
elevatorPitch?: string
|
|
}
|
|
|
|
function AccessibilityAccordionItem({
|
|
elevatorPitch,
|
|
}: AccessibilityAccordionItemProps) {
|
|
const intl = useIntl()
|
|
|
|
if (!elevatorPitch) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<AccordionItem
|
|
title={intl.formatMessage({
|
|
id: "common.accessibility",
|
|
defaultMessage: "Accessibility",
|
|
})}
|
|
iconName={IconName.Accessibility}
|
|
className={styles.accordionItem}
|
|
type="sidepeek"
|
|
onOpen={() => trackAccordionClick("amenities:accessibility")}
|
|
>
|
|
<div className={styles.accessibilityContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>{elevatorPitch}</p>
|
|
</Typography>
|
|
</div>
|
|
</AccordionItem>
|
|
)
|
|
}
|