feat: prompt vehicle selection on login after auto-downgrade (#60) #62
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user