Feat/SW-2271 hotel list filtering

* feat(SW-2271): Changes to hotel data types in preperation for filtering
* feat(SW-2271): Added filter and sort functionality

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -7,32 +7,42 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
-import { getTypeSpecificInformation } from "./utils"
-
 import styles from "./hotelListingItem.module.css"
 
 import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
 
 export default async function HotelListingItem({
-  hotel,
-  additionalData,
+  hotelData,
   contentType = "hotel",
-  url,
 }: HotelListingItemProps) {
   const intl = await getIntl()
-  const { description, image, cta } = getTypeSpecificInformation(
-    intl,
-    contentType,
-    hotel.hotelContent,
-    additionalData,
-    url
-  )
+
+  const { galleryImages, description, id, name, hotelType, location, address } =
+    hotelData.hotel
+  const image = galleryImages[0]
+
+  const cta =
+    contentType === "meeting" && hotelData.meetingUrl
+      ? {
+          url: hotelData.meetingUrl,
+          openInNewTab: true,
+          text: intl.formatMessage({
+            defaultMessage: "Book a meeting",
+          }),
+        }
+      : {
+          url: hotelData.url,
+          openInNewTab: false,
+          text: intl.formatMessage({
+            defaultMessage: "See hotel details",
+          }),
+        }
 
   return (
     <article className={styles.container}>
       <Image
-        src={image.src}
-        alt={image.alt}
+        src={image.imageSizes.large}
+        alt={image.metaData.altText || image.metaData.altText_En}
         width={400}
         height={300}
         sizes="(min-width: 768px) 400px, 100vw"
@@ -40,13 +50,13 @@ export default async function HotelListingItem({
       />
       <section className={styles.content}>
         <div className={styles.intro}>
-          <HotelLogoIcon hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          <HotelLogoIcon hotelId={id} hotelType={hotelType} />
           <Typography variant="Title/Subtitle/lg">
-            <h4>{hotel.name}</h4>
+            <h4>{name}</h4>
           </Typography>
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <div className={styles.captions}>
-              <span>{hotel.address.streetAddress}</span>
+              <span>{address.streetAddress}</span>
               <Divider variant="vertical" />
               <span>
                 {intl.formatMessage(
@@ -54,9 +64,7 @@ export default async function HotelListingItem({
                     defaultMessage: "{number} km to city center",
                   },
                   {
-                    number: getSingleDecimal(
-                      hotel.location.distanceToCentre / 1000
-                    ),
+                    number: getSingleDecimal(location.distanceToCentre / 1000),
                   }
                 )}
               </span>
@@ -77,7 +85,7 @@ export default async function HotelListingItem({
               variant="Primary"
               size="Small"
               href={cta.url}
-              target={cta.openInNewTab ? "_blank" : "_self"}
+              target={cta.openInNewTab ? "_blank" : undefined}
               className={styles.button}
             >
               {cta.text}