feat: add vehicle selection and downgrade flow - M5 (refs #55)

2026-01-18 16:44:45 -06:00
parent 94d1c677bc
commit 6c1a100eb9
11 changed files with 509 additions and 7 deletions
--- a/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx
+++ b/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx
@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  FormGroup,
+  FormControlLabel,
+  Checkbox,
+  Typography,
+  Alert,
+  Box,
+} from '@mui/material';
+import type { SubscriptionTier } from '../types/subscription.types';
+
+interface Vehicle {
+  id: string;
+  make?: string;
+  model?: string;
+  year?: number;
+  nickname?: string;
+}
+
+interface VehicleSelectionDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (selectedVehicleIds: string[]) => void;
+  vehicles: Vehicle[];
+  maxSelections: number;
+  targetTier: SubscriptionTier;
+}
+
+export const VehicleSelectionDialog = ({
+  open,
+  onClose,
+  onConfirm,
+  vehicles,
+  maxSelections,
+  targetTier,
+}: VehicleSelectionDialogProps) => {
+  const [selectedVehicleIds, setSelectedVehicleIds] = useState<string[]>([]);
+
+  // Pre-select first N vehicles when dialog opens
+  useEffect(() => {
+    if (open && vehicles.length > 0) {
+      const initialSelection = vehicles.slice(0, maxSelections).map((v) => v.id);
+      setSelectedVehicleIds(initialSelection);
+    }
+  }, [open, vehicles, maxSelections]);
+
+  const handleToggle = (vehicleId: string) => {
+    setSelectedVehicleIds((prev) => {
+      if (prev.includes(vehicleId)) {
+        return prev.filter((id) => id !== vehicleId);
+      } else {
+        // Only add if under the limit
+        if (prev.length < maxSelections) {
+          return [...prev, vehicleId];
+        }
+        return prev;
+      }
+    });
+  };
+
+  const handleConfirm = () => {
+    onConfirm(selectedVehicleIds);
+  };
+
+  const getVehicleLabel = (vehicle: Vehicle): string => {
+    if (vehicle.nickname) {
+      return vehicle.nickname;
+    }
+    const parts = [vehicle.year, vehicle.make, vehicle.model].filter(Boolean);
+    return parts.join(' ') || 'Unknown Vehicle';
+  };
+
+  const canConfirm = selectedVehicleIds.length > 0 && selectedVehicleIds.length <= maxSelections;
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Select Vehicles to Keep</DialogTitle>
+      <DialogContent>
+        <Alert severity="warning" sx={{ mb: 2 }}>
+          You are downgrading to the {targetTier} tier, which allows {maxSelections} vehicle
+          {maxSelections > 1 ? 's' : ''}. Select which vehicles you want to keep active. Unselected
+          vehicles will be hidden but not deleted, and you can unlock them by upgrading later.
+        </Alert>
+
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="body2" color="text.secondary">
+            Selected {selectedVehicleIds.length} of {maxSelections} allowed
+          </Typography>
+        </Box>
+
+        <FormGroup>
+          {vehicles.map((vehicle) => (
+            <FormControlLabel
+              key={vehicle.id}
+              control={
+                <Checkbox
+                  checked={selectedVehicleIds.includes(vehicle.id)}
+                  onChange={() => handleToggle(vehicle.id)}
+                  disabled={
+                    !selectedVehicleIds.includes(vehicle.id) &&
+                    selectedVehicleIds.length >= maxSelections
+                  }
+                />
+              }
+              label={getVehicleLabel(vehicle)}
+            />
+          ))}
+        </FormGroup>
+
+        {selectedVehicleIds.length === 0 && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            You must select at least one vehicle.
+          </Alert>
+        )}
+
+        {selectedVehicleIds.length > maxSelections && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            You can only select up to {maxSelections} vehicle{maxSelections > 1 ? 's' : ''}.
+          </Alert>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleConfirm} variant="contained" disabled={!canConfirm}>
+          Confirm Downgrade
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};