Merged in feat/SW-344-hotel-map-pins-mobile (pull request #880)

Feat/SW-344 hotel map pins mobile

Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -70,6 +70,10 @@
   justify-content: center;
 }
 
+.address {
+  display: none;
+}
+
 @media screen and (min-width: 1367px) {
   .card.pageListing {
     grid-template-areas:
@@ -118,4 +122,12 @@
   .pageListing .button {
     width: 160px;
   }
+
+  .address {
+    display: block;
+  }
+
+  .addressMobile {
+    display: none;
+  }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -1,6 +1,10 @@
 "use client"
+import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
@@ -26,6 +30,8 @@ export default function HotelCard({
   state = "default",
   onHotelCardHover,
 }: HotelCardProps) {
+  const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -74,9 +80,19 @@ export default function HotelCard({
         <Title as="h4" textTransform="capitalize">
           {hotelData.name}
         </Title>
-        <Footnote color="uiTextMediumContrast">
+        <Footnote color="uiTextMediumContrast" className={styles.address}>
           {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
+        <Link
+          className={styles.addressMobile}
+          href={`${selectHotelMap[lang]}?selectedHotel=${hotelData.name}`}
+          keepSearchParams
+          variant="underscored"
+        >
+          <Footnote color="burgundy">
+            {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
+          </Footnote>
+        </Link>
         <Footnote color="uiTextMediumContrast">
           {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>