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}

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/utils.ts

@@ -1,71 +0,0 @@
-import type { AdditionalData, Hotel } from "@scandic-hotels/trpc/types/hotel"
-import type { IntlShape } from "react-intl"
-
-import type { HotelListing } from "@/types/trpc/routers/contentstack/blocks"
-
-export function getTypeSpecificInformation(
-  intl: IntlShape,
-  contentType: HotelListing["contentType"],
-  hotelContent: Hotel["hotelContent"],
-  additionalData: AdditionalData,
-  url: string | null
-) {
-  const { images, texts } = hotelContent
-  const { descriptions, meetingDescription } = texts
-  const { conferencesAndMeetings, restaurantsOverviewPage, restaurantImages } =
-    additionalData
-  const data = {
-    description: descriptions?.short,
-    image: {
-      src: images.imageSizes.small,
-      alt: images.metaData.altText,
-    },
-    cta: {
-      text: intl.formatMessage({
-        defaultMessage: "See hotel details",
-      }),
-      url,
-      openInNewTab: false,
-    },
-  }
-  switch (contentType) {
-    case "meeting":
-      const meetingImage = conferencesAndMeetings?.heroImages[0]
-      const meetingUrl = additionalData.meetingRooms.meetingOnlineLink
-      if (meetingDescription?.short) {
-        data.description = meetingDescription.short
-      }
-      if (meetingImage) {
-        data.image = {
-          src: meetingImage.imageSizes.small,
-          alt: meetingImage.metaData.altText,
-        }
-      }
-      if (meetingUrl) {
-        data.cta = {
-          text: intl.formatMessage({
-            defaultMessage: "Book a meeting",
-          }),
-          url: meetingUrl,
-          openInNewTab: true,
-        }
-      }
-      return data
-    case "restaurant":
-      const restaurantImage = restaurantImages?.heroImages[0]
-      if (restaurantsOverviewPage.restaurantsContentDescriptionShort) {
-        data.description =
-          restaurantsOverviewPage.restaurantsContentDescriptionShort
-      }
-      if (restaurantImage) {
-        data.image = {
-          src: restaurantImage.imageSizes.small,
-          alt: restaurantImage.metaData.altText,
-        }
-      }
-      return data
-    case "hotel":
-    default:
-      return data
-  }
-}

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

@@ -30,13 +30,11 @@ export default async function HotelListing({
       <Typography variant="Title/sm">
         <h3 className={styles.heading}>{heading}</h3>
       </Typography>
-      {hotels.map(({ url, hotel, additionalData }) => (
+      {hotels.map((hotelData) => (
         <HotelListingItem
-          key={hotel.name}
-          hotel={hotel}
-          additionalData={additionalData}
+          key={hotelData.hotel.name}
+          hotelData={hotelData}
           contentType={contentType}
-          url={url}
         />
       ))}
     </SectionContainer>