fix(i18n): prepare for Lokalise

components/HotelReservation/EnterDetails/Header/index.tsx

@@ -15,6 +15,9 @@ export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
   const hotel = hotelData.data.attributes
 
   const image = hotel.hotelContent?.images
+
+  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
+
   return (
     <header className={styles.header}>
       <Image
@@ -30,14 +33,12 @@ export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
             <Title as="h1" level="h1" color="white" className={styles.title}>
               {hotel.name}
             </Title>
-            <address className={styles.address}>
-              <Caption color="white">
-                {hotel.address.streetAddress}, {hotel.address.city}
-              </Caption>
+            <div className={styles.address}>
+              <Caption color="white">{addressStr}</Caption>
               <Caption color="white">∙</Caption>
               <Caption color="white">
                 {intl.formatMessage(
-                  { id: "Distance in km to city centre" },
+                  { id: "{number} km to city centre" },
                   {
                     number: getSingleDecimal(
                       hotel.location.distanceToCentre / 1000
@@ -45,7 +46,7 @@ export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
                   }
                 )}
               </Caption>
-            </address>
+            </div>
           </div>
           <ToggleSidePeek hotelId={hotel.operaId} />
         </div>