Fully Custom Location

frontend/src/components/ResponsiveRideCard.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState } from 'react';
-import { Ride, SchedulingState, Status } from '../types';
+import { Ride, SchedulingState, Status, Tag } from '../types';
 import {
   BadgeRounded,
   FlagRounded,
@@ -56,6 +56,19 @@ const ResponsiveRideCard: FC<ResponsiveRideCardProps> = ({
 }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
+  // Check if either location is a custom location (with no valid coordinates)
+  const hasCustomLocation = () => {
+    const isPickupCustom =
+      ride.startLocation.tag === Tag.CUSTOM ||
+      ride.startLocation.lat === 0 ||
+      ride.startLocation.lng === 0;
+    const isDropoffCustom =
+      ride.endLocation.tag === Tag.CUSTOM ||
+      ride.endLocation.lat === 0 ||
+      ride.endLocation.lng === 0;
+    return isPickupCustom || isDropoffCustom;
+  };
+
   return (
     <div className={styles.card}>
       <div className={styles.statusContainer}>
@@ -148,38 +161,74 @@ const ResponsiveRideCard: FC<ResponsiveRideCardProps> = ({
         {/* expanded location view */}
         {expanded && (
           <div className={styles.mapContainer}>
-            <Map
-              className={styles.map}
-              defaultCenter={{
-                lat: (ride.startLocation.lat + ride.endLocation.lat) / 2,
-                lng: (ride.startLocation.lng + ride.endLocation.lng) / 2,
-              }}
-              defaultZoom={13}
-              gestureHandling="greedy"
-              disableDefaultUI
-              mapId={process.env.REACT_APP_GOOGLE_MAPS_MAP_ID}
-            >
-              <AdvancedMarker
-                position={{
-                  lat: ride.startLocation.lat,
-                  lng: ride.startLocation.lng,
+            {hasCustomLocation() ? (
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: '#f5f5f5',
+                  borderRadius: '8px',
+                  padding: '20px',
+                  textAlign: 'center',
+                  minHeight: '200px',
                 }}
-                clickable={true}
-                title={ride.startLocation.name}
               >
-                <Pin background={'#222'} glyphColor="#fff" borderColor="#222" />
-              </AdvancedMarker>
-              <AdvancedMarker
-                position={{
-                  lat: ride.endLocation.lat,
-                  lng: ride.endLocation.lng,
+                <div>
+                  <p
+                    style={{
+                      fontSize: '18px',
+                      color: '#666',
+                      marginBottom: '8px',
+                    }}
+                  >
+                    📍 Custom Location
+                  </p>
+                  <p style={{ fontSize: '14px', color: '#999' }}>
+                    Map not available for custom locations
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <Map
+                className={styles.map}
+                defaultCenter={{
+                  lat: (ride.startLocation.lat + ride.endLocation.lat) / 2,
+                  lng: (ride.startLocation.lng + ride.endLocation.lng) / 2,
                 }}
-                clickable={true}
-                title={ride.endLocation.name}
+                defaultZoom={13}
+                gestureHandling="greedy"
+                disableDefaultUI
+                mapId={process.env.REACT_APP_GOOGLE_MAPS_MAP_ID}
               >
-                <FlagRounded className={styles.flagIcon} />
-              </AdvancedMarker>
-            </Map>
+                <AdvancedMarker
+                  position={{
+                    lat: ride.startLocation.lat,
+                    lng: ride.startLocation.lng,
+                  }}
+                  clickable={true}
+                  title={ride.startLocation.name}
+                >
+                  <Pin
+                    background={'#222'}
+                    glyphColor="#fff"
+                    borderColor="#222"
+                  />
+                </AdvancedMarker>
+                <AdvancedMarker
+                  position={{
+                    lat: ride.endLocation.lat,
+                    lng: ride.endLocation.lng,
+                  }}
+                  clickable={true}
+                  title={ride.endLocation.name}
+                >
+                  <FlagRounded className={styles.flagIcon} />
+                </AdvancedMarker>
+              </Map>
+            )}
           </div>
         )}
       </div>

frontend/src/components/RideDetails/RideLocations.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from 'react';
 import { Typography, IconButton, Chip, Box, Button } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
@@ -215,7 +221,32 @@ const RideMap: React.FC<RideMapProps> = ({
   } | null>(null);
   const mapsLibrary = useMapsLibrary('routes');
 
+  // Check if either location is a custom location
+  const hasCustomLocation = useMemo(() => {
+    const isPickupCustom =
+      startLocation.tag === Tag.CUSTOM ||
+      startLocation.lat === 0 ||
+      startLocation.lng === 0 ||
+      !startLocation.address;
+    const isDropoffCustom =
+      endLocation.tag === Tag.CUSTOM ||
+      endLocation.lat === 0 ||
+      endLocation.lng === 0 ||
+      !endLocation.address;
+    return isPickupCustom || isDropoffCustom;
+  }, [startLocation, endLocation]);
+
   const fetchAndDrawRoute = useCallback(async () => {
+    // Skip route fetching for custom locations
+    if (hasCustomLocation) {
+      if (polylineRef.current) {
+        polylineRef.current.setMap(null);
+        polylineRef.current = null;
+      }
+      setTripInfo(null);
+      return;
+    }
+
     if (!window.google || !map || !startLocation || !endLocation) {
       if (polylineRef.current) {
         polylineRef.current.setMap(null);
@@ -281,19 +312,26 @@ const RideMap: React.FC<RideMapProps> = ({
         polylineRef.current.setMap(null);
         polylineRef.current = null;
       }
-      // Fallback to approximate calculation
-      const distance = getApproximateDistance(
-        startLocation.lat,
-        startLocation.lng,
-        endLocation.lat,
-        endLocation.lng
-      );
-      setTripInfo({
-        distance: `${distance} mi`,
-        duration: `${Math.round(distance * 2)} min`,
-      });
+      // only do  approximate calculation if we have valid coordinates
+      if (
+        startLocation.lat !== 0 &&
+        startLocation.lng !== 0 &&
+        endLocation.lat !== 0 &&
+        endLocation.lng !== 0
+      ) {
+        const distance = getApproximateDistance(
+          startLocation.lat,
+          startLocation.lng,
+          endLocation.lat,
+          endLocation.lng
+        );
+        setTripInfo({
+          distance: `${distance} mi`,
+          duration: `${Math.round(distance * 2)} min`,
+        });
+      }
     }
-  }, [map, startLocation, endLocation]);
+  }, [map, startLocation, endLocation, hasCustomLocation]);
 
   useEffect(() => {
     fetchAndDrawRoute();
@@ -307,7 +345,7 @@ const RideMap: React.FC<RideMapProps> = ({
   }, [fetchAndDrawRoute]);
 
   const getMapCenter = () => {
-    if (startLocation && endLocation) {
+    if (startLocation && endLocation && !hasCustomLocation) {
       return {
         lat: (startLocation.lat + endLocation.lat) / 2,
         lng: (startLocation.lng + endLocation.lng) / 2,
@@ -337,6 +375,37 @@ const RideMap: React.FC<RideMapProps> = ({
     [isSelecting, onLocationSelect]
   );
 
+  // if custom location, show placeholder instead of map
+  if (hasCustomLocation) {
+    return (
+      <div className={styles.mapContainer}>
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#f5f5f5',
+            borderRadius: '8px',
+            padding: '20px',
+            textAlign: 'center',
+            minHeight: '400px',
+          }}
+        >
+          <div>
+            <p style={{ fontSize: '18px', color: '#666', marginBottom: '8px' }}>
+              📍 Custom Location
+            </p>
+            <p style={{ fontSize: '14px', color: '#999' }}>
+              Map not available for custom locations
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       {/* Map */}