Merge branch 'develop' into feat/sw-386-header-fixes

components/HotelReservation/HotelCard/index.tsx

@@ -1,4 +1,4 @@
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
@@ -14,24 +14,18 @@ import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default async function HotelCard({
-  checkInDate,
-  checkOutDate,
-  hotelId,
-  price,
-}: HotelCardProps) {
-  const intl = await getIntl()
+export default function HotelCard({ hotel }: HotelCardProps) {
+  const intl = useIntl()
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const { hotelData } = hotel
+  const { price } = hotel
 
-  const sortedAmenities = hotel.detailedFacilities
+  const sortedAmenities = hotelData.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -39,8 +33,8 @@ export default async function HotelCard({
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotel.hotelContent.images.imageSizes.large}
-          alt={hotel.hotelContent.images.metaData.altText}
+          src={hotelData.hotelContent.images.imageSizes.medium}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -48,20 +42,20 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotel.ratings?.tripAdvisor.rating}
+            {hotelData.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotel.name}
+          {hotelData.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+          {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>

components/HotelReservation/HotelCardListing/hotelCardListing.module.css

@@ -0,0 +1,5 @@
+.hotelCards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}

components/HotelReservation/HotelCardListing/index.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import HotelCard from "../HotelCard"
+
+import styles from "./hotelCardListing.module.css"
+
+import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+
+export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
+  // TODO: filter with url params
+
+  return (
+    <section className={styles.hotelCards}>
+      {hotelData && hotelData.length ? (
+        hotelData.map((hotel) => (
+          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
+        ))
+      ) : (
+        <Title>No hotels found</Title>
+      )}
+    </section>
+  )
+}

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,40 +1,37 @@
-import { getIntl } from "@/i18n"
+"use client"
+
+import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFiltersProps"
 
-export default async function HotelFilter({ filters }: HotelFilterProps) {
-  const { formatMessage } = await getIntl()
+export default function HotelFilter({ filters }: HotelFiltersProps) {
+  const intl = useIntl()
+
+  function handleOnChange() {
+    // TODO: Update URL with selected values
+  }
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Room facilities" })}
-        {filters.roomFacilities.map((roomFilter) => (
-          <div key={roomFilter} className={styles.filter}>
-            <input id={roomFilter} name={roomFilter} type="checkbox" />
-            <label htmlFor={roomFilter}>{roomFilter}</label>
-          </div>
-        ))}
-      </div>
-      <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel facilities" })}
-        {filters.hotelFacilities.map((hotelFilter) => (
-          <div key={hotelFilter} className={styles.filter}>
-            <input id={hotelFilter} name={hotelFilter} type="checkbox" />
-            <label htmlFor={hotelFilter}>{hotelFilter}</label>
-          </div>
-        ))}
-      </div>
-      <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel surroundings" })}
-        {filters.hotelSurroundings.map((surroundings) => (
-          <div key={surroundings} className={styles.filter}>
-            <input id={surroundings} name={surroundings} type="checkbox" />
-            <label htmlFor={surroundings}>{surroundings}</label>
-          </div>
-        ))}
+        {intl.formatMessage({ id: "Hotel facilities" })}
+        <form>
+          <ul>
+            {filters.map((data) => (
+              <li key={data.id} className={styles.filter}>
+                <input
+                  id={`${data.id}`}
+                  name={data.name}
+                  type="checkbox"
+                  onChange={handleOnChange}
+                />
+                <label htmlFor={`${data?.id}`}>{data?.name}</label>
+              </li>
+            ))}
+          </ul>
+        </form>
       </div>
     </aside>
   )