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/SidePeeks/HotelSidePeek/index.tsx

@@ -1,16 +1,18 @@
+"use client"
+
 import { useIntl } from "react-intl"
 
-import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Contact from "@/components/HotelReservation/Contact"
+import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import Accessibility from "./Accordions/Accessibility"
-import CheckinCheckOut from "./Accordions/CheckInCheckOut"
-import MeetingsAndConferences from "./Accordions/MeetingsAndConferences"
-import Parking from "./Accordions/Parking"
-import Restaurant from "./Accordions/Restaurant"
+import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
+import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"
+import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
+import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking"
 
 import styles from "./hotelSidePeek.module.css"
 
@@ -19,17 +21,12 @@ import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
 export default function HotelSidePeek({
   hotel,
+  restaurants,
   additionalHotelData,
   activeSidePeek,
   close,
 }: HotelSidePeekProps) {
   const intl = useIntl()
-  const amenitiesList = hotel.detailedFacilities.filter(
-    (facility) => facility.public
-  )
-  const parking = hotel.parking.filter(
-    (p) => p?.numberOfParkingSpots || p?.numberOfChargingSpaces || p?.address
-  )
 
   return (
     <SidePeek
@@ -38,61 +35,30 @@ export default function HotelSidePeek({
       handleClose={close}
     >
       <div className={styles.content}>
-        <Subtitle color="baseTextHighContrast">
-          {intl.formatMessage({
-            defaultMessage: "Practical information",
-          })}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/lg">
+          <h3>
+            {intl.formatMessage({ defaultMessage: "Practical information" })}
+          </h3>
+        </Typography>
         <Contact hotel={hotel} />
-        <Accordion>
-          {parking?.length > 0 && <Parking parking={parking} />}
-          {additionalHotelData?.restaurantsOverviewPage
-            ?.restaurantsContentDescriptionMedium && (
-            <Restaurant
-              restaurantsContentDescriptionMedium={
-                additionalHotelData.restaurantsOverviewPage
-                  .restaurantsContentDescriptionMedium
-              }
-            />
-          )}
-          {additionalHotelData?.hotelSpecialNeeds.elevatorPitch && (
-            <Accessibility
-              elevatorPitchText={
-                additionalHotelData.hotelSpecialNeeds.elevatorPitch
-              }
-            />
-          )}
-          {hotel.hotelFacts?.checkin && (
-            <CheckinCheckOut checkin={hotel.hotelFacts.checkin} />
-          )}
-          {hotel.hotelContent.texts?.meetingDescription?.medium && (
-            <MeetingsAndConferences
-              meetingDescription={
-                hotel.hotelContent.texts.meetingDescription.medium
-              }
-            />
-          )}
-        </Accordion>
-        <div className={styles.amenity}>
-          {amenitiesList.map((amenity) => {
-            const Icon = (
-              <FacilityToIcon id={amenity.id} size={24} color="Icon/Intense" />
-            )
-            return (
-              <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
-                {Icon && Icon}
-                {amenity.name}
-              </Subtitle>
-            )
-          })}
-        </div>
 
-        {/*     TODO: handle linking to Hotel Page */}
-        {/*     {showCTA && (
-          <Button theme="base" intent="secondary" size="large">
-            Read more about the hotel
-          </Button>
-        )} */}
+        <Accordion>
+          <ParkingAccordionItem
+            parking={hotel.parking}
+            elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
+          />
+          <BreakfastAccordionItem
+            restaurants={restaurants}
+            hotelType={hotel.hotelType}
+          />
+          <CheckInCheckOutAccordionItem
+            checkInData={hotel.hotelFacts.checkin}
+          />
+          <AccessibilityAccordionItem
+            elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
+          />
+          <AdditionalAmenities amenities={hotel.detailedFacilities} />
+        </Accordion>
       </div>
     </SidePeek>
   )