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([]); @@ -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 ( - - Select Vehicles to Keep + + + {blocking ? 'Vehicle Selection Required' : 'Select Vehicles to Keep'} + - - 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. + + {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. + + )} @@ -125,9 +156,9 @@ export const VehicleSelectionDialog = ({ )} - + {!blocking && }