diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx index a6c4748f9..931b1880c 100644 --- 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 (
+
) diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx index b7ac43a90..e976ee8af 100644 --- 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(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) { - {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => ( -
- + {rooms.map((room) => ( +
+
))} diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx index fd41bbced..7b0709ca9 100644 --- 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² - +
diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx index f63b57d08..c1198f680 100644 --- 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({ 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 } )} {images && (
- +
)} diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 8a3bcc2d1..6b48b1f31 100644 --- 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", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 1d389176e..41d056496 100644 --- 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", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index bc93f51ac..a3e5dde34 100644 --- 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", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 33f7678c6..5a169d558 100644 --- 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", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 6dc1c8cfa..97aa25fc5 100644 --- 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", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index aa77a18e6..2b3a16db3 100644 --- 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", diff --git a/types/components/hotelPage/room.ts b/types/components/hotelPage/room.ts index cfa3593c9..7be59609d 100644 --- 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 = { diff --git a/types/components/hotelReservation/selectRate/roomSidePeek.ts b/types/components/hotelReservation/selectRate/roomSidePeek.ts index c526d04b4..1ed03c522 100644 --- 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" }