Add MapDialog, ViewOnMapButton components and map view to checkout page

frontend/src/assets/css/checkout.css

@@ -8,6 +8,11 @@ div.checkout {
   margin: 80px 0 200px 0;
 }
 
+div.checkout .map {
+  min-height: 0;
+  height: 340px;
+}
+
 @media only screen and (width <=960px) {
   div.checkout {
     flex: 0 1 auto;

frontend/src/assets/css/map-dialog.css

@@ -0,0 +1,12 @@
+.map-dialog {
+  width: 90%;
+  height: 90%;
+}
+
+.map-dialog-content {
+  margin: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/assets/css/search.css

@@ -17,31 +17,6 @@ div.properties div.col-1 .map {
   margin-bottom: 3px;
 }
 
-div.properties div.col-1 .map .view-on-map {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10000;
-  background-color: #062638;
-  color: #fff;
-  border: 0;
-  padding: 5px 10px;
-  display: flex;
-  flex-direction: row;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-div.properties div.col-1 .map .view-on-map img {
-  max-width: 20px;
-  max-height: 20px;
-  margin-right: 2px;
-}
-
-div.properties div.col-1 .map .view-on-map span {
-  margin-top: 2px;
-}
-
 div.properties div.col-1 .filter,
 div.properties div.col-1 div.info-box {
   background-color: #fff;

frontend/src/assets/css/view-on-map-button.css

@@ -0,0 +1,25 @@
+.view-on-map {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10000;
+  /* background-color: #062638; */
+  background-color: #1a1a1a;
+  color: #fff;
+  border: 0;
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: row;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.view-on-map img {
+  max-width: 20px;
+  max-height: 20px;
+  margin-right: 2px;
+}
+
+.view-on-map span {
+  margin-top: 2px;
+}

frontend/src/components/Map.tsx

@@ -4,7 +4,7 @@ import L, { LatLngExpression } from 'leaflet'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import * as movininTypes from ':movinin-types'
-import * as UserService from '@/services/UserService'
+// import * as UserService from '@/services/UserService'
 import { strings } from '@/lang/map'
 import * as LocationService from '@/services/LocationService'
 import * as helper from '@/common/helper'
@@ -94,15 +94,13 @@ const Map = ({
   //
   // Tile server
   //
-  const language = UserService.getLanguage()
 
-  let tileURL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
+  const tileURL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+  // const language = UserService.getLanguage()
+  // let tileURL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
   // if (language === 'fr') {
   //   tileURL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
   // }
-  if (language === 'el') {
-    tileURL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-  }
 
   const getLocationMarkers = (): Marker[] => (
     (locations

frontend/src/components/MapDialog.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Box, Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'
+import { Close as CloseIcon } from '@mui/icons-material'
+import * as movininTypes from ':movinin-types'
+import env from '@/config/env.config'
+import Map from '@/components/Map'
+
+import '@/assets/css/map-dialog.css'
+
+interface MapDialogProps {
+  location?: movininTypes.Location
+  openMapDialog: boolean
+  onClose: () => void
+}
+
+const MapDialog = ({
+  location,
+  openMapDialog: openMapDialogProp,
+  onClose,
+}: MapDialogProps) => {
+  const [openMapDialog, setOpenMapDialog] = useState(openMapDialogProp)
+
+  useEffect(() => {
+    setOpenMapDialog(openMapDialogProp)
+  }, [openMapDialogProp])
+
+  const close = useCallback(() => {
+    setOpenMapDialog(false)
+    if (onClose) {
+      onClose()
+    }
+  }, [onClose])
+
+  return (
+    <Dialog
+      fullWidth={env.isMobile}
+      maxWidth={false}
+      open={openMapDialog}
+      onClose={() => {
+        close()
+      }}
+      sx={{
+        '& .MuiDialog-container': {
+          '& .MuiPaper-root': {
+            width: '90%',
+            height: '90%',
+          },
+        },
+      }}
+    >
+      <DialogTitle>
+        <Box display="flex" justifyContent="flex-end">
+          <Box>
+            <IconButton
+              onClick={() => {
+                close()
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Box>
+      </DialogTitle>
+      <DialogContent className="map-dialog-content">
+        {location && (
+          <Map
+            position={[location.latitude || 36.966428, location.longitude || -95.844032]}
+            initialZoom={location.latitude && location.longitude ? 10 : 2.5}
+            locations={[location]}
+            className="map"
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MapDialog

frontend/src/components/ViewOnMapButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { strings } from '@/lang/view-on-map-button'
+
+import ViewOnMap from '@/assets/img/view-on-map.png'
+
+import '@/assets/css/view-on-map-button.css'
+
+interface ViewOnMapButtonProps {
+  onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const ViewOnMapButton = ({ onClick }: ViewOnMapButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="view-on-map"
+  >
+    <img alt="View On Map" src={ViewOnMap} />
+    <span>{strings.VIEW_ON_MAP}</span>
+  </button>
+)
+
+export default ViewOnMapButton

frontend/src/lang/search.ts

@@ -3,10 +3,8 @@ import * as langHelper from '@/common/langHelper'
 
 const strings = new LocalizedStrings({
   fr: {
-    VIEW_ON_MAP: 'Voir sur la carte',
   },
   en: {
-    VIEW_ON_MAP: 'View on map',
   },
 })
 

frontend/src/lang/view-on-map-button.ts

@@ -0,0 +1,14 @@
+import LocalizedStrings from 'localized-strings'
+import * as langHelper from '@/common/langHelper'
+
+const strings = new LocalizedStrings({
+  fr: {
+    VIEW_ON_MAP: 'Voir sur la carte',
+  },
+  en: {
+    VIEW_ON_MAP: 'View on map',
+  },
+})
+
+langHelper.setLanguage(strings)
+export { strings }

frontend/src/pages/Checkout.tsx

@@ -47,6 +47,9 @@ import Info from './Info'
 import SocialLogin from '@/components/SocialLogin'
 import CheckoutOptions from '@/components/CheckoutOptions'
 import Footer from '@/components/Footer'
+import Map from '@/components/Map'
+import ViewOnMapButton from '@/components/ViewOnMapButton'
+import MapDialog from '@/components/MapDialog'
 
 import '@/assets/css/checkout.css'
 
@@ -94,6 +97,7 @@ const Checkout = () => {
   const [clientSecret, setClientSecret] = useState<string | null>(null)
   const [bookingId, setBookingId] = useState<string>()
   const [sessionId, setSessionId] = useState<string>()
+  const [openMapDialog, setOpenMapDialog] = useState(false)
 
   const _fr = language === 'fr'
   const _locale = _fr ? fr : enUS
@@ -402,6 +406,17 @@ const Checkout = () => {
               <form onSubmit={handleSubmit}>
                 <div>
 
+                  {(location.latitude && location.longitude) && (
+                    <Map
+                      position={[location.latitude || 36.966428, location.longitude || -95.844032]}
+                      initialZoom={location.latitude && location.longitude ? 10 : 2.5}
+                      locations={[location]}
+                      className="map"
+                    >
+                      <ViewOnMapButton onClick={() => setOpenMapDialog(true)} />
+                    </Map>
+                  )}
+
                   <PropertyList
                     properties={[property]}
                     hideActions
@@ -641,6 +656,12 @@ const Checkout = () => {
       )}
       {noMatch && <NoMatch hideHeader />}
       {success && <Info message={payLater ? strings.PAY_LATER_SUCCESS : strings.SUCCESS} />}
+
+      <MapDialog
+        location={location}
+        openMapDialog={openMapDialog}
+        onClose={() => setOpenMapDialog(false)}
+      />
     </Layout>
   )
 }

frontend/src/pages/Search.tsx

@@ -1,12 +1,8 @@
 import React, { useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Box, Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'
-import { Close as CloseIcon } from '@mui/icons-material'
 import * as movininTypes from ':movinin-types'
 import * as movininHelper from ':movinin-helper'
-import env from '@/config/env.config'
 import * as helper from '@/common/helper'
-import { strings } from '@/lang/search'
 import * as LocationService from '@/services/LocationService'
 import * as AgencyService from '@/services/AgencyService'
 import Layout from '@/components/Layout'
@@ -17,8 +13,8 @@ import RentalTermFilter from '@/components/RentalTermFilter'
 import PropertyList from '@/components/PropertyList'
 import PropertyTypeFilter from '@/components/PropertyTypeFilter'
 import Map from '@/components/Map'
-
-import ViewOnMap from '@/assets/img/view-on-map.png'
+import ViewOnMapButton from '@/components/ViewOnMapButton'
+import MapDialog from '@/components/MapDialog'
 
 import '@/assets/css/search.css'
 
@@ -112,16 +108,7 @@ const Properties = () => {
                     locations={[location]}
                     className="map"
                   >
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setOpenMapDialog(true)
-                      }}
-                      className="view-on-map"
-                    >
-                      <img alt="View On Map" src={ViewOnMap} />
-                      <span>{strings.VIEW_ON_MAP}</span>
-                    </button>
+                    <ViewOnMapButton onClick={() => setOpenMapDialog(true)} />
                   </Map>
                 )}
                 <PropertyFilter
@@ -162,55 +149,11 @@ const Properties = () => {
         </div>
       )}
 
-      <Dialog
-        fullWidth={env.isMobile}
-        maxWidth={false}
-        open={openMapDialog}
-        onClose={() => {
-          setOpenMapDialog(false)
-        }}
-        sx={{
-          '& .MuiDialog-container': {
-            '& .MuiPaper-root': {
-              width: '80%',
-              height: '800px',
-            },
-          },
-        }}
-      >
-        <DialogTitle>
-          <Box display="flex" justifyContent="flex-end">
-            <Box>
-              <IconButton
-                onClick={() => {
-                  setOpenMapDialog(false)
-                }}
-              >
-                <CloseIcon />
-              </IconButton>
-            </Box>
-          </Box>
-        </DialogTitle>
-        <DialogContent className="map-dialog-content">
-          {location && (
-            <Map
-              position={[location.latitude || 36.966428, location.longitude || -95.844032]}
-              initialZoom={location.latitude && location.longitude ? 10 : 2.5}
-              locations={[location]}
-              className="map"
-            >
-              <button
-                type="button"
-                onClick={() => { }}
-                className="view-on-map"
-              >
-                <img alt="View On Map" src={ViewOnMap} />
-                <span>{strings.VIEW_ON_MAP}</span>
-              </button>
-            </Map>
-          )}
-        </DialogContent>
-      </Dialog>
+      <MapDialog
+        location={location}
+        openMapDialog={openMapDialog}
+        onClose={() => setOpenMapDialog(false)}
+      />
 
       {noMatch && <NoMatch hideHeader />}
     </Layout>