54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
/**
|
|
* @ai-summary Mobile banner showing pending account deletion with cancel option
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
|
import { useDeletionStatus, useCancelDeletion } from '../hooks/useDeletion';
|
|
|
|
export const PendingDeletionBanner: React.FC = () => {
|
|
const { data: deletionStatus, isLoading } = useDeletionStatus();
|
|
const cancelDeletionMutation = useCancelDeletion();
|
|
|
|
// Don't show banner if not loading and not pending deletion
|
|
if (isLoading || !deletionStatus?.isPendingDeletion) {
|
|
return null;
|
|
}
|
|
|
|
const handleCancelDeletion = async () => {
|
|
await cancelDeletionMutation.mutateAsync();
|
|
};
|
|
|
|
return (
|
|
<GlassCard padding="md" className="bg-amber-50/80 border-amber-200/70">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-amber-900 mb-1">Account Deletion Pending</h3>
|
|
<p className="text-sm text-amber-800">
|
|
Your account is scheduled for deletion in{' '}
|
|
<strong>{deletionStatus.daysRemaining} {deletionStatus.daysRemaining === 1 ? 'day' : 'days'}</strong>.
|
|
</p>
|
|
{deletionStatus.deletionScheduledFor && (
|
|
<p className="text-xs text-amber-700 mt-1">
|
|
Scheduled for: {new Date(deletionStatus.deletionScheduledFor).toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleCancelDeletion}
|
|
disabled={cancelDeletionMutation.isPending}
|
|
className="w-full py-2.5 px-4 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center justify-center"
|
|
style={{ minHeight: '44px' }}
|
|
>
|
|
{cancelDeletionMutation.isPending ? (
|
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
|
) : (
|
|
'Cancel Deletion'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</GlassCard>
|
|
);
|
|
};
|