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

@@ -1,5 +1,18 @@
+import { Suspense } from "react"
+
+import {
+  type HotelSortItem,
+  HotelSortOption,
+} from "@scandic-hotels/trpc/types/hotel"
+import { getFiltersFromHotels } from "@scandic-hotels/trpc/utils/getFiltersFromHotels"
+
 import { getHotelsByCSFilter } from "@/lib/trpc/memoizedRequests"
 
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import HotelListingDataProvider from "@/providers/HotelListingDataProvider"
+
+import CampaignHotelListingSkeleton from "./CampaignHotelListingSkeleton"
 import CampaignHotelListingClient from "./Client"
 
 interface CampaignHotelListingProps {
@@ -8,28 +21,56 @@ interface CampaignHotelListingProps {
   hotelIds: string[]
   visibleCountMobile?: 3 | 6
   visibleCountDesktop?: 3 | 6
+  isMainBlock?: boolean
 }
 
 export default async function CampaignHotelListing({
   heading,
   preamble,
   hotelIds,
-  visibleCountMobile,
-  visibleCountDesktop,
+  visibleCountMobile = 3,
+  visibleCountDesktop = 6,
+  isMainBlock = false,
 }: CampaignHotelListingProps) {
+  const intl = await getIntl()
+  const lang = await getLang()
   const hotels = await getHotelsByCSFilter({ hotelsToInclude: hotelIds })
 
   if (!hotels.length) {
     return null
   }
 
+  const allFilters = getFiltersFromHotels(hotels, lang)
+  const sortItems: HotelSortItem[] = [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Name",
+      }),
+      value: HotelSortOption.Name,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "TripAdvisor rating",
+      }),
+      value: HotelSortOption.TripAdvisorRating,
+    },
+  ]
+
   return (
-    <CampaignHotelListingClient
-      heading={heading}
-      preamble={preamble}
-      hotels={hotels}
-      visibleCountMobile={visibleCountMobile}
-      visibleCountDesktop={visibleCountDesktop}
-    />
+    <Suspense fallback={<CampaignHotelListingSkeleton />}>
+      <HotelListingDataProvider
+        allHotels={hotels}
+        allFilters={allFilters}
+        sortItems={sortItems}
+      >
+        <CampaignHotelListingClient
+          heading={heading}
+          preamble={preamble}
+          visibleCountMobile={visibleCountMobile}
+          visibleCountDesktop={visibleCountDesktop}
+          isMainBlock={isMainBlock}
+        />
+      </HotelListingDataProvider>
+    </Suspense>
   )
 }