feat(SW-938) Updated icons

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<IconProps> | 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
+}

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({
             </AccordionItem>
           ) : null}
           <div className={styles.amenity}>
+            <AccessibilityIcon
+              width={24}
+              height={24}
+              color="uiTextMediumContrast"
+            />
             {intl.formatMessage({ id: "Accessibility" })}
           </div>
           {amenitiesList.map((amenity) => {
-            const Icon = getFacilityIcon(amenity.icon)
+            const Icon = getHotelFacilityIcon(amenity.icon)
             return (
               <div key={amenity.id} className={styles.amenity}>
                 {Icon && (

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<IconProps> | null {
+export function getFacilityIcon(
+  name: string | undefined
+): FC<IconProps> | 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
 }