99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { type ReactNode, useState } from "react"
|
|
|
|
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 "@scandic-hotels/tracking/componentEvents"
|
|
|
|
import { HotelSidePeekContent } from "./HotelSidePeekContent"
|
|
|
|
import type {
|
|
AdditionalData,
|
|
Hotel,
|
|
Restaurant,
|
|
} from "@scandic-hotels/trpc/types/hotel"
|
|
|
|
enum SidePeekEnum {
|
|
hotelDetails = "hotel-detail-side-peek",
|
|
}
|
|
|
|
interface HotelDetailsSidePeekProps {
|
|
hotel: Hotel & { url: string | null }
|
|
restaurants: Restaurant[]
|
|
additionalHotelData: AdditionalData | undefined
|
|
triggerLabel: ReactNode
|
|
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 function HotelDetailsSidePeek({
|
|
hotel,
|
|
restaurants,
|
|
additionalHotelData,
|
|
triggerLabel,
|
|
wrapping = true,
|
|
buttonVariant,
|
|
}: HotelDetailsSidePeekProps) {
|
|
const buttonProps = buttonPropsMap[buttonVariant]
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
{...buttonProps}
|
|
wrapping={wrapping}
|
|
onPress={() => {
|
|
setIsOpen(true)
|
|
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}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<HotelSidePeekContent
|
|
hotel={hotel}
|
|
restaurants={restaurants}
|
|
additionalHotelData={additionalHotelData}
|
|
/>
|
|
</SidePeekSelfControlled>
|
|
</>
|
|
)
|
|
}
|