Add MapDialog and ViewOnMapButton components

aelassas · Jan 2, 2025 · a9a773e · a9a773e
1 parent 9cc8ac9
commit a9a773e
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 119 deletions.
diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
@@ -8,15 +8,15 @@ 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;
   }
-
-  div.checkout .map {
-    min-height: 0;
-    height: 340px;
-  }
 }
 
 div.checkout .checkout-form-title {

diff --git a/frontend/src/assets/css/map-dialog.css b/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;
+}
diff --git a/frontend/src/assets/css/search.css b/frontend/src/assets/css/search.css
@@ -18,50 +18,12 @@ div.search div.col-1 .map {
   margin-bottom: 3px;
 }
 
-div.search 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.search div.col-1 .map .view-on-map img {
-  max-width: 20px;
-  max-height: 20px;
-  margin-right: 2px;
-}
-
-div.search div.col-1 .map .view-on-map span {
-  margin-top: 2px;
-}
-
 div.search div.col-1 .filter {
   margin: 5px 0;
   width: 100%;
   max-width: 480px;
 }
 
-.map-dialog {
-  width: 80%;
-  height: 800px;
-}
-
-.map-dialog-content {
-  margin: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 div.search .btn-filters {
   max-width: 480px;
   margin-top: 5px;

diff --git a/frontend/src/assets/css/view-on-map-button.css b/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;
+}
diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx
@@ -67,10 +67,10 @@ const ZoomControlledLayer = ({ zoom, minZoom, children }: ZoomControlledLayerPro
 interface MapProps {
   title?: string
   position?: LatLngExpression
-  initialZoom?: number,
+  initialZoom?: number
   locations?: bookcarsTypes.Location[]
-  parkingSpots?: bookcarsTypes.ParkingSpot[],
-  className?: string,
+  parkingSpots?: bookcarsTypes.ParkingSpot[]
+  className?: string
   children?: ReactNode
   onSelelectPickUpLocation?: (locationId: string) => void
   // onSelelectDropOffLocation?: (locationId: string) => void
@@ -102,7 +102,8 @@ const Map = ({
   // Tile server
   //
 
-  const 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 tileURL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
   // const language = UserService.getLanguage()
   // if (language === 'fr') {
   //   tileURL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'

diff --git a/frontend/src/components/MapDialog.tsx b/frontend/src/components/MapDialog.tsx
@@ -0,0 +1,79 @@
+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 bookcarsTypes from ':bookcars-types'
+import env from '@/config/env.config'
+import Map from '@/components/Map'
+
+import '@/assets/css/map-dialog.css'
+
+interface MapDialogProps {
+  pickupLocation?: bookcarsTypes.Location
+  openMapDialog: boolean
+  onClose: () => void
+}
+
+const MapDialog = ({
+  pickupLocation,
+  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">
+        {pickupLocation && (
+          <Map
+            position={[pickupLocation.latitude || 36.191113, pickupLocation.longitude || 44.009167]}
+            initialZoom={pickupLocation.latitude && pickupLocation.longitude ? 10 : 2.5}
+            locations={[pickupLocation]}
+            parkingSpots={pickupLocation.parkingSpots}
+            className="map"
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MapDialog
diff --git a/frontend/src/components/ViewOnMapButton.tsx b/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
diff --git a/frontend/src/lang/search.ts b/frontend/src/lang/search.ts
@@ -3,17 +3,14 @@ import * as langHelper from '@/common/langHelper'
 
 const strings = new LocalizedStrings({
   fr: {
-    VIEW_ON_MAP: 'Voir sur la carte',
     SHOW_FILTERS: 'Afficher les filtres',
     HILE_FILTERS: 'Masquer les filtres',
   },
   en: {
-    VIEW_ON_MAP: 'View on map',
     SHOW_FILTERS: 'Show Filters',
     HILE_FILTERS: 'Hide Filters',
   },
   es: {
-    VIEW_ON_MAP: 'Ver en el mapa',
     SHOW_FILTERS: 'Mostrar filtros',
     HILE_FILTERS: 'Ocultar filtros',
   },

diff --git a/frontend/src/lang/view-on-map-button.ts b/frontend/src/lang/view-on-map-button.ts
@@ -0,0 +1,17 @@
+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',
+  },
+  es: {
+    VIEW_ON_MAP: 'Ver en el mapa',
+  },
+})
+
+langHelper.setLanguage(strings)
+export { strings }
diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -47,13 +47,15 @@ import Layout from '@/components/Layout'
 import Error from '@/components/Error'
 import DatePicker from '@/components/DatePicker'
 import SocialLogin from '@/components/SocialLogin'
-// import Map from '@/components/Map'
+import Map from '@/components/Map'
 import DriverLicense from '@/components/DriverLicense'
 import Progress from '@/components/Progress'
 import CheckoutStatus from '@/components/CheckoutStatus'
 import NoMatch from './NoMatch'
 import CheckoutOptions from '@/components/CheckoutOptions'
 import Footer from '@/components/Footer'
+import ViewOnMapButton from '@/components/ViewOnMapButton'
+import MapDialog from '@/components/MapDialog'
 
 import '@/assets/css/checkout.css'
 
@@ -123,6 +125,7 @@ const Checkout = () => {
   // const [distance, setDistance] = useState('')
   const [licenseRequired, setLicenseRequired] = useState(false)
   const [license, setLicense] = useState<string | null>(null)
+  const [openMapDialog, setOpenMapDialog] = useState(false)
 
   const _fr = language === 'fr'
   const _locale = _fr ? fr : enUS
@@ -537,16 +540,18 @@ const Checkout = () => {
                 <form onSubmit={handleSubmit}>
                   <div>
 
-                    {/* {((pickupLocation.latitude && pickupLocation.longitude)
+                    {((pickupLocation.latitude && pickupLocation.longitude)
                       || (pickupLocation.parkingSpots && pickupLocation.parkingSpots.length > 0)) && (
                         <Map
                           position={[pickupLocation.latitude || 34.0268755, pickupLocation.longitude || 1.6528399999999976]}
                           initialZoom={pickupLocation.latitude && pickupLocation.longitude ? 10 : 2.5}
                           parkingSpots={pickupLocation.parkingSpots}
                           locations={[pickupLocation]}
                           className="map"
-                        />
-                      )} */}
+                        >
+                          <ViewOnMapButton onClick={() => setOpenMapDialog(true)} />
+                        </Map>
+                      )}
 
                     <CarList
                       cars={[car]}
@@ -953,6 +958,12 @@ const Checkout = () => {
             className="status"
           />
         )}
+
+        <MapDialog
+          pickupLocation={pickupLocation}
+          openMapDialog={openMapDialog}
+          onClose={() => setOpenMapDialog(false)}
+        />
       </Layout>
 
       {loadingPage && !noMatch && <Progress />}