fix(BOOK-559): Using same ContactInformation component on hotel pages and booking flow inside the hotel details sidepeek

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css

@@ -1,5 +1,5 @@
 .content {
   display: grid;
-  gap: var(--Space-x2);
+  gap: var(--Space-x4);
   color: var(--Text-Default);
 }

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx

@@ -10,10 +10,10 @@ import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents"
 import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
 import { routeToScandicWebUrl } from "../../../utils/routeToScandicWebUrl"
 import AdditionalAmenities from "../../AdditionalAmenities"
-import Contact from "../../Contact"
 import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem"
 import CheckInCheckOutAccordionItem from "../../SidePeekAccordions/CheckInCheckOutAccordionItem"
 import ParkingAccordionItem from "../../SidePeekAccordions/ParkingAccordionItem"
+import { ContactInformation } from "../ContactInformation"
 
 import styles from "./hotelSidePeek.module.css"
 
@@ -41,15 +41,13 @@ export function HotelSidePeekContent({
 
   return (
     <div className={styles.content}>
-      <Typography variant="Title/Subtitle/lg">
-        <h3>
-          {intl.formatMessage({
-            id: "common.practicalInformation",
-            defaultMessage: "Practical information",
-          })}
-        </h3>
-      </Typography>
-      <Contact hotel={hotel} />
+      <ContactInformation
+        hotelAddress={hotel.address}
+        contact={hotel.contactInformation}
+        socials={hotel.socialMedia}
+        ecoLabels={hotel.hotelFacts.ecoLabels}
+        hotelName={hotel.name}
+      />
 
       <Accordion type="sidepeek">
         <ParkingAccordionItem