From b40f3d3373b107bc39ef204aa9594ce09b4691f3 Mon Sep 17 00:00:00 2001
From: Lahuen Garcia <lahuen.garcia@rappi.com>
Date: Thu, 26 Sep 2024 13:06:13 -0300
Subject: [PATCH 1/3] feat(component): update map settings display

Pin is now like the Map page and, when clicked, displays the popup

fix #3856
---
 .../src/MapWithPin/MapPin.client.tsx          |  49 +++---
 packages/components/src/MapWithPin/MapPin.css |   7 +
 .../src/MapWithPin/MapPin.stories.tsx         |   3 +-
 .../src/MapWithPin/MapWithPin.client.tsx      | 142 ++++++++++--------
 .../src/MapWithPin/MapWithPin.stories.tsx     |   7 +-
 .../Maps/Content/MapView/Popup.client.tsx     |  13 +-
 .../UserSettings/SettingsPageMapPin.test.tsx  |  15 ++
 src/pages/UserSettings/SettingsPageMapPin.tsx |  49 ++++--
 src/stores/Maps/maps.store.ts                 |   2 +-
 9 files changed, 187 insertions(+), 100 deletions(-)
 create mode 100644 packages/components/src/MapWithPin/MapPin.css

diff --git a/packages/components/src/MapWithPin/MapPin.client.tsx b/packages/components/src/MapWithPin/MapPin.client.tsx
index 6e75ab7306..cfe6938be1 100644
--- a/packages/components/src/MapWithPin/MapPin.client.tsx
+++ b/packages/components/src/MapWithPin/MapPin.client.tsx
@@ -1,9 +1,13 @@
-import * as React from 'react'
+import { useRef, useState } from 'react'
 import { Marker } from 'react-leaflet'
 import L from 'leaflet'
 
 import customMarkerIcon from '../../assets/icons/map-marker.png'
 
