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/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import useSidePeekStore, {
-  SidePeekEnum,
-} from "@scandic-hotels/booking-flow/stores/sidepeek"
-import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import { trackOpenSidePeekEvent } from "@/utils/tracking"
-
-import styles from "./details.module.css"
-
-import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function ToggleSidePeek({
-  hotelId,
-  roomTypeCode,
-}: ToggleSidePeekProps) {
-  const intl = useIntl()
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      onClick={() => {
-        openSidePeek({
-          key: SidePeekEnum.roomDetails,
-          hotelId,
-          roomTypeCode,
-        })
-        trackOpenSidePeekEvent({
-          name: SidePeekEnum.roomDetails,
-          hotelId,
-          roomTypeCode,
-          includePathname: true,
-        })
-      }}
-      size="Small"
-      variant="Text"
-      wrapping
-      typography="Body/Supporting text (caption)/smBold"
-      color="Inverted"
-      className={styles.sidePeekButton}
-    >
-      {intl.formatMessage({ defaultMessage: "View room details" })}
-      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-    </Button>
-  )
-}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx

@@ -4,12 +4,13 @@ import { useIntl } from "react-intl"
 
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
+import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
+import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
-import ToggleSidePeek from "../Details/ToggleSidePeek"
-
 import styles from "./image.module.css"
 
 import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
@@ -34,7 +35,9 @@ const RoomImage = memo(function RoomImage({
   hotelId,
 }: RoomListItemImageProps) {
   const galleryImages = mapApiImagesToGalleryImages(images || [])
-
+  const { hotel } = useSelectRateContext()
+  const room = getHotelRoom(hotel?.data?.roomCategories ?? [], roomTypeCode)
+  const intl = useIntl()
   return (
     <div className={styles.imageContainer}>
       <div className={styles.chipContainer}>
@@ -53,8 +56,16 @@ const RoomImage = memo(function RoomImage({
         imageCountPosition="top"
       />
       <div className={styles.toggleSidePeek}>
-        {roomTypeCode && (
-          <ToggleSidePeek hotelId={hotelId} roomTypeCode={roomTypeCode} />
+        {roomTypeCode && room && (
+          <RoomDetailsSidePeek
+            hotelId={hotelId}
+            room={room}
+            roomTypeCode={roomTypeCode}
+            triggerLabel={intl.formatMessage({
+              defaultMessage: "View room details",
+            })}
+            buttonVariant="secondary"
+          />
         )}
       </div>
     </div>