fix: SW-981 Rounded to single decimal as current web

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.tsx

@@ -7,6 +7,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import styles from "./page.module.css"
 
@@ -47,7 +48,11 @@ export default async function HotelHeader({
             <Caption color="textMediumContrast">
               {intl.formatMessage(
                 { id: "Distance in km to city centre" },
-                { number: hotel.location.distanceToCentre / 1000 }
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
               )}
             </Caption>
           </address>

components/ContentType/ContentPage/HotelListingItem/index.tsx

@@ -8,6 +8,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 
@@ -47,7 +48,7 @@ export default async function HotelListingItem({
             <Caption color="uiTextPlaceholder">
               {intl.formatMessage(
                 { id: "Distance in km to city centre" },
-                { number: distanceToCentre / 1000 }
+                { number: getSingleDecimal(distanceToCentre / 1000) }
               )}
             </Caption>
           </div>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -8,6 +8,7 @@ import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import styles from "./introSection.module.css"
 
@@ -25,7 +26,7 @@ export default async function IntroSection({
   const { distanceToCentre } = location
   const formattedDistanceText = intl.formatMessage(
     { id: "Distance in km to city centre" },
-    { number: distanceToCentre / 1000 }
+    { number: getSingleDecimal(distanceToCentre / 1000) }
   )
   const lang = getLang()
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`

components/HotelReservation/HotelCard/index.tsx

@@ -12,6 +12,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import ReadMore from "../ReadMore"
 import TripAdvisorChip from "../TripAdvisorChip"
@@ -104,7 +105,11 @@ export default function HotelCard({
               <Caption color="uiTextPlaceholder">
                 {intl.formatMessage(
                   { id: "Distance in km to city centre" },
-                  { number: hotelData.location.distanceToCentre / 1000 }
+                  {
+                    number: getSingleDecimal(
+                      hotelData.location.distanceToCentre / 1000
+                    ),
+                  }
                 )}
               </Caption>
             </div>

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -11,6 +11,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import ReadMore from "../../ReadMore"
 import TripAdvisorChip from "../../TripAdvisorChip"
@@ -69,7 +70,7 @@ export default async function HotelInfoCard({
               </Title>
               <div className={styles.hotelAddressDescription}>
                 <Caption color="uiTextMediumContrast">
-                  {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre / 1000} ${intl.formatMessage({ id: "km to city center" })}`}
+                  {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${getSingleDecimal(hotelAttributes.location.distanceToCentre / 1000)} ${intl.formatMessage({ id: "km to city center" })}`}
                 </Caption>
                 <Body color="uiTextHighContrast">
                   {hotelAttributes.hotelContent.texts.descriptions.medium}

utils/numberFormatting.ts

@@ -0,0 +1,8 @@
+/**
+ * Function to parse number with single decimal if any
+ * @param n
+ * @returns number in float type with single digit decimal if any
+ */
+export default function getSingleDecimal(n: Number | string) {
+  return parseFloat(Number(n).toFixed(1))
+}