Merged in feat/SW-2038-static-map-button (pull request #2715)

feat(SW-2038): refactor and create wrapper for static map and button

* feat(SW-2038): refactor and create wrapper for static map and button

* feature: use button from design-system over creating a new one

* remove unused fragment

* fix(SW-2038): add removed css

* fix(SW-2038): update fake button component

* fix(SW-2038): move FakeButton to design system


Approved-by: Erik Tiekstra
Approved-by: Joakim Jäderberg

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,7 +1,5 @@
 import BookingCodeFilter from "@scandic-hotels/booking-flow/BookingCodeFilter"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
@@ -10,8 +8,8 @@ import HotelCount from "@/components/HotelReservation/SelectHotel/HotelCount"
 import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
 import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
 import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
+import { MapWithButtonWrapper } from "@/components/Maps/MapWithButtonWrapper"
 import StaticMap from "@/components/Maps/StaticMap"
-import { getIntl } from "@/i18n"
 
 import { getFiltersFromHotels, type HotelResponse } from "./helpers"
 
@@ -38,8 +36,6 @@ export default async function SelectHotel({
   mapHref,
   title,
 }: SelectHotelProps) {
-  const intl = await getIntl()
-
   const isAllUnavailable = hotels.every(
     (hotel) => hotel.availability.status !== "Available"
   )
@@ -63,7 +59,9 @@ export default async function SelectHotel({
         <div className={styles.headerContent}>
           <div className={styles.title}>
             <div className={styles.cityInformation}>
-              <Subtitle>{title}</Subtitle>
+              <Typography variant="Title/Subtitle/lg">
+                <p>{title}</p>
+              </Typography>
               <HotelCount />
             </div>
             <div className={styles.sorter}>
@@ -78,7 +76,7 @@ export default async function SelectHotel({
         <div className={styles.sideBar}>
           {hotels.length ? (
             <Link className={styles.link} href={mapHref} keepSearchParams>
-              <div className={styles.mapContainer}>
+              <MapWithButtonWrapper>
                 <StaticMap
                   city={city.name}
                   country={isCityWithCountry(city) ? city.country : undefined}
@@ -88,15 +86,7 @@ export default async function SelectHotel({
                   mapType="roadmap"
                   altText={`Map of ${city.name} city center`}
                 />
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <span className={styles.mapButton}>
-                    <MaterialIcon icon="map" color="CurrentColor" size={20} />
-                    {intl.formatMessage({
-                      defaultMessage: "See on map",
-                    })}
-                  </span>
-                </Typography>
-              </div>
+              </MapWithButtonWrapper>
             </Link>
           ) : (
             <div className={styles.mapContainer}>