scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-613-refactor-hotelreservation-sidepeek (pull request #805)

Browse Source 
Feat/SW-613 refactor hotelreservation sidepeek

* feat(SW-613): move sidepeek paralell route to apply for all of hotelreservation

* feat(SW-613): refactor sidepeek logic to a unified approach for hotelreservation flow

* feat(SW-613): fix issue where room was not selected properly in sidepeek

* fix(SW-613): move back preload to layout

* fix(SW-613): move preload to dedicated file

* fix(SW-613): refactor sidepeek to work with hotel page

* feat(SW-613): added sidepeek button for room card


Approved-by: Simon.Emanuelsson
This commit is contained in:
Tobias Johansson
2024-11-06 12:09:27 +00:00
parent ea6b9da9e0
commit 0cbffc7904
33 changed files with 507 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -4,15 +4,16 @@ import { useIntl } from "react-intl"
import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import RoomDetailsButton from "../RoomDetailsButton"
import styles from "./roomCard.module.css"
import type { RoomCardProps } from "@/types/components/hotelPage/room"
export function RoomCard({ room }: RoomCardProps) {
export function RoomCard({ hotelId, room }: RoomCardProps) {
const { images, name, roomSize, occupancy, id } = room
const intl = useIntl()
const mainImage = images[0]
@@ -70,7 +71,10 @@ export function RoomCard({ room }: RoomCardProps) {
</Subtitle>
<Body color="grey">{subtitle}</Body>
</div>
<RoomSidePeek room={room} buttonSize="medium" />
<RoomDetailsButton
hotelId={hotelId}
roomTypeCode={room.roomTypes[0].code}
/>
</div>
</article>
)

34
components/ContentType/HotelPage/Rooms/RoomDetailsButton/index.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client"
import { useIntl } from "react-intl"
import useSidePeekStore from "@/stores/sidepeek"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
export default function RoomDetailsButton({
hotelId,
roomTypeCode,
}: ToggleSidePeekProps) {
const intl = useIntl()
const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
return (
<Button
intent="text"
type="button"
size="medium"
theme="base"
onClick={() =>
openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
)
}

4
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -15,7 +15,7 @@ import styles from "./rooms.module.css"
import type { RoomsProps } from "@/types/components/hotelPage/room"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
export function Rooms({ rooms }: RoomsProps) {
export function Rooms({ hotelId, rooms }: RoomsProps) {
const intl = useIntl()
const showToggleButton = rooms.length > 3
const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -45,7 +45,7 @@ export function Rooms({ rooms }: RoomsProps) {
>
{rooms.map((room) => (
<div key={room.id}>
<RoomCard room={room} />
<RoomCard hotelId={hotelId} room={room} />
</div>
))}
</Grids.Stackable>

5
components/ContentType/HotelPage/index.tsx
View File

@@ -3,6 +3,7 @@ import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import AccordionSection from "@/components/Blocks/Accordion"
import HotelReservationSidePeek from "@/components/HotelReservation/SidePeek"
import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
import Alert from "@/components/TempDesignSystem/Alert"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -39,6 +40,7 @@ export default async function HotelPage() {
}
const {
hotelId,
hotelName,
hotelDescription,
hotelLocation,
@@ -99,7 +101,7 @@ export default async function HotelPage() {
</div>
) : null}
</div>
<Rooms rooms={roomCategories} />
<Rooms hotelId={hotelId} rooms={roomCategories} />
<Facilities facilities={facilities} activitiesCard={activitiesCard} />
{faq.accordions.length > 0 && (
<AccordionSection accordion={faq.accordions} title={faq.title} />
@@ -168,6 +170,7 @@ export default async function HotelPage() {
</SidePeek>
{/* eslint-enable import/no-named-as-default-member */}
</SidePeekProvider>
<HotelReservationSidePeek hotel={null} />
</div>
)
}