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 && (