Improve the frontend modals

frontend/src/pages/app/settings/profile/NewProfileSettingsPage.tsx

@@ -23,10 +23,9 @@ import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
 import { PageHeader } from '../../../../components/layout';
 import { useToast } from '../../../../hooks/ui/useToast';
-import { useAuthUser, useAuthStore, useAuthActions } from '../../../../stores/auth.store';
+import { useAuthUser, useAuthActions } from '../../../../stores/auth.store';
 import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
 import { useCurrentTenant } from '../../../../stores';
-import { subscriptionService } from '../../../../api';
 
 // Import the communication preferences component
 import CommunicationPreferences, { type NotificationPreferences } from './CommunicationPreferences';
@@ -52,7 +51,6 @@ const NewProfileSettingsPage: React.FC = () => {
   const navigate = useNavigate();
   const { addToast } = useToast();
   const user = useAuthUser();
-  const token = useAuthStore((state) => state.token);
   const { logout } = useAuthActions();
   const currentTenant = useCurrentTenant();
 
@@ -72,7 +70,6 @@ const NewProfileSettingsPage: React.FC = () => {
   const [deletePassword, setDeletePassword] = useState('');
   const [deleteReason, setDeleteReason] = useState('');
   const [isDeleting, setIsDeleting] = useState(false);
-  const [subscriptionStatus, setSubscriptionStatus] = useState<any>(null);
 
   const [profileData, setProfileData] = useState<ProfileFormData>({
     first_name: '',
@@ -106,22 +103,8 @@ const NewProfileSettingsPage: React.FC = () => {
     }
   }, [profile]);
 
-  // Load subscription status
-  React.useEffect(() => {
-    const loadSubscriptionStatus = async () => {
-      const tenantId = currentTenant?.id || user?.tenant_id;
-      if (tenantId) {
-        try {
-          const status = await subscriptionService.getSubscriptionStatus(tenantId);
-          setSubscriptionStatus(status);
-        } catch (error) {
-          console.error('Failed to load subscription status:', error);
-        }
-      }
-    };
-
-    loadSubscriptionStatus();
-  }, [currentTenant, user]);
+  // Subscription status is not needed on the profile page
+  // It's already shown in the subscription tab of the main ProfilePage
 
   const languageOptions = [
     { value: 'es', label: 'Español' },
@@ -249,17 +232,11 @@ const NewProfileSettingsPage: React.FC = () => {
   const handleDataExport = async () => {
     setIsExporting(true);
     try {
-      const response = await fetch('/api/v1/users/me/export', {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
+      const { authService } = await import('../../../../api');
+      const exportData = await authService.exportMyData();
 
-      if (!response.ok) {
-        throw new Error('Failed to export data');
-      }
-
-      const blob = await response.blob();
+      // Convert to blob and download
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -290,23 +267,8 @@ const NewProfileSettingsPage: React.FC = () => {
 
     setIsDeleting(true);
     try {
-      const response = await fetch('/api/v1/users/me/delete/request', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          confirm_email: deleteConfirmEmail,
-          password: deletePassword,
-          reason: deleteReason
-        })
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.detail || 'Failed to delete account');
-      }
+      const { authService } = await import('../../../../api');
+      await authService.deleteAccount(deleteConfirmEmail, deletePassword, deleteReason);
 
       addToast(t('common.success'), { type: 'success' });
 
@@ -717,22 +679,6 @@ const NewProfileSettingsPage: React.FC = () => {
             </div>
 
             <div className="space-y-4">
-              {subscriptionStatus && subscriptionStatus.status === 'active' && (
-                <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
-                  <div className="flex items-start gap-3">
-                    <AlertCircle className="w-5 h-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
-                    <div className="text-sm">
-                      <p className="font-semibold text-yellow-900 dark:text-yellow-100 mb-1">
-                        Suscripción Activa Detectada
-                      </p>
-                      <p className="text-yellow-800 dark:text-yellow-200">
-                        Tienes una suscripción activa que se cancelará
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               <Input
                 label="Confirma tu email"
                 type="email"