fix(i18n): prepare for Lokalise

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -100,7 +100,7 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
                   {/* TODO: Handle when no price is available */}
                   {hotelPrice
                     ? formatPrice(intl, hotelPrice, pin.currency)
-                    : "N/A"}
+                    : intl.formatMessage({ id: "N/A" })}
                 </span>
               </Body>
             </span>

components/Maps/InteractiveMap/HotelMapContent/index.tsx

@@ -2,6 +2,7 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
+import { useIntl } from "react-intl"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -19,6 +20,8 @@ export default function HotelMapContent({
   onActivePoiChange,
   activePoi,
 }: HotelMapContentProps) {
+  const intl = useIntl()
+
   function toggleActivePoi(poiName: string) {
     onActivePoiChange?.(activePoi === poiName ? null : poiName)
   }
@@ -51,7 +54,14 @@ export default function HotelMapContent({
               <span>
                 {poi.name}
                 <Caption asChild>
-                  <span>{poi.distance} km</span>
+                  <span>
+                    {intl.formatMessage(
+                      { id: "{distanceInKm} km" },
+                      {
+                        distanceInKm: poi.distance,
+                      }
+                    )}
+                  </span>
                 </Caption>
               </span>
             </Body>