Merged in feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow (pull request #2600)
feat(SW-2873): Move HotelReservationSidePeek to booking-flow * Move sidepeek store to booking-flow * Begin move of HotelReservationSidePeek to booking-flow * Copy Link * Update AccessibilityAccordionItem * Split AccessibilityAccordionItem into two components * Fix tracking for Accordion * Duplicate ButtonLink to booking-flow TEMP * AdditionalAmeneties * wip * Move sidepeek accordion items * Remove temp ButtonLink * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix accordion tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Update exports * Fix self-referencing import * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Add 'use client' to tracking function * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix TEMP folder * Refactor sidepeek tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
@@ -1,61 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { isDefined } from "@scandic-hotels/common/utils/isDefined"
|
||||
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
|
||||
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
|
||||
import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
|
||||
|
||||
import { trackAccordionClick } from "@/utils/tracking"
|
||||
|
||||
import styles from "./sidePeekAccordion.module.css"
|
||||
|
||||
import type { BreakfastAccordionItemProps } from "@/types/components/sidePeeks/amenities"
|
||||
|
||||
export default function BreakfastAccordionItem({
|
||||
restaurants,
|
||||
hotelType,
|
||||
}: BreakfastAccordionItemProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
const openingHours = restaurants
|
||||
?.map((restaurant) => {
|
||||
const breakfastDetail = restaurant.openingDetails.find(
|
||||
(details) =>
|
||||
details.openingHours.name === "Breakfast" ||
|
||||
details.openingHours.name ===
|
||||
intl.formatMessage({ defaultMessage: "Breakfast" })
|
||||
)
|
||||
return breakfastDetail
|
||||
})
|
||||
.filter(isDefined)[0]
|
||||
|
||||
if (!openingHours && hotelType !== HotelTypeEnum.ScandicGo) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ defaultMessage: "Breakfast" })}
|
||||
iconName={IconName.CoffeeAlt}
|
||||
variant="sidepeek"
|
||||
className={styles.accordionItem}
|
||||
onOpen={() => trackAccordionClick("amenities:breakfast")}
|
||||
>
|
||||
{openingHours ? (
|
||||
<OpeningHours
|
||||
openingHours={openingHours.openingHours}
|
||||
alternateOpeningHours={openingHours.alternateOpeningHours}
|
||||
heading={intl.formatMessage({ defaultMessage: "Opening hours" })}
|
||||
/>
|
||||
) : (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{intl.formatMessage({ defaultMessage: "All-day breakfast" })}</p>
|
||||
</Typography>
|
||||
)}
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { trackAccordionClick } from "@/utils/tracking"
|
||||
|
||||
import styles from "./sidePeekAccordion.module.css"
|
||||
|
||||
import type { CheckInCheckOutAccordionItemProps } from "@/types/components/sidePeeks/amenities"
|
||||
|
||||
export default function CheckInCheckOutAccordionItem({
|
||||
checkInData,
|
||||
}: CheckInCheckOutAccordionItemProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
const { checkInTime, checkOutTime } = checkInData
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ defaultMessage: "Check-in/Check-out" })}
|
||||
iconName={IconName.Business}
|
||||
variant="sidepeek"
|
||||
className={styles.accordionItem}
|
||||
onOpen={() => trackAccordionClick("amenities:check-in")}
|
||||
>
|
||||
<div className={styles.checkInCheckOutContent}>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<h4 className={styles.subheading}>
|
||||
{intl.formatMessage({ defaultMessage: "Hours" })}
|
||||
</h4>
|
||||
</Typography>
|
||||
<Divider />
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{ defaultMessage: "Check in from: {checkInTime}" },
|
||||
{
|
||||
checkInTime,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{ defaultMessage: "Check out at latest: {checkOutTime}" },
|
||||
{
|
||||
checkOutTime,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
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 ParkingInformation from "@scandic-hotels/design-system/ParkingInformation"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { trackAccordionClick } from "@/utils/tracking"
|
||||
|
||||
import styles from "./sidePeekAccordion.module.css"
|
||||
|
||||
import type { ParkingAccordionItemProps } from "@/types/components/sidePeeks/amenities"
|
||||
|
||||
export default function ParkingAccordionItem({
|
||||
parking,
|
||||
elevatorPitch,
|
||||
parkingPageHref,
|
||||
}: ParkingAccordionItemProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
if (!parking.length && !elevatorPitch && !parkingPageHref) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Parking",
|
||||
})}
|
||||
iconName={IconName.Parking}
|
||||
variant="sidepeek"
|
||||
className={styles.accordionItem}
|
||||
onOpen={() => trackAccordionClick("amenities:parking")}
|
||||
>
|
||||
<div className={styles.parkingContent}>
|
||||
{elevatorPitch ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{elevatorPitch}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
{parking.map((data) => (
|
||||
<ParkingInformation key={data.type} parking={data} />
|
||||
))}
|
||||
{parkingPageHref ? (
|
||||
<ButtonLink
|
||||
href={parkingPageHref}
|
||||
variant="Secondary"
|
||||
color="Primary"
|
||||
size="Medium"
|
||||
typography="Body/Paragraph/mdBold"
|
||||
>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "About parking",
|
||||
})}
|
||||
</ButtonLink>
|
||||
) : null}
|
||||
</div>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.wrapper {
|
||||
padding: var(--Space-x1) var(--Space-x0);
|
||||
border-bottom: 1px solid var(--Base-Border-Subtle);
|
||||
color: var(--Text-Interactive-Default);
|
||||
}
|
||||
|
||||
.amenity {
|
||||
display: flex;
|
||||
gap: var(--Space-x1);
|
||||
padding: var(--Space-x15) var(--Space-x1);
|
||||
}
|
||||
|
||||
.amenityName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--Space-x3);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { FacilityEnum } from "@scandic-hotels/trpc/enums/facilities"
|
||||
|
||||
import { FacilityToIcon } from "../../../ContentType/HotelPage/data"
|
||||
|
||||
import styles from "./additionalAmenities.module.css"
|
||||
|
||||
import type { AdditionalAmenitiesProps } from "@/types/components/sidePeeks/amenities"
|
||||
|
||||
export default function AdditionalAmenities({
|
||||
amenities,
|
||||
}: AdditionalAmenitiesProps) {
|
||||
const amenitiesToIgnore = [
|
||||
FacilityEnum.ParkingAdditionalCost,
|
||||
FacilityEnum.ParkingElectricCharging,
|
||||
FacilityEnum.ParkingFreeParking,
|
||||
FacilityEnum.ParkingGarage,
|
||||
FacilityEnum.ParkingOutdoor,
|
||||
FacilityEnum.MeetingArea,
|
||||
FacilityEnum.ServesBreakfastAlwaysIncluded,
|
||||
FacilityEnum.LateCheckOutUntil1400Guaranteed,
|
||||
]
|
||||
|
||||
const filteredAmenities = amenities.filter(
|
||||
(amenity) => !amenitiesToIgnore.includes(amenity.id)
|
||||
)
|
||||
|
||||
return filteredAmenities?.map((amenity) => (
|
||||
<Typography key={amenity.name} variant="Title/Subtitle/md">
|
||||
<li className={styles.wrapper}>
|
||||
<div className={styles.amenity}>
|
||||
<FacilityToIcon
|
||||
id={amenity.id}
|
||||
color="Icon/Interactive/Default"
|
||||
size={24}
|
||||
/>
|
||||
<span className={styles.amenityName}>{amenity.name}</span>
|
||||
</div>
|
||||
</li>
|
||||
</Typography>
|
||||
))
|
||||
}
|
||||
Reference in New Issue
Block a user