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/HotelCard/index.tsx

@@ -10,9 +10,7 @@ import {
 import { memo } from "react"
 import { useIntl } from "react-intl"
 
-import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton"
 import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip"
-import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import {
   alternativeHotelsMap,
   selectHotelMap,
@@ -30,6 +28,7 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import HotelChequeCard from "./HotelChequeCard"
@@ -47,7 +46,7 @@ import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/se
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
 function HotelCard({
-  hotelData: { availability, hotel },
+  hotelData: { availability, hotel, additionalData, restaurants, url },
   isUserLoggedIn,
   state = "default",
   type = HotelCardListingTypeEnum.PageListing,
@@ -184,13 +183,14 @@ function HotelCard({
               </div>
             ))}
           </div>
-          <OpenSidePeekButton
-            label={intl.formatMessage({
+          <HotelDetailsSidePeek
+            hotel={{ ...hotel, url: url }}
+            restaurants={restaurants}
+            additionalHotelData={additionalData}
+            triggerLabel={intl.formatMessage({
               defaultMessage: "See hotel details",
             })}
-            hotelId={hotel.operaId}
-            showCTA={true}
-            sidePeekKey={SidePeekEnum.hotelDetails}
+            buttonVariant="primary"
           />
         </div>
         <PricesWrapper