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

feat(SW-713): add rooms sidepeek on hotelpage

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-30 09:56:45 +01:00
parent cddbbabe93
commit ddc190e0c8
12 changed files with 35 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
import { ImageIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -12,26 +12,28 @@ import styles from "./roomCard.module.css"
import type { RoomCardProps } from "@/types/components/hotelPage/room"
export function RoomCard({
badgeTextTransKey,
id,
images,
subtitle,
title,
}: RoomCardProps) {
export function RoomCard({ room }: RoomCardProps) {
const { images, name, roomSize, occupancy, id } = room
const intl = useIntl()
const mainImage = images[0]
const size =
roomSize?.min === roomSize?.max
? `${roomSize.min} m²`
: `${roomSize.min} - ${roomSize.max} m²`
const personLabel = intl.formatMessage(
{ id: "hotelPages.rooms.roomCard.persons" },
{ totalOccupancy: occupancy.total }
)
const subtitle = `${size} (${personLabel})`
function handleImageClick() {
// TODO: Implement opening of a model with carousel
console.log("Image clicked: ", id)
}
function handleRoomCtaClick() {
// TODO: Implement opening side-peek component with room details
console.log("Room CTA clicked: ", id)
}
return (
<article className={styles.roomCard}>
<button className={styles.imageWrapper} onClick={handleImageClick}>
@@ -64,19 +66,11 @@ export function RoomCard({
color="black"
className={styles.title}
>
{title}
{name}
</Subtitle>
<Body color="grey">{subtitle}</Body>
</div>
<Button
theme="base"
variant="icon"
intent="text"
onClick={handleRoomCtaClick}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightIcon />
</Button>
<RoomSidePeek selectedRoom={room} buttonSize="medium" />
</div>
</article>
)

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

@@ -22,27 +22,6 @@ export function Rooms({ rooms }: RoomsProps) {
const scrollRef = useRef<HTMLDivElement>(null)
const mappedRooms = rooms
.map((room) => {
const size = `${room.roomSize.min} - ${room.roomSize.max} m²`
const personLabel =
room.occupancy.total === 1
? intl.formatMessage({ id: "hotelPages.rooms.roomCard.person" })
: intl.formatMessage({ id: "hotelPages.rooms.roomCard.persons" })
const subtitle = `${size} (${room.occupancy.total} ${personLabel})`
return {
id: room.id,
images: room.images,
title: room.name,
subtitle: subtitle,
sortOrder: room.sortOrder,
popularChoice: null,
}
})
.sort((a, b) => a.sortOrder - b.sortOrder)
function handleShowMore() {
if (scrollRef.current && allRoomsVisible) {
scrollRef.current.scrollIntoView({ behavior: "smooth" })
@@ -64,15 +43,9 @@ export function Rooms({ rooms }: RoomsProps) {
<Grids.Stackable
className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
>
{mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
<div key={id}>
<RoomCard
id={id}
images={images}
title={title}
subtitle={subtitle}
badgeTextTransKey={popularChoice ? "Popular choice" : null}
/>
{rooms.map((room) => (
<div key={room.id}>
<RoomCard room={room} />
</div>
))}
</Grids.Stackable>