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

feat(SW-713): update folder structure

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-29 13:54:57 +01:00
parent 4269b23dc0
commit cddbbabe93
7 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -11,9 +11,9 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import RoomSidePeek from "../../../../SidePeeks/RoomSidePeek"
import ImageGallery from "../../ImageGallery"
import { getIconForFeatureCode } from "../../utils"
import RoomSidePeek from "../RoomSidePeek"
import styles from "./roomCard.module.css"

124
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/facilityIcon.ts
View File

@@ -1,124 +0,0 @@
import { FC } from "react"
import {
AcIcon,
BathtubIcon,
BedDoubleIcon,
ChairIcon,
CityIcon,
DeskIcon,
HairdryerIcon,
HandSoapIcon,
HeartIcon,
IronIcon,
MirrorIcon,
NatureIcon,
NoSmokingIcon,
SafetyBoxIcon,
ShowerIcon,
StreetIcon,
WifiIcon,
WindowCurtainsAltIcon,
WindowNotAvailableIcon,
WineBarIcon,
WoodFloorIcon,
YardIcon,
} from "@/components/Icons"
import { IconProps } from "@/types/components/icon"
export function getFacilityIcon(name: string): FC<IconProps> | null {
const iconMappings = [
{
icon: DeskIcon,
texts: ["Desk and chair"],
},
{
icon: HairdryerIcon,
texts: ["Hairdryer"],
},
{
icon: AcIcon,
texts: ["Air Condition"],
},
{
icon: ChairIcon,
texts: ["Armchair / armchairs"],
},
{
icon: BathtubIcon,
texts: ["Bathroom with shower or bathtub"],
},
{
icon: WindowCurtainsAltIcon,
texts: ["Blackout curtains"],
},
{
icon: MirrorIcon,
texts: ["Cosmetic mirror"],
},
{
icon: WifiIcon,
texts: ["Free WiFi"],
},
{
icon: ChairIcon,
texts: ["Connecting rooms"],
},
{
icon: YardIcon,
texts: ["View - atrium view"],
},
{
icon: CityIcon,
texts: ["View - city view"],
},
{
icon: NatureIcon,
texts: ["View - park view"],
},
{
icon: StreetIcon,
texts: ["View - street view"],
},
{
icon: WineBarIcon,
texts: ["Minibar"],
},
{
icon: NoSmokingIcon,
texts: ["Non smoking"],
},
{
icon: ShowerIcon,
texts: ["Rain shower"],
},
{
icon: SafetyBoxIcon,
texts: ["Safety box"],
},
{
icon: BedDoubleIcon,
texts: ["Set of two pillows"],
},
{
icon: IronIcon,
texts: ["Iron and ironing board"],
},
{
icon: HandSoapIcon,
texts: ["Toiletries"],
},
{
icon: WoodFloorIcon,
texts: ["Wooden floor"],
},
{
icon: WindowNotAvailableIcon,
texts: ["Not window"],
},
]
const icon = iconMappings.find((icon) => icon.texts.includes(name))
return icon ? icon.icon : HeartIcon
}

96
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/index.tsx
View File

@@ -1,96 +0,0 @@
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"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import ImageGallery from "../../ImageGallery"
import { getFacilityIcon } from "./facilityIcon"
import styles from "./roomSidePeek.module.css"
import type { RoomSidePeekProps } from "@/types/components/hotelReservation/selectRate/roomSidePeek"
export default function RoomSidePeek({
selectedRoom,
roomConfiguration,
}: RoomSidePeekProps) {
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
const intl = useIntl()
const roomSize = selectedRoom?.roomSize
const occupancy = selectedRoom?.occupancy.total
const roomDescription = selectedRoom?.descriptions.medium
const images = selectedRoom?.images
return (
<div>
<Button
intent="text"
type="button"
size="small"
theme="base"
className={styles.button}
onClick={() => setIsSidePeekOpen(true)}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
<SidePeek
title={roomConfiguration.roomType}
isOpen={isSidePeekOpen}
handleClose={() => setIsSidePeekOpen(false)}
>
<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={roomConfiguration.roomType} />
</div>
)}
<Body className={styles.description} color="uiTextHighContrast">
{roomDescription}
</Body>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{selectedRoom?.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>
</SidePeek>
</div>
)
}

29
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/roomSidePeek.module.css
View File

@@ -1,29 +0,0 @@
.button {
margin-left: auto;
padding: 0 0 0 var(--Spacing-x-half);
text-decoration: none;
}
.imageContainer {
min-height: 185px;
position: relative;
}
.description {
margin-top: var(--Spacing-x-one-and-half);
margin-bottom: var(--Spacing-x2);
}
.facilityList {
margin-top: var(--Spacing-x-one-and-half);
column-count: 2;
column-gap: var(--Spacing-x2);
}
.facilityList li {
display: flex;
gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x-half);
}
.noIcon {
margin-left: var(--Spacing-x4);
}