fix(SW-1241): Adjusted amenities sidepeek on hotel pages and booking flow

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

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

@@ -38,6 +38,7 @@ import styles from "./hotelCard.module.css"
 
 import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import { RateTypeEnum } from "@/types/enums/rateType"
 import type { Lang } from "@/constants/languages"
 
@@ -173,6 +174,7 @@ function HotelCard({
             hotelId={hotel.operaId}
             hotel={hotel}
             showCTA={true}
+            sidePeekKey={SidePeekEnum.hotelDetails}
           />
         </section>
         <div className={styles.prices}>

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

@@ -1,30 +1,29 @@
 "use client"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./readMore.module.css"
-
 import type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
+export default function ReadMore({
+  label,
+  hotelId,
+  showCTA,
+  sidePeekKey,
+}: ReadMoreProps) {
   const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
   return (
     <Button
       onPress={() => {
-        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId, showCTA })
+        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
       }}
-      intent="text"
-      theme="base"
-      wrapping
-      className={styles.detailsButton}
+      variant="Text"
+      typography="Body/Paragraph/mdBold"
     >
       {label}
-      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css

@@ -1,25 +0,0 @@
-.detailsButton {
-  align-self: start;
-  border-radius: 0;
-  height: auto;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.content {
-  display: grid;
-  gap: var(--Spacing-x2);
-}
-
-.amenity {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-  /* padding set to align with AccordionItem which has a different composition */
-  padding: var(--Spacing-x2)
-    calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half));
-}
-
-.list {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  list-style: inside;
-}

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

@@ -16,6 +16,7 @@ import TripAdvisorChip from "../../TripAdvisorChip"
 import styles from "./hotelInfoCard.module.css"
 
 import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
 export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
   const intl = await getIntl()
@@ -88,6 +89,7 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
               hotelId={hotel.operaId}
               hotel={hotel}
               showCTA={false}
+              sidePeekKey={SidePeekEnum.amenities}
             />
           </div>
         </div>

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

@@ -3,6 +3,7 @@
 import { trpc } from "@/lib/trpc/client"
 import useSidePeekStore from "@/stores/sidepeek"
 
+import AmenitiesSidePeek from "@/components/SidePeeks/AmenitiesSidePeek"
 import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
 import HotelSidePeek from "@/components/SidePeeks/HotelSidePeek"
 import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
@@ -39,13 +40,23 @@ export default function HotelReservationSidePeek() {
     return (
       <>
         {hotelData && (
-          <HotelSidePeek
-            additionalHotelData={hotelData.additionalData}
-            hotel={hotelData.hotel}
-            activeSidePeek={activeSidePeek}
-            close={close}
-            showCTA={showCTA}
-          />
+          <>
+            <HotelSidePeek
+              additionalHotelData={hotelData.additionalData}
+              hotel={hotelData.hotel}
+              restaurants={hotelData.restaurants}
+              activeSidePeek={activeSidePeek}
+              close={close}
+              showCTA={showCTA}
+            />
+            <AmenitiesSidePeek
+              hotel={hotelData.hotel}
+              restaurants={hotelData.restaurants}
+              additionalHotelData={hotelData.additionalData}
+              activeSidePeek={activeSidePeek}
+              close={close}
+            />
+          </>
         )}
         {selectedRoom && (
           <RoomSidePeek