Feat/BOOK-63 hotel subpages branding
* feat(BOOK-63): Replaced css variables and components to apply hotel branding on subpages * feat(BOOK-63): Replaced css variables and components to apply hotel branding on hotel page map view Approved-by: Christel Westerberg Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
@@ -1,186 +0,0 @@
|
||||
"use client"
|
||||
import { useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import ShowMoreButton from "../ShowMoreButton"
|
||||
import { translateRoomLighting, translateSeatingType } from "./utils"
|
||||
|
||||
import styles from "./meetingRoomCard.module.css"
|
||||
|
||||
import type { MeetingRoom } from "@/types/components/hotelPage/meetingRooms"
|
||||
|
||||
interface MeetingRoomCardProps {
|
||||
room: MeetingRoom
|
||||
}
|
||||
export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
|
||||
const intl = useIntl()
|
||||
const [opened, setOpened] = useState(false)
|
||||
|
||||
const roomSeatings = room.seatings
|
||||
.filter(({ capacity }) => !!capacity)
|
||||
.map(({ capacity }) => capacity)
|
||||
const maxSeatings = roomSeatings.length ? Math.max(...roomSeatings) : null
|
||||
const image = room.content.images.at(0)
|
||||
|
||||
function handleShowMore() {
|
||||
setOpened((state) => !state)
|
||||
}
|
||||
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
{image?.src ? (
|
||||
<Image
|
||||
src={image.src}
|
||||
alt={image.altText || image.altText_En || ""}
|
||||
className={styles.image}
|
||||
width={386}
|
||||
height={200}
|
||||
sizes="(min-width: 768px) 386px, 100vw"
|
||||
/>
|
||||
) : (
|
||||
<ImageFallback />
|
||||
)}
|
||||
<div className={styles.content}>
|
||||
<Typography variant="Title/Subtitle/lg">
|
||||
<h3>{room.name}</h3>
|
||||
</Typography>
|
||||
<div className={styles.capacity}>
|
||||
<div className={styles.iconText}>
|
||||
<MaterialIcon
|
||||
icon="straighten"
|
||||
color="Icon/Interactive/Placeholder"
|
||||
/>
|
||||
<Typography
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
className={styles.roomDetails}
|
||||
>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>{room.size} m²</span>
|
||||
</Typography>
|
||||
</div>
|
||||
{maxSeatings ? (
|
||||
<div className={styles.iconText}>
|
||||
<MaterialIcon
|
||||
icon="person"
|
||||
color="Icon/Interactive/Placeholder"
|
||||
size={16}
|
||||
/>
|
||||
<Typography
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
className={styles.roomDetails}
|
||||
>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "meetingRoomCard.maxSeatings",
|
||||
defaultMessage: "max {seatings} pers",
|
||||
},
|
||||
{ seatings: maxSeatings }
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{room.content.texts.descriptions.medium ? (
|
||||
<Typography>
|
||||
<p>{room.content.texts.descriptions.medium}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
{opened && (
|
||||
<table className={styles.openedInfo}>
|
||||
<tbody className={styles.rowItem}>
|
||||
{room.seatings.map((seating, idx) => (
|
||||
<TableRow
|
||||
key={seating.type}
|
||||
id={String(seating.capacity) + seating.type + idx}
|
||||
name={translateSeatingType(seating.type, intl)}
|
||||
value={intl.formatMessage(
|
||||
{
|
||||
id: "meetingRoomCard.numberOfPeople",
|
||||
defaultMessage: "{number} people",
|
||||
},
|
||||
{ number: seating.capacity }
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
<Divider color="Border/Divider/Subtle" />
|
||||
<tbody className={styles.rowItem}>
|
||||
<TableRow
|
||||
name={intl.formatMessage({
|
||||
id: "meetingRoomCard.locationInHotel",
|
||||
defaultMessage: "Location in hotel",
|
||||
})}
|
||||
value={intl.formatMessage(
|
||||
{
|
||||
id: "meetingRoomCard.floorNumber",
|
||||
defaultMessage: "Floor {floorNumber}",
|
||||
},
|
||||
{
|
||||
floorNumber: `${room.floorNumber}`,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
<TableRow
|
||||
name={intl.formatMessage({
|
||||
id: "meetingRoomCard.lighting",
|
||||
defaultMessage: "Lighting",
|
||||
})}
|
||||
value={translateRoomLighting(room.lighting, intl)}
|
||||
/>
|
||||
{room.doorHeight && room.doorWidth ? (
|
||||
<TableRow
|
||||
name={intl.formatMessage({
|
||||
id: "meetingRoomCard.accessSize",
|
||||
defaultMessage: "Access size",
|
||||
})}
|
||||
value={`${room.doorHeight} x ${room.doorWidth} m`}
|
||||
/>
|
||||
) : null}
|
||||
{room.length && room.width && room.height ? (
|
||||
<TableRow
|
||||
name={intl.formatMessage({
|
||||
id: "meetingRoomCard.dimensions",
|
||||
defaultMessage: "Dimensions",
|
||||
})}
|
||||
value={`${room.length} x ${room.width} x ${room.height} m`}
|
||||
/>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<ShowMoreButton
|
||||
variant="Secondary"
|
||||
loadMoreData={handleShowMore}
|
||||
showLess={opened}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({
|
||||
name,
|
||||
value,
|
||||
id,
|
||||
}: {
|
||||
name: string
|
||||
value: string
|
||||
id?: string
|
||||
}) {
|
||||
return (
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<tr className={styles.capacity} id={id}>
|
||||
<th className={styles.leftColumn}>{name}</th>
|
||||
<td>{value}</td>
|
||||
</tr>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.card {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.capacity {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--Space-x1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
display: flex;
|
||||
gap: var(--Space-x05);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rowItem {
|
||||
display: grid;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.openedInfo {
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Space-x2);
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
padding: var(--Space-x2);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.roomDetails {
|
||||
color: var(--Text-Tertiary);
|
||||
}
|
||||
|
||||
.leftColumn {
|
||||
color: var(--Text-Secondary);
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
@media (min-width: 1367px) {
|
||||
.card:not(.alwaysStack) .ctaContainer {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card:not(.alwaysStack) .ctaContainer:has(:only-child) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import { logger } from "@scandic-hotels/common/logger"
|
||||
|
||||
import type { IntlShape } from "react-intl/src/types"
|
||||
|
||||
import { RoomLighting, SeatingType } from "@/types/enums/meetingRooms"
|
||||
|
||||
export function translateRoomLighting(option: string, intl: IntlShape) {
|
||||
switch (option) {
|
||||
case RoomLighting.WindowsNaturalDaylight:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.windowsNaturalDaylight",
|
||||
defaultMessage: "Windows with natural daylight",
|
||||
})
|
||||
case RoomLighting.IndoorWindowsExcellentLighting:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.indoorWindowsExcellentLighting",
|
||||
defaultMessage: "Indoor windows and excellent lighting",
|
||||
})
|
||||
case RoomLighting.IndoorWindows:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.indoorWindows",
|
||||
defaultMessage: "Indoor windows facing the hotel",
|
||||
})
|
||||
case RoomLighting.NoWindows:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.noWindows",
|
||||
defaultMessage: "No windows",
|
||||
})
|
||||
case RoomLighting.NoWindowsExcellentLighting:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.noWindowsExcellentLighting",
|
||||
defaultMessage: "No windows but excellent lighting",
|
||||
})
|
||||
case RoomLighting.WindowsNaturalDaylightBlackoutFacilities:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.windowsNaturalDaylightBlackoutFacilities",
|
||||
defaultMessage: "Windows natural daylight and blackout facilities",
|
||||
})
|
||||
case RoomLighting.WindowsNaturalDaylightExcellentView:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.windowsNaturalDaylightExcellentView",
|
||||
defaultMessage: "Windows natural daylight and excellent view",
|
||||
})
|
||||
default:
|
||||
logger.warn(`Unsupported conference room ligthing option: ${option}`)
|
||||
return intl.formatMessage({
|
||||
id: "common.NA",
|
||||
defaultMessage: "N/A",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function translateSeatingType(type: string, intl: IntlShape) {
|
||||
switch (type) {
|
||||
case SeatingType.Boardroom:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.boardroom",
|
||||
defaultMessage: "Boardroom",
|
||||
})
|
||||
case SeatingType.Cabaret:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.cabaret",
|
||||
defaultMessage: "Cabaret seating",
|
||||
})
|
||||
case SeatingType.Classroom:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.classroom",
|
||||
defaultMessage: "Classroom",
|
||||
})
|
||||
case SeatingType.FullCircleTable:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.fullCircleTable",
|
||||
defaultMessage: "Full circle",
|
||||
})
|
||||
case SeatingType.HalfCircle:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.halfCircle",
|
||||
defaultMessage: "Half circle",
|
||||
})
|
||||
case SeatingType.StandingTable:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.standingTable",
|
||||
defaultMessage: "Standing table",
|
||||
})
|
||||
case SeatingType.Theatre:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.theatre",
|
||||
defaultMessage: "Theater",
|
||||
})
|
||||
case SeatingType.UShape:
|
||||
return intl.formatMessage({
|
||||
id: "meetingRoomCard.uShape",
|
||||
defaultMessage: "U-shape",
|
||||
})
|
||||
default:
|
||||
logger.warn(`Unsupported conference room type : ${type}`)
|
||||
return intl.formatMessage({
|
||||
id: "common.NA",
|
||||
defaultMessage: "N/A",
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user