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/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/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/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/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..26ca0d7ba 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -11,6 +11,7 @@ export { default as BarIcon } from "./Bar" export { default as BathtubIcon } from "./Bathtub" export { default as BedDoubleIcon } from "./BedDouble" 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" @@ -124,6 +125,7 @@ export { default as SmokingIcon } from "./Smoking" export { default as SnowflakeIcon } from "./Snowflake" export { default as SpaIcon } from "./Spa" 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/hotelFacilityIcon.ts b/components/SidePeeks/HotelSidePeek/hotelFacilityIcon.ts new file mode 100644 index 000000000..3bf8fc496 --- /dev/null +++ b/components/SidePeeks/HotelSidePeek/hotelFacilityIcon.ts @@ -0,0 +1,157 @@ +import { FC } from "react" + +import { + AcIcon, + BarIcon, + BathtubIcon, + BedDoubleIcon, + BikeIcon, + BikingIcon, + BreakfastIcon, + BusinessIcon, + ChairIcon, + CityIcon, + CoffeeIcon, + ConciergeIcon, + DeskIcon, + ElectricBikeIcon, + ElectricCarIcon, + FitnessIcon, + GarageIcon, + HairdryerIcon, + HandSoapIcon, + HeartIcon, + IronIcon, + KayakingIcon, + LaundryMachineIcon, + LocalBarIcon, + MirrorIcon, + NatureIcon, + NightlifeIcon, + NoSmokingIcon, + OutdoorFurnitureIcon, + ParkingIcon, + RestaurantIcon, + RoomServiceIcon, + SafetyBoxIcon, + SaunaIcon, + ShoppingIcon, + ShowerIcon, + SkateboardingIcon, + StarFilledIcon, + StoreIcon, + StreetIcon, + SwimIcon, + WifiIcon, + WindowCurtainsAltIcon, + WindowNotAvailableIcon, + WineBarIcon, + WoodFloorIcon, + YardIcon, +} from "@/components/Icons" + +import { IconProps } from "@/types/components/icon" + +export function getHotelFacilityIcon( + name: string | undefined +): FC | null { + if (!name) return StarFilledIcon + + const iconMappings = [ + { + icon: FitnessIcon, + name: ["Gym"], + }, + { + icon: SwimIcon, + name: ["Pool"], + }, + { + icon: WifiIcon, + name: ["FreeWiFi"], + }, + { + icon: LaundryMachineIcon, + name: ["LaundryService"], + }, + { + icon: LaundryMachineIcon, + name: ["ExpressLaundryService"], + }, + { + icon: ParkingIcon, + name: ["Parking"], + }, + { + icon: GarageIcon, + name: ["Garage"], + }, + { + icon: BikeIcon, + name: ["BikesForLoan"], + }, + { + icon: ElectricCarIcon, + name: ["ElectricChargingPoint"], + }, + { + icon: KayakingIcon, + name: ["KayaksForLoan"], + }, + { + icon: SkateboardingIcon, + name: ["SkateboardsForLoan"], + }, + { + icon: NightlifeIcon, + name: ["LiveMusicExhibitions"], + }, + { + icon: StoreIcon, + name: ["Shop"], + }, + { + icon: CoffeeIcon, + name: ["Cafe"], + }, + { + icon: BusinessIcon, + name: ["Meeting"], + }, + { + icon: LocalBarIcon, + name: ["Bar"], + }, + { + icon: RoomServiceIcon, + name: ["RoomService"], + }, + { + icon: OutdoorFurnitureIcon, + name: ["OutdoorTerrace"], + }, + { + icon: RestaurantIcon, + name: ["Restaurant"], + }, + { + icon: LocalBarIcon, + name: ["Skybar"], + }, + { + icon: BreakfastIcon, + name: ["Breakfast"], + }, + { + icon: SaunaIcon, + name: ["Sauna"], + }, + { + icon: ConciergeIcon, + name: ["LifestyleConcierge"], + }, + ] + + const icon = iconMappings.find((icon) => icon.name.includes(name)) + return icon ? icon.icon : StarFilledIcon +} diff --git a/components/SidePeeks/HotelSidePeek/index.tsx b/components/SidePeeks/HotelSidePeek/index.tsx index 259c8d16c..3a77ce8dc 100644 --- a/components/SidePeeks/HotelSidePeek/index.tsx +++ b/components/SidePeeks/HotelSidePeek/index.tsx @@ -1,6 +1,7 @@ import { useIntl } from "react-intl" 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" @@ -8,7 +9,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" -import { getFacilityIcon } from "../RoomSidePeek/facilityIcon" +import { getHotelFacilityIcon } from "./hotelFacilityIcon" import styles from "./hotelSidePeek.module.css" @@ -59,10 +60,15 @@ export default function HotelSidePeek({ ) : null}
+ {intl.formatMessage({ id: "Accessibility" })}
{amenitiesList.map((amenity) => { - const Icon = getFacilityIcon(amenity.icon) + const Icon = getHotelFacilityIcon(amenity.icon) return (
{Icon && ( diff --git a/components/SidePeeks/RoomSidePeek/facilityIcon.ts b/components/SidePeeks/RoomSidePeek/facilityIcon.ts index d45ce7b30..b131dbd27 100644 --- a/components/SidePeeks/RoomSidePeek/facilityIcon.ts +++ b/components/SidePeeks/RoomSidePeek/facilityIcon.ts @@ -9,13 +9,13 @@ import { DeskIcon, HairdryerIcon, HandSoapIcon, - HeartIcon, IronIcon, MirrorIcon, NatureIcon, NoSmokingIcon, SafetyBoxIcon, ShowerIcon, + StarFilledIcon, StreetIcon, WifiIcon, WindowCurtainsAltIcon, @@ -27,98 +27,101 @@ 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 StarFilledIcon const iconMappings = [ { icon: DeskIcon, - texts: ["Desk and chair"], + name: ["Desk and chair"], }, { icon: HairdryerIcon, - texts: ["Hairdryer"], + name: ["Hairdryer"], }, { icon: AcIcon, - texts: ["Air Condition"], + name: ["Air Condition"], }, { icon: ChairIcon, - texts: ["Armchair / armchairs"], + name: ["Armchair / armchairs"], }, { icon: BathtubIcon, - texts: ["Bathroom with shower or bathtub"], + name: ["Bathroom with shower or bathtub"], }, { icon: WindowCurtainsAltIcon, - texts: ["Blackout curtains"], + name: ["Blackout curtains"], }, { icon: MirrorIcon, - texts: ["Cosmetic mirror"], + name: ["Cosmetic mirror"], }, { icon: WifiIcon, - texts: ["Free WiFi"], + name: ["FreeWiFi"], }, { icon: ChairIcon, - texts: ["Connecting rooms"], + name: ["Connecting rooms"], }, { icon: YardIcon, - texts: ["View - atrium view"], + name: ["View - atrium view"], }, { icon: CityIcon, - texts: ["View - city view"], + name: ["View - city view"], }, { icon: NatureIcon, - texts: ["View - park view"], + name: ["View - park view"], }, { icon: StreetIcon, - texts: ["View - street view"], + name: ["View - street view"], }, { icon: WineBarIcon, - texts: ["Minibar"], + name: ["Minibar"], }, { icon: NoSmokingIcon, - texts: ["Non smoking"], + name: ["Non smoking"], }, { icon: ShowerIcon, - texts: ["Rain shower"], + name: ["Rain shower"], }, { icon: SafetyBoxIcon, - texts: ["Safety box"], + name: ["Safety box"], }, { icon: BedDoubleIcon, - texts: ["Set of two pillows"], + name: ["Set of two pillows"], }, { icon: IronIcon, - texts: ["Iron and ironing board"], + name: ["Iron and ironing board"], }, { icon: HandSoapIcon, - texts: ["Toiletries"], + name: ["Toiletries"], }, { icon: WoodFloorIcon, - texts: ["Wooden floor"], + name: ["Wooden floor"], }, { icon: WindowNotAvailableIcon, - texts: ["Not window"], + name: ["Not window"], }, ] - const icon = iconMappings.find((icon) => icon.texts.includes(name)) - return icon ? icon.icon : HeartIcon + const icon = iconMappings.find((icon) => icon.name.includes(name)) + return icon ? icon.icon : StarFilledIcon } diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts index 4614fd328..9d3c71194 100644 --- a/server/routers/hotels/output.ts +++ b/server/routers/hotels/output.ts @@ -125,7 +125,7 @@ const detailedFacilitySchema = z.object({ public: z.boolean(), sortOrder: z.number(), filter: z.string().optional(), - icon: z.string(), + icon: z.string().optional(), }) export const facilitySchema = z.object({ diff --git a/server/routers/hotels/schemas/room.ts b/server/routers/hotels/schemas/room.ts index 820242a1f..5141086ed 100644 --- a/server/routers/hotels/schemas/room.ts +++ b/server/routers/hotels/schemas/room.ts @@ -56,7 +56,7 @@ const roomFacilitiesSchema = z.object({ name: z.string(), isUniqueSellingPoint: z.boolean(), sortOrder: z.number(), - icon: z.string(), + icon: z.string().optional(), }) export const roomSchema = z