feat(SW-341): add hotels listing sidepeeks

2024-09-11 12:27:54 +02:00
parent dd4d6b46b1
commit 724f429696
13 changed files with 365 additions and 64 deletions
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { ChevronRightIcon } from "@/components/Icons"
+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 Contact from "./Contact"
+
+import styles from "./readMore.module.css"
+
+import {
+  DetailedAmenity,
+  ParkingProps,
+  ReadMoreProps,
+} from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { Hotel } from "@/types/hotel"
+
+function getAmenitiesList(hotel: Hotel) {
+  const detailedAmenities: DetailedAmenity[] = Object.entries(
+    hotel.hotelFacts.hotelFacilityDetail
+  ).map(([key, value]) => ({ name: key, ...value }))
+
+  // Remove Parking facilities since parking accordion is based on hotel.parking
+  const simpleAmenities = hotel.detailedFacilities.filter(
+    (facility) => !facility.name.startsWith("Parking")
+  )
+  return [...detailedAmenities, ...simpleAmenities]
+}
+
+export default function ReadMore({ hotel, hotelId }: ReadMoreProps) {
+  const intl = useIntl()
+
+  const [sidePeekOpen, setSidePeekOpen] = useState(false)
+
+  const amenitiesList = getAmenitiesList(hotel)
+  return (
+    <>
+      <Button
+        onPress={() => {
+          setSidePeekOpen(true)
+        }}
+        intent={"text"}
+        color="burgundy"
+        className={styles.detailsButton}
+      >
+        {intl.formatMessage({ id: "See hotel details" })}
+        <ChevronRightIcon color="burgundy" />
+      </Button>
+      <SidePeek
+        title={hotel.name}
+        isOpen={sidePeekOpen}
+        contentKey={`${hotelId}`}
+        handleClose={() => {
+          setSidePeekOpen(false)
+        }}
+      >
+        <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 "description" in amenity ? (
+                <AccordionItem key={amenity.name} title={amenity.heading}>
+                  {amenity.description}
+                </AccordionItem>
+              ) : (
+                <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}`}</li>
+        <li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
+      </ul>
+    </div>
+  )
+}