88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { 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 { RoomSidePeekContent } from "./RoomSidePeekContent"
|
|
|
|
import type { Room } from "@scandic-hotels/trpc/types/hotel"
|
|
|
|
enum SidePeekEnum {
|
|
roomDetails = "room-detail-side-peek",
|
|
}
|
|
|
|
interface RoomDetailsSidePeekProps {
|
|
hotelId: string
|
|
room: Room
|
|
triggerLabel: string
|
|
roomTypeCode?: string
|
|
buttonVariant?: "primary" | "secondary"
|
|
wrapping?: boolean
|
|
}
|
|
|
|
const buttonPropsMap: Record<
|
|
NonNullable<RoomDetailsSidePeekProps["buttonVariant"]>,
|
|
Pick<
|
|
React.ComponentProps<typeof Button>,
|
|
"variant" | "color" | "size" | "typography"
|
|
>
|
|
> = {
|
|
primary: {
|
|
variant: "Text",
|
|
color: "Primary",
|
|
size: "Medium",
|
|
typography: "Body/Paragraph/mdBold",
|
|
},
|
|
secondary: {
|
|
variant: "Text",
|
|
color: "Inverted",
|
|
size: "Small",
|
|
typography: "Body/Supporting text (caption)/smBold",
|
|
},
|
|
}
|
|
|
|
export function RoomDetailsSidePeek({
|
|
hotelId,
|
|
room,
|
|
roomTypeCode,
|
|
triggerLabel,
|
|
wrapping = true,
|
|
buttonVariant: variant = "primary",
|
|
}: RoomDetailsSidePeekProps) {
|
|
const buttonProps = buttonPropsMap[variant]
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
{...buttonProps}
|
|
wrapping={wrapping}
|
|
onPress={() => {
|
|
setIsOpen(true)
|
|
trackOpenSidePeekEvent({
|
|
name: SidePeekEnum.roomDetails,
|
|
hotelId,
|
|
roomTypeCode,
|
|
includePathname: true,
|
|
})
|
|
}}
|
|
>
|
|
{triggerLabel}
|
|
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
|
|
</Button>
|
|
|
|
<SidePeekSelfControlled
|
|
title={room.name}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<RoomSidePeekContent room={room} />
|
|
</SidePeekSelfControlled>
|
|
</>
|
|
)
|
|
}
|