Fix ride selection in Add Credit modal

src/components/profile/AddRideCreditDialog.tsx

@@ -22,6 +22,7 @@ interface AddRideCreditDialogProps {
 
 export function AddRideCreditDialog({ userId, open, onOpenChange, onSuccess }: AddRideCreditDialogProps) {
   const [selectedRideId, setSelectedRideId] = useState<string>('');
+  const [selectedRideName, setSelectedRideName] = useState<string>('');
   const [firstRideDate, setFirstRideDate] = useState<Date | undefined>(undefined);
   const [rideCount, setRideCount] = useState(1);
   const [submitting, setSubmitting] = useState(false);
@@ -62,8 +63,9 @@ export function AddRideCreditDialog({ userId, open, onOpenChange, onSuccess }: A
       if (error) throw error;
 
       toast.success('Ride credit added!');
-      onSuccess();
       handleReset();
+      onSuccess();
+      onOpenChange(false);
     } catch (error) {
       console.error('Error adding credit:', error);
       toast.error(getErrorMessage(error));
@@ -74,12 +76,21 @@ export function AddRideCreditDialog({ userId, open, onOpenChange, onSuccess }: A
 
   const handleReset = () => {
     setSelectedRideId('');
+    setSelectedRideName('');
     setFirstRideDate(undefined);
     setRideCount(1);
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog 
+      open={open} 
+      onOpenChange={(newOpen) => {
+        if (!newOpen) {
+          handleReset();
+        }
+        onOpenChange(newOpen);
+      }}
+    >
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>Add Ride Credit</DialogTitle>
@@ -91,16 +102,37 @@ export function AddRideCreditDialog({ userId, open, onOpenChange, onSuccess }: A
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label>Search for a Ride</Label>
-            <AutocompleteSearch
-              onResultSelect={(result) => {
-                if (result.type === 'ride') {
-                  setSelectedRideId(result.id);
-                }
-              }}
-              types={['ride']}
-              placeholder="Search rides..."
-              className="w-full"
-            />
+            {!selectedRideId ? (
+              <AutocompleteSearch
+                onResultSelect={(result) => {
+                  if (result.type === 'ride') {
+                    setSelectedRideId(result.id);
+                    setSelectedRideName(result.title);
+                  }
+                }}
+                types={['ride']}
+                placeholder="Search rides..."
+                className="w-full"
+              />
+            ) : (
+              <div className="flex items-center justify-between p-3 border rounded-lg bg-muted/50">
+                <div>
+                  <p className="font-medium">{selectedRideName}</p>
+                  <p className="text-sm text-muted-foreground">Selected ride</p>
+                </div>
+                <Button 
+                  type="button"
+                  variant="ghost" 
+                  size="sm"
+                  onClick={() => {
+                    setSelectedRideId('');
+                    setSelectedRideName('');
+                  }}
+                >
+                  Change
+                </Button>
+              </div>
+            )}
           </div>
 
           <div className="space-y-2">