Merged in feat/SW-2511-hotel-page-map (pull request #2582)

feat(SW-2511): hotel page map and marker improvements * feat(SW-2511): update hotel page map * fix(SW-2511): fix issue with identical id's for POIs Approved-by: Anton Gunnarsson
2025-07-31 09:06:48 +00:00
parent ace44d00dc
commit e323ca9914
20 changed files with 139 additions and 101 deletions
--- a/apps/partner-sas/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
+++ b/apps/partner-sas/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
--- a/apps/partner-sas/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
+++ b/apps/partner-sas/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
--- a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
@@ -6,12 +6,12 @@ import { useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"

-import { logger } from "@scandic-hotels/common/logger"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest"

 import PoiMarker from "@/components/Maps/Markers/Poi"

+import { translatePOIGroup } from "./util"
+
 import styles from "./sidebar.module.css"

 import type { SidebarProps } from "@/types/components/hotelPage/map/sidebar"
@@ -93,42 +93,6 @@ export default function Sidebar({
    defaultMessage: "View as list",
  })

-  function translatePOIGroup(group: PointOfInterestGroupEnum) {
-    switch (group) {
-      case PointOfInterestGroupEnum.PUBLIC_TRANSPORT:
-        return intl.formatMessage({
-          defaultMessage: "Public transport",
-        })
-      case PointOfInterestGroupEnum.ATTRACTIONS:
-        return intl.formatMessage({
-          defaultMessage: "Attractions",
-        })
-      case PointOfInterestGroupEnum.BUSINESS:
-        return intl.formatMessage({
-          defaultMessage: "Business",
-        })
-      case PointOfInterestGroupEnum.LOCATION:
-        return intl.formatMessage({
-          defaultMessage: "Location",
-        })
-      case PointOfInterestGroupEnum.PARKING:
-        return intl.formatMessage({
-          defaultMessage: "Parking",
-        })
-      case PointOfInterestGroupEnum.SHOPPING_DINING:
-        return intl.formatMessage({
-          defaultMessage: "Shopping & Dining",
-        })
-      default:
-        const option: never = group
-        logger.warn(`Unsupported group given: ${option}`)
-
-        return intl.formatMessage({
-          defaultMessage: "N/A",
-        })
-    }
-  }
-
  return (
    <>
      <aside
@@ -162,13 +126,15 @@ export default function Sidebar({
                <Typography variant="Body/Paragraph/mdBold">
                  <h3 className={styles.poiHeading}>
                    <PoiMarker group={group} />
-                    {translatePOIGroup(group)}
+                    {translatePOIGroup(group, intl)}
                  </h3>
                </Typography>
                <ul className={styles.poiList}>
                  {pois.map((poi) => (
-                    <li key={poi.name} className={styles.poiItem}>
-                      <Typography variant="Body/Paragraph/mdRegular">
+                    <li
+                      key={poi.name + poi.categoryName}
+                      className={styles.poiItem}
+                    >
                      <ButtonRAC
                        className={cx(styles.poiButton, {
                          [styles.active]: activePoi === poi.name,
@@ -178,7 +144,13 @@ export default function Sidebar({
                          handlePoiClick(poi.name, poi.coordinates)
                        }
                      >
+                        <Typography variant="Body/Paragraph/mdRegular">
                          <span>{poi.name}</span>
+                        </Typography>
+                        <Typography
+                          variant="Body/Supporting text (caption)/smRegular"
+                          className={styles.distance}
+                        >
                          <span>
                            {intl.formatMessage(
                              {
@@ -189,8 +161,8 @@ export default function Sidebar({
                              }
                            )}
                          </span>
-                        </ButtonRAC>
                        </Typography>
+                      </ButtonRAC>
                    </li>
                  ))}
                </ul>
--- a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css
+++ b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css
@@ -47,13 +47,17 @@
  transition: background-color 0.3s;
 }
 .poiButton.active {
-  background-color: var(--Base-Surface-Primary-light-Hover);
+  background-color: var(--Surface-Primary-Hover-Light);
 }

 .title {
  color: var(--Text-Heading);
 }

+.distance {
+  color: var(--Text-Secondary);
+}
+
@media screen and (max-width: 767px) {
  .sidebar {
    --sidebar-mobile-toggle-height: 88px;
--- a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/util.ts
+++ b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/util.ts
@@ -0,0 +1,43 @@
+import { logger } from "@scandic-hotels/common/logger"
+import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest"
+
+import type { IntlShape } from "react-intl"
+
+export function translatePOIGroup(
+  group: PointOfInterestGroupEnum,
+  intl: IntlShape
+) {
+  switch (group) {
+    case PointOfInterestGroupEnum.PUBLIC_TRANSPORT:
+      return intl.formatMessage({
+        defaultMessage: "Public transport",
+      })
+    case PointOfInterestGroupEnum.ATTRACTIONS:
+      return intl.formatMessage({
+        defaultMessage: "Attractions",
+      })
+    case PointOfInterestGroupEnum.BUSINESS:
+      return intl.formatMessage({
+        defaultMessage: "Business",
+      })
+    case PointOfInterestGroupEnum.LOCATION:
+      return intl.formatMessage({
+        defaultMessage: "Location",
+      })
+    case PointOfInterestGroupEnum.PARKING:
+      return intl.formatMessage({
+        defaultMessage: "Parking",
+      })
+    case PointOfInterestGroupEnum.SHOPPING_DINING:
+      return intl.formatMessage({
+        defaultMessage: "Shopping & Dining",
+      })
+    default:
+      const option: never = group
+      logger.warn(`Unsupported group given: ${option}`)
+
+      return intl.formatMessage({
+        defaultMessage: "N/A",
+      })
+  }
+}
--- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
@@ -41,12 +41,12 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
      </span>
      <ul className={styles.poiList}>
        {pois.map((poi) => (
-          <li key={poi.name} className={styles.poiItem}>
+          <li key={poi.name + poi.categoryName} className={styles.poiItem}>
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
              skipBackground
-              size={20}
+              size="medium"
            />
            <Typography>
              <span>{poi.name} </span>
--- a/apps/scandic-web/components/Icons/IconByIconName.tsx
+++ b/apps/scandic-web/components/Icons/IconByIconName.tsx
@@ -137,7 +137,7 @@ export function IconByIconName({
    case IconName.Calendar:
      return <MaterialIcon icon="calendar_today" {...props} />
    case IconName.Camera:
-      return <MaterialIcon icon="camera" {...props} />
+      return <MaterialIcon icon="photo_camera" {...props} />
    case IconName.Cellphone:
    case IconName.Phone:
      return <MaterialIcon icon="phone" {...props} />
--- a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
+++ b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
@@ -4,8 +4,7 @@ import {
 } from "@vis.gl/react-google-maps"
 import { useIntl } from "react-intl"

-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import HotelMarkerByType from "../../Markers"
 import PoiMarker from "../../Markers/Poi"
@@ -46,7 +45,7 @@ export default function PoiMapMarkers({

      {pointsOfInterest.map((poi) => (
        <AdvancedMarker
-          key={poi.name}
+          key={poi.name + poi.categoryName}
          className={styles.advancedMarker}
          position={poi.coordinates}
          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
@@ -61,12 +60,16 @@ export default function PoiMapMarkers({
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
-              size={activePoi === poi.name ? 20 : 16}
+              size={activePoi === poi.name ? "large" : "small"}
            />
-            <Body className={styles.poiLabel} asChild>
-              <span>
-                {poi.name}
-                <Caption asChild>
+            <span className={styles.poiLabel}>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span>{poi.name}</span>
+              </Typography>
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.distance}
+              >
                <span>
                  {intl.formatMessage(
                    {
@@ -77,9 +80,8 @@ export default function PoiMapMarkers({
                    }
                  )}
                </span>
-                </Caption>
+              </Typography>
            </span>
-            </Body>
          </span>
        </AdvancedMarker>
      ))}
--- a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
+++ b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
@@ -1,14 +1,14 @@
 .advancedMarker {
-  height: var(--Spacing-x4);
+  height: var(--Space-x4);
  width: var(
-    --Spacing-x4
+    --Space-x4
  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }

 .advancedMarker.active {
-  height: var(--Spacing-x5);
+  height: var(--Space-x5);
  width: var(
-    --Spacing-x5
+    --Space-x5
  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }

@@ -19,15 +19,15 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  padding: var(--Spacing-x-half);
+  padding: var(--Space-x05);
  border-radius: var(--Corner-radius-rounded);
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-UI-Fill-Default);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }

 .poi.active {
-  padding-right: var(--Spacing-x-one-and-half);
+  padding-right: var(--Space-x15);
 }

 .poiLabel {
@@ -37,6 +37,10 @@
 .poi.active .poiLabel {
  display: flex;
  align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
  text-wrap: nowrap;
 }
+
+.distance {
+  color: var(--Text-Secondary);
+}
--- a/apps/scandic-web/components/Maps/Markers/Poi/index.tsx
+++ b/apps/scandic-web/components/Maps/Markers/Poi/index.tsx
@@ -9,18 +9,18 @@ export default function PoiMarker({
  group,
  categoryName,
  skipBackground,
-  size = 16,
+  size = "small",
  className = "",
 }: PoiMarkerProps) {
  const iconName = getIconByPoiGroupAndCategory(group, categoryName)
-  const classNames = poiVariants({ group, skipBackground, className })
+  const classNames = poiVariants({ group, skipBackground, size, className })

  return iconName ? (
    <span className={classNames}>
      <IconByIconName
        iconName={iconName}
        color={skipBackground ? "Icon/Feedback/Neutral" : "Icon/Inverted"}
-        size={size}
+        size={size === "small" ? 16 : size === "large" ? 24 : 20}
      />
    </span>
  ) : null
--- a/apps/scandic-web/components/Maps/Markers/Poi/poi.module.css
+++ b/apps/scandic-web/components/Maps/Markers/Poi/poi.module.css
@@ -1,30 +1,37 @@
 .icon {
-  width: 24px;
-  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--Corner-radius-rounded);
-  background-color: var(--UI-Text-Placeholder);
+  background-color: var(--Surface-UI-Fill-Default);
+}
+
+.small {
+  width: var(--Space-x3);
+  height: var(--Space-x3);
+}
+.large {
+  width: var(--Space-x4);
+  height: var(--Space-x4);
 }

 .attractions {
-  background-color: var(--Base-Interactive-Surface-Secondary-normal);
+  background-color: var(--Surface-Accent-3);
 }
 .business {
-  background-color: var(--Scandic-Yellow-50);
+  background-color: var(--Surface-Accent-4);
 }
 .location {
-  background-color: var(--UI-Text-Placeholder);
+  background-color: var(--Surface-Feedback-Neutral-Accent);
 }
 .parking {
-  background-color: var(--UI-Text-Active);
+  background-color: var(--Surface-Accent-5);
 }
 .publicTransport {
-  background-color: var(--Base-Interactive-Surface-Tertiary-normal);
+  background-color: var(--Surface-Accent-2);
 }
 .shoppingDining {
-  background-color: var(--Base-Interactive-Surface-Primary-normal);
+  background-color: var(--Surface-Accent-1);
 }

 .icon.transparent {
--- a/apps/scandic-web/components/Maps/Markers/Poi/variants.ts
+++ b/apps/scandic-web/components/Maps/Markers/Poi/variants.ts
@@ -18,8 +18,14 @@ export const poiVariants = cva(styles.icon, {
      true: styles.transparent,
      false: "",
    },
+    size: {
+      small: styles.small,
+      medium: styles.small,
+      large: styles.large,
+    },
  },
  defaultVariants: {
    skipBackground: false,
+    size: "small",
  },
 })
--- a/apps/scandic-web/components/Maps/Markers/utils.ts
+++ b/apps/scandic-web/components/Maps/Markers/utils.ts
@@ -16,7 +16,7 @@ export function getIconByPoiGroupAndCategory(
    case PointOfInterestGroupEnum.PARKING:
      return IconName.Parking
    case PointOfInterestGroupEnum.SHOPPING_DINING:
-      return IconName.Shopping
+      return category === "Restaurant" ? IconName.Restaurant : IconName.Shopping
    case PointOfInterestGroupEnum.LOCATION:
    default:
      return IconName.Location
--- a/apps/scandic-web/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
+++ b/apps/scandic-web/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
--- a/apps/scandic-web/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
+++ b/apps/scandic-web/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
--- a/apps/scandic-web/types/components/maps/poiMarker.ts
+++ b/apps/scandic-web/types/components/maps/poiMarker.ts
@@ -6,6 +6,5 @@ import type { poiVariants } from "@/components/Maps/Markers/Poi/variants"
 export interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
  group: PointOfInterestGroupEnum
  categoryName?: string
-  size?: number
  className?: string
 }
--- a/packages/design-system/lib/fonts.css
+++ b/packages/design-system/lib/fonts.css
@@ -269,7 +269,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-e6bd32d5.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-9290efcd.woff2)
    format('woff2');
 }

--- a/packages/design-system/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
+++ b/packages/design-system/public/_static/fonts/material-symbols/rounded-9290efcd.woff2
--- a/packages/design-system/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
+++ b/packages/design-system/public/_static/fonts/material-symbols/rounded-e6bd32d5.woff2
--- a/scripts/material-symbols-update.mjs
+++ b/scripts/material-symbols-update.mjs
@@ -54,6 +54,7 @@ const icons = [
  'call',
  'call_quality',
  'camera',
+  'photo_camera',
  'cancel',
  'chair',
  'charging_station',