Merged in feature/SW-3327-move-hotel-info-card-to-design-system (pull request #2730)

Feature/SW-3327 move hotel info card to design system

* wip

* wip

* wip

* wip moving hotelinfocard

* add controls for HotelInfoCard in storybook

* merge


Approved-by: Anton Gunnarsson

apps/scandic-web/components/HotelReservation/SelectRate/index.tsx

@@ -1,11 +1,17 @@
 import { cookies } from "next/headers"
 
+import { dt } from "@scandic-hotels/common/dt"
+import { HotelInfoCard } from "@scandic-hotels/design-system/HotelInfoCard"
+
 import { FamilyAndFriendsCodes } from "@/constants/booking"
 
-import { HotelInfoCard } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
+import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
+import { getIntl } from "@/i18n"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
+import { hasOverlappingDates } from "../utils"
 import AvailabilityError from "./AvailabilityError"
 import Tracking from "./Tracking"
 
@@ -20,6 +26,7 @@ export default async function SelectRatePage({
   hotelData: NonNullable<RouterOutput["hotel"]["get"]>
   booking: SelectRateBooking
 }) {
+  const intl = await getIntl()
   const bookingCode = booking.bookingCode
 
   let isInValidFNF = false
@@ -27,13 +34,51 @@ export default async function SelectRatePage({
     const cookieStore = await cookies()
     isInValidFNF = cookieStore.get("sc")?.value !== "1"
   }
+
+  const validAlerts = hotelData.hotel.specialAlerts.filter((alert) =>
+    hasOverlappingDates(alert, dt(booking.fromDate), dt(booking.toDate))
+  )
+
   return (
     <>
       <HotelInfoCard
-        hotel={{ ...hotelData.hotel, url: hotelData.url }}
-        restaurants={hotelData.restaurants}
-        additionalData={hotelData.additionalData}
-        booking={booking}
+        hotel={{
+          id: hotelData.hotel.id,
+          name: hotelData.hotel.name,
+          url: hotelData.url,
+          ratings: hotelData.hotel.ratings,
+        }}
+        address={{
+          streetAddress: hotelData.hotel.address.streetAddress,
+          city: hotelData.hotel.address.city,
+          kilometersToCentre: hotelData.hotel.location.distanceToCentre / 1000,
+        }}
+        galleryImages={mapApiImagesToGalleryImages(
+          hotelData.hotel.galleryImages
+        )}
+        description={
+          hotelData.hotel.hotelContent.texts.descriptions?.medium ?? ""
+        }
+        alerts={validAlerts.map((alert) => ({
+          ...alert,
+          heading: alert.heading ?? "",
+          text: alert.text ?? "",
+        }))}
+        facilities={hotelData.hotel.detailedFacilities}
+        slot={
+          <HotelDetailsSidePeek
+            hotel={{
+              ...hotelData.hotel,
+              url: hotelData.url,
+            }}
+            restaurants={hotelData.restaurants}
+            additionalHotelData={hotelData.additionalData}
+            triggerLabel={intl.formatMessage({
+              defaultMessage: "See all amenities",
+            })}
+            buttonVariant="primary"
+          />
+        }
       />
 
       {isInValidFNF ? (