fix: align price formatting

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -3,11 +3,13 @@ import {
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
 import { useCallback, useState } from "react"
+import { useIntl } from "react-intl"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import { formatPrice } from "@/utils/numberFormatting"
 
 import HotelMarker from "../../Markers/HotelMarker"
 
@@ -16,6 +18,7 @@ import styles from "./hotelListingMapContent.module.css"
 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
+  const intl = useIntl()
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
   const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } =
     useHotelsMapStore()
@@ -55,6 +58,7 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
       {hotelPins.map((pin) => {
         const isActiveOrHovered =
           activeHotelPin === pin.name || hoveredHotelPin === pin.name
+        const hotelPrice = pin.memberPrice ?? pin.publicPrice
         return (
           <AdvancedMarker
             key={pin.name}
@@ -93,7 +97,10 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
                 color={isActiveOrHovered ? "white" : "baseTextHighContrast"}
               >
                 <span>
-                  {pin.memberPrice} {pin.currency}
+                  {/* TODO: Handle when no price is available */}
+                  {hotelPrice
+                    ? formatPrice(intl, hotelPrice, pin.currency)
+                    : "N/A"}
                 </span>
               </Body>
             </span>