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/ToggleSidePeek.tsx

@@ -1,41 +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 type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
-  const intl = useIntl()
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      onPress={() => {
-        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })
-        trackOpenSidePeekEvent({
-          name: SidePeekEnum.hotelDetails,
-          hotelId,
-          includePathname: true,
-        })
-      }}
-      size="Small"
-      variant="Secondary"
-      color="Inverted"
-      wrapping
-      typography="Body/Paragraph/mdBold"
-    >
-      {intl.formatMessage({
-        defaultMessage: "See hotel details",
-      })}
-      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-    </Button>
-  )
-}

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>

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -1,46 +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 type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function ToggleSidePeek({
-  hotelId,
-  roomTypeCode,
-  title,
-}: ToggleSidePeekProps) {
-  const intl = useIntl()
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      onPress={() => {
-        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
-        trackOpenSidePeekEvent({
-          name: SidePeekEnum.roomDetails,
-          hotelId,
-          roomTypeCode,
-          includePathname: true,
-        })
-      }}
-      size="Small"
-      variant="Text"
-      wrapping
-      typography="Body/Paragraph/mdBold"
-    >
-      {title ||
-        intl.formatMessage({
-          defaultMessage: "See room details",
-        })}
-      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-    </Button>
-  )
-}

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

@@ -9,14 +9,14 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
+import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 
-import ToggleSidePeek from "./ToggleSidePeek"
-
 import styles from "./selectedRoom.module.css"
 
 export default function SelectedRoom() {
@@ -25,10 +25,13 @@ export default function SelectedRoom() {
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
   const { room, idx } = useRoomContext()
-  const { hotelId, searchParamsStr } = useEnterDetailsStore((state) => ({
-    hotelId: state.booking.hotelId,
-    searchParamsStr: state.searchParamString,
-  }))
+  const { hotelId, roomCategories, searchParamsStr } = useEnterDetailsStore(
+    (state) => ({
+      hotelId: state.booking.hotelId,
+      roomCategories: state.roomCategories,
+      searchParamsStr: state.searchParamString,
+    })
+  )
 
   function changeRoom() {
     const searchParams = new URLSearchParams(searchParamsStr)
@@ -39,6 +42,8 @@ export default function SelectedRoom() {
     })
   }
 
+  const selectedRoom = getHotelRoom(roomCategories, room.roomTypeCode)
+
   return (
     <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.main}>
@@ -79,6 +84,7 @@ export default function SelectedRoom() {
             size="Small"
             onPress={changeRoom}
             isDisabled={isPending}
+            wrapping={false}
             typography="Body/Supporting text (caption)/smBold"
           >
             <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
@@ -87,11 +93,17 @@ export default function SelectedRoom() {
             })}
           </Button>
         </div>
-        {room.roomTypeCode && (
+        {room.roomTypeCode && selectedRoom && (
           <div className={styles.details}>
-            <ToggleSidePeek
+            <RoomDetailsSidePeek
               hotelId={hotelId}
               roomTypeCode={room.roomTypeCode}
+              room={selectedRoom}
+              buttonVariant="primary"
+              triggerLabel={intl.formatMessage({
+                defaultMessage: "See room details",
+              })}
+              wrapping={false}
             />
           </div>
         )}

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -48,6 +48,7 @@
 .details {
   display: flex;
   justify-content: flex-start;
+  margin-top: var(--Space-x05);
 }
 
 @media screen and (min-width: 768px) {