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/CampaignHotelListing/HotelListingItem/index.tsx

@@ -13,11 +13,11 @@ import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 
-import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+import type { HotelListingHotelData } from "@scandic-hotels/trpc/types/hotel"
 
 interface HotelListingItemProps {
-  hotel: Hotel
-  url: string
+  hotel: HotelListingHotelData["hotel"]
+  url: string | null
 }
 
 export default function HotelListingItem({
@@ -25,11 +25,11 @@ export default function HotelListingItem({
   url,
 }: HotelListingItemProps) {
   const intl = useIntl()
-  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
-  const tripadvisorRating = hotel.ratings?.tripAdvisor.rating
+  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages)
+  const tripadvisorRating = hotel.tripadvisor
   const address = `${hotel.address.streetAddress}, ${hotel.address.city}`
   const amenities = hotel.detailedFacilities.slice(0, 5)
-  const hotelDescription = hotel.hotelContent.texts.descriptions?.short
+  const hotelDescription = hotel.description
 
   return (
     <article className={styles.hotelListingItem}>
@@ -57,7 +57,7 @@ export default function HotelListingItem({
       <div className={styles.content}>
         <div className={styles.intro}>
           <HotelLogoIcon
-            hotelId={hotel.operaId}
+            hotelId={hotel.id}
             hotelType={hotel.hotelType}
             height={30}
           />
@@ -111,19 +111,21 @@ export default function HotelListingItem({
           </ul>
         </Typography>
       </div>
-      <div className={styles.ctaWrapper}>
-        <ButtonLink
-          href={url}
-          variant="Tertiary"
-          color="Primary"
-          size="Small"
-          typography="Body/Supporting text (caption)/smBold"
-        >
-          {intl.formatMessage({
-            defaultMessage: "See hotel details",
-          })}
-        </ButtonLink>
-      </div>
+      {url ? (
+        <div className={styles.ctaWrapper}>
+          <ButtonLink
+            href={url}
+            variant="Tertiary"
+            color="Primary"
+            size="Small"
+            typography="Body/Supporting text (caption)/smBold"
+          >
+            {intl.formatMessage({
+              defaultMessage: "See hotel details",
+            })}
+          </ButtonLink>
+        </div>
+      ) : null}
     </article>
   )
 }