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

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;
   }

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>