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

148
components/SidePeeks/RoomSidePeek/index.tsx
View File

@@ -1,7 +1,5 @@
import { useState } from "react"
import { useIntl } from "react-intl"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -12,10 +10,14 @@ import { getFacilityIcon } from "./facilityIcon"
import styles from "./roomSidePeek.module.css"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"
export default function RoomSidePeek({ room, buttonSize }: RoomSidePeekProps) {
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
export default function RoomSidePeek({
room,
activeSidePeek,
close,
}: RoomSidePeekProps) {
const intl = useIntl()
const roomSize = room.roomSize
@@ -24,84 +26,70 @@ export default function RoomSidePeek({ room, buttonSize }: RoomSidePeekProps) {
const images = room.images
return (
<div>
<Button
intent="text"
type="button"
size={buttonSize}
theme="base"
className={styles.button}
onClick={() => setIsSidePeekOpen(true)}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
<SidePeek
title={room.name}
isOpen={isSidePeekOpen}
handleClose={() => setIsSidePeekOpen(false)}
>
<div className={styles.wrapper}>
<div className={styles.mainContent}>
<Body color="baseTextMediumContrast">
{roomSize.min === roomSize.max
? roomSize.min
: `${roomSize.min} - ${roomSize.max}`}
m².{" "}
{intl.formatMessage(
{ id: "booking.accommodatesUpTo" },
{ nrOfGuests: occupancy }
)}
</Body>
{images && (
<div className={styles.imageContainer}>
<ImageGallery images={images} title={room.name} />
</div>
<SidePeek
title={room.name}
isOpen={activeSidePeek === SidePeekEnum.roomDetails}
handleClose={close}
>
<div className={styles.wrapper}>
<div className={styles.mainContent}>
<Body color="baseTextMediumContrast">
{roomSize.min === roomSize.max
? roomSize.min
: `${roomSize.min} - ${roomSize.max}`}
m².{" "}
{intl.formatMessage(
{ id: "booking.accommodatesUpTo" },
{ nrOfGuests: occupancy }
)}
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{room.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = getFacilityIcon(facility.name)
return (
<li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{facility.name}</span>
</Body>
</li>
)
})}
</ul>
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.bedOptions" })}
</Subtitle>
<Body color="grey">
{intl.formatMessage({ id: "booking.basedOnAvailability" })}
</Body>
{/* TODO: Get data for bed options */}
</div>
</Body>
{images && (
<div className={styles.imageContainer}>
<ImageGallery images={images} title={room.name} />
</div>
)}
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div>
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="primary">
{intl.formatMessage({ id: "booking.selectRoom" })}
{/* TODO: Implement logic for select room */}
</Button>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{room.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = getFacilityIcon(facility.name)
return (
<li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{facility.name}</span>
</Body>
</li>
)
})}
</ul>
</div>
</SidePeek>
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.bedOptions" })}
</Subtitle>
<Body color="grey">
{intl.formatMessage({ id: "booking.basedOnAvailability" })}
</Body>
{/* TODO: Get data for bed options */}
</div>
</div>
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="primary">
{intl.formatMessage({ id: "booking.selectRoom" })}
{/* TODO: Implement logic for select room */}
</Button>
</div>
</SidePeek>
)
}