feat(SW-251): use response to render filters

components/HotelReservation/HotelCard/index.tsx

@@ -25,19 +25,16 @@ export default function HotelCard({ hotel }: HotelCardProps) {
   const { hotelData } = hotel
   const { price } = hotel
 
-  if (!hotelData) return null
-  if (!price) return null
-
-  const sortedAmenities = hotelData.detailedFacilities
-    ?.sort((a, b) => b.sortOrder - a.sortOrder)
+  const sortedAmenities = hotelData?.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotelData.hotelContent.images.imageSizes.medium}
-          alt={hotelData.hotelContent.images.metaData.altText}
+          src={hotelData?.hotelContent.images.imageSizes.medium ?? ""}
+          alt={hotelData?.hotelContent.images.metaData.altText ?? ""}
           width={300}
           height={200}
           className={styles.image}
@@ -45,20 +42,20 @@ export default function HotelCard({ hotel }: HotelCardProps) {
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotelData.ratings?.tripAdvisor.rating}
+            {hotelData?.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotelData.name}
+          {hotelData?.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotelData.address?.streetAddress}, ${hotelData.address?.city}`}
+          {`${hotelData?.address?.streetAddress}, ${hotelData?.address?.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotelData.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/SelectHotel/HotelFilter/index.tsx

@@ -1,23 +1,28 @@
-import { getIntl } from "@/i18n"
+"use client"
+
+import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-export default async function HotelFilter() {
-  const intl = await getIntl()
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export default function HotelFilter({ filters }: HotelFiltersProps) {
+  const intl = useIntl()
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {intl.formatMessage({ id: "Hotel facilities" })}
-      </div>
-      <div className={styles.facilities}>
-        {intl.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>
-        ))} */}
+        <form>
+          <ul>
+            {filters.map((data) => (
+              <li key={data?.id} className={styles.filter}>
+                <input id={`${data?.id}`} name={data?.name} type="checkbox" />
+                <label htmlFor={`${data?.id}`}>{data?.name}</label>
+              </li>
+            ))}
+          </ul>
+        </form>
       </div>
     </aside>
   )