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
2025-04-03 06:56:23 +00:00
parent 0215c8428f
commit 83aedd7dbb
6 changed files with 93 additions and 75 deletions
--- 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;
  }
--- 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({
            </Subtitle>
            <div className={styles.addressContainer}>
              <address className={styles.address}>
-                <Caption color="uiTextPlaceholder">{addressStr}</Caption>
-              </address>
-              <address className={styles.addressMobile}>
-                <Caption color="burgundy" type="underline" asChild>
+                {type == HotelCardListingTypeEnum.MapListing ? (
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <p>{addressStr}</p>
+                  </Typography>
+                ) : (
                  <Link
-                    href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
-                    target="_blank"
-                    aria-label={intl.formatMessage({
-                      id: "Driving directions",
-                    })}
-                    title={intl.formatMessage({
-                      id: "Driving directions",
-                    })}
-                    color="burgundy"
                    size="small"
+                    color="burgundy"
+                    variant="underscored"
+                    onClick={handleAddressClick}
+                    href={selectHotelMap(lang)}
+                    keepSearchParams
+                    aria-label={intl.formatMessage({
+                      id: "See on map",
+                    })}
                  >
-                    {addressStr}
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>{addressStr}</p>
+                    </Typography>
                  </Link>
-                </Caption>
+                )}
              </address>
+
              <div>
                <Divider variant="vertical" color="subtle" />
              </div>
--- 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<HTMLDivElement | null>(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 (
    <section className={styles.hotelCards}>
      {hotels?.length
        ? hotels.map((hotel) => (
            <div
              key={hotel.hotel.operaId}
+              ref={
+                isHotelActiveInMapView(hotel.hotel.name) ? activeCardRef : null
+              }
              data-active={
-                hotel.hotel.name === activeHotelCard ? "true" : "false"
+                isHotelActiveInMapView(hotel.hotel.name) ? "true" : "false"
              }
            >
              <HotelCard
                hotelData={hotel}
                isUserLoggedIn={isUserLoggedIn}
                state={
-                  hotel.hotel.name === activeHotelCard ? "active" : "default"
+                  isHotelActiveInMapView(hotel.hotel.name)
+                    ? "active"
+                    : "default"
                }
                type={type}
                bookingCode={bookingCode}
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
@@ -1,7 +1,3 @@
-.hotelListing {
-  display: none;
-}
-
 .hotelListingMobile {
  display: none;
  overflow-x: auto;
@@ -16,16 +12,9 @@
  display: flex;
 }

-@media (min-width: 768px) {
-  .hotelListing {
-    display: block;
-    width: 100%;
-    overflow-y: auto;
-    padding-top: var(--Spacing-x2);
-  }
-
-  .hotelListingMobile,
-  .hotelListingMobile[data-open="true"] {
-    display: none;
-  }
+.hotelListing {
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  padding-top: var(--Spacing-x2);
 }
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -1,5 +1,7 @@
 "use client"

+import { useMediaQuery } from "usehooks-ts"
+
 import { useHotelsMapStore } from "@/stores/hotels-map"

 import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
@@ -12,17 +14,21 @@ import type { HotelListingProps } from "@/types/components/hotelReservation/sele

 export default function HotelListing({ hotels }: HotelListingProps) {
  const { activeHotelPin } = useHotelsMapStore()
+  const isMobile = useMediaQuery("(max-width: 767px)")
  return (
    <>
-      <div className={styles.hotelListing}>
-        <HotelCardListing
-          hotelData={hotels}
-          type={HotelCardListingTypeEnum.MapListing}
-        />
-      </div>
-      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
-        <HotelCardDialogListing hotels={hotels} />
-      </div>
+      {isMobile ? (
+        <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
+          <HotelCardDialogListing hotels={hotels} />
+        </div>
+      ) : (
+        <div className={styles.hotelListing}>
+          <HotelCardListing
+            hotelData={hotels}
+            type={HotelCardListingTypeEnum.MapListing}
+          />
+        </div>
+      )}
    </>
  )
 }
--- 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<HTMLDivElement | null>(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