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

2024-10-30 09:56:45 +01:00
parent cddbbabe93
commit ddc190e0c8
12 changed files with 35 additions and 85 deletions
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -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>
  )
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -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>
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -78,10 +78,7 @@ export default function RoomCard({
              : `${roomSize?.min}-${roomSize?.max}`}
            m²
          </Caption>
-          <RoomSidePeek
-            selectedRoom={selectedRoom}
-            roomConfiguration={roomConfiguration}
-          />
+          <RoomSidePeek selectedRoom={selectedRoom} buttonSize="small" />
        </div>
        <div className={styles.container}>
          <div className={styles.roomDetails}>
--- a/components/SidePeeks/RoomSidePeek/index.tsx
+++ b/components/SidePeeks/RoomSidePeek/index.tsx
@@ -16,7 +16,7 @@ import type { RoomSidePeekProps } from "@/types/components/hotelReservation/sele

 export default function RoomSidePeek({
  selectedRoom,
-  roomConfiguration,
+  buttonSize,
 }: RoomSidePeekProps) {
  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
  const intl = useIntl()
@@ -31,7 +31,7 @@ export default function RoomSidePeek({
      <Button
        intent="text"
        type="button"
-        size="small"
+        size={buttonSize}
        theme="base"
        className={styles.button}
        onClick={() => setIsSidePeekOpen(true)}
@@ -41,7 +41,7 @@ export default function RoomSidePeek({
      </Button>

      <SidePeek
-        title={roomConfiguration.roomType}
+        title={selectedRoom?.name ?? ""}
        isOpen={isSidePeekOpen}
        handleClose={() => setIsSidePeekOpen(false)}
      >
@@ -51,16 +51,14 @@ export default function RoomSidePeek({
            : `${roomSize?.min} - ${roomSize?.max}`}
          m².{" "}
          {intl.formatMessage(
-            {
-              id: "booking.accommodatesUpTo",
-            },
+            { id: "booking.accommodatesUpTo" },
            { nrOfGuests: occupancy }
          )}
        </Body>

        {images && (
          <div className={styles.imageContainer}>
-            <ImageGallery images={images} title={roomConfiguration.roomType} />
+            <ImageGallery images={images} title={selectedRoom.name} />
          </div>
        )}

--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -397,8 +397,7 @@
  "guaranteeing": "garanti",
  "guest": "gæst",
  "guests": "gæster",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# person} other {# personer}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
  "km to city center": "km til byens centrum",
  "lowercase letter": "lille bogstav",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -396,8 +396,7 @@
  "guaranteeing": "garantiert",
  "guest": "gast",
  "guests": "gäste",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personen",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# person} other {# personen}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "Zimmerdetails ansehen",
  "km to city center": "km bis zum Stadtzentrum",
  "lowercase letter": "Kleinbuchstabe",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -416,8 +416,7 @@
  "guaranteeing": "guaranteeing",
  "guest": "guest",
  "guests": "guests",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "persons",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# person} other {# persons}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
  "km to city center": "km to city center",
  "lowercase letter": "lowercase letter",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -396,8 +396,7 @@
  "guaranteeing": "varmistetaan",
  "guest": "Vieras",
  "guests": "Vieraita",
-  "hotelPages.rooms.roomCard.person": "henkilö",
-  "hotelPages.rooms.roomCard.persons": "Henkilöä",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# henkilö} other {# Henkilöä}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
  "km to city center": "km keskustaan",
  "lowercase letter": "pien kirjain",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -394,8 +394,7 @@
  "guaranteeing": "garantiert",
  "guest": "gjest",
  "guests": "gjester",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# person} other {# personer}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
  "km to city center": "km til sentrum",
  "lowercase letter": "liten bokstav",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -395,8 +395,7 @@
  "guaranteeing": "garanterar",
  "guest": "gäst",
  "guests": "gäster",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.persons": "{totalOccupancy, plural, one {# person} other {# personer}}",
  "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
  "km to city center": "km till stadens centrum",
  "lowercase letter": "liten bokstav",
--- a/types/components/hotelPage/room.ts
+++ b/types/components/hotelPage/room.ts
@@ -1,11 +1,7 @@
 import type { RoomData } from "@/types/hotel"

 export interface RoomCardProps {
-  id: string
-  images: RoomData["images"]
-  title: string
-  subtitle: string
-  badgeTextTransKey: string | null
+  room: RoomData
 }

 export type RoomsProps = {
--- a/types/components/hotelReservation/selectRate/roomSidePeek.ts
+++ b/types/components/hotelReservation/selectRate/roomSidePeek.ts
@@ -1,8 +1,6 @@
-import { RoomConfiguration } from "@/server/routers/hotels/output"
-
 import { RoomData } from "@/types/hotel"

 export type RoomSidePeekProps = {
-  roomConfiguration: RoomConfiguration
  selectedRoom?: RoomData
+  buttonSize: "small" | "medium"
 }