fix: clean up dictionaries

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -27,18 +27,33 @@ export default function MultiRoomWrapper({
     selectedRate,
   } = useRoomContext()
 
-  const onlyAdultsMsg = intl.formatMessage(
-    { id: "{adults} adults" },
+  const roomMsg = intl.formatMessage(
+    { id: "Room {roomIndex}" },
+    { roomIndex: roomNr }
+  )
+
+  const adultsMsg = intl.formatMessage(
+    { id: "{adults, plural, one {# adult} other {# adults}}" },
     { adults: bookingRoom.adults }
   )
-  const adultsAndChildrenMsg = intl.formatMessage(
-    { id: "{adults} adults, {children} children" },
+
+  const childrenMsg = intl.formatMessage(
+    {
+      id: "{children, plural, one {# child} other {# children}}",
+    },
     {
-      adults: bookingRoom.adults,
       children: bookingRoom.childrenInRoom?.length,
     }
   )
 
+  const onlyAdultsMsg = adultsMsg
+  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
+  const guestsMsg = bookingRoom.childrenInRoom?.length
+    ? adultsAndChildrenMsg
+    : onlyAdultsMsg
+
+  const title = [roomMsg, guestsMsg].join(", ")
+
   useEffect(() => {
     requestAnimationFrame(() => {
       const SCROLL_OFFSET = 100
@@ -67,16 +82,7 @@ export default function MultiRoomWrapper({
       <div className={styles.roomContainer} data-multiroom="true">
         <div className={styles.header}>
           {selectedRate && !isActiveRoom ? null : (
-            <Subtitle className={styles.subtitle} color="uiTextHighContrast">
-              {intl.formatMessage(
-                { id: "Room {roomIndex}" },
-                { roomIndex: roomNr }
-              )}
-              ,{" "}
-              {bookingRoom.childrenInRoom?.length
-                ? adultsAndChildrenMsg
-                : onlyAdultsMsg}
-            </Subtitle>
+            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
           )}
           {selectedRate && isActiveRoom ? (
             <Button