Merged in feat/SW-613-refactor-hotelreservation-sidepeek (pull request #805)

Feat/SW-613 refactor hotelreservation sidepeek * feat(SW-613): move sidepeek paralell route to apply for all of hotelreservation * feat(SW-613): refactor sidepeek logic to a unified approach for hotelreservation flow * feat(SW-613): fix issue where room was not selected properly in sidepeek * fix(SW-613): move back preload to layout * fix(SW-613): move preload to dedicated file * fix(SW-613): refactor sidepeek to work with hotel page * feat(SW-613): added sidepeek button for room card Approved-by: Simon.Emanuelsson
2024-11-06 12:09:27 +00:00
parent ea6b9da9e0
commit 0cbffc7904
33 changed files with 507 additions and 352 deletions
--- a/components/SidePeeks/HotelSidePeek/index.tsx
+++ b/components/SidePeeks/HotelSidePeek/index.tsx
@@ -0,0 +1,90 @@
+import { useIntl } from "react-intl"
+
+import Contact from "@/components/HotelReservation/Contact"
+import Accordion from "@/components/TempDesignSystem/Accordion"
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import Button from "@/components/TempDesignSystem/Button"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./hotelSidePeek.module.css"
+
+import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
+import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { Amenities, Hotel } from "@/types/hotel"
+
+function getAmenitiesList(hotel: Hotel) {
+  const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
+    // Remove Parking facilities since parking accordion is based on hotel.parking
+    (facility) => !facility.name.startsWith("Parking") && facility.public
+  )
+  return detailedAmenities
+}
+
+export default function HotelSidePeek({
+  hotel,
+  activeSidePeek,
+  close,
+}: HotelSidePeekProps) {
+  const intl = useIntl()
+  const amenitiesList = getAmenitiesList(hotel)
+
+  return (
+    <SidePeek
+      title={hotel.name}
+      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
+      handleClose={close}
+    >
+      <div className={styles.content}>
+        <Subtitle>
+          {intl.formatMessage({ id: "Practical information" })}
+        </Subtitle>
+        <Contact hotel={hotel} />
+        <Accordion>
+          {/* parking */}
+          {hotel.parking.length ? (
+            <AccordionItem title={intl.formatMessage({ id: "Parking" })}>
+              {hotel.parking.map((p) => (
+                <Parking key={p.name} parking={p} />
+              ))}
+            </AccordionItem>
+          ) : null}
+          <AccordionItem title={intl.formatMessage({ id: "Accessibility" })}>
+            TODO: What content should be in the accessibility section?
+          </AccordionItem>
+          {amenitiesList.map((amenity) => {
+            return (
+              <div key={amenity.id} className={styles.amenity}>
+                {amenity.name}
+              </div>
+            )
+          })}
+        </Accordion>
+        {/* TODO: handle linking to Hotel Page */}
+        <Button theme={"base"}>To the hotel</Button>
+      </div>
+    </SidePeek>
+  )
+}
+
+function Parking({ parking }: ParkingProps) {
+  const intl = useIntl()
+  return (
+    <div>
+      <Body>{`${intl.formatMessage({ id: parking.type })} (${parking.name})`}</Body>
+      <ul className={styles.list}>
+        <li>
+          {`${intl.formatMessage({
+            id: "Number of charging points for electric cars",
+          })}: ${parking.numberOfChargingSpaces}`}
+        </li>
+        <li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
+        <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${parking.numberOfParkingSpots}`}</li>
+        <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${parking.distanceToHotel} m`}</li>
+        <li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
+      </ul>
+    </div>
+  )
+}