From 83aedd7dbb7c681bcb204606ea712c12178799a0 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 3 Apr 2025 06:56:23 +0000 Subject: [PATCH] Merged in fix/SW-1491-SW-1500-link-in-hotel-card-to-map (pull request #1707) fix(SW-1491-SW-1500): address on hotel card should go to map, remove link on maplisting view * fix(SW-1491-SW-1500): address on hotel card should go to map, remove link on maplisting view * fix(SW-1491-SW-1500): fix comment * fix(SW-1491-SW-1500): add underscore Approved-by: Niclas Edenvin --- .../HotelCard/hotelCard.module.css | 15 +----- .../HotelReservation/HotelCard/index.tsx | 48 ++++++++++++------- .../HotelCardListing/index.tsx | 29 +++++++++-- .../HotelListing/hotelListing.module.css | 21 ++------ .../SelectHotelMap/HotelListing/index.tsx | 24 ++++++---- .../SelectHotelMapContent/index.tsx | 31 ++++++------ 6 files changed, 93 insertions(+), 75 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css b/apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css index 4d0923131..695bab45a 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css +++ b/apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css @@ -54,13 +54,8 @@ } .address { - display: none; - font-style: normal; -} - -.addressMobile { - display: block; font-style: normal; + color: var(--Text-Tertiary); } .facilities { @@ -149,14 +144,6 @@ width: 100%; } - .pageListing .addressMobile { - display: none; - } - - .pageListing .address { - display: inline; - } - .pageListing .prices { width: 260px; } diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx index ddf9cd558..da4922df1 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx @@ -1,12 +1,14 @@ "use client" import { useParams } from "next/dist/client/components/navigation" +import { useRouter, useSearchParams } from "next/navigation" import { memo, useCallback } from "react" import { useIntl } from "react-intl" import { HotelLogo, MaterialIcon } from "@scandic-hotels/design-system/Icons" +import { Typography } from "@scandic-hotels/design-system/Typography" -import { selectRate } from "@/constants/routes/hotelReservation" +import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation" import { useHotelsMapStore } from "@/stores/hotels-map" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" @@ -46,6 +48,8 @@ function HotelCard({ bookingCode = "", }: HotelCardProps) { const params = useParams() + const searchParams = useSearchParams() + const lang = params.lang as Lang const intl = useIntl() const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore() @@ -60,12 +64,19 @@ function HotelCard({ }, [setActiveHotelPin, setActiveHotelCard]) const amenities = hotel.detailedFacilities.slice(0, 5) - + const router = useRouter() const classNames = hotelCardVariants({ type, state, }) + const handleAddressClick = (event: React.MouseEvent) => { + event.preventDefault() + setActiveHotelPin(hotel.name) + setActiveHotelCard(hotel.name) + router.push(`${selectHotelMap(lang)}?${searchParams.toString()}`) + } + const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}` const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || []) const fullPrice = @@ -101,26 +112,29 @@ function HotelCard({
- {addressStr} -
-
- + {type == HotelCardListingTypeEnum.MapListing ? ( + +

{addressStr}

+ + ) : ( - {addressStr} + +

{addressStr}

+ - + )}
+
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx index 93af1cbed..b80e8d444 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx @@ -1,7 +1,7 @@ "use client" import { useSearchParams } from "next/navigation" import { useSession } from "next-auth/react" -import { useEffect, useMemo } from "react" +import { useEffect, useMemo, useRef } from "react" import { useIntl } from "react-intl" import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter" @@ -39,6 +39,7 @@ export default function HotelCardListing({ const intl = useIntl() const { activeHotelCard } = useHotelsMapStore() const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 }) + const activeCardRef = useRef(null) const sortBy = searchParams.get("sort") ?? DEFAULT_SORT @@ -99,25 +100,47 @@ export default function HotelCardListing({ isSpecialRate, ]) + useEffect(() => { + if (activeCardRef.current && type === HotelCardListingTypeEnum.MapListing) { + activeCardRef.current.scrollIntoView({ + behavior: "smooth", + block: "nearest", + inline: "center", + }) + } + }, [activeHotelCard, type]) + useEffect(() => { setResultCount(hotels.length) }, [hotels, setResultCount]) + function isHotelActiveInMapView(hotelName: string): boolean { + return ( + hotelName === activeHotelCard && + type === HotelCardListingTypeEnum.MapListing + ) + } + return (
{hotels?.length ? hotels.map((hotel) => (
-
- -
-
- -
+ {isMobile ? ( +
+ +
+ ) : ( +
+ +
+ )} ) } diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index a51417ccc..86b3fed0c 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -1,6 +1,6 @@ "use client" import { useMap } from "@vis.gl/react-google-maps" -import { useCallback, useEffect, useMemo, useRef, useState } from "react" +import { useCallback, useMemo, useRef, useState } from "react" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" @@ -52,7 +52,7 @@ export default function SelectHotelContent({ const listingContainerRef = useRef(null) const activeFilters = useHotelFilterStore((state) => state.activeFilters) - const { activeHotelCard, activeHotelPin } = useHotelsMapStore() + const { activeHotelPin } = useHotelsMapStore() const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490, @@ -63,23 +63,22 @@ export default function SelectHotelContent({ (state) => state.activeCodeFilter ) - const coordinates = useMemo( - () => - isAboveMobile - ? cityCoordinates - : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }, - [isAboveMobile, cityCoordinates] - ) + const coordinates = useMemo(() => { + if (activeHotelPin) { + const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotelPin) - useEffect(() => { - if (listingContainerRef.current) { - const activeElement = - listingContainerRef.current.querySelector(`[data-active="true"]`) - if (activeElement) { - activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" }) + if (hotel && hotel.hotel.location) { + return { + lat: hotel.hotel.location.latitude, + lng: hotel.hotel.location.longitude, + } } } - }, [activeHotelCard, activeHotelPin]) + + return isAboveMobile + ? cityCoordinates + : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 } + }, [activeHotelPin, hotels, isAboveMobile, cityCoordinates]) const filteredHotelPins = useMemo(() => { const updatedHotelsList = bookingCode