Merged in feat/SW-1455-static-map-on-destination-pages (pull request #1223)

feat(SW-1455): Added static map component with button to open dynamic map

* feat(SW-1455): Added static map component with button to open dynamic map


Approved-by: Fredrik Thorsson

components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css

@@ -33,19 +33,6 @@
   flex-wrap: wrap;
 }
 
-.mapWrapper {
-  width: 100%;
-  height: 200px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mapWrapper img {
-  border-radius: var(--Corner-radius-Large);
-  overflow: hidden;
-}
-
 @media screen and (min-width: 768px) {
   .pageContainer {
     max-width: var(--max-width-page);

components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -3,7 +3,6 @@ import { Suspense } from "react"
 import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import StaticMap from "@/components/Maps/StaticMap"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -13,6 +12,7 @@ import { getIntl } from "@/i18n"
 
 import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
+import StaticMap from "../StaticMap"
 import TopImages from "../TopImages"
 import { mapExperiencesToListData } from "../utils"
 
@@ -78,15 +78,7 @@ export default async function DestinationCityPage() {
             )}
 
             {destination_settings.city && (
-              <div className={styles.mapWrapper}>
+              <StaticMap city={destination_settings.city} />
-                <StaticMap
-                  city={destination_settings.city}
-                  width={320}
-                  height={200}
-                  zoomLevel={10}
-                  altText={intl.formatMessage({ id: "Map of the city center" })}
-                />
-              </div>
             )}
           </SidebarContentWrapper>
         </aside>

components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css

@@ -33,19 +33,6 @@
   flex-wrap: wrap;
 }
 
-.mapWrapper {
-  width: 100%;
-  height: 200px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mapWrapper img {
-  border-radius: var(--Corner-radius-Large);
-  overflow: hidden;
-}
-
 @media screen and (min-width: 768px) {
   .pageContainer {
     max-width: var(--max-width-page);

components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -3,7 +3,6 @@ import { Suspense } from "react"
 import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import StaticMap from "@/components/Maps/StaticMap"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -13,6 +12,7 @@ import { getIntl } from "@/i18n"
 
 import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
+import StaticMap from "../StaticMap"
 import TopImages from "../TopImages"
 import { mapExperiencesToListData } from "../utils"
 
@@ -77,15 +77,7 @@ export default async function DestinationCountryPage() {
               />
             )}
 
-            <div className={styles.mapWrapper}>
+            <StaticMap country={destination_settings.country} />
-              <StaticMap
-                country={destination_settings.country}
-                width={320}
-                height={200}
-                zoomLevel={3}
-                altText={intl.formatMessage({ id: "Map of the country" })}
-              />
-            </div>
           </SidebarContentWrapper>
         </aside>
       </div>

components/ContentType/DestinationPage/StaticMap/index.tsx

@@ -0,0 +1,46 @@
+import { MapIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Button from "@/components/TempDesignSystem/Button"
+import { getIntl } from "@/i18n"
+
+import styles from "./staticMap.module.css"
+
+interface StaticMapProps {
+  country?: string
+  city?: string
+}
+
+export default async function DestinationStaticMap({
+  country,
+  city,
+}: StaticMapProps) {
+  const intl = await getIntl()
+  const altText = city
+    ? intl.formatMessage({ id: "Map of the city" })
+    : intl.formatMessage({ id: "Map of the country" })
+  const zoomLevel = city ? 10 : 3
+
+  return (
+    <div className={styles.mapWrapper}>
+      <StaticMap
+        country={country}
+        city={city}
+        width={320}
+        height={200}
+        zoomLevel={zoomLevel}
+        altText={altText}
+      />
+      <Button
+        intent="inverted"
+        variant="icon"
+        size="small"
+        theme="base"
+        className={styles.button}
+      >
+        {/* TODO: Decide on how the map should load  */}
+        <MapIcon />
+        {intl.formatMessage({ id: "See on map" })}
+      </Button>
+    </div>
+  )
+}

components/ContentType/DestinationPage/StaticMap/staticMap.module.css

@@ -0,0 +1,19 @@
+.mapWrapper {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mapWrapper img {
+  border-radius: var(--Corner-radius-Large);
+  overflow: hidden;
+}
+
+.button {
+  position: absolute;
+  right: var(--Spacing-x2);
+  bottom: var(--Spacing-x2);
+}