+import type { DivIcon } from 'leaflet'
+
+import './MapPin.css'
+
 const customMarker = L.icon({
   iconUrl: customMarkerIcon,
   iconSize: [20, 28],
@@ -15,31 +19,40 @@ export interface IProps {
     lat: number
     lng: number
   }
-  draggable: boolean
-  ondragend(lng: number): void
+  onDrag(lng: number): void
+  markerIcon?: DivIcon
+  onClick?: () => void
 }
 
 export const MapPin = (props: IProps) => {
-  const markerRef = React.useRef(null)
+  const markerRef = useRef(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const handleDrag = () => {
+    const marker: any = markerRef.current
+
+    if (!marker) {
+      return
+    }
+
+    const markerLatLng = marker.leafletElement.getLatLng()
+    if (props.onDrag) {
+      props.onDrag(markerLatLng)
+    }
+  }
 
   return (
     <Marker
-      draggable={props.draggable}
-      ondragend={() => {
-        const marker: any = markerRef.current
-
-        if (!marker) {
-          return null
-        }
-
-        const markerLatLng = marker.leafletElement.getLatLng()
-        if (props.ondragend) {
-          props.ondragend(markerLatLng)
-        }
-      }}
+      className={`map-pin ${isDragging ? 'dragging' : ''}`}
+      draggable
+      onDrag={handleDrag}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
-      icon={customMarker}
+      icon={props.markerIcon || customMarker}
+      onMouseDown={() => setIsDragging(true)}
+      onMouseUp={() => setIsDragging(false)}
+      onMouseLeave={() => setIsDragging(false)}
+      onclick={props.onClick}
     />
   )
 }
diff --git a/packages/components/src/MapWithPin/MapPin.css b/packages/components/src/MapWithPin/MapPin.css
new file mode 100644
index 0000000000..077f5c4841
--- /dev/null
+++ b/packages/components/src/MapWithPin/MapPin.css
@@ -0,0 +1,7 @@
+.leaflet-marker-icon:hover {
+  cursor: grab !important;
+}
+
+.leaflet-drag-target {
+  cursor: grabbing;
+}
diff --git a/packages/components/src/MapWithPin/MapPin.stories.tsx b/packages/components/src/MapWithPin/MapPin.stories.tsx
index b2857d3af6..83c39c57ee 100644
--- a/packages/components/src/MapWithPin/MapPin.stories.tsx
+++ b/packages/components/src/MapWithPin/MapPin.stories.tsx
@@ -12,8 +12,7 @@ export const Default: StoryFn<typeof MapPin> = () => {
   return (
     <MapPin
       position={position}
-      draggable={true}
-      ondragend={(lng: number) => {
+      onDrag={(lng: number) => {
         position.lng = lng
       }}
     />
diff --git a/packages/components/src/MapWithPin/MapWithPin.client.tsx b/packages/components/src/MapWithPin/MapWithPin.client.tsx
index b7973fad0c..aedfce8bea 100644
--- a/packages/components/src/MapWithPin/MapWithPin.client.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.client.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { ZoomControl } from 'react-leaflet'
 import { Alert, Box, Flex, Text } from 'theme-ui'
 
@@ -7,33 +7,38 @@ import { Map } from '../Map/Map.client'
 import { OsmGeocoding } from '../OsmGeocoding/OsmGeocoding'
 import { MapPin } from './MapPin.client'
 
-import type { LeafletMouseEvent } from 'leaflet'
+import type { DivIcon, LeafletMouseEvent } from 'leaflet'
+import type { Map as MapType } from 'react-leaflet'
 import type { Result } from '../OsmGeocoding/types'
 
 import 'leaflet/dist/leaflet.css'
 
 const useUserLocation = 'Use my current location'
 const mapInstructions =
-  "You can click on the map, or drag the marker to adjust it's position."
+  "To move your pin, grab it to move it or double click where you want it to go. Tap on your pin to see how it'll look on the map."
 
 export interface Props {
+  mapRef: React.RefObject<MapType>
   position: {
     lat: number
     lng: number
   }
-  draggable: boolean
+  markerIcon?: DivIcon
   updatePosition?: any
   center?: any
   zoom?: number
   hasUserLocation?: boolean
+  onClickMapPin?: () => void
+  popup?: React.ReactNode
 }
 
 export const MapWithPin = (props: Props) => {
-  const [zoom, setZoom] = React.useState(props.zoom || 1)
-  const [center, setCenter] = React.useState(
+  const [dragging, setDragging] = useState<boolean>(false)
+  const [zoom, setZoom] = useState(props.zoom || 1)
+  const [center, setCenter] = useState(
     props.center || [props.position.lat, props.position.lng],
   )
-  const { draggable, position } = props
+  const { mapRef, position, markerIcon, onClickMapPin, popup } = props
 
   const hasUserLocation = props.hasUserLocation || false
   const onPositionChanged =
@@ -58,22 +63,20 @@ export const MapWithPin = (props: Props) => {
     )
   }
 
-  const onClick = (evt: LeafletMouseEvent) => {
+  const onDblClick = (evt: LeafletMouseEvent) => {
     onPositionChanged({ ...evt.latlng })
   }
 
   return (
     <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-      {draggable && (
-        <Alert
-          variant="info"
-          sx={{
-            marginTop: 2,
-          }}
-        >
-          <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
-        </Alert>
-      )}
+      <Alert
+        variant="info"
+        sx={{
+          marginTop: 2,
+        }}
+      >
+        <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
+      </Alert>
       <div
         style={{
           position: 'relative',
@@ -84,66 +87,77 @@ export const MapWithPin = (props: Props) => {
         <Box
           sx={{
             position: 'absolute',
-            top: 0,
-            left: 0,
-            padding: 2,
+            width: '100%',
             zIndex: 2,
+            padding: 2,
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
-          {draggable && (
-            <Flex style={{ width: '280px' }}>
-              <OsmGeocoding
-                callback={(data: Result) => {
-                  if (data.lat && data.lon) {
-                    onPositionChanged({
-                      lat: data.lat,
-                      lng: data.lon,
-                    })
-                    setCenter([data.lat, data.lon])
-                    setZoom(15)
-                  }
+          <Flex style={{ width: '280px' }}>
+            <OsmGeocoding
+              callback={(data: Result) => {
+                if (data.lat && data.lon) {
+                  onPositionChanged({
+                    lat: data.lat,
+                    lng: data.lon,
+                  })
+                  setCenter([data.lat, data.lon])
+                  setZoom(15)
+                }
+              }}
+              acceptLanguage="en"
+            />
+            {hasUserLocation && (
+              <Button
+                type="button"
+                mx={2}
+                onClick={(evt) => {
+                  evt.preventDefault()
+                  setLocationToNavigatorLocation()
                 }}
-                countrycodes=""
-                acceptLanguage="en"
-              />
-              {hasUserLocation && (
-                <Button
-                  type="button"
-                  mx={2}
-                  onClick={(evt) => {
-                    evt.preventDefault()
-                    setLocationToNavigatorLocation()
-                  }}
-                >
-                  {useUserLocation}
-                </Button>
-              )}
-            </Flex>
-          )}
+              >
+                {useUserLocation}
+              </Button>
+            )}
+          </Flex>
         </Box>
         <Map
+          ref={mapRef}
+          className="markercluster-map"
           center={center}
           zoom={zoom}
           zoomControl={false}
           setZoom={setZoom}
-          onclick={onClick}
+          ondblclick={onDblClick}
+          doubleClickZoom={false}
           style={{
-            height: '300px',
+            height: '500px',
             zIndex: 1,
           }}
+          ondragstart={() => setDragging(true)}
+          ondragend={() => setDragging(false)}
         >
-          <ZoomControl position="topright" />
-          <MapPin
-            position={position}
-            draggable={draggable}
-            ondragend={(evt: any) => {
-              if (evt.lat && evt.lng)
-                onPositionChanged({
-                  lat: evt.lat,
-                  lng: evt.lng,
-                })
-            }}
-          />
+          <ZoomControl position="bottomleft" />
+          {!dragging && (
+            <>
+              {popup}
+              <MapPin
+                position={position}
+                markerIcon={markerIcon}
+                onClick={onClickMapPin}
+                onDrag={(evt: any) => {
+                  if (evt.lat && evt.lng)
+                    onPositionChanged({
+                      lat: evt.lat,
+                      lng: evt.lng,
+                    })
+                }}
+              />
+            </>
+          )}
         </Map>
       </div>
     </Flex>
diff --git a/packages/components/src/MapWithPin/MapWithPin.stories.tsx b/packages/components/src/MapWithPin/MapWithPin.stories.tsx
index f2376c5512..e6526eb57f 100644
--- a/packages/components/src/MapWithPin/MapWithPin.stories.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.stories.tsx
@@ -1,6 +1,9 @@
+import { useRef } from 'react'
+
 import { MapWithPin } from './MapWithPin.client'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import type { Map } from 'react-leaflet'
 
 export default {
   title: 'Map/MapWithPin',
@@ -9,10 +12,12 @@ export default {
 
 export const Default: StoryFn<typeof MapWithPin> = () => {
   const position = { lat: 0, lng: 0 }
+  const newMapRef = useRef<Map>(null)
+
   return (
     <MapWithPin
+      mapRef={newMapRef}
       position={position}
-      draggable={true}
       updatePosition={(_position: { lat: number; lng: number }) => {
         position.lat = _position.lat
         position.lng = _position.lng
diff --git a/src/pages/Maps/Content/MapView/Popup.client.tsx b/src/pages/Maps/Content/MapView/Popup.client.tsx
index 2f9aa25aaa..e51fb51c00 100644
--- a/src/pages/Maps/Content/MapView/Popup.client.tsx
+++ b/src/pages/Maps/Content/MapView/Popup.client.tsx
@@ -5,7 +5,7 @@ import { MapMemberCard, PinProfile } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 
-import type { IMapPin, IMapPinWithDetail } from 'oa-shared'
+import type { ILatLng, IMapPin, IMapPinWithDetail } from 'oa-shared'
 import type { Map } from 'react-leaflet'
 
 import './popup.css'
@@ -15,12 +15,13 @@ interface IProps {
   mapRef: React.RefObject<Map>
   newMap?: boolean
   onClose?: () => void
+  customPosition?: ILatLng
 }
 
 export const Popup = (props: IProps) => {
   const leafletRef = useRef<LeafletPopup>(null)
   const activePin = props.activePin as IMapPinWithDetail
-  const { mapRef, newMap, onClose } = props
+  const { mapRef, newMap, onClose, customPosition } = props
 
   useEffect(() => {
     openPopup()
@@ -47,8 +48,14 @@ export const Popup = (props: IProps) => {
     activePin.location && (
       <LeafletPopup
         ref={leafletRef}
-        position={[activePin.location.lat, activePin.location.lng]}
+        position={
+          customPosition
+            ? customPosition
+            : [activePin.location.lat, activePin.location.lng]
+        }
         offset={new L.Point(2, -10)}
+        closeOnClick={false}
+        closeOnEscapeKey={false}
         closeButton={false}
         className={activePin !== undefined ? '' : 'closed'}
         minWidth={230}
diff --git a/src/pages/UserSettings/SettingsPageMapPin.test.tsx b/src/pages/UserSettings/SettingsPageMapPin.test.tsx
index d24c3b4309..a83779f321 100644
--- a/src/pages/UserSettings/SettingsPageMapPin.test.tsx
+++ b/src/pages/UserSettings/SettingsPageMapPin.test.tsx
@@ -24,6 +24,21 @@ vi.mock('src/common/hooks/useCommonStores', () => ({
       },
       mapsStore: {
         getPin: vi.fn().mockResolvedValue(mockPin),
+        getPinDetail: vi.fn().mockResolvedValue(mockPin),
+      },
+      themeStore: {
+        currentTheme: {
+          id: 'string',
+          siteName: 'string',
+          logo: 'string',
+          badge: 'string',
+          avatar: 'string',
+          howtoHeading: 'string',
+          academyResource: 'string',
+          styles: {
+            communityProgramURL: '',
+          },
+        },
       },
     },
   }),
diff --git a/src/pages/UserSettings/SettingsPageMapPin.tsx b/src/pages/UserSettings/SettingsPageMapPin.tsx
index a62d00e7f1..fea78935f0 100644
--- a/src/pages/UserSettings/SettingsPageMapPin.tsx
+++ b/src/pages/UserSettings/SettingsPageMapPin.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { toJS } from 'mobx'
 import {
@@ -22,14 +22,18 @@ import { randomIntFromInterval } from 'src/utils/helpers'
 import { required } from 'src/utils/validators'
 import { Alert, Box, Flex, Heading, Text } from 'theme-ui'
 
+import { Popup } from '../Maps/Content/MapView/Popup.client'
+import { createMarkerIcon } from '../Maps/Content/MapView/Sprites'
 import { SettingsFormNotifications } from './content/SettingsFormNotifications'
 import { MAX_PIN_LENGTH } from './constants'
 
-import type { ILocation, IMapPin, IUserDB } from 'oa-shared'
+import type { DivIcon } from 'leaflet'
+import type { ILatLng, ILocation, IMapPinWithDetail, IUserDB } from 'oa-shared'
+import type { Map } from 'react-leaflet'
 import type { IFormNotification } from './content/SettingsFormNotifications'
 
 interface IPinProps {
-  mapPin: IMapPin | undefined
+  mapPin: IMapPinWithDetail | undefined
 }
 
 interface ILocationProps {
@@ -148,25 +152,34 @@ export const SettingsPageMapPin = () => {
   const communityProgramUrl =
     import.meta.env.VITE_COMMUNITY_PROGRAM_URL ||
     process.env.VITE_COMMUNITY_PROGRAM_URL
-  const [mapPin, setMapPin] = useState<IMapPin>()
+  const [mapPin, setMapPin] = useState<IMapPinWithDetail>()
+  const [markerIcon, setMarkerIcon] = useState<DivIcon>()
+  const [showPopup, setShowPopup] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [notification, setNotification] = useState<
     IFormNotification | undefined
   >(undefined)
 
+  const newMapRef = React.useRef<Map>(null)
+
   const { mapsStore, userStore } = useCommonStores().stores
   const user = userStore.activeUser
+  const isMember = user?.profileType === ProfileTypeList.MEMBER
   const { addPinTitle, yourPinTitle } = headings.map
-
   const formId = 'MapSection'
-  const isMember = user?.profileType === ProfileTypeList.MEMBER
 
   useEffect(() => {
     const init = async () => {
       if (!user) return
 
-      const pin = (await mapsStore.getPin(user.userName)) || null
-      setMapPin(pin)
+      const pin = await mapsStore.getPin(user.userName)
+      if (!pin) return
+
+      const pinDetail = await mapsStore.getPinDetail(pin)
+      if (!pinDetail) return
+
+      setMapPin(pinDetail)
+      setMarkerIcon(createMarkerIcon(pin))
       setIsLoading(false)
     }
 
@@ -226,7 +239,7 @@ export const SettingsPageMapPin = () => {
     >
       <Flex sx={{ flexDirection: 'column', gap: 1 }}>
         <Heading as="h2" id="your-map-pin">
-          {mapPin ? addPinTitle : yourPinTitle}
+          {mapPin ? yourPinTitle : addPinTitle}
         </Heading>
         {isMember && (
           <Text
@@ -289,11 +302,25 @@ export const SettingsPageMapPin = () => {
 
                   return (
                     <MapWithPin
+                      mapRef={newMapRef}
                       position={location.latlng}
-                      draggable={true}
-                      updatePosition={(newPosition) => {
+                      updatePosition={(newPosition: ILatLng) => {
                         onChange({ latlng: newPosition })
                       }}
+                      markerIcon={markerIcon}
+                      zoom={mapPin ? 15 : 1}
+                      onClickMapPin={() => setShowPopup(!showPopup)}
+                      popup={
+                        mapPin && showPopup ? (
+                          <Popup
+                            activePin={mapPin}
+                            mapRef={newMapRef}
+                            newMap
+                            onClose={() => setShowPopup(!showPopup)}
+                            customPosition={location.latlng || undefined}
+                          />
+                        ) : undefined
+                      }
                     />
                   )
                 }}
diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
index a93e0efa79..d56b136443 100644
--- a/src/stores/Maps/maps.store.ts
+++ b/src/stores/Maps/maps.store.ts
@@ -141,7 +141,7 @@ export class MapsStore extends ModuleStore {
     }
   }
   // call additional action when pin detail received to inform mobx correctly of update
-  private async getPinDetail(pin: IMapPin) {
+  public async getPinDetail(pin: IMapPin) {
     const detail: IMapPinDetail = await this.getUserProfilePin(pin._id)
     const pinWithDetail: IMapPinWithDetail = { ...pin, detail }
     return pinWithDetail

From 3f57f344311fb222fd28308091350b8f3fab6ece Mon Sep 17 00:00:00 2001
From: Lahuen Garcia <lahuen.garcia@rappi.com>
Date: Wed, 25 Sep 2024 04:13:32 -0300
Subject: [PATCH 2/3] feat(component): update map settings display

Pin is now like the Map page and, when clicked, displays the popup

fix #3856
---
 packages/components/src/MapWithPin/MapPin.client.tsx     | 9 +--------
 packages/components/src/MapWithPin/MapPin.css            | 7 -------
 packages/components/src/MapWithPin/MapWithPin.client.tsx | 2 +-
 src/pages/Maps/Content/MapView/Sprites.tsx               | 4 ++--
 src/pages/User/user.routes.tsx                           | 2 +-
 .../{SettingsPage.tsx => SettingsPage.client.tsx}        | 0
 src/pages/UserSettings/SettingsPageMapPin.tsx            | 8 ++++----
 src/pages/UserSettings/index.tsx                         | 2 +-
 src/routes/_.settings.$.tsx                              | 2 +-
 9 files changed, 11 insertions(+), 25 deletions(-)
 delete mode 100644 packages/components/src/MapWithPin/MapPin.css
 rename src/pages/UserSettings/{SettingsPage.tsx => SettingsPage.client.tsx} (100%)

diff --git a/packages/components/src/MapWithPin/MapPin.client.tsx b/packages/components/src/MapWithPin/MapPin.client.tsx
index cfe6938be1..5f9ca76662 100644
--- a/packages/components/src/MapWithPin/MapPin.client.tsx
+++ b/packages/components/src/MapWithPin/MapPin.client.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import { Marker } from 'react-leaflet'
 import L from 'leaflet'
 
@@ -6,8 +6,6 @@ import customMarkerIcon from '../../assets/icons/map-marker.png'
 
 import type { DivIcon } from 'leaflet'
 
-import './MapPin.css'
-
 const customMarker = L.icon({
   iconUrl: customMarkerIcon,
   iconSize: [20, 28],
@@ -26,7 +24,6 @@ export interface IProps {
 
 export const MapPin = (props: IProps) => {
   const markerRef = useRef(null)
-  const [isDragging, setIsDragging] = useState(false)
 
   const handleDrag = () => {
     const marker: any = markerRef.current
@@ -43,15 +40,11 @@ export const MapPin = (props: IProps) => {
 
   return (
     <Marker
-      className={`map-pin ${isDragging ? 'dragging' : ''}`}
       draggable
       onDrag={handleDrag}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
       icon={props.markerIcon || customMarker}
-      onMouseDown={() => setIsDragging(true)}
-      onMouseUp={() => setIsDragging(false)}
-      onMouseLeave={() => setIsDragging(false)}
       onclick={props.onClick}
     />
   )
diff --git a/packages/components/src/MapWithPin/MapPin.css b/packages/components/src/MapWithPin/MapPin.css
deleted file mode 100644
index 077f5c4841..0000000000
--- a/packages/components/src/MapWithPin/MapPin.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.leaflet-marker-icon:hover {
-  cursor: grab !important;
-}
-
-.leaflet-drag-target {
-  cursor: grabbing;
-}
diff --git a/packages/components/src/MapWithPin/MapWithPin.client.tsx b/packages/components/src/MapWithPin/MapWithPin.client.tsx
index aedfce8bea..0f28de3dab 100644
--- a/packages/components/src/MapWithPin/MapWithPin.client.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.client.tsx
@@ -126,7 +126,7 @@ export const MapWithPin = (props: Props) => {
         </Box>
         <Map
           ref={mapRef}
-          className="markercluster-map"
+          className="markercluster-map settings-page"
           center={center}
           zoom={zoom}
           zoomControl={false}
diff --git a/src/pages/Maps/Content/MapView/Sprites.tsx b/src/pages/Maps/Content/MapView/Sprites.tsx
index 0c76f7fa59..5f42af29ed 100644
--- a/src/pages/Maps/Content/MapView/Sprites.tsx
+++ b/src/pages/Maps/Content/MapView/Sprites.tsx
@@ -35,7 +35,7 @@ export const createClusterIcon = () => {
   }
 }
 
-export const createMarkerIcon = (pin: IMapPin) => {
+export const createMarkerIcon = (pin: IMapPin, draggable?: boolean) => {
   const icon =
     pin.moderation === IModerationStatus.ACCEPTED
       ? Workspace.findWorkspaceBadge(pin.type, true, pin.verified)
@@ -45,7 +45,7 @@ export const createMarkerIcon = (pin: IMapPin) => {
   }
   return L.divIcon({
     className: `icon-marker icon-${pin.type}`,
-    html: `<img data-cy="pin-${pin._id}" src="${icon}" />`,
+    html: `<img data-cy="pin-${pin._id}" src="${icon}" style="${draggable ? 'cursor: grab' : ''}" />`,
     iconSize: L.point(38, 38, true),
   })
 }
diff --git a/src/pages/User/user.routes.tsx b/src/pages/User/user.routes.tsx
index f45f78d6ba..6fd052c7e1 100644
--- a/src/pages/User/user.routes.tsx
+++ b/src/pages/User/user.routes.tsx
@@ -3,7 +3,7 @@ import { UserRole } from 'oa-shared'
 
 import { AuthRoute } from '../common/AuthRoute'
 import { NotFoundPage } from '../NotFound/NotFound'
-import { SettingsPage } from '../UserSettings/SettingsPage'
+import { SettingsPage } from '../UserSettings/SettingsPage.client'
 import { UserProfile } from './content/UserProfile'
 
 import type { IUserDB } from 'oa-shared'
diff --git a/src/pages/UserSettings/SettingsPage.tsx b/src/pages/UserSettings/SettingsPage.client.tsx
similarity index 100%
rename from src/pages/UserSettings/SettingsPage.tsx
rename to src/pages/UserSettings/SettingsPage.client.tsx
diff --git a/src/pages/UserSettings/SettingsPageMapPin.tsx b/src/pages/UserSettings/SettingsPageMapPin.tsx
index fea78935f0..30c09da22c 100644
--- a/src/pages/UserSettings/SettingsPageMapPin.tsx
+++ b/src/pages/UserSettings/SettingsPageMapPin.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { toJS } from 'mobx'
 import {
@@ -160,7 +160,7 @@ export const SettingsPageMapPin = () => {
     IFormNotification | undefined
   >(undefined)
 
-  const newMapRef = React.useRef<Map>(null)
+  const newMapRef = useRef<Map>(null)
 
   const { mapsStore, userStore } = useCommonStores().stores
   const user = userStore.activeUser
@@ -179,7 +179,7 @@ export const SettingsPageMapPin = () => {
       if (!pinDetail) return
 
       setMapPin(pinDetail)
-      setMarkerIcon(createMarkerIcon(pin))
+      setMarkerIcon(createMarkerIcon(pin, true))
       setIsLoading(false)
     }
 
@@ -239,7 +239,7 @@ export const SettingsPageMapPin = () => {
     >
       <Flex sx={{ flexDirection: 'column', gap: 1 }}>
         <Heading as="h2" id="your-map-pin">
-          {mapPin ? yourPinTitle : addPinTitle}
+          {mapPin ? addPinTitle : yourPinTitle}
         </Heading>
         {isMember && (
           <Text
diff --git a/src/pages/UserSettings/index.tsx b/src/pages/UserSettings/index.tsx
index 012eedc603..8602405958 100644
--- a/src/pages/UserSettings/index.tsx
+++ b/src/pages/UserSettings/index.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react'
 import { Loader } from 'oa-components'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 
-import { SettingsPage } from './SettingsPage'
+import { SettingsPage } from './SettingsPage.client'
 
 import type { IUserDB } from 'oa-shared'
 
diff --git a/src/routes/_.settings.$.tsx b/src/routes/_.settings.$.tsx
index 0f1fcdbf97..88f04d5ce3 100644
--- a/src/routes/_.settings.$.tsx
+++ b/src/routes/_.settings.$.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import Main from 'src/pages/common/Layout/Main'
-import { SettingsPage } from 'src/pages/UserSettings/SettingsPage'
+import { SettingsPage } from 'src/pages/UserSettings/SettingsPage.client'
 import { Flex, Text } from 'theme-ui'
 
 import type { IUser, IUserDB } from 'oa-shared'

From 89e1f5debdd658ca501384f55eab105c88630c99 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Tue, 19 Nov 2024 17:08:27 +0000
Subject: [PATCH 3/3] feat: remove pin opening

---
 .../src/MapWithPin/MapWithPin.client.tsx      |  23 ++--
 .../cypress/src/integration/settings.spec.ts  |   8 +-
 packages/cypress/src/support/commandsUi.ts    |   2 -
 src/pages/UserSettings/SettingsPageMapPin.tsx | 117 +++++++-----------
 src/pages/UserSettings/labels.ts              |   6 -
 src/routes/_.u.$id.edit.tsx                   |   2 +-
 6 files changed, 58 insertions(+), 100 deletions(-)

diff --git a/packages/components/src/MapWithPin/MapWithPin.client.tsx b/packages/components/src/MapWithPin/MapWithPin.client.tsx
index 0f28de3dab..a036bc73e1 100644
--- a/packages/components/src/MapWithPin/MapWithPin.client.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.client.tsx
@@ -15,7 +15,7 @@ import 'leaflet/dist/leaflet.css'
 
 const useUserLocation = 'Use my current location'
 const mapInstructions =
-  "To move your pin, grab it to move it or double click where you want it to go. Tap on your pin to see how it'll look on the map."
+  'To move your pin, grab it to move it or double click where you want it to go.'
 
 export interface Props {
   mapRef: React.RefObject<MapType>
@@ -33,7 +33,6 @@ export interface Props {
 }
 
 export const MapWithPin = (props: Props) => {
-  const [dragging, setDragging] = useState<boolean>(false)
   const [zoom, setZoom] = useState(props.zoom || 1)
   const [center, setCenter] = useState(
     props.center || [props.position.lat, props.position.lng],
@@ -87,10 +86,10 @@ export const MapWithPin = (props: Props) => {
         <Box
           sx={{
             position: 'absolute',
-            width: '100%',
             zIndex: 2,
-            padding: 2,
-            bottom: 0,
+            padding: 4,
+            top: 0,
+            right: 0,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
@@ -137,13 +136,11 @@ export const MapWithPin = (props: Props) => {
             height: '500px',
             zIndex: 1,
           }}
-          ondragstart={() => setDragging(true)}
-          ondragend={() => setDragging(false)}
         >
-          <ZoomControl position="bottomleft" />
-          {!dragging && (
-            <>
-              {popup}
+          <ZoomControl position="topleft" />
+          <>
+            {popup}
+            {position && (
               <MapPin
                 position={position}
                 markerIcon={markerIcon}
@@ -156,8 +153,8 @@ export const MapWithPin = (props: Props) => {
                     })
                 }}
               />
-            </>
-          )}
+            )}
+          </>
         </Map>
       </div>
     </Flex>
diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
index 618f334908..2544407cdc 100644
--- a/packages/cypress/src/integration/settings.spec.ts
+++ b/packages/cypress/src/integration/settings.spec.ts
@@ -13,11 +13,10 @@ const locationStub = {
   value: 'Singapore',
 }
 
-const mapDetails = (description) => ({
-  description,
+const mapDetails = {
   searchKeyword: 'singapo',
   locationName: locationStub.value,
-})
+}
 
 describe('[Settings]', () => {
   beforeEach(() => {
@@ -51,7 +50,6 @@ describe('[Settings]', () => {
       const userImage = 'avatar'
       const displayName = 'settings_member_new'
       const description = "I'm a very active member"
-      const mapPinDescription = 'Fun, vibrant and full of amazing people'
       const profileType = 'member'
       const tag = ['Sewing', 'Accounting']
       const user = generateNewUserDetails()
@@ -148,7 +146,7 @@ describe('[Settings]', () => {
       cy.get('[data-cy="tab-Map"]').click()
       cy.get('[data-cy=descriptionMember').should('be.visible')
       cy.contains('No map pin currently saved')
-      cy.fillSettingMapPin(mapDetails(mapPinDescription))
+      cy.fillSettingMapPin(mapDetails)
       cy.get('[data-cy=save-map-pin]').click()
       cy.contains('Map pin saved successfully')
       cy.contains('Your current map pin is here:')
diff --git a/packages/cypress/src/support/commandsUi.ts b/packages/cypress/src/support/commandsUi.ts
index 48bc36cadb..5c8cd5e472 100644
--- a/packages/cypress/src/support/commandsUi.ts
+++ b/packages/cypress/src/support/commandsUi.ts
@@ -18,7 +18,6 @@ interface IInfo {
 type ILink = Omit<IUser['links'][0] & { index: number }, 'key'>
 
 interface IMapPin {
-  description: string
   searchKeyword: string
   locationName: string
 }
@@ -144,7 +143,6 @@ Cypress.Commands.add('fillSettingMapPin', (mapPin: IMapPin) => {
   cy.wait('@fetchAddress').then(() => {
     cy.get('[data-cy="osm-geocoding-results"]').find('li:eq(0)').click()
   })
-  cy.get('[data-cy=pin-description]').clear().type(mapPin.description)
 })
 
 Cypress.Commands.add('setSettingPublicContact', () => {
diff --git a/src/pages/UserSettings/SettingsPageMapPin.tsx b/src/pages/UserSettings/SettingsPageMapPin.tsx
index 30c09da22c..2591a68a7e 100644
--- a/src/pages/UserSettings/SettingsPageMapPin.tsx
+++ b/src/pages/UserSettings/SettingsPageMapPin.tsx
@@ -1,46 +1,37 @@
 import { useEffect, useRef, useState } from 'react'
 import { Field, Form } from 'react-final-form'
+import { useNavigate } from 'react-router'
 import { toJS } from 'mobx'
 import {
   Button,
   ConfirmModal,
   ExternalLink,
-  FieldTextarea,
   FlagIconEvents,
   Loader,
   MapWithPin,
 } from 'oa-components'
 import { IModerationStatus, ProfileTypeList } from 'oa-shared'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
-import {
-  buttons,
-  fields,
-  headings,
-  mapForm,
-} from 'src/pages/UserSettings/labels'
+import { buttons, headings, mapForm } from 'src/pages/UserSettings/labels'
 import { randomIntFromInterval } from 'src/utils/helpers'
-import { required } from 'src/utils/validators'
 import { Alert, Box, Flex, Heading, Text } from 'theme-ui'
 
-import { Popup } from '../Maps/Content/MapView/Popup.client'
 import { createMarkerIcon } from '../Maps/Content/MapView/Sprites'
 import { SettingsFormNotifications } from './content/SettingsFormNotifications'
-import { MAX_PIN_LENGTH } from './constants'
 
 import type { DivIcon } from 'leaflet'
-import type { ILatLng, ILocation, IMapPinWithDetail, IUserDB } from 'oa-shared'
+import type { ILatLng, ILocation, IMapPin, IUserDB } from 'oa-shared'
 import type { Map } from 'react-leaflet'
 import type { IFormNotification } from './content/SettingsFormNotifications'
 
 interface IPinProps {
-  mapPin: IMapPinWithDetail | undefined
+  mapPin: IMapPin | undefined
 }
 
-interface ILocationProps {
-  location: IUserDB['location']
-}
+const LocationDataTextDisplay = ({ user }: { user: IUserDB }) => {
+  const { _id, location } = user
+  const navigate = useNavigate()
 
-const LocationDataTextDisplay = ({ location }: ILocationProps) => {
   if (!location?.latlng)
     return (
       <Text
@@ -53,20 +44,30 @@ const LocationDataTextDisplay = ({ location }: ILocationProps) => {
     )
 
   return (
-    <Text
-      variant="paragraph"
-      data-cy="LocationDataTextDisplay"
-      data-testid="LocationDataTextDisplay"
-    >
-      {mapForm.locationLabel}
-      <br />
-      {location?.name}{' '}
-      <FlagIconEvents
-        countryCode={location.countryCode}
-        title={location.countryCode}
-      />
-      <br />
-    </Text>
+    <>
+      <Text
+        variant="paragraph"
+        data-cy="LocationDataTextDisplay"
+        data-testid="LocationDataTextDisplay"
+      >
+        {mapForm.locationLabel}
+        <br />
+        {location?.name}{' '}
+        <FlagIconEvents
+          countryCode={location.countryCode}
+          title={location.countryCode}
+        />
+        <br />
+      </Text>
+      <Button
+        onClick={() => navigate(`/map#${_id}`)}
+        sx={{ alignSelf: 'flex-start' }}
+        icon="map"
+        variant="secondary"
+      >
+        See your pin on the map
+      </Button>
+    </>
   )
 }
 
@@ -152,9 +153,8 @@ export const SettingsPageMapPin = () => {
   const communityProgramUrl =
     import.meta.env.VITE_COMMUNITY_PROGRAM_URL ||
     process.env.VITE_COMMUNITY_PROGRAM_URL
-  const [mapPin, setMapPin] = useState<IMapPinWithDetail>()
+  const [mapPin, setMapPin] = useState<IMapPin | undefined>()
   const [markerIcon, setMarkerIcon] = useState<DivIcon>()
-  const [showPopup, setShowPopup] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [notification, setNotification] = useState<
     IFormNotification | undefined
@@ -163,7 +163,12 @@ export const SettingsPageMapPin = () => {
   const newMapRef = useRef<Map>(null)
 
   const { mapsStore, userStore } = useCommonStores().stores
+
   const user = userStore.activeUser
+  if (!user) {
+    return null
+  }
+
   const isMember = user?.profileType === ProfileTypeList.MEMBER
   const { addPinTitle, yourPinTitle } = headings.map
   const formId = 'MapSection'
@@ -173,21 +178,15 @@ export const SettingsPageMapPin = () => {
       if (!user) return
 
       const pin = await mapsStore.getPin(user.userName)
-      if (!pin) return
-
-      const pinDetail = await mapsStore.getPinDetail(pin)
-      if (!pinDetail) return
 
-      setMapPin(pinDetail)
-      setMarkerIcon(createMarkerIcon(pin, true))
+      setMapPin(pin)
+      pin && setMarkerIcon(createMarkerIcon(pin, true))
       setIsLoading(false)
     }
 
     init()
   }, [user, notification])
 
-  if (!user) return null
-
   const defaultLocation = {
     latlng: {
       lat: randomIntFromInterval(-90, 90),
@@ -205,7 +204,8 @@ export const SettingsPageMapPin = () => {
       }
       const updatedUser = await userStore.updateUserLocation(updatingUser)
       if (updatedUser) {
-        await mapsStore.setUserPin(toJS(updatedUser))
+        const pin = toJS(updatedUser)
+        await mapsStore.setUserPin(pin)
       }
       setNotification({
         message: mapForm.succesfulSave,
@@ -291,7 +291,7 @@ export const SettingsPageMapPin = () => {
                 submitFailed={submitFailed}
               />
 
-              <LocationDataTextDisplay location={user?.location} />
+              <LocationDataTextDisplay user={user} />
 
               <Field
                 name="location"
@@ -308,42 +308,13 @@ export const SettingsPageMapPin = () => {
                         onChange({ latlng: newPosition })
                       }}
                       markerIcon={markerIcon}
-                      zoom={mapPin ? 15 : 1}
-                      onClickMapPin={() => setShowPopup(!showPopup)}
-                      popup={
-                        mapPin && showPopup ? (
-                          <Popup
-                            activePin={mapPin}
-                            mapRef={newMapRef}
-                            newMap
-                            onClose={() => setShowPopup(!showPopup)}
-                            customPosition={location.latlng || undefined}
-                          />
-                        ) : undefined
-                      }
+                      zoom={2}
+                      center={[0, 0]}
                     />
                   )
                 }}
               />
 
-              <Flex sx={{ flexDirection: 'column', gap: 0 }}>
-                <Text sx={{ fontSize: 2 }}>
-                  {fields.mapPinDescription.title}
-                </Text>
-                <Field
-                  data-cy="pin-description"
-                  name="mapPinDescription"
-                  component={FieldTextarea}
-                  maxLength={MAX_PIN_LENGTH}
-                  style={{ height: 'inherit' }}
-                  rows="1"
-                  showCharacterCount
-                  placeholder={fields.mapPinDescription.placeholder}
-                  validate={required}
-                  validateFields={[]}
-                />
-              </Flex>
-
               <Button
                 type="submit"
                 form={formId}
diff --git a/src/pages/UserSettings/labels.ts b/src/pages/UserSettings/labels.ts
index a04b1d8718..430eba62ce 100644
--- a/src/pages/UserSettings/labels.ts
+++ b/src/pages/UserSettings/labels.ts
@@ -1,5 +1,3 @@
-import { MAX_PIN_LENGTH } from './constants'
-
 import type { ILabels } from 'src/common/Form/types'
 
 export const buttons = {
@@ -88,10 +86,6 @@ export const fields: ILabels = {
     error: 'Please select your location',
     title: 'Your location (flag)',
   },
-  mapPinDescription: {
-    placeholder: `Short description of your pin (max ${MAX_PIN_LENGTH} characters)`,
-    title: 'Short description of your pin',
-  },
   newEmail: {
     placeholder: 'New email address',
     title: 'New email address',
diff --git a/src/routes/_.u.$id.edit.tsx b/src/routes/_.u.$id.edit.tsx
index a4f48e9038..5646d837d3 100644
--- a/src/routes/_.u.$id.edit.tsx
+++ b/src/routes/_.u.$id.edit.tsx
@@ -4,7 +4,7 @@ import { UserRole } from 'oa-shared'
 // eslint-disable-next-line import/no-unresolved
 import { ClientOnly } from 'remix-utils/client-only'
 import { AuthRoute } from 'src/pages/common/AuthRoute'
-import { SettingsPage } from 'src/pages/UserSettings/SettingsPage'
+import { SettingsPage } from 'src/pages/UserSettings/SettingsPage.client'
 import { userService } from 'src/services/user.service'
 import { generateTags, mergeMeta } from 'src/utils/seo.utils'