fix(SW-1241): Adjusted amenities sidepeek on hotel pages and booking flow
Approved-by: Michael Zetterberg Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
@@ -1,24 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { IconName } from "@/components/Icons/iconName"
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import type { AccessibilityProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
||||
|
||||
export default function Accessibility({
|
||||
elevatorPitchText,
|
||||
}: AccessibilityProps) {
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Accessibility",
|
||||
})}
|
||||
iconName={IconName.Accessibility}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<Body>{elevatorPitchText}</Body>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { IconName } from "@/components/Icons/iconName"
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import type { CheckInCheckOutProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
||||
|
||||
export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Check-in/Check-out",
|
||||
})}
|
||||
iconName={IconName.Calendar}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Hours",
|
||||
})}
|
||||
</Body>
|
||||
<Body>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Check in from: {checkInTime}",
|
||||
},
|
||||
{
|
||||
checkInTime: checkin.checkInTime,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
<Body>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Check out at latest: {checkOutTime}",
|
||||
},
|
||||
{
|
||||
checkOutTime: checkin.checkOutTime,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { IconName } from "@/components/Icons/iconName"
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import type { MeetingsAndConferencesProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
||||
|
||||
export default function MeetingsAndConferences({
|
||||
meetingDescription,
|
||||
}: MeetingsAndConferencesProps) {
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Meetings & Conferences",
|
||||
})}
|
||||
iconName={IconName.Business}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<Body>{meetingDescription}</Body>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
|
||||
import { IconName } from "@/components/Icons/iconName"
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import styles from "./sidePeekAccordion.module.css"
|
||||
|
||||
import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
||||
|
||||
export default function Parking({ parking }: ParkingProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Parking",
|
||||
})}
|
||||
iconName={IconName.Parking}
|
||||
className={styles.parking}
|
||||
variant="sidepeek"
|
||||
>
|
||||
{parking.map((p) => {
|
||||
const title = `${p.type}${p.name ? ` (${p.name})` : ""}`
|
||||
|
||||
return (
|
||||
<div key={p.name}>
|
||||
<Subtitle type="two">{title}</Subtitle>
|
||||
<ul className={styles.list}>
|
||||
{p.address !== undefined && (
|
||||
<li>
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Address: {address}",
|
||||
},
|
||||
{
|
||||
address: p.address,
|
||||
}
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
{p.numberOfParkingSpots !== undefined && (
|
||||
<li>
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Number of parking spots: {number}",
|
||||
},
|
||||
{ number: p.numberOfParkingSpots }
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
{p.numberOfChargingSpaces !== undefined && (
|
||||
<li>
|
||||
<MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"Number of charging points for electric cars: {number}",
|
||||
},
|
||||
{ number: p.numberOfChargingSpaces }
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { IconName } from "@/components/Icons/iconName"
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import type { RestaurantProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
||||
|
||||
export default function Restaurant({
|
||||
restaurantsContentDescriptionMedium,
|
||||
}: RestaurantProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalRestaurants, plural, one {Restaurant} other {Restaurants}}",
|
||||
},
|
||||
{ totalRestaurants: 1 }
|
||||
)}
|
||||
iconName={IconName.Restaurant}
|
||||
variant="sidepeek"
|
||||
>
|
||||
<Body>{restaurantsContentDescriptionMedium}</Body>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
.list {
|
||||
font-family: var(--typography-Body-Regular-fontFamily);
|
||||
list-style-position: inside;
|
||||
list-style-type: none;
|
||||
margin-top: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
padding-left: var(--Spacing-x1);
|
||||
justify-items: flex-start;
|
||||
}
|
||||
|
||||
.list li svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.parking details > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
@@ -1,35 +1,5 @@
|
||||
.spacing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.content:last-child {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.content > p {
|
||||
margin-bottom: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.content > ul > li:first-child {
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
}
|
||||
|
||||
.amenity > p {
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
|
||||
var(--Spacing-x1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.noIcon {
|
||||
margin-left: var(--Spacing-x4);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import Contact from "@/components/HotelReservation/Contact"
|
||||
import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
|
||||
import Accordion from "@/components/TempDesignSystem/Accordion"
|
||||
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import Accessibility from "./Accordions/Accessibility"
|
||||
import CheckinCheckOut from "./Accordions/CheckInCheckOut"
|
||||
import MeetingsAndConferences from "./Accordions/MeetingsAndConferences"
|
||||
import Parking from "./Accordions/Parking"
|
||||
import Restaurant from "./Accordions/Restaurant"
|
||||
import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
|
||||
import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"
|
||||
import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
|
||||
import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking"
|
||||
|
||||
import styles from "./hotelSidePeek.module.css"
|
||||
|
||||
@@ -19,17 +21,12 @@ import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
||||
|
||||
export default function HotelSidePeek({
|
||||
hotel,
|
||||
restaurants,
|
||||
additionalHotelData,
|
||||
activeSidePeek,
|
||||
close,
|
||||
}: HotelSidePeekProps) {
|
||||
const intl = useIntl()
|
||||
const amenitiesList = hotel.detailedFacilities.filter(
|
||||
(facility) => facility.public
|
||||
)
|
||||
const parking = hotel.parking.filter(
|
||||
(p) => p?.numberOfParkingSpots || p?.numberOfChargingSpaces || p?.address
|
||||
)
|
||||
|
||||
return (
|
||||
<SidePeek
|
||||
@@ -38,61 +35,30 @@ export default function HotelSidePeek({
|
||||
handleClose={close}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<Subtitle color="baseTextHighContrast">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Practical information",
|
||||
})}
|
||||
</Subtitle>
|
||||
<Typography variant="Title/Subtitle/lg">
|
||||
<h3>
|
||||
{intl.formatMessage({ defaultMessage: "Practical information" })}
|
||||
</h3>
|
||||
</Typography>
|
||||
<Contact hotel={hotel} />
|
||||
<Accordion>
|
||||
{parking?.length > 0 && <Parking parking={parking} />}
|
||||
{additionalHotelData?.restaurantsOverviewPage
|
||||
?.restaurantsContentDescriptionMedium && (
|
||||
<Restaurant
|
||||
restaurantsContentDescriptionMedium={
|
||||
additionalHotelData.restaurantsOverviewPage
|
||||
.restaurantsContentDescriptionMedium
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{additionalHotelData?.hotelSpecialNeeds.elevatorPitch && (
|
||||
<Accessibility
|
||||
elevatorPitchText={
|
||||
additionalHotelData.hotelSpecialNeeds.elevatorPitch
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{hotel.hotelFacts?.checkin && (
|
||||
<CheckinCheckOut checkin={hotel.hotelFacts.checkin} />
|
||||
)}
|
||||
{hotel.hotelContent.texts?.meetingDescription?.medium && (
|
||||
<MeetingsAndConferences
|
||||
meetingDescription={
|
||||
hotel.hotelContent.texts.meetingDescription.medium
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Accordion>
|
||||
<div className={styles.amenity}>
|
||||
{amenitiesList.map((amenity) => {
|
||||
const Icon = (
|
||||
<FacilityToIcon id={amenity.id} size={24} color="Icon/Intense" />
|
||||
)
|
||||
return (
|
||||
<Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
|
||||
{Icon && Icon}
|
||||
{amenity.name}
|
||||
</Subtitle>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* TODO: handle linking to Hotel Page */}
|
||||
{/* {showCTA && (
|
||||
<Button theme="base" intent="secondary" size="large">
|
||||
Read more about the hotel
|
||||
</Button>
|
||||
)} */}
|
||||
<Accordion>
|
||||
<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>
|
||||
</div>
|
||||
</SidePeek>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user