59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
|
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
|
|
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import BookedRoomSidePeekContent from "@/components/SidePeeks/BookedRoomSidePeekContent"
|
|
import { trackOpenSidePeekEvent } from "@/utils/tracking"
|
|
|
|
import { SidePeekEnum } from "@/types/sidepeek"
|
|
import type { SafeUser } from "@/types/user"
|
|
|
|
interface RoomDetailsSidePeekProps {
|
|
user: SafeUser
|
|
}
|
|
|
|
export default function RoomDetailsSidePeek({
|
|
user,
|
|
}: RoomDetailsSidePeekProps) {
|
|
const intl = useIntl()
|
|
const bookedRoom = useMyStayStore((state) => state.bookedRoom)
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
theme="base"
|
|
variant="icon"
|
|
wrapping
|
|
onPress={() => {
|
|
setIsOpen(true)
|
|
trackOpenSidePeekEvent({
|
|
name: SidePeekEnum.bookedRoomDetails,
|
|
hotelId: bookedRoom.hotelId,
|
|
includePathname: true,
|
|
})
|
|
}}
|
|
>
|
|
{intl.formatMessage({ defaultMessage: "See room details" })}
|
|
<MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
|
|
</Button>
|
|
<SidePeekSelfControlled
|
|
title={bookedRoom.room?.name ?? bookedRoom.roomName}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<BookedRoomSidePeekContent room={bookedRoom} user={user} />
|
|
</SidePeekSelfControlled>
|
|
</>
|
|
)
|
|
}
|