feat(SW-325): added additional poi groups

components/Maps/Markers/Poi/index.tsx

@@ -1,19 +1,20 @@
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
-import { getCategoryIconName } from "../utils"
+import { getIconByPoiGroupAndCategory } from "../utils"
 import { poiVariants } from "./variants"
 
 import type { PoiMarkerProps } from "@/types/components/maps/poiMarker"
 
 export default function PoiMarker({
-  category,
+  group,
+  categoryName,
   skipBackground,
   size = 16,
   className = "",
 }: PoiMarkerProps) {
-  const iconName = getCategoryIconName(category)
+  const iconName = getIconByPoiGroupAndCategory(group, categoryName)
   const Icon = iconName ? getIconByIconName(iconName) : null
-  const classNames = poiVariants({ category, skipBackground, className })
+  const classNames = poiVariants({ group, skipBackground, className })
 
   return Icon ? (
     <span className={classNames}>

components/Maps/Markers/Poi/poi.module.css

@@ -7,46 +7,29 @@ This will be handled later. */
   align-items: center;
   padding: var(--Spacing-x-half);
   border-radius: var(--Corner-radius-Rounded);
-  background-color: var(--Scandic-Beige-90);
-}
-.airport,
-.amusementPark,
-.busTerminal,
-.fair,
-.hospital,
-.hotel,
-.marketingCity {
+  background-color: var(--UI-Text-Placeholder);
 }
 
-.museum {
-  background: var(--Base-Interactive-Surface-Secondary-normal);
+.attractions {
+  background-color: var(--Base-Interactive-Surface-Secondary-normal);
 }
-.nearbyCompanies,
-.parkingGarage {
+.business {
+  background-color: var(--Scandic-Yellow-50);
 }
-
-.restaurant {
-  background: var(--Scandic-Peach-50);
+.location {
+  background-color: var(--UI-Text-Placeholder);
 }
-
-.shopping {
-  background: var(--Base-Interactive-Surface-Primary-normal);
+.parking {
+  background-color: var(--UI-Text-Active);
 }
-.sports,
-.theatre {
+.publicTransport {
+  background-color: var(--Base-Interactive-Surface-Tertiary-normal);
 }
-
-.tourist {
-  background: var(--Scandic-Yellow-60);
-}
-
-.transportations {
-  background: var(--Base-Interactive-Surface-Tertiary-normal);
-}
-.zoo {
+.shoppingDining {
+  background-color: var(--Base-Interactive-Surface-Primary-normal);
 }
 
 .icon.transparent {
-  background: transparent;
+  background-color: transparent;
   padding: 0;
 }

components/Maps/Markers/Poi/variants.ts

@@ -2,26 +2,17 @@ import { cva } from "class-variance-authority"
 
 import styles from "./poi.module.css"
 
+import { PointOfInterestGroupEnum } from "@/types/hotel"
+
 export const poiVariants = cva(styles.icon, {
   variants: {
-    category: {
-      Airport: styles.airport,
-      "Amusement park": styles.amusementPark,
-      "Bus terminal": styles.busTerminal,
-      Fair: styles.fair,
-      Hospital: styles.hospital,
-      Hotel: styles.hotel,
-      "Marketing city": styles.marketingCity,
-      Museum: styles.museum,
-      "Nearby companies": styles.nearbyCompanies,
-      "Parking / Garage": styles.parkingGarage,
-      Restaurant: styles.restaurant,
-      Shopping: styles.shopping,
-      Sports: styles.sports,
-      Theatre: styles.theatre,
-      Tourist: styles.tourist,
-      Transportations: styles.transportations,
-      Zoo: styles.zoo,
+    group: {
+      [PointOfInterestGroupEnum.ATTRACTIONS]: styles.attractions,
+      [PointOfInterestGroupEnum.BUSINESS]: styles.business,
+      [PointOfInterestGroupEnum.LOCATION]: styles.location,
+      [PointOfInterestGroupEnum.PARKING]: styles.parking,
+      [PointOfInterestGroupEnum.PUBLIC_TRANSPORT]: styles.publicTransport,
+      [PointOfInterestGroupEnum.SHOPPING_DINING]: styles.shoppingDining,
     },
     skipBackground: {
       true: styles.transparent,