From de7aa8c13c07a8122d4939c928da1761e4b7035b Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:28:02 -0600
Subject: [PATCH] feat: add blocking mode to VehicleSelectionDialog (refs #60)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add blocking prop to prevent dismissal
- Disable backdrop click and escape key when blocking
- Hide Cancel button in blocking mode
- Update messaging for auto-downgrade scenario

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/VehicleSelectionDialog.tsx     | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx b/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx
index 14ba3cf..e0bf2fc 100644
--- a/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx
+++ b/frontend/src/features/subscription/components/VehicleSelectionDialog.tsx
@@ -29,6 +29,8 @@ interface VehicleSelectionDialogProps {
   vehicles: Vehicle[];
   maxSelections: number;
   targetTier: SubscriptionTier;
+  /** When true, dialog cannot be dismissed - user must make a selection */
+  blocking?: boolean;
 }
 
 export const VehicleSelectionDialog = ({
@@ -38,6 +40,7 @@ export const VehicleSelectionDialog = ({
   vehicles,
   maxSelections,
   targetTier,
+  blocking = false,
 }: VehicleSelectionDialogProps) => {
   const [selectedVehicleIds, setSelectedVehicleIds] = useState<string[]>([]);
 
@@ -77,14 +80,42 @@ export const VehicleSelectionDialog = ({
 
   const canConfirm = selectedVehicleIds.length > 0 && selectedVehicleIds.length <= maxSelections;
 
+  // Handle dialog close - prevent if blocking
+  const handleClose = (_event: object, reason: string) => {
+    if (blocking && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {
+      return;
+    }
+    onClose();
+  };
+
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle>Select Vehicles to Keep</DialogTitle>
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth="sm"
+      fullWidth
+      disableEscapeKeyDown={blocking}
+    >
+      <DialogTitle>
+        {blocking ? 'Vehicle Selection Required' : '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 severity={blocking ? 'info' : 'warning'} sx={{ mb: 2 }}>
+          {blocking ? (
+            <>
+              Your subscription has been downgraded to the {targetTier} tier, which allows{' '}
+              {maxSelections} vehicle{maxSelections > 1 ? 's' : ''}. Please select which vehicles
+              you want to keep active to continue using the app. Unselected vehicles will be hidden
+              but not deleted, and you can unlock them by upgrading later.
+            </>
+          ) : (
+            <>
+              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 }}>
@@ -125,9 +156,9 @@ export const VehicleSelectionDialog = ({
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
+        {!blocking && <Button onClick={onClose}>Cancel</Button>}
         <Button onClick={handleConfirm} variant="contained" disabled={!canConfirm}>
-          Confirm Downgrade
+          {blocking ? 'Confirm Selection' : 'Confirm Downgrade'}
         </Button>
       </DialogActions>
     </Dialog>