diff --git a/components/ContentType/HotelPage/data.ts b/components/ContentType/HotelPage/data.ts index e4043c53e..dd2a74f90 100644 --- a/components/ContentType/HotelPage/data.ts +++ b/components/ContentType/HotelPage/data.ts @@ -14,8 +14,8 @@ const facilityToIconMap: Record = { [FacilityEnum.GymTrainingFacilities]: IconName.Fitness, [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness, [FacilityEnum.FreeWiFi]: IconName.Wifi, - [FacilityEnum.MeetingRooms]: IconName.People2, - [FacilityEnum.MeetingConferenceFacilities]: IconName.People2, + [FacilityEnum.MeetingRooms]: IconName.Business, + [FacilityEnum.MeetingConferenceFacilities]: IconName.Business, [FacilityEnum.PetFriendlyRooms]: IconName.Pets, [FacilityEnum.Sauna]: IconName.Sauna, [FacilityEnum.Restaurant]: IconName.Restaurant, diff --git a/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx new file mode 100644 index 000000000..38a0e50b3 --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx @@ -0,0 +1,24 @@ +import { useIntl } from "react-intl" + +import { ErrorCircleIcon } from "@/components/Icons" +import Body from "@/components/TempDesignSystem/Text/Body" + +import styles from "../hotelPriceList.module.css" + +export default function NoPriceAvailableCard() { + const intl = useIntl() + return ( +
+
+
+ +
+ + {intl.formatMessage({ + id: "There are no rooms available that match your request.", + })} + +
+
+ ) +} diff --git a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css index fb67d45d9..23d935c27 100644 --- a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css +++ b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css @@ -40,6 +40,6 @@ @media screen and (min-width: 1367px) { .prices { - max-width: 260px; + width: 260px; } } diff --git a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx index d98fdc260..c868afa5d 100644 --- a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx +++ b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx @@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import HotelPriceCard from "./HotelPriceCard" +import NoPriceAvailableCard from "./NoPriceAvailableCard" import styles from "./hotelPriceList.module.css" @@ -48,18 +49,7 @@ export default function HotelPriceList({ ) : ( -
-
-
- -
- - {intl.formatMessage({ - id: "There are no rooms available that match your request.", - })} - -
-
+ )} ) diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css index bfa87ea3a..089f88800 100644 --- a/components/HotelReservation/HotelCard/hotelCard.module.css +++ b/components/HotelReservation/HotelCard/hotelCard.module.css @@ -122,11 +122,6 @@ margin-bottom: var(--Spacing-x-one-and-half); } - .pageListing .prices { - align-items: center; - width: 260px; - } - .pageListing .button { width: 100%; } diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx index 1836d4130..916796229 100644 --- a/components/HotelReservation/HotelCard/index.tsx +++ b/components/HotelReservation/HotelCard/index.tsx @@ -3,11 +3,10 @@ import { useParams } from "next/dist/client/components/navigation" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" -import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation" +import { selectHotelMap } from "@/constants/routes/hotelReservation" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" diff --git a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css index 7a55be6ca..5c6e6d6bd 100644 --- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css +++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css @@ -48,7 +48,7 @@ .content { width: 100%; - min-width: 201px; + min-width: 220px; padding: var(--Spacing-x-one-and-half); gap: var(--Spacing-x1); display: flex; @@ -67,12 +67,32 @@ gap: var(--Spacing-x-half); } -.prices { +.priceCard { border-radius: var(--Corner-radius-Medium); padding: var(--Spacing-x-half) var(--Spacing-x1); background: var(--Base-Surface-Secondary-light-Normal); +} + +.prices { display: flex; flex-direction: column; + gap: var(--Spacing-x1); +} + +.imagePlaceholder { + height: 100%; + width: 100%; + background-color: #fff; + background-image: linear-gradient(45deg, #000000 25%, transparent 25%), + linear-gradient(-45deg, #000000 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #000000 75%), + linear-gradient(-45deg, transparent 75%, #000000 75%); + background-size: 120px 120px; + background-position: + 0 0, + 0 60px, + 60px -60px, + -60px 0; } .perNight { diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx index 32f745620..3fdcd6344 100644 --- a/components/HotelReservation/HotelCardDialog/index.tsx +++ b/components/HotelReservation/HotelCardDialog/index.tsx @@ -1,6 +1,7 @@ "use client" import { useParams } from "next/navigation" +import { useState } from "react" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" @@ -16,6 +17,8 @@ import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard" + import styles from "./hotelCardDialog.module.css" import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map" @@ -28,6 +31,7 @@ export default function HotelCardDialog({ const params = useParams() const lang = params.lang as Lang const intl = useIntl() + const [imageError, setImageError] = useState(false) if (!data) { return null @@ -56,7 +60,16 @@ export default function HotelCardDialog({ height={16} />
- {altText} + {!firstImage || imageError ? ( +
+ ) : ( + {altText} setImageError(true)} + /> + )}
@@ -84,32 +97,50 @@ export default function HotelCardDialog({ })}
- {intl.formatMessage({ id: "From" })} - - {publicPrice} {currency} - - /{intl.formatMessage({ id: "night" })} - - - {memberPrice && ( - - {memberPrice} {currency} - - /{intl.formatMessage({ id: "night" })} - - + {publicPrice || memberPrice ? ( + <> +
+ + {intl.formatMessage({ id: "From" })} + + + {publicPrice} {currency} + + /{intl.formatMessage({ id: "night" })} + + + {memberPrice && ( + + {memberPrice} {currency} + + /{intl.formatMessage({ id: "night" })} + + + )} +
+ + + ) : ( + )}
- -
diff --git a/components/HotelReservation/HotelCardDialogListing/utils.ts b/components/HotelReservation/HotelCardDialogListing/utils.ts index ba40ccc3a..2299b3f35 100644 --- a/components/HotelReservation/HotelCardDialogListing/utils.ts +++ b/components/HotelReservation/HotelCardDialogListing/utils.ts @@ -15,7 +15,12 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] { hotel.hotelData.hotelContent.images, ...(hotel.hotelData.gallery?.heroImages ?? []), ], - amenities: hotel.hotelData.detailedFacilities.slice(0, 3), + amenities: hotel.hotelData.detailedFacilities + .map((facility) => ({ + ...facility, + icon: facility.icon ?? "None", + })) + .slice(0, 3), ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null, operaId: hotel.hotelData.operaId, })) diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css index 962684640..5fd7e4084 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css @@ -11,7 +11,7 @@ left: 0; right: 0; z-index: 10; - height: 280px; + height: 100%; gap: var(--Spacing-x1); } diff --git a/components/Icons/Balcony.tsx b/components/Icons/Balcony.tsx new file mode 100644 index 000000000..e0fc4c020 --- /dev/null +++ b/components/Icons/Balcony.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BalconyIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/BedHotel.tsx b/components/Icons/BedHotel.tsx new file mode 100644 index 000000000..d2f37b0ed --- /dev/null +++ b/components/Icons/BedHotel.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BedHotelIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/BedroomParent.tsx b/components/Icons/BedroomParent.tsx new file mode 100644 index 000000000..c7bdf7868 --- /dev/null +++ b/components/Icons/BedroomParent.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BedroomParentIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Bike.tsx b/components/Icons/Bike.tsx new file mode 100644 index 000000000..131d91a99 --- /dev/null +++ b/components/Icons/Bike.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function BikeIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Cable.tsx b/components/Icons/Cable.tsx new file mode 100644 index 000000000..493994d60 --- /dev/null +++ b/components/Icons/Cable.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function CableIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/CoffeeMaker.tsx b/components/Icons/CoffeeMaker.tsx new file mode 100644 index 000000000..8d9dbf460 --- /dev/null +++ b/components/Icons/CoffeeMaker.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function CoffeeMakerIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Dining.tsx b/components/Icons/Dining.tsx new file mode 100644 index 000000000..5fcab7d1b --- /dev/null +++ b/components/Icons/Dining.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function DiningIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Family.tsx b/components/Icons/Family.tsx new file mode 100644 index 000000000..3f0547be8 --- /dev/null +++ b/components/Icons/Family.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function FamilyIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/HealthBeauty.tsx b/components/Icons/HealthBeauty.tsx new file mode 100644 index 000000000..90e505325 --- /dev/null +++ b/components/Icons/HealthBeauty.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function HealthBeautyIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Laptop.tsx b/components/Icons/Laptop.tsx new file mode 100644 index 000000000..932efb949 --- /dev/null +++ b/components/Icons/Laptop.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function LaptopIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Luggage.tsx b/components/Icons/Luggage.tsx new file mode 100644 index 000000000..e4cf0ba21 --- /dev/null +++ b/components/Icons/Luggage.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function LuggageIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Microwave.tsx b/components/Icons/Microwave.tsx new file mode 100644 index 000000000..ce4c73752 --- /dev/null +++ b/components/Icons/Microwave.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function MicrowaveIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Restaurant.tsx b/components/Icons/Restaurant.tsx index 8fe36e0e6..adeea74a1 100644 --- a/components/Icons/Restaurant.tsx +++ b/components/Icons/Restaurant.tsx @@ -19,7 +19,7 @@ export default function RestaurantIcon({ {...props} > diff --git a/components/Icons/Speaker.tsx b/components/Icons/Speaker.tsx new file mode 100644 index 000000000..eeb76d4d5 --- /dev/null +++ b/components/Icons/Speaker.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function SpeakerIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Store.tsx b/components/Icons/Store.tsx new file mode 100644 index 000000000..925b908eb --- /dev/null +++ b/components/Icons/Store.tsx @@ -0,0 +1,23 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function StoreIcon({ className, color, ...props }: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index d252c8755..b8d3ef8d9 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -7,13 +7,18 @@ export { default as AirplaneIcon } from "./Airplane" export { default as AllergyIcon } from "./Allergy" export { default as ArrowRightIcon } from "./ArrowRight" export { default as ArrowUpIcon } from "./ArrowUp" +export { default as BalconyIcon } from "./Balcony" export { default as BarIcon } from "./Bar" export { default as BathtubIcon } from "./Bathtub" export { default as BedDoubleIcon } from "./BedDouble" +export { default as BedHotelIcon } from "./BedHotel" +export { default as BedroomParentIcon } from "./BedroomParent" export { default as BedSingleIcon } from "./BedSingle" +export { default as BikeIcon } from "./Bike" export { default as BikingIcon } from "./Biking" export { default as BreakfastIcon } from "./Breakfast" export { default as BusinessIcon } from "./Business" +export { default as CableIcon } from "./Cable" export { default as CalendarIcon } from "./Calendar" export { default as CameraIcon } from "./Camera" export { default as CellphoneIcon } from "./Cellphone" @@ -33,6 +38,7 @@ export { default as CloseIcon } from "./Close" export { default as CloseLargeIcon } from "./CloseLarge" export { default as CoffeeIcon } from "./Coffee" export { default as CoffeeAltIcon } from "./CoffeeAlt" +export { default as CoffeeMakerIcon } from "./CoffeeMaker" export { default as ConciergeIcon } from "./Concierge" export { default as ContractIcon } from "./Contract" export { default as ConvenienceStore24hIcon } from "./ConvenienceStore24h" @@ -43,6 +49,7 @@ export { default as CrossCircle } from "./CrossCircle" export { default as CulturalIcon } from "./Cultural" export { default as DeleteIcon } from "./Delete" export { default as DeskIcon } from "./Desk" +export { default as DiningIcon } from "./Dining" export { default as DiscountIcon } from "./Discount" export { default as DoorClosedIcon } from "./DoorClosed" export { default as DoorOpenIcon } from "./DoorOpen" @@ -56,6 +63,7 @@ export { default as ErrorCircleIcon } from "./ErrorCircle" export { default as EyeHideIcon } from "./EyeHide" export { default as EyeShowIcon } from "./EyeShow" export { default as FacebookIcon } from "./Facebook" +export { default as FamilyIcon } from "./Family" export { default as FanIcon } from "./Fan" export { default as FilterIcon } from "./Filter" export { default as FitnessIcon } from "./Fitness" @@ -70,6 +78,7 @@ export { default as HairdryerIcon } from "./Hairdryer" export { default as HandSoapIcon } from "./HandSoap" export { default as HangerIcon } from "./Hanger" export { default as HangerAltIcon } from "./HangerAlt" +export { default as HealthBeautyIcon } from "./HealthBeauty" export { default as HeartIcon } from "./Heart" export { default as HeatIcon } from "./Heat" export { default as HouseIcon } from "./House" @@ -82,6 +91,7 @@ export { default as KettleIcon } from "./Kettle" export { default as KingBedIcon } from "./KingBed" export { default as KingBedSmallIcon } from "./KingBedSmall" export { default as LampIcon } from "./Lamp" +export { default as LaptopIcon } from "./Laptop" export { default as LaundryMachineIcon } from "./LaundryMachine" export { default as LocalBarIcon } from "./LocalBar" export { default as LocationIcon } from "./Location" @@ -93,7 +103,9 @@ export { default as HotelNorgeIcon } from "./Logos/HotelNorge" export { default as MarskiLogoIcon } from "./Logos/Marski" export { default as ScandicGoLogoIcon } from "./Logos/ScandicGoLogo" export { default as ScandicLogoIcon } from "./Logos/ScandicLogo" +export { default as LuggageIcon } from "./Luggage" export { default as MapIcon } from "./Map" +export { default as MicrowaveIcon } from "./Microwave" export { default as MinusIcon } from "./Minus" export { default as MirrorIcon } from "./Mirror" export { default as MuseumIcon } from "./Museum" @@ -123,7 +135,9 @@ export { default as SkateboardingIcon } from "./Skateboarding" export { default as SmokingIcon } from "./Smoking" export { default as SnowflakeIcon } from "./Snowflake" export { default as SpaIcon } from "./Spa" +export { default as SpeakerIcon } from "./Speaker" export { default as StarFilledIcon } from "./StarFilled" +export { default as StoreIcon } from "./Store" export { default as StreetIcon } from "./Street" export { default as SwimIcon } from "./Swim" export { default as ThermostatIcon } from "./Thermostat" diff --git a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css index 57bb78db4..37fb3aeab 100644 --- a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css +++ b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css @@ -13,8 +13,14 @@ font-family: var(--typography-Body-Regular-fontFamily); border-bottom: 1px solid var(--Base-Border-Subtle); /* padding set to align with AccordionItem which has a different composition */ - padding: var(--Spacing-x2) - calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half)); + padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half)) + var(--Spacing-x3); + display: flex; + gap: var(--Spacing-x1); +} + +.noIcon { + margin-left: var(--Spacing-x4); } .list { diff --git a/components/SidePeeks/HotelSidePeek/index.tsx b/components/SidePeeks/HotelSidePeek/index.tsx index 06ac3e5f2..b26570bb7 100644 --- a/components/SidePeeks/HotelSidePeek/index.tsx +++ b/components/SidePeeks/HotelSidePeek/index.tsx @@ -1,6 +1,8 @@ import { useIntl } from "react-intl" +import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import Contact from "@/components/HotelReservation/Contact" +import { AccessibilityIcon } from "@/components/Icons" import Accordion from "@/components/TempDesignSystem/Accordion" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import Button from "@/components/TempDesignSystem/Button" @@ -10,10 +12,11 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./hotelSidePeek.module.css" -import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek" -import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" +import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek" +import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" -import { Amenities, Hotel } from "@/types/hotel" +import { IconName } from "@/types/components/icon" +import type { Amenities, Hotel } from "@/types/hotel" function getAmenitiesList(hotel: Hotel) { const detailedAmenities: Amenities = hotel.detailedFacilities.filter( @@ -46,19 +49,37 @@ export default function HotelSidePeek({ {/* parking */} {hotel.parking.length ? ( - + {hotel.parking.map((p) => ( ))} ) : null}
+ {intl.formatMessage({ id: "Accessibility" })}
{amenitiesList.map((amenity) => { + const Icon = mapFacilityToIcon(amenity.id) return (
- {amenity.name} + {Icon && ( + + )} + + {amenity.name} +
) })} diff --git a/components/SidePeeks/RoomSidePeek/facilityIcon.ts b/components/SidePeeks/RoomSidePeek/facilityIcon.ts index d45ce7b30..f86329504 100644 --- a/components/SidePeeks/RoomSidePeek/facilityIcon.ts +++ b/components/SidePeeks/RoomSidePeek/facilityIcon.ts @@ -2,21 +2,61 @@ import { FC } from "react" import { AcIcon, + AirplaneIcon, + BalconyIcon, BathtubIcon, BedDoubleIcon, + BedHotelIcon, + BedroomParentIcon, + BedSingleIcon, + BikeIcon, + BreakfastIcon, + BusinessIcon, + CableIcon, ChairIcon, CityIcon, + CoffeeAltIcon, + CoffeeIcon, + CoffeeMakerIcon, + ConciergeIcon, + CoolIcon, DeskIcon, + DiningIcon, + ElectricBikeIcon, + FamilyIcon, + FitnessIcon, + FootstoolIcon, HairdryerIcon, HandSoapIcon, + HealthBeautyIcon, HeartIcon, IronIcon, + KayakingIcon, + KettleIcon, + LaptopIcon, + LaundryMachineIcon, + LocalBarIcon, + LuggageIcon, + MicrowaveIcon, MirrorIcon, NatureIcon, + NightlifeIcon, NoSmokingIcon, + OutdoorFurnitureIcon, + ParkingIcon, + PetsIcon, + PhoneIcon, + RestaurantIcon, + RoomServiceIcon, SafetyBoxIcon, + SaunaIcon, ShowerIcon, + SpeakerIcon, + StoreIcon, StreetIcon, + SwimIcon, + TshirtWashIcon, + TvCastingIcon, WifiIcon, WindowCurtainsAltIcon, WindowNotAvailableIcon, @@ -27,98 +67,174 @@ import { import { IconProps } from "@/types/components/icon" -export function getFacilityIcon(name: string): FC | null { +export function getFacilityIcon( + name: string | undefined +): FC | null { + if (!name) { + return HeartIcon + } + + const normalizedName = name.toLowerCase() + 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"], - }, + { icon: AcIcon, name: "aircondition" }, + { icon: AirplaneIcon, name: "airport" }, + { icon: BalconyIcon, name: "balcony" }, + { icon: BalconyIcon, name: "balconyorterrace" }, + { icon: BalconyIcon, name: "frenchbalcony" }, + { icon: BathtubIcon, name: "bathroomwithbathtub" }, + { icon: BathtubIcon, name: "bathroomwithshowerandbathtub" }, + { icon: BathtubIcon, name: "bathroomwithshowerorbathtub" }, + { icon: BedDoubleIcon, name: "adjustablebeds" }, + { icon: BedDoubleIcon, name: "setoftwopillows" }, + { icon: BedHotelIcon, name: "armchairbed" }, + { icon: BedHotelIcon, name: "pulloutbed" }, + { icon: BedroomParentIcon, name: "separatebedroom" }, + { icon: BedSingleIcon, name: "extrabed" }, + { icon: BikeIcon, name: "bikeforloan" }, + { icon: BreakfastIcon, name: "breakfast" }, + { icon: BreakfastIcon, name: "servesbreakfastalwaysincluded" }, + { icon: BusinessIcon, name: "meetingconferencefacilities" }, + { icon: BusinessIcon, name: "meetingrooms" }, + { icon: CableIcon, name: "internetwithcableintheroom" }, + { icon: ChairIcon, name: "armchair" }, + { icon: ChairIcon, name: "connectingrooms" }, + { icon: CityIcon, name: "viewcityview" }, + { icon: CoffeeAltIcon, name: "nespressomachine" }, + { icon: CoffeeIcon, name: "café" }, + { icon: CoffeeIcon, name: "coffee" }, + { icon: CoffeeMakerIcon, name: "coffeemachine" }, + { icon: ConciergeIcon, name: "lifestyleconcierge" }, + { icon: CoolIcon, name: "aircooling" }, + { icon: CoolIcon, name: "cooler" }, + { icon: CoolIcon, name: "coolingcabinet" }, + { icon: DeskIcon, name: "deskandchair" }, + { icon: DiningIcon, name: "diningarea" }, + { icon: DiningIcon, name: "tablefordining" }, + { icon: ElectricBikeIcon, name: "ebikeschargingstation" }, + { icon: FamilyIcon, name: "extrafamilyfriendly" }, + { icon: FitnessIcon, name: "gym" }, + { icon: FootstoolIcon, name: "footstool" }, + { icon: HairdryerIcon, name: "hairdryer" }, + { icon: HandSoapIcon, name: "toiletries" }, + { icon: HealthBeautyIcon, name: "beautysalon" }, + { icon: HeartIcon, name: "bathrobes" }, + { icon: HeartIcon, name: "bathroom2separatebathrooms" }, + { icon: HeartIcon, name: "bodycareproducts" }, + { icon: HeartIcon, name: "bodylotion" }, + { icon: HeartIcon, name: "bowling" }, + { icon: HeartIcon, name: "bunkbed" }, + { icon: HeartIcon, name: "bunkbed80x188cm" }, + { icon: HeartIcon, name: "carpetingwalltowallcarpet" }, + { icon: HeartIcon, name: "cashfree800pmtill0600am" }, + { icon: HeartIcon, name: "cashfreehotel" }, + { icon: HeartIcon, name: "coffeevoucher" }, + { icon: HeartIcon, name: "complimentarycoldrefreshments" }, + { icon: HeartIcon, name: "conditioner" }, + { icon: HeartIcon, name: "conventioncentre" }, + { icon: HeartIcon, name: "disabledparking" }, + { icon: HeartIcon, name: "dockingstationforipodipad" }, + { icon: HeartIcon, name: "dryingcabinet" }, + { icon: HeartIcon, name: "easyaccess" }, + { icon: HeartIcon, name: "garmentsteamer" }, + { icon: HeartIcon, name: "highfloor" }, + { icon: HeartIcon, name: "icemachine" }, + { icon: HeartIcon, name: "icemachinereception" }, + { icon: HeartIcon, name: "jaccuzzi" }, + { icon: HeartIcon, name: "jacuzzi" }, + { icon: HeartIcon, name: "kitchen" }, + { icon: HeartIcon, name: "kitchenette" }, + { icon: HeartIcon, name: "latecheckoutuntil1400guaranteed" }, + { icon: HeartIcon, name: "livemusicexhibitions" }, + { icon: HeartIcon, name: "massage" }, + { icon: HeartIcon, name: "meetingarea" }, + { icon: HeartIcon, name: "minibarincludedinroomrate" }, + { icon: HeartIcon, name: "overnightsecurity" }, + { icon: HeartIcon, name: "parkingadditionalcost" }, + { icon: HeartIcon, name: "privatesauna" }, + { icon: HeartIcon, name: "refrigerator" }, + { icon: HeartIcon, name: "seatingarea" }, + { icon: HeartIcon, name: "security24hoours" }, + { icon: HeartIcon, name: "separatelivingroom" }, + { icon: HeartIcon, name: "separatetoilet" }, + { icon: HeartIcon, name: "servicesecurity24h" }, + { icon: HeartIcon, name: "shampoo" }, + { icon: HeartIcon, name: "slippers" }, + { icon: HeartIcon, name: "sofabed" }, + { icon: HeartIcon, name: "sofas" }, + { icon: HeartIcon, name: "sofawithtable" }, + { icon: HeartIcon, name: "spaciousroom" }, + { icon: HeartIcon, name: "stillandsparklingwater" }, + { icon: HeartIcon, name: "table" }, + { icon: HeartIcon, name: "tassimocoffeemaker" }, + { icon: HeartIcon, name: "terrace" }, + { icon: HeartIcon, name: "trouserpress" }, + { icon: HeartIcon, name: "tv" }, + { icon: HeartIcon, name: "tvwithcomplimentarymoviechannels" }, + { icon: HeartIcon, name: "tvwithmoviechannels" }, + { icon: HeartIcon, name: "tvwithstreamingoption" }, + { icon: HeartIcon, name: "ventilationinroom" }, + { icon: HeartIcon, name: "view" }, + { icon: HeartIcon, name: "viewfjordview" }, + { icon: HeartIcon, name: "viewlakeview" }, + { icon: HeartIcon, name: "viewpanoramicview" }, + { icon: HeartIcon, name: "viewseaview" }, + { icon: HeartIcon, name: "wallbed" }, + { icon: HeartIcon, name: "wallmountedcyclerack" }, + { icon: HeartIcon, name: "wardrobe" }, + { icon: HeartIcon, name: "wellnessandsaunaentrancefeeadmission16years" }, + { icon: HeartIcon, name: "wellnesspoolsaunaentrancefeeadmission16years" }, + { icon: HeartIcon, name: "windownook" }, + { icon: IronIcon, name: "ironandironingboard" }, + { icon: IronIcon, name: "ironingroom" }, + { icon: KayakingIcon, name: "kayaksforloan" }, + { icon: KettleIcon, name: "kettle" }, + { icon: KettleIcon, name: "kettlewithcoffeetea" }, + { icon: LaptopIcon, name: "laptopsafe" }, + { icon: LaptopIcon, name: "laptoptray" }, + { icon: LaundryMachineIcon, name: "laundryservice" }, + { icon: LocalBarIcon, name: "bar" }, + { icon: LocalBarIcon, name: "rooftopbar" }, + { icon: LocalBarIcon, name: "skybar" }, + { icon: LuggageIcon, name: "luggagelockers" }, + { icon: MicrowaveIcon, name: "microwave" }, + { icon: MirrorIcon, name: "cosmeticmirror" }, + { icon: NatureIcon, name: "viewparkview" }, + { icon: NightlifeIcon, name: "disconightclub" }, + { icon: NoSmokingIcon, name: "nonsmoking" }, + { icon: OutdoorFurnitureIcon, name: "outdoorterrace" }, + { icon: ParkingIcon, name: "parking" }, + { icon: ParkingIcon, name: "parkingfreeparking" }, + { icon: PetsIcon, name: "petfriendlyrooms" }, + { icon: PhoneIcon, name: "directdialphoneandvoicemail" }, + { icon: RestaurantIcon, name: "restaurant" }, + { icon: RoomServiceIcon, name: "roomservice" }, + { icon: SafetyBoxIcon, name: "safetybox" }, + { icon: SaunaIcon, name: "sauna" }, + { icon: ShowerIcon, name: "bathroomwithshower" }, + { icon: ShowerIcon, name: "rainshower" }, + { icon: ShowerIcon, name: "sharedbathroomwithshower" }, + { icon: ShowerIcon, name: "showergel" }, + { icon: ShowerIcon, name: "showerproductsscentbygrandcentral" }, + { icon: SpeakerIcon, name: "modernvinylplayer" }, + { icon: SpeakerIcon, name: "musicplayer" }, + { icon: StoreIcon, name: "hairdresser" }, + { icon: StoreIcon, name: "shop" }, + { icon: StreetIcon, name: "viewstreetview" }, + { icon: SwimIcon, name: "pool" }, + { icon: TshirtWashIcon, name: "handwash" }, + { icon: TvCastingIcon, name: "tvwithchromecast" }, + { icon: WifiIcon, name: "freewifi" }, + { icon: WindowCurtainsAltIcon, name: "blackoutcurtains" }, + { icon: WindowNotAvailableIcon, name: "nowindow" }, + { icon: WineBarIcon, name: "minibar" }, + { icon: WoodFloorIcon, name: "woodenfloor" }, + { icon: YardIcon, name: "viewatriumview" }, ] - const icon = iconMappings.find((icon) => icon.texts.includes(name)) + const icon = iconMappings.find( + (icon) => icon.name.toLowerCase() === normalizedName + ) + return icon ? icon.icon : HeartIcon } diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx index da46a6f42..175eb14a0 100644 --- a/components/SidePeeks/RoomSidePeek/index.tsx +++ b/components/SidePeeks/RoomSidePeek/index.tsx @@ -56,10 +56,16 @@ export default function RoomSidePeek({ {room.roomFacilities .sort((a, b) => a.sortOrder - b.sortOrder) .map((facility) => { - const Icon = getFacilityIcon(facility.name) + const Icon = getFacilityIcon(facility.icon) return (
  • - {Icon && } + {Icon && ( + + )}