fix(SW-3075): Fixed issue where URLs rendered differently in source HTML in compared to client

Approved-by: Matilda Landström

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

@@ -12,6 +12,7 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { getIntl } from "@/i18n"
 import DestinationDataProvider from "@/providers/DestinationDataProvider"
+import { getPathname } from "@/utils/getPathname"
 
 import Blocks from "../Blocks"
 import ExperienceList from "../ExperienceList"
@@ -40,6 +41,7 @@ export default async function DestinationCityPage({
   filterFromUrl,
 }: DestinationCityPageProps) {
   const intl = await getIntl()
+  const pathname = await getPathname()
   const pageData = await getDestinationCityPage()
 
   if (!pageData) {
@@ -90,6 +92,7 @@ export default async function DestinationCityPage({
           allFilters={allFilters}
           filterFromUrl={filterFromUrl}
           sortItems={sortItems}
+          pathname={pathname}
         >
           {isMapView ? (
             <CityMap

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

@@ -13,6 +13,7 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { getIntl } from "@/i18n"
 import DestinationDataProvider from "@/providers/DestinationDataProvider"
+import { getPathname } from "@/utils/getPathname"
 
 import Blocks from "../Blocks"
 import CityListing from "../CityListing"
@@ -40,6 +41,7 @@ export default async function DestinationCountryPage({
   filterFromUrl,
 }: DestinationCountryPageProps) {
   const intl = await getIntl()
+  const pathname = await getPathname()
   const pageData = await getDestinationCountryPage()
 
   if (!pageData) {
@@ -89,6 +91,7 @@ export default async function DestinationCountryPage({
           allFilters={allFilters}
           filterFromUrl={filterFromUrl}
           sortItems={sortItems}
+          pathname={pathname}
         >
           {isMapView ? (
             <CountryMap

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

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

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

@@ -47,6 +47,15 @@ const CITY_SORTING_STRATEGIES: Partial<
   },
 }
 
+function sortFilters(filters: Filter[]): Filter[] {
+  return [...filters].sort((a, b) => {
+    // First sort by sortOrder
+    const orderDiff = a.sortOrder - b.sortOrder
+    // If sortOrder is the same, sort by name as secondary criterion
+    return orderDiff === 0 ? a.name.localeCompare(b.name) : orderDiff
+  })
+}
+
 export function getFilteredHotels(
   hotels: DestinationPagesHotelData[],
   filters: string[]
@@ -125,10 +134,7 @@ export function getFiltersFromHotels(
   }
 
   const filters = hotels.flatMap(({ hotel }) => hotel.detailedFacilities)
-  const sortedFilters = filters.sort((a, b) => b.sortOrder - a.sortOrder)
+  const uniqueFilterNames = [...new Set(filters.map((filter) => filter.name))]
-  const uniqueFilterNames = [
-    ...new Set(sortedFilters.map((filter) => filter.name)),
-  ]
   const filterList = uniqueFilterNames
     .map((filterName) => {
       const filter = filters.find((filter) => filter.name === filterName)
@@ -137,18 +143,21 @@ export function getFiltersFromHotels(
             name: filter.name,
             slug: filter.slug,
             filterType: filter.filter,
+            sortOrder: filter.sortOrder,
           }
         : null
     })
     .filter((filter): filter is Filter => !!filter)
 
+  const facilityFilters = filterList.filter((filter) =>
+    HOTEL_FACILITIES_FILTER_TYPE_NAMES.includes(filter.filterType)
+  )
+  const surroundingsFilters = filterList.filter((filter) =>
+    HOTEL_SURROUNDINGS_FILTER_TYPE_NAMES.includes(filter.filterType)
+  )
   return {
-    facilityFilters: filterList.filter((filter) =>
+    facilityFilters: sortFilters(facilityFilters),
-      HOTEL_FACILITIES_FILTER_TYPE_NAMES.includes(filter.filterType)
+    surroundingsFilters: sortFilters(surroundingsFilters),
-    ),
-    surroundingsFilters: filterList.filter((filter) =>
-      HOTEL_SURROUNDINGS_FILTER_TYPE_NAMES.includes(filter.filterType)
-    ),
   }
 }
 

apps/scandic-web/types/components/destinationFilterAndSort.ts

@@ -10,6 +10,7 @@ export interface Filter {
   name: string
   slug: string
   filterType: string
+  sortOrder: number
 }
 
 export interface CategorizedFilters {

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

@@ -11,4 +11,5 @@ export interface DestinationDataProviderProps extends React.PropsWithChildren {
   allFilters: CategorizedFilters
   filterFromUrl?: string
   sortItems: SortItem[]
+  pathname: string
 }

apps/scandic-web/utils/appendSlugToPathname.ts

@@ -1,15 +1,11 @@
-import { headers } from "next/headers"
+import { getPathname } from "./getPathname"
-
-import { getLang } from "@/i18n/serverContext"
 
 export async function appendSlugToPathname(slug?: string) {
-  const headersList = await headers()
+  const pathname = await getPathname()
-  const pathname = headersList.get("x-pathname")
-  const lang = await getLang()
 
-  if (!pathname || !slug) {
+  if (!slug) {
     return null
   }
 
-  return `/${lang}${pathname}/${slug}`
+  return `${pathname}/${slug}`
 }

apps/scandic-web/utils/getPathname.ts

@@ -0,0 +1,11 @@
+import { headers } from "next/headers"
+
+import { getLang } from "@/i18n/serverContext"
+
+export async function getPathname() {
+  const headersList = await headers()
+  const lang = await getLang()
+  const pathname = headersList.get("x-pathname") || ""
+
+  return `/${lang}${pathname}`
+}