From 3ad8bf0197fce7b5ef9aacdffb642e8dad2f6d21 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 29 Oct 2024 12:07:20 +0100
Subject: [PATCH] Added See on map button

---
 .../(standard)/select-hotel/page.module.css   | 13 +++++
 .../(standard)/select-hotel/page.tsx          | 55 ++++++++++++-------
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
index acc942e21..dfb4c68bd 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
@@ -19,7 +19,20 @@
   padding: var(--Spacing-x2) var(--Spacing-x0);
 }
 
+.mapContainer {
+  display: none;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
 @media (min-width: 768px) {
+  .mapContainer {
+    display: block;
+  }
   .main {
     flex-direction: row;
   }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 3ebe54958..cec055445 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -13,8 +13,9 @@ import {
   generateChildrenString,
   getHotelReservationQueryParams,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { ChevronRightIcon } from "@/components/Icons"
+import { ChevronRightIcon, MapIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
+import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
@@ -62,25 +63,39 @@ export default async function SelectHotelPage({
   return (
     <main className={styles.main}>
       <section className={styles.section}>
-        <Link href={selectHotelMap[params.lang]} keepSearchParams>
-          <StaticMap
-            city={searchParams.city}
-            width={340}
-            height={180}
-            zoomLevel={11}
-            mapType="roadmap"
-            altText={`Map of ${searchParams.city} city center`}
-          />
-        </Link>
-        <Link
-          className={styles.link}
-          color="burgundy"
-          href={selectHotelMap[params.lang]}
-          keepSearchParams
-        >
-          {intl.formatMessage({ id: "Show map" })}
-          <ChevronRightIcon color="burgundy" />
-        </Link>
+        <div className={styles.mapContainer}>
+          <Link href={selectHotelMap[params.lang]} keepSearchParams>
+            <StaticMap
+              city={searchParams.city}
+              width={340}
+              height={180}
+              zoomLevel={11}
+              mapType="roadmap"
+              altText={`Map of ${searchParams.city} city center`}
+            />
+          </Link>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={selectHotelMap[params.lang]}
+            keepSearchParams
+          >
+            {intl.formatMessage({ id: "Show map" })}
+            <ChevronRightIcon color="burgundy" />
+          </Link>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button asChild variant="icon" intent="secondary" size="small">
+            <Link
+              prefetch={false}
+              color="none"
+              href={selectHotelMap[params.lang]}
+            >
+              <MapIcon color="burgundy" />
+              {intl.formatMessage({ id: "See on map" })}
+            </Link>
+          </Button>
+        </div>
         <HotelFilter filters={filterList} />
       </section>
       <HotelCardListing hotelData={hotels} />