53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
import { Button as ButtonRAC } from "react-aria-components"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
|
|
|
|
import BookedRoomSidePeekContent from "@/components/SidePeeks/BookedRoomSidePeekContent"
|
|
import { trackOpenSidePeekEvent } from "@/utils/tracking"
|
|
|
|
import styles from "./sidePeek.module.css"
|
|
|
|
import { SidePeekEnum } from "@/types/sidepeek"
|
|
import type { Room as MyStayRoom } from "@/types/stores/my-stay"
|
|
import type { SafeUser } from "@/types/user"
|
|
|
|
interface RoomDetailsSidePeekProps {
|
|
booking: MyStayRoom
|
|
user: SafeUser
|
|
}
|
|
|
|
export default function RoomDetailsSidePeek({
|
|
booking,
|
|
user,
|
|
}: RoomDetailsSidePeekProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<ButtonRAC
|
|
className={styles.trigger}
|
|
onPress={() => {
|
|
setIsOpen(true)
|
|
trackOpenSidePeekEvent({
|
|
name: SidePeekEnum.bookedRoomDetails,
|
|
hotelId: booking.hotelId,
|
|
includePathname: true,
|
|
})
|
|
}}
|
|
>
|
|
<MaterialIcon icon="pan_zoom" color="CurrentColor" />
|
|
</ButtonRAC>
|
|
<SidePeekSelfControlled
|
|
title={booking.room?.name ?? booking.roomName}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<BookedRoomSidePeekContent room={booking} user={user} />
|
|
</SidePeekSelfControlled>
|
|
</>
|
|
)
|
|
}
|