Merged in feat/sw-2873-move-selecthotel-to-booking-flow (pull request #2727)
feat(SW-2873): Move select-hotel to booking flow * crude setup of select-hotel in partner-sas * wip * Fix linting * restructure tracking files * Remove dependency on trpc in tracking hooks * Move pageview tracking to common * Fix some lint and import issues * Add AlternativeHotelsPage * Add SelectHotelMapPage * Add AlternativeHotelsMapPage * remove next dependency in tracking store * Remove dependency on react in tracking hooks * move isSameBooking to booking-flow * Inject searchParamsComparator into tracking store * Move useTrackHardNavigation to common * Move useTrackSoftNavigation to common * Add TrackingSDK to partner-sas * call serverclient in layout * Remove unused css * Update types * Move HotelPin type * Fix todos * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Fix component Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
@@ -1,5 +0,0 @@
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import AdditionalAmenities from "@scandic-hotels/booking-flow/components/AdditionalAmenities"
|
||||
import Contact from "@scandic-hotels/booking-flow/components/Contact"
|
||||
import BreakfastAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/BreakfastAccordionItem"
|
||||
import CheckInCheckOutAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/CheckInCheckOutAccordionItem"
|
||||
import ParkingAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/ParkingAccordionItem"
|
||||
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 "@/utils/tracking"
|
||||
|
||||
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()
|
||||
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
<Typography variant="Title/Subtitle/lg">
|
||||
<h3>
|
||||
{intl.formatMessage({ defaultMessage: "Practical information" })}
|
||||
</h3>
|
||||
</Typography>
|
||||
<Contact hotel={hotel} />
|
||||
|
||||
<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>
|
||||
{hotel.url ? (
|
||||
<ButtonLink
|
||||
href={hotel.url}
|
||||
variant="Secondary"
|
||||
size="Medium"
|
||||
typography="Body/Paragraph/mdBold"
|
||||
>
|
||||
{intl.formatMessage({
|
||||
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({
|
||||
defaultMessage: "Accessibility",
|
||||
})}
|
||||
iconName={IconName.Accessibility}
|
||||
className={styles.accordionItem}
|
||||
variant="sidepeek"
|
||||
onOpen={() => trackAccordionClick("amenities:accessibility")}
|
||||
>
|
||||
<div className={styles.accessibilityContent}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{elevatorPitch}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { DialogTrigger } from "react-aria-components"
|
||||
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
|
||||
|
||||
import { trackOpenSidePeekEvent } from "@/utils/tracking"
|
||||
|
||||
import { HotelSidePeekContent } from "./HotelSidePeekContent"
|
||||
|
||||
import type {
|
||||
AdditionalData,
|
||||
Hotel,
|
||||
Restaurant,
|
||||
} from "@scandic-hotels/trpc/types/hotel"
|
||||
|
||||
import { SidePeekEnum } from "@/types/sidepeek"
|
||||
|
||||
interface HotelDetailsSidePeekProps {
|
||||
hotel: Hotel & { url: string | null }
|
||||
restaurants: Restaurant[]
|
||||
additionalHotelData: AdditionalData | undefined
|
||||
triggerLabel: string
|
||||
buttonVariant: "primary" | "secondary"
|
||||
wrapping?: boolean
|
||||
}
|
||||
|
||||
const buttonPropsMap: Record<
|
||||
HotelDetailsSidePeekProps["buttonVariant"],
|
||||
Pick<
|
||||
React.ComponentProps<typeof Button>,
|
||||
"variant" | "color" | "size" | "typography"
|
||||
>
|
||||
> = {
|
||||
primary: {
|
||||
variant: "Text",
|
||||
color: "Primary",
|
||||
size: "Medium",
|
||||
typography: "Body/Paragraph/mdBold",
|
||||
},
|
||||
secondary: {
|
||||
variant: "Secondary",
|
||||
color: "Inverted",
|
||||
size: "Small",
|
||||
typography: "Body/Supporting text (caption)/smBold",
|
||||
},
|
||||
}
|
||||
|
||||
export default function HotelDetailsSidePeek({
|
||||
hotel,
|
||||
restaurants,
|
||||
additionalHotelData,
|
||||
triggerLabel,
|
||||
wrapping = true,
|
||||
buttonVariant,
|
||||
}: HotelDetailsSidePeekProps) {
|
||||
const buttonProps = buttonPropsMap[buttonVariant]
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
{...buttonProps}
|
||||
wrapping={wrapping}
|
||||
onPress={() =>
|
||||
trackOpenSidePeekEvent({
|
||||
name: SidePeekEnum.hotelDetails,
|
||||
hotelId: hotel.operaId,
|
||||
includePathname: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
{triggerLabel}
|
||||
<MaterialIcon
|
||||
icon="chevron_right"
|
||||
size={buttonVariant === "primary" ? 24 : 20}
|
||||
color="CurrentColor"
|
||||
/>
|
||||
</Button>
|
||||
|
||||
<SidePeekSelfControlled title={hotel.name}>
|
||||
<HotelSidePeekContent
|
||||
hotel={hotel}
|
||||
restaurants={restaurants}
|
||||
additionalHotelData={additionalHotelData}
|
||||
/>
|
||||
</SidePeekSelfControlled>
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user