From 2f38bdf0b1e53e80c35a4f936d61e2d8784848e1 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 18 Jun 2025 12:07:32 +0000 Subject: [PATCH] fix(SW-3075): Fixed issue where URLs rendered differently in source HTML in compared to client MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../DestinationCityPage/index.tsx | 3 ++ .../DestinationCountryPage/index.tsx | 3 ++ .../DestinationDataProvider/index.tsx | 4 +-- .../stores/destination-data/helper.ts | 29 ++++++++++++------- .../components/destinationFilterAndSort.ts | 1 + .../types/providers/destination-data.ts | 1 + .../scandic-web/utils/appendSlugToPathname.ts | 12 +++----- apps/scandic-web/utils/getPathname.ts | 11 +++++++ 8 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 apps/scandic-web/utils/getPathname.ts diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx index a9e279edc..405dd6286 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx +++ b/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 ? ( {isMapView ? ( (undefined) - const pathname = usePathname() const searchParams = useSearchParams() if (!storeRef.current) { diff --git a/apps/scandic-web/stores/destination-data/helper.ts b/apps/scandic-web/stores/destination-data/helper.ts index a44bcbc5e..5cc290d8d 100644 --- a/apps/scandic-web/stores/destination-data/helper.ts +++ b/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(sortedFilters.map((filter) => filter.name)), - ] + const uniqueFilterNames = [...new Set(filters.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) => - HOTEL_FACILITIES_FILTER_TYPE_NAMES.includes(filter.filterType) - ), - surroundingsFilters: filterList.filter((filter) => - HOTEL_SURROUNDINGS_FILTER_TYPE_NAMES.includes(filter.filterType) - ), + facilityFilters: sortFilters(facilityFilters), + surroundingsFilters: sortFilters(surroundingsFilters), } } diff --git a/apps/scandic-web/types/components/destinationFilterAndSort.ts b/apps/scandic-web/types/components/destinationFilterAndSort.ts index 8c3e89905..eb2bae554 100644 --- a/apps/scandic-web/types/components/destinationFilterAndSort.ts +++ b/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 { diff --git a/apps/scandic-web/types/providers/destination-data.ts b/apps/scandic-web/types/providers/destination-data.ts index 39dbfc454..0f11ae77d 100644 --- a/apps/scandic-web/types/providers/destination-data.ts +++ b/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 } diff --git a/apps/scandic-web/utils/appendSlugToPathname.ts b/apps/scandic-web/utils/appendSlugToPathname.ts index 5cfd55f56..169b957ad 100644 --- a/apps/scandic-web/utils/appendSlugToPathname.ts +++ b/apps/scandic-web/utils/appendSlugToPathname.ts @@ -1,15 +1,11 @@ -import { headers } from "next/headers" - -import { getLang } from "@/i18n/serverContext" +import { getPathname } from "./getPathname" export async function appendSlugToPathname(slug?: string) { - const headersList = await headers() - const pathname = headersList.get("x-pathname") - const lang = await getLang() + const pathname = await getPathname() - if (!pathname || !slug) { + if (!slug) { return null } - return `/${lang}${pathname}/${slug}` + return `${pathname}/${slug}` } diff --git a/apps/scandic-web/utils/getPathname.ts b/apps/scandic-web/utils/getPathname.ts new file mode 100644 index 000000000..860a65176 --- /dev/null +++ b/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}` +}