From c963891ca755748c6d7c2905d3a883427ded3bdb Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 26 May 2025 09:09:52 +0000 Subject: [PATCH] fix(SW-2758): Using ?s queryparameter again to handle sidepeeks on hotel pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../AmenitiesList/amenitiesList.module.css | 1 + .../HotelPage/AmenitiesList/index.tsx | 16 ++--- .../CardGrid/ActivitiesCardGrid.tsx | 4 +- .../HotelPage/IntroSection/index.tsx | 21 ++---- .../IntroSection/introSection.module.css | 14 ++-- .../HotelPage/Rooms/RoomCard/index.tsx | 64 +++++++++---------- .../Rooms/RoomCard/roomCard.module.css | 15 +++-- .../HotelPage/SidePeekWrapper/index.tsx | 0 .../SidePeeks/SidePeekProvider/index.tsx | 21 +++--- apps/scandic-web/utils/facilityCards.ts | 2 +- 10 files changed, 74 insertions(+), 84 deletions(-) delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeekWrapper/index.tsx diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css index 84007829d..84bb73b19 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css @@ -7,6 +7,7 @@ gap: var(--Spacing-x-one-and-half); height: fit-content; width: min(100%, 300px); + justify-items: start; } .amenityItemList { diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx index ddd2a587c..79a01fc69 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -1,8 +1,8 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import ButtonLink from "@/components/ButtonLink" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" -import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" import styles from "./amenitiesList.module.css" @@ -48,19 +48,17 @@ export default async function AmenitiesList({ ) })} - {intl.formatMessage({ defaultMessage: "See all amenities", })} - - + + ) } diff --git a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx index b998be16d..101ad5257 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx @@ -15,7 +15,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) { theme: hasImage ? "image" : "primaryDark", primaryButton: hasImage ? { - href: `#s-${activitiesCard.sidepeekSlug}`, + href: `?s=${activitiesCard.sidepeekSlug}`, title: activitiesCard.ctaText, isExternal: false, scrollOnClick: false, @@ -24,7 +24,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) { secondaryButton: hasImage ? undefined : { - href: `#s-${activitiesCard.sidepeekSlug}`, + href: `?s=${activitiesCard.sidepeekSlug}`, title: activitiesCard.ctaText, isExternal: false, scrollOnClick: false, diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx index ff2d10b94..d50c2dac1 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx @@ -1,7 +1,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import Link from "@/components/TempDesignSystem/Link" +import ButtonLink from "@/components/ButtonLink" import { getIntl } from "@/i18n" import { getSingleDecimal } from "@/utils/numberFormatting" @@ -56,24 +56,17 @@ export default async function IntroSection({

{hotelDescription}

 - {intl.formatMessage({ defaultMessage: "Read more", })} - - + + ) diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css index 7f7fd53bf..d3386eb22 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css @@ -1,19 +1,20 @@ .introSection { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); position: relative; max-width: var(--hotel-page-intro-section-width); } .mainContent { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-items: start; } .subtitleContent { display: grid; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x05); + justify-items: start; } .title { @@ -31,10 +32,5 @@ .titleContainer { display: grid; - gap: var(--Spacing-x2); -} - -.introLink { - text-decoration-color: var(--Scandic-Peach-80); - width: fit-content; + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx index dbc60c8a6..450ce73a9 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx @@ -1,14 +1,12 @@ "use client" -import Link from "next/link" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" +import ButtonLink from "@/components/ButtonLink" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" -import Body from "@/components/TempDesignSystem/Text/Body" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { getRoomNameAsParam } from "../../utils" @@ -46,36 +44,36 @@ export function RoomCard({ room }: RoomCardProps) {
- - {name} - - - {intl.formatMessage( - { - defaultMessage: - "{size} ({max, plural, one {{range} guest} other {{range} guests}})", - }, - { - size, - max: totalOccupancy.max, - range: totalOccupancy.range, - } - )} - + +

{name}

+ + +

+ {intl.formatMessage( + { + defaultMessage: + "{size} ({max, plural, one {{range} guest} other {{range} guests}})", + }, + { + size, + max: totalOccupancy.max, + range: totalOccupancy.range, + } + )} +

+
- + + {intl.formatMessage({ + defaultMessage: "See room details", + })} + +
) diff --git a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css index 8ffacb63d..464cea1ef 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css @@ -1,25 +1,30 @@ .roomCard { border-radius: var(--Corner-radius-md); - background-color: var(--UI-Opacity-White-100); - border: 1px solid var(--Base-Border-Subtle); + background-color: var(--Surface-Primary-Default); + border: 1px solid var(--Border-Default); display: grid; overflow: hidden; + color: var(--Text-Default); } .content { display: grid; justify-items: center; - gap: var(--Spacing-x-one-and-half); - padding: var(--Spacing-x2); + gap: var(--Space-x05); + padding: var(--Space-x2); } .innerContent { display: grid; justify-items: center; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .imageContainer { position: relative; height: 200px; } + +.roomSize { + color: var(--Text-Tertiary); +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeekWrapper/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeekWrapper/index.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/scandic-web/components/SidePeeks/SidePeekProvider/index.tsx b/apps/scandic-web/components/SidePeeks/SidePeekProvider/index.tsx index 4f2595b8b..72aad0f8a 100644 --- a/apps/scandic-web/components/SidePeeks/SidePeekProvider/index.tsx +++ b/apps/scandic-web/components/SidePeeks/SidePeekProvider/index.tsx @@ -1,9 +1,7 @@ "use client" -import { useRouter } from "next/navigation" +import { usePathname, useRouter, useSearchParams } from "next/navigation" import { createContext, useEffect, useState } from "react" -import useHash from "@/hooks/useHash" - interface SidepeekProviderProps extends React.PropsWithChildren { onOpen?: (sidePeek: string) => void } @@ -20,16 +18,15 @@ export default function SidePeekProvider({ onOpen, }: SidepeekProviderProps) { const router = useRouter() - const hash = useHash() + const pathname = usePathname() + const searchParams = useSearchParams() const [activeSidePeek, setActiveSidePeek] = useState(null) - useEffect(() => { - if (hash?.startsWith("s-")) { - setActiveSidePeek(hash.slice(2)) - } else { - setActiveSidePeek(null) + const sidePeekParam = searchParams.get("s") + if (sidePeekParam !== activeSidePeek) { + setActiveSidePeek(sidePeekParam) } - }, [hash, setActiveSidePeek]) + }, [searchParams, activeSidePeek]) useEffect(() => { if (activeSidePeek && onOpen) { @@ -39,7 +36,9 @@ export default function SidePeekProvider({ function handleClose(isOpen: boolean) { if (!isOpen) { - router.push(window.location.pathname, { scroll: false }) + const nextSearchParams = new URLSearchParams(searchParams.toString()) + nextSearchParams.delete("s") + router.push(`${pathname}?${nextSearchParams}`, { scroll: false }) setActiveSidePeek(null) } } diff --git a/apps/scandic-web/utils/facilityCards.ts b/apps/scandic-web/utils/facilityCards.ts index 7c7015457..265db8c3a 100644 --- a/apps/scandic-web/utils/facilityCards.ts +++ b/apps/scandic-web/utils/facilityCards.ts @@ -83,7 +83,7 @@ function setCardProps( heading, scriptedTopTitle, secondaryButton: { - href: `#s-${slug}`, + href: `?s=${slug}`, title: buttonText, isExternal: false, scrollOnClick: false,