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/SelectRate/HotelInfoCard/HotelDescription/index.tsx

@@ -4,25 +4,32 @@ import { useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton"
-import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import Alert from "@/components/TempDesignSystem/Alert"
 
 import styles from "./hotelDescription.module.css"
 
-import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
 
 export default function HotelDescription({
   description,
   hotel,
   sortedFacilities,
+  restaurants,
+  additionalData,
 }: {
   description?: string
   hotel: Hotel
   sortedFacilities: Hotel["detailedFacilities"]
+  restaurants: Restaurant[]
+  additionalData: AdditionalData | undefined
 }) {
   const intl = useIntl()
 
@@ -69,13 +76,14 @@ export default function HotelDescription({
 
       {expanded && (
         <div className={styles.expandedContent}>
-          <OpenSidePeekButton
-            label={intl.formatMessage({
+          <HotelDetailsSidePeek
+            hotel={{ ...hotel, url: null }}
+            restaurants={restaurants}
+            additionalHotelData={additionalData}
+            triggerLabel={intl.formatMessage({
               defaultMessage: "See all amenities",
             })}
-            hotelId={hotel.operaId}
-            showCTA={false}
-            sidePeekKey={SidePeekEnum.hotelDetails}
+            buttonVariant="primary"
           />
           {hotel.specialAlerts.map((alert) => (
             <Alert

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

@@ -1,6 +1,4 @@
-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 { dt } from "@scandic-hotels/common/dt"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
@@ -9,6 +7,7 @@ import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -18,16 +17,27 @@ import HotelDescription from "./HotelDescription"
 
 import styles from "./hotelInfoCard.module.css"
 
-import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
 
 import type { SelectRateBooking } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export type HotelInfoCardProps = {
   booking: SelectRateBooking
   hotel: Hotel
+  restaurants: Restaurant[]
+  additionalData: AdditionalData | undefined
 }
 
-export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) {
+export async function HotelInfoCard({
+  booking,
+  hotel,
+  restaurants,
+  additionalData,
+}: HotelInfoCardProps) {
   const intl = await getIntl()
 
   const sortedFacilities = hotel.detailedFacilities
@@ -85,6 +95,8 @@ export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) {
                 key={hotel.operaId}
                 description={hotel.hotelContent.texts.descriptions?.medium}
                 hotel={hotel}
+                restaurants={restaurants}
+                additionalData={additionalData}
                 sortedFacilities={sortedFacilities}
               />
             </div>
@@ -101,13 +113,14 @@ export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) {
                 </div>
               ))}
             </div>
-            <OpenSidePeekButton
-              label={intl.formatMessage({
+            <HotelDetailsSidePeek
+              hotel={{ ...hotel, url: null }}
+              restaurants={restaurants}
+              additionalHotelData={additionalData}
+              triggerLabel={intl.formatMessage({
                 defaultMessage: "See all amenities",
               })}
-              hotelId={hotel.operaId}
-              showCTA={false}
-              sidePeekKey={SidePeekEnum.hotelDetails}
+              buttonVariant="primary"
             />
           </div>
         </div>