Merged in feat/SW-3289-replace-sidepeek-hotel-reservation (pull request #2686)

feat(SW-3289): replace sidepeek

* fix(SW-3289): replace sidepeek

* fix(SW-3289): add wrapping prop and change prop name to buttonVariant

* fix(SW-3289): replace body with typography

* fix(SW-3289): fix intl message


Approved-by: Joakim Jäderberg

apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx

@@ -2,17 +2,18 @@ import Image from "@scandic-hotels/design-system/Image"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ToggleSidePeek from "./ToggleSidePeek"
+import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
+import { getIntl } from "@/i18n"
 
 import styles from "./header.module.css"
 
 import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
 
 export default async function HotelHeader({
-  hotelData: { hotel },
+  hotelData: { hotel, url, restaurants, additionalData },
 }: HotelHeaderProps) {
   const image = hotel.hotelContent?.images
-
+  const intl = await getIntl()
   const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
 
   return (
@@ -49,7 +50,16 @@ export default async function HotelHeader({
               <div className={styles.address}>{addressStr}</div>
             </Typography>
           </div>
-          <ToggleSidePeek hotelId={hotel.operaId} />
+
+          <HotelDetailsSidePeek
+            hotel={{ ...hotel, url: url }}
+            restaurants={restaurants}
+            additionalHotelData={additionalData}
+            triggerLabel={intl.formatMessage({
+              defaultMessage: "See hotel details",
+            })}
+            buttonVariant={"secondary"}
+          />
         </div>
       </div>
     </header>