fix(SW-2933): Making the hotels/city listing render correct for SEO purposes

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingSkeleton.tsx

@@ -15,7 +15,9 @@ export default function CityListingSkeleton() {
       </div>
       <ul className={styles.cityList}>
         {Array.from({ length: 3 }).map((_, index) => (
-          <CityListingItemSkeleton key={index} />
+          <li key={index}>
+            <CityListingItemSkeleton />
+          </li>
         ))}
       </ul>
     </section>

apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx

@@ -3,12 +3,13 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import CityListingItem from "./CityListingItem"
@@ -35,15 +36,17 @@ export default function CityListing() {
   ) : (
     <section className={styles.container} ref={scrollRef}>
       <div className={styles.listHeader}>
-        <Subtitle type="two">
+        <Typography variant="Title/Subtitle/md">
-          {intl.formatMessage(
+          <h2>
-            {
+            {intl.formatMessage(
-              defaultMessage:
+              {
-                "{count, plural, one {# destination} other {# destinations}}",
+                defaultMessage:
-            },
+                  "{count, plural, one {# destination} other {# destinations}}",
-            { count: activeCities.length }
+              },
-          )}
+              { count: activeCities.length }
-        </Subtitle>
+            )}
+          </h2>
+        </Typography>
         <DestinationFilterAndSort listType="city" />
       </div>
       {activeCities.length === 0 ? (

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -61,14 +61,14 @@ export default async function DestinationCityPage({
             />
           ) : (
             <div className={styles.pageContainer}>
-              <header className={styles.header}>
+              <div className={styles.header}>
                 <Suspense fallback={<BreadcrumbsSkeleton />}>
                   <Breadcrumbs />
                 </Suspense>
                 {images?.length ? (
                   <TopImages images={images} destinationName={city.name} />
                 ) : null}
-              </header>
+              </div>
               <main className={styles.mainContent}>
                 <HotelListing />
                 {blocks && <Blocks blocks={blocks} />}

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -60,7 +60,7 @@ export default async function DestinationCountryPage({
             />
           ) : (
             <div className={styles.pageContainer}>
-              <header className={styles.header}>
+              <div className={styles.header}>
                 <Suspense fallback={<BreadcrumbsSkeleton />}>
                   <Breadcrumbs />
                 </Suspense>
@@ -70,7 +70,7 @@ export default async function DestinationCountryPage({
                     destinationName={translatedCountry}
                   />
                 ) : null}
-              </header>
+              </div>
               <main className={styles.mainContent}>
                 <CityListing />
                 {blocks && <Blocks blocks={blocks} />}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingSkeleton.tsx

@@ -15,7 +15,9 @@ export default function HotelListingSkeleton() {
       </div>
       <ul className={styles.hotelList}>
         {Array.from({ length: 3 }).map((_, index) => (
-          <HotelListingItemSkeleton key={index} />
+          <li key={index}>
+            <HotelListingItemSkeleton />
+          </li>
         ))}
       </ul>
     </section>

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
@@ -13,7 +14,6 @@ import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"
@@ -48,14 +48,17 @@ export default function HotelListing() {
   ) : (
     <section className={styles.container} ref={scrollRef}>
       <div className={styles.listHeader}>
-        <Subtitle type="two">
+        <Typography variant="Title/Subtitle/md">
-          {intl.formatMessage(
+          <h2>
-            {
+            {intl.formatMessage(
-              defaultMessage: "{count, plural, one {# hotel} other {# hotels}}",
+              {
-            },
+                defaultMessage:
-            { count: activeHotels.length }
+                  "{count, plural, one {# hotel} other {# hotels}}",
-          )}
+              },
-        </Subtitle>
+              { count: activeHotels.length }
+            )}
+          </h2>
+        </Typography>
         <div className={styles.cta}>
           {mapUrl && (
             <Button

apps/scandic-web/providers/DestinationDataProvider/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { usePathname } from "next/navigation"
+import { usePathname, useSearchParams } from "next/navigation"
 import { useRef } from "react"
 
 import { createDestinationDataStore } from "@/stores/destination-data"
@@ -19,6 +19,7 @@ export default function DestinationDataProvider({
 }: DestinationDataProviderProps) {
   const storeRef = useRef<DestinationDataStore>(undefined)
   const pathname = usePathname()
+  const searchParams = useSearchParams()
 
   if (!storeRef.current) {
     storeRef.current = createDestinationDataStore({
@@ -26,6 +27,7 @@ export default function DestinationDataProvider({
       allHotels,
       pathname,
       sortItems,
+      searchParams,
     })
   }
 

apps/scandic-web/stores/destination-data/index.ts

@@ -29,15 +29,38 @@ export function createDestinationDataStore({
   allHotels,
   pathname,
   sortItems,
+  searchParams,
 }: InitialState) {
   const defaultSort =
     sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
-
   const allFilters = getFiltersFromHotels(allHotels)
   const allFilterSlugs = Object.values(allFilters).flatMap((filter: Filter[]) =>
     filter.map((f) => f.slug)
   )
 
+  const activeFilters: string[] = []
+  const basePathnameWithoutFilters = getBasePathNameWithoutFilters(
+    pathname,
+    allFilterSlugs
+  )
+  if (basePathnameWithoutFilters !== pathname) {
+    const pathParts = pathname.split("/")
+    const lastPathPart = pathParts[pathParts.length - 1]
+    activeFilters.push(lastPathPart)
+  }
+
+  let activeSort = defaultSort
+  if (searchParams) {
+    const sortParam = searchParams.get("sort")
+    if (sortParam && isValidSortOption(sortParam, sortItems)) {
+      activeSort = sortParam
+    }
+  }
+  const filteredHotels = getFilteredHotels(allHotels, activeFilters)
+  const activeHotels = getSortedHotels(filteredHotels, activeSort)
+  const filteredCities = getFilteredCities(filteredHotels, allCities)
+  const activeCities = getSortedCities(filteredCities, activeSort)
+
   return create<DestinationDataState>((set) => ({
     actions: {
       updateActiveFiltersAndSort(filters, sort) {
@@ -144,24 +167,21 @@ export function createDestinationDataStore({
       },
     },
     allHotels,
-    activeHotels: allHotels,
+    activeHotels: activeHotels,
-    pendingHotelCount: allHotels.length,
+    pendingHotelCount: activeHotels.length,
     allCities,
-    activeCities: allCities,
+    activeCities: activeCities,
-    pendingCityCount: allCities.length,
+    pendingCityCount: activeCities.length,
-    activeSort: defaultSort,
+    activeSort,
-    pendingSort: defaultSort,
+    pendingSort: activeSort,
     defaultSort,
-    activeFilters: [],
+    activeFilters,
-    pendingFilters: [],
+    pendingFilters: activeFilters,
     allFilters,
     allFilterSlugs,
-    basePathnameWithoutFilters: getBasePathNameWithoutFilters(
+    basePathnameWithoutFilters,
-      pathname,
-      allFilterSlugs
-    ),
     sortItems,
-    isLoading: true,
+    isLoading: false,
   }))
 }
 

apps/scandic-web/types/stores/destination-data.ts

@@ -1,3 +1,5 @@
+import type { ReadonlyURLSearchParams } from "next/navigation"
+
 import type {
   CategorizedFilters,
   SortItem,
@@ -44,4 +46,5 @@ export interface DestinationDataState {
 export interface InitialState
   extends Pick<DestinationDataState, "allHotels" | "allCities" | "sortItems"> {
   pathname: string
+  searchParams: ReadonlyURLSearchParams
 }