Refactor code structure and remove redundant changes

src-old/components/settings/DeletionStatusBanner.tsx

@@ -0,0 +1,114 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { supabase } from '@/lib/supabaseClient';
+import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
+import { useToast } from '@/hooks/use-toast';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { getErrorMessage } from '@/lib/errorHandler';
+
+interface DeletionStatusBannerProps {
+  scheduledDate: string;
+  status: 'pending' | 'confirmed';
+  onCancelled: () => void;
+}
+
+export function DeletionStatusBanner({ scheduledDate, status, onCancelled }: DeletionStatusBannerProps) {
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+
+  const calculateDaysRemaining = () => {
+    const scheduled = new Date(scheduledDate);
+    const now = new Date();
+    const diffTime = scheduled.getTime() - now.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return Math.max(0, diffDays);
+  };
+
+  const handleCancelDeletion = async () => {
+    setLoading(true);
+    try {
+      const { error, requestId } = await invokeWithTracking(
+        'cancel-account-deletion',
+        { cancellation_reason: 'User cancelled from settings' },
+        (await supabase.auth.getUser()).data.user?.id
+      );
+
+      if (error) throw error;
+
+      toast({
+        title: 'Deletion Cancelled',
+        description: 'Your account has been reactivated.',
+      });
+
+      onCancelled();
+    } catch (error: unknown) {
+      const errorMsg = getErrorMessage(error);
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: errorMsg,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const daysRemaining = calculateDaysRemaining();
+  const formattedDate = new Date(scheduledDate).toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <Alert variant="destructive" className="mb-6">
+      <AlertTriangle className="w-4 h-4" />
+      <AlertTitle>
+        {status === 'pending' ? 'Deletion Requested' : 'Account Deactivated - Deletion Scheduled'}
+      </AlertTitle>
+      <AlertDescription className="space-y-2">
+        {status === 'pending' ? (
+          <>
+            <p>
+              You have requested account deletion. Please check your email for a confirmation code. 
+              You must enter the code within 24 hours to proceed.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              After confirming with the code, your account will be deactivated and scheduled for deletion on{' '}
+              <strong>{formattedDate}</strong>.
+            </p>
+          </>
+        ) : (
+          <>
+            <p>
+              Your account is <strong>deactivated</strong> and scheduled for permanent deletion on{' '}
+              <strong>{formattedDate}</strong>.
+            </p>
+            <p className="text-sm">
+              {daysRemaining > 0 ? (
+                <>
+                  <strong>{daysRemaining}</strong> day{daysRemaining !== 1 ? 's' : ''} remaining to cancel.
+                </>
+              ) : (
+                'Your account will be deleted within 24 hours.'
+              )}
+            </p>
+          </>
+        )}
+        <div className="flex gap-2 mt-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleCancelDeletion}
+            disabled={loading}
+          >
+            {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+            Cancel Deletion
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}