1319 lines
51 KiB
TypeScript
1319 lines
51 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
Lock,
|
|
Globe,
|
|
Clock,
|
|
Camera,
|
|
Save,
|
|
X,
|
|
Bell,
|
|
Shield,
|
|
Download,
|
|
Trash2,
|
|
AlertCircle,
|
|
Cookie,
|
|
ExternalLink,
|
|
Check,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Info,
|
|
AlertTriangle,
|
|
Star,
|
|
Settings,
|
|
CheckCircle,
|
|
RefreshCw
|
|
} from 'lucide-react';
|
|
import { Button, Card, Avatar, Input, Select, SettingSection, SettingRow, SettingsSearch, Badge } from '../../../../components/ui';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
|
|
import { PageHeader } from '../../../../components/layout';
|
|
import { showToast } from '../../../../utils/toast';
|
|
import { useAuthUser, useAuthActions } from '../../../../stores/auth.store';
|
|
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
|
|
import { useCurrentTenant } from '../../../../stores';
|
|
|
|
// Import the communication preferences component
|
|
import CommunicationPreferences, { type NotificationPreferences } from './CommunicationPreferences';
|
|
|
|
interface ProfileFormData {
|
|
first_name: string;
|
|
last_name: string;
|
|
email: string;
|
|
phone: string;
|
|
language: string;
|
|
timezone: string;
|
|
avatar?: string;
|
|
}
|
|
|
|
interface PasswordData {
|
|
currentPassword: string;
|
|
newPassword: string;
|
|
confirmPassword: string;
|
|
}
|
|
|
|
// Collapsible Section Component (similar to subscription page)
|
|
const CollapsibleSection: React.FC<{
|
|
title: string;
|
|
icon: React.ReactNode;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
showAlert?: boolean;
|
|
className?: string;
|
|
}> = ({ title, icon, isOpen, onToggle, children, showAlert = false, className = '' }) => {
|
|
return (
|
|
<Card className={`mb-4 ${showAlert ? 'border-2 border-yellow-200 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20' : ''} ${className}`}>
|
|
<button
|
|
onClick={onToggle}
|
|
className="w-full flex items-center justify-between p-4 hover:bg-[var(--bg-secondary)] transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-[var(--bg-secondary)] flex-shrink-0">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
|
|
{showAlert && (
|
|
<Badge variant="warning" className="ml-2">
|
|
<AlertTriangle className="w-3 h-3 mr-1" />
|
|
Requiere Atención
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{isOpen ? <ChevronUp className="w-5 h-5 text-[var(--text-secondary)]" /> : <ChevronDown className="w-5 h-5 text-[var(--text-secondary)]" />}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="p-4 pt-0 border-t border-[var(--border-primary)]">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// Profile Completion Status Component
|
|
const ProfileCompletionStatus: React.FC<{
|
|
completionPercentage: number;
|
|
missingFields: string[];
|
|
onEdit: () => void;
|
|
}> = ({ completionPercentage, missingFields, onEdit }) => {
|
|
const getStatusColor = () => {
|
|
if (completionPercentage >= 90) return 'green';
|
|
if (completionPercentage >= 70) return 'yellow';
|
|
return 'red';
|
|
};
|
|
|
|
const statusColor = getStatusColor();
|
|
|
|
const colorClasses = {
|
|
red: {
|
|
bg: 'bg-red-50 dark:bg-red-900/20',
|
|
border: 'border-red-200 dark:border-red-700',
|
|
text: 'text-red-600 dark:text-red-400',
|
|
icon: 'text-red-500'
|
|
},
|
|
yellow: {
|
|
bg: 'bg-yellow-50 dark:bg-yellow-900/20',
|
|
border: 'border-yellow-200 dark:border-yellow-700',
|
|
text: 'text-yellow-600 dark:text-yellow-400',
|
|
icon: 'text-yellow-500'
|
|
},
|
|
green: {
|
|
bg: 'bg-green-50 dark:bg-green-900/20',
|
|
border: 'border-green-200 dark:border-green-700',
|
|
text: 'text-green-600 dark:text-green-400',
|
|
icon: 'text-green-500'
|
|
}
|
|
};
|
|
|
|
const colors = colorClasses[statusColor];
|
|
|
|
return (
|
|
<Card className={`p-6 mb-6 ${colors.bg} ${colors.border} border-2`}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-center">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
|
<User className="w-5 h-5 text-blue-500" />
|
|
Perfil Completado
|
|
</h3>
|
|
<Badge variant={statusColor === 'red' ? 'danger' : statusColor === 'yellow' ? 'warning' : 'success'} className="mt-2">
|
|
{Math.round(completionPercentage)}% Completado
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="text-sm text-[var(--text-secondary)]">Campos Completados</p>
|
|
<p className="font-semibold text-[var(--text-primary)] text-lg">
|
|
{Math.round(completionPercentage)}%
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="text-sm text-[var(--text-secondary)]">Campos Faltantes</p>
|
|
<p className="font-semibold text-[var(--text-primary)] text-lg">
|
|
{missingFields.length}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<Button onClick={onEdit} variant="primary" size="sm" className="w-full">
|
|
<Settings className="w-4 h-4 mr-2" />
|
|
Completar Perfil
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{missingFields.length > 0 && (
|
|
<div className="mt-4 p-4 bg-gradient-to-r from-blue-600/10 to-cyan-600/10 border border-blue-300/50 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-500/20 rounded-lg border border-blue-500/30 flex-shrink-0">
|
|
<Info className="w-5 h-5 text-blue-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
|
Campos faltantes: {missingFields.join(', ')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// Enhanced Profile Field Component with inline editing
|
|
const ProfileField: React.FC<{
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
error?: string;
|
|
disabled?: boolean;
|
|
type?: string;
|
|
icon?: React.ReactNode;
|
|
required?: boolean;
|
|
isEditing: boolean;
|
|
fieldType?: 'text' | 'email' | 'tel' | 'select';
|
|
options?: { value: string; label: string }[];
|
|
}> = ({
|
|
label,
|
|
value,
|
|
onChange,
|
|
error,
|
|
disabled = false,
|
|
type = 'text',
|
|
icon,
|
|
required = false,
|
|
isEditing,
|
|
fieldType = 'text',
|
|
options = []
|
|
}) => {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
const [localValue, setLocalValue] = useState(value);
|
|
|
|
useEffect(() => {
|
|
setLocalValue(value);
|
|
}, [value]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const newValue = e.target.value;
|
|
setLocalValue(newValue);
|
|
onChange(newValue);
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setIsFocused(false);
|
|
if (localValue !== value) {
|
|
// Auto-save logic could go here
|
|
}
|
|
};
|
|
|
|
if (fieldType === 'select') {
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
{icon && <div className="text-[var(--text-tertiary)]">{icon}</div>}
|
|
<label className="text-sm font-medium text-[var(--text-primary)] flex-1">
|
|
{label} {required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
</div>
|
|
{isEditing ? (
|
|
<div className="relative">
|
|
<select
|
|
value={localValue}
|
|
onChange={handleChange}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={handleBlur}
|
|
disabled={disabled}
|
|
className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
|
|
error ? 'border-red-500' : isFocused ? 'border-[var(--color-primary)]' : 'border-[var(--border-primary)]'
|
|
}`}
|
|
>
|
|
{options.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
</div>
|
|
) : (
|
|
<div className="p-2 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<p className="text-[var(--text-primary)]">{options.find(opt => opt.value === value)?.label || value}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
{icon && <div className="text-[var(--text-tertiary)]">{icon}</div>}
|
|
<label className="text-sm font-medium text-[var(--text-primary)] flex-1">
|
|
{label} {required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
</div>
|
|
{isEditing ? (
|
|
<div className="relative">
|
|
<input
|
|
type={type}
|
|
value={localValue}
|
|
onChange={handleChange}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={handleBlur}
|
|
disabled={disabled}
|
|
className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
|
|
error ? 'border-red-500' : isFocused ? 'border-[var(--color-primary)]' : 'border-[var(--border-primary)]'
|
|
}`}
|
|
/>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
</div>
|
|
) : (
|
|
<div className="p-2 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<p className="text-[var(--text-primary)]">{value || <span className="text-[var(--text-tertiary)]">No establecido</span>}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Password Strength Meter Component
|
|
const PasswordStrengthMeter: React.FC<{ password: string }> = ({ password }) => {
|
|
const getPasswordStrength = (pwd: string) => {
|
|
if (!pwd) return 0;
|
|
let strength = 0;
|
|
if (pwd.length >= 8) strength += 1;
|
|
if (/[A-Z]/.test(pwd)) strength += 1;
|
|
if (/[0-9]/.test(pwd)) strength += 1;
|
|
if (/[^A-Za-z0-9]/.test(pwd)) strength += 1;
|
|
if (pwd.length >= 12) strength += 1;
|
|
return Math.min(5, strength);
|
|
};
|
|
|
|
const strength = getPasswordStrength(password);
|
|
const strengthLabels = ['Muy débil', 'Débil', 'Media', 'Fuerte', 'Muy fuerte'];
|
|
const strengthColors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500', 'bg-green-600'];
|
|
|
|
return (
|
|
<div className="mt-2">
|
|
<div className="flex justify-between text-xs text-[var(--text-tertiary)] mb-1">
|
|
<span>Débil</span>
|
|
<span>Fuerte</span>
|
|
</div>
|
|
<div className="flex gap-1 h-1 bg-[var(--border-primary)] rounded">
|
|
{[1, 2, 3, 4, 5].map((level) => (
|
|
<div
|
|
key={level}
|
|
className={`flex-1 h-full rounded transition-all ${
|
|
level <= strength ? strengthColors[strength - 1] : 'bg-transparent'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
{password && (
|
|
<p className={`text-xs mt-1 ${strength >= 3 ? 'text-green-600' : strength >= 2 ? 'text-yellow-600' : 'text-red-600'}`}>
|
|
{strengthLabels[strength - 1] || 'Muy débil'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const NewProfileSettingsPage: React.FC = () => {
|
|
const { t } = useTranslation('settings');
|
|
const navigate = useNavigate();
|
|
|
|
const user = useAuthUser();
|
|
const { logout } = useAuthActions();
|
|
const currentTenant = useCurrentTenant();
|
|
|
|
const { data: profile, isLoading: profileLoading } = useAuthProfile();
|
|
const updateProfileMutation = useUpdateProfile();
|
|
const changePasswordMutation = useChangePassword();
|
|
|
|
const [activeTab, setActiveTab] = useState('personal');
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
// Collapsible section states (similar to subscription page)
|
|
const [showPersonalInfo, setShowPersonalInfo] = useState(true);
|
|
const [showSecurity, setShowSecurity] = useState(false);
|
|
const [showNotifications, setShowNotifications] = useState(false);
|
|
const [showPrivacy, setShowPrivacy] = useState(false);
|
|
|
|
// Export & Delete states
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [deleteConfirmEmail, setDeleteConfirmEmail] = useState('');
|
|
const [deletePassword, setDeletePassword] = useState('');
|
|
const [deleteReason, setDeleteReason] = useState('');
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
// Profile completion tracking
|
|
const [completionPercentage, setCompletionPercentage] = useState(0);
|
|
const [missingFields, setMissingFields] = useState<string[]>([]);
|
|
|
|
// Notification preferences tracking
|
|
const [notificationPreferences, setNotificationPreferences] = useState<NotificationPreferences | null>(null);
|
|
const [notificationHasChanges, setNotificationHasChanges] = useState(false);
|
|
|
|
const [profileData, setProfileData] = useState<ProfileFormData>({
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
phone: '',
|
|
language: 'es',
|
|
timezone: 'Europe/Madrid'
|
|
});
|
|
|
|
const [passwordData, setPasswordData] = useState<PasswordData>({
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
|
|
// Update profile data when profile is loaded
|
|
React.useEffect(() => {
|
|
if (profile) {
|
|
setProfileData({
|
|
first_name: profile.first_name || '',
|
|
last_name: profile.last_name || '',
|
|
email: profile.email || '',
|
|
phone: profile.phone || '',
|
|
language: profile.language || 'es',
|
|
timezone: profile.timezone || 'Europe/Madrid',
|
|
avatar: profile.avatar || ''
|
|
});
|
|
}
|
|
}, [profile]);
|
|
|
|
// Calculate profile completion percentage
|
|
useEffect(() => {
|
|
if (profile) {
|
|
const requiredFields = ['first_name', 'last_name', 'email', 'phone', 'language', 'timezone'];
|
|
const completedFields = requiredFields.filter(field => {
|
|
const value = profile[field as keyof typeof profile];
|
|
return value && value.toString().trim() !== '';
|
|
});
|
|
|
|
const percentage = (completedFields.length / requiredFields.length) * 100;
|
|
setCompletionPercentage(percentage);
|
|
|
|
const missing = requiredFields.filter(field => {
|
|
const value = profile[field as keyof typeof profile];
|
|
return !value || value.toString().trim() === '';
|
|
});
|
|
|
|
setMissingFields(missing.map(field => {
|
|
const fieldNames: Record<string, string> = {
|
|
first_name: 'Nombre',
|
|
last_name: 'Apellido',
|
|
email: 'Email',
|
|
phone: 'Teléfono',
|
|
language: 'Idioma',
|
|
timezone: 'Zona Horaria'
|
|
};
|
|
return fieldNames[field] || field;
|
|
}));
|
|
}
|
|
}, [profile]);
|
|
|
|
// Track when notification preferences change
|
|
const handleNotificationPreferencesChange = (preferences: NotificationPreferences) => {
|
|
// Compare with stored preferences to detect changes
|
|
if (notificationPreferences) {
|
|
const hasChanges = JSON.stringify(preferences) !== JSON.stringify(notificationPreferences);
|
|
setNotificationHasChanges(hasChanges);
|
|
} else {
|
|
// First time setting preferences
|
|
setNotificationHasChanges(true);
|
|
}
|
|
};
|
|
|
|
// Initialize notification preferences from profile data
|
|
useEffect(() => {
|
|
if (profile?.notification_preferences) {
|
|
setNotificationPreferences(profile.notification_preferences);
|
|
} else {
|
|
// Set default preferences if none exist
|
|
const defaultPreferences: NotificationPreferences = {
|
|
email_enabled: true,
|
|
email_alerts: true,
|
|
email_marketing: false,
|
|
email_reports: true,
|
|
whatsapp_enabled: false,
|
|
whatsapp_alerts: false,
|
|
whatsapp_reports: false,
|
|
push_enabled: true,
|
|
push_alerts: true,
|
|
push_reports: false,
|
|
quiet_hours_start: '22:00',
|
|
quiet_hours_end: '08:00',
|
|
timezone: profile?.timezone || 'Europe/Madrid',
|
|
digest_frequency: 'daily',
|
|
max_emails_per_day: 10,
|
|
language: profile?.language || 'es'
|
|
};
|
|
setNotificationPreferences(defaultPreferences);
|
|
}
|
|
}, [profile]);
|
|
|
|
const languageOptions = [
|
|
{ value: 'es', label: 'Español' },
|
|
{ value: 'eu', label: 'Euskara' },
|
|
{ value: 'en', label: 'English' }
|
|
];
|
|
|
|
const timezoneOptions = [
|
|
{ value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
|
|
{ value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
|
|
{ value: 'Europe/London', label: 'Londres (GMT/BST)' }
|
|
];
|
|
|
|
const validateProfile = (): boolean => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!profileData.first_name.trim()) {
|
|
newErrors.first_name = t('profile.fields.first_name') + ' ' + t('common.required');
|
|
}
|
|
|
|
if (!profileData.last_name.trim()) {
|
|
newErrors.last_name = t('profile.fields.last_name') + ' ' + t('common.required');
|
|
}
|
|
|
|
if (!profileData.email.trim()) {
|
|
newErrors.email = t('profile.fields.email') + ' ' + t('common.required');
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
|
|
newErrors.email = t('common.error');
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const validatePassword = (): boolean => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!passwordData.currentPassword) {
|
|
newErrors.currentPassword = t('profile.password.current_password') + ' ' + t('common.required');
|
|
}
|
|
|
|
if (!passwordData.newPassword) {
|
|
newErrors.newPassword = t('profile.password.new_password') + ' ' + t('common.required');
|
|
} else if (passwordData.newPassword.length < 8) {
|
|
newErrors.newPassword = t('profile.password.password_requirements');
|
|
}
|
|
|
|
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
|
newErrors.confirmPassword = t('common.error');
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSaveProfile = async () => {
|
|
if (!validateProfile()) return;
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Map the form fields to the expected API format
|
|
// The API expects 'full_name' instead of separate 'first_name' and 'last_name'
|
|
const profileUpdateData = {
|
|
full_name: `${profileData.first_name} ${profileData.last_name}`.trim(),
|
|
phone: profileData.phone,
|
|
language: profileData.language,
|
|
timezone: profileData.timezone
|
|
};
|
|
|
|
await updateProfileMutation.mutateAsync(profileUpdateData);
|
|
|
|
setIsEditing(false);
|
|
showToast.success(t('profile.save_changes'));
|
|
} catch (error) {
|
|
showToast.error(t('common.error'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleChangePasswordSubmit = async () => {
|
|
if (!validatePassword()) return;
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
await changePasswordMutation.mutateAsync({
|
|
current_password: passwordData.currentPassword,
|
|
new_password: passwordData.newPassword,
|
|
confirm_password: passwordData.confirmPassword
|
|
});
|
|
|
|
setShowPasswordForm(false);
|
|
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
|
showToast.success(t('profile.password.change_success'));
|
|
} catch (error) {
|
|
showToast.error(t('profile.password.change_error'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (field: keyof ProfileFormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setProfileData(prev => ({ ...prev, [field]: e.target.value }));
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
|
}
|
|
};
|
|
|
|
const handleSelectChange = (field: keyof ProfileFormData) => (value: string) => {
|
|
setProfileData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handlePasswordChange = (field: keyof PasswordData) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setPasswordData(prev => ({ ...prev, [field]: e.target.value }));
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
|
}
|
|
};
|
|
|
|
const handleSaveNotificationPreferences = async (preferences: NotificationPreferences) => {
|
|
try {
|
|
setIsLoading(true);
|
|
await updateProfileMutation.mutateAsync({
|
|
notification_preferences: preferences
|
|
});
|
|
|
|
// Update the stored preferences to track future changes
|
|
setNotificationPreferences(preferences);
|
|
setNotificationHasChanges(false);
|
|
|
|
showToast.success(t('profile.notifications.save_success', 'Preferencias de notificación guardadas correctamente'));
|
|
} catch (error) {
|
|
showToast.error(t('profile.notifications.save_error', 'Error al guardar las preferencias de notificación'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleNotificationReset = () => {
|
|
// Reset to initial state
|
|
if (notificationPreferences) {
|
|
// This would typically reset the form to the saved preferences
|
|
// For now, we'll just reset the change tracking
|
|
setNotificationHasChanges(false);
|
|
}
|
|
};
|
|
|
|
const handleDataExport = async () => {
|
|
setIsExporting(true);
|
|
try {
|
|
const { authService } = await import('../../../../api');
|
|
const exportData = await authService.exportMyData();
|
|
|
|
// 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;
|
|
a.download = `my_data_export_${new Date().toISOString().split('T')[0]}.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
showToast.success(t('profile.privacy.export_success'));
|
|
} catch (err) {
|
|
showToast.error(t('profile.privacy.export_error'));
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
const handleAccountDeletion = async () => {
|
|
if (deleteConfirmEmail.toLowerCase() !== user?.email?.toLowerCase()) {
|
|
showToast.error(t('common.error'));
|
|
return;
|
|
}
|
|
|
|
if (!deletePassword) {
|
|
showToast.error(t('common.error'));
|
|
return;
|
|
}
|
|
|
|
setIsDeleting(true);
|
|
try {
|
|
const { authService } = await import('../../../../api');
|
|
await authService.deleteAccount(deleteConfirmEmail, deletePassword, deleteReason);
|
|
|
|
showToast.success(t('common.success'));
|
|
|
|
setTimeout(() => {
|
|
logout();
|
|
navigate('/');
|
|
}, 2000);
|
|
} catch (err: any) {
|
|
showToast.error(err.message || t('common.error'));
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
if (profileLoading || !profile) {
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<PageHeader
|
|
title={t('profile.title')}
|
|
description={t('profile.description')}
|
|
/>
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
|
<p className="text-[var(--text-secondary)]">{t('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<PageHeader
|
|
title={t('profile.title')}
|
|
description={t('profile.description')}
|
|
/>
|
|
|
|
{/* NEW: Profile Completion Status Banner - Always Visible */}
|
|
<ProfileCompletionStatus
|
|
completionPercentage={completionPercentage}
|
|
missingFields={missingFields}
|
|
onEdit={() => {
|
|
setActiveTab('personal');
|
|
setShowPersonalInfo(true);
|
|
setIsEditing(true);
|
|
}}
|
|
/>
|
|
|
|
{/* Profile Header Card removed as requested */}
|
|
|
|
{/* Search Bar removed as requested */}
|
|
|
|
{/* NEW: Collapsible Sections (similar to subscription page) */}
|
|
<div className="space-y-4">
|
|
{/* Personal Information Section */}
|
|
<CollapsibleSection
|
|
title={t('profile.tabs.personal')}
|
|
icon={<User className="w-5 h-5 text-blue-500" />}
|
|
isOpen={showPersonalInfo}
|
|
onToggle={() => setShowPersonalInfo(!showPersonalInfo)}
|
|
showAlert={completionPercentage < 90}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Spacing between content blocks */}
|
|
<div className="h-6"></div>
|
|
|
|
{/* Enhanced Profile Form with Inline Editing */}
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20 flex-shrink-0">
|
|
<User className="w-6 h-6 text-blue-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.personal_info')}</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
{t('profile.personal_info_description') || 'Your personal information and account details'}
|
|
</p>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{!isEditing ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setIsEditing(true)}
|
|
>
|
|
<User className="w-4 h-4 mr-2" />
|
|
{t('profile.edit_profile')}
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setIsEditing(false)}
|
|
disabled={isLoading}
|
|
>
|
|
<X className="w-4 h-4 mr-1" />
|
|
{t('profile.cancel')}
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={handleSaveProfile}
|
|
isLoading={isLoading}
|
|
loadingText={t('common.saving')}
|
|
>
|
|
<Save className="w-4 h-4 mr-1" />
|
|
{t('profile.save_changes')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Real-time validation feedback */}
|
|
{isEditing && Object.keys(errors).length > 0 && (
|
|
<div className="mb-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 text-yellow-600" />
|
|
<p className="text-sm text-yellow-700 dark:text-yellow-300">
|
|
Por favor, corrige los errores antes de guardar
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Enhanced Profile Fields with Inline Editing */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
|
<ProfileField
|
|
label={t('profile.fields.first_name')}
|
|
value={profileData.first_name}
|
|
onChange={(value) => handleInputChange('first_name')({ target: { value } } as any)}
|
|
error={errors.first_name}
|
|
disabled={isLoading}
|
|
icon={<User className="w-4 h-4" />}
|
|
required
|
|
isEditing={isEditing}
|
|
/>
|
|
|
|
<ProfileField
|
|
label={t('profile.fields.last_name')}
|
|
value={profileData.last_name}
|
|
onChange={(value) => handleInputChange('last_name')({ target: { value } } as any)}
|
|
error={errors.last_name}
|
|
disabled={isLoading}
|
|
icon={<User className="w-4 h-4" />}
|
|
required
|
|
isEditing={isEditing}
|
|
/>
|
|
|
|
<ProfileField
|
|
label={t('profile.fields.email')}
|
|
value={profileData.email}
|
|
onChange={(value) => handleInputChange('email')({ target: { value } } as any)}
|
|
error={errors.email}
|
|
disabled={isLoading}
|
|
icon={<Mail className="w-4 h-4" />}
|
|
required
|
|
isEditing={isEditing}
|
|
type="email"
|
|
/>
|
|
|
|
<ProfileField
|
|
label={t('profile.fields.phone')}
|
|
value={profileData.phone}
|
|
onChange={(value) => handleInputChange('phone')({ target: { value } } as any)}
|
|
error={errors.phone}
|
|
disabled={isLoading}
|
|
icon={<Phone className="w-4 h-4" />}
|
|
isEditing={isEditing}
|
|
type="tel"
|
|
/>
|
|
|
|
<ProfileField
|
|
label={t('profile.fields.language')}
|
|
value={profileData.language}
|
|
onChange={(value) => handleSelectChange('language')(value)}
|
|
error={errors.language}
|
|
disabled={isLoading}
|
|
icon={<Globe className="w-4 h-4" />}
|
|
isEditing={isEditing}
|
|
fieldType="select"
|
|
options={languageOptions}
|
|
/>
|
|
|
|
<ProfileField
|
|
label={t('profile.fields.timezone')}
|
|
value={profileData.timezone}
|
|
onChange={(value) => handleSelectChange('timezone')(value)}
|
|
error={errors.timezone}
|
|
disabled={isLoading}
|
|
icon={<Clock className="w-4 h-4" />}
|
|
isEditing={isEditing}
|
|
fieldType="select"
|
|
options={timezoneOptions}
|
|
/>
|
|
</div>
|
|
|
|
{/* Save status indicator */}
|
|
{isEditing && (
|
|
<div className="mt-4 flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
|
|
{isLoading ? (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 animate-spin" />
|
|
<span>Guardando cambios...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle className="w-4 h-4 text-green-500" />
|
|
<span>Los cambios se guardarán automáticamente al hacer clic en Guardar</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* Security Section */}
|
|
<CollapsibleSection
|
|
title="Security"
|
|
icon={<Lock className="w-5 h-5 text-red-500" />}
|
|
isOpen={showSecurity}
|
|
onToggle={() => setShowSecurity(!showSecurity)}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Spacing between content blocks */}
|
|
<div className="h-6"></div>
|
|
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
|
|
<Lock className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">Manage your password and security settings</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
Update your password to keep your account secure
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowPasswordForm(!showPasswordForm)}
|
|
>
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
{t('profile.change_password')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{showPasswordForm && (
|
|
<div className="mt-6 space-y-6">
|
|
{/* Password Requirements Info */}
|
|
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
|
|
<div className="flex items-start gap-3">
|
|
<Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">
|
|
Requisitos de Contraseña
|
|
</h4>
|
|
<ul className="text-sm text-[var(--text-secondary)] space-y-1">
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
|
|
Mínimo 8 caracteres
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
|
|
Al menos una mayúscula
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
|
|
Al menos un número
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
|
|
Caracter especial recomendado
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Password Fields */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
|
|
<Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
|
|
{t('profile.password.current_password')}
|
|
<span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="password"
|
|
value={passwordData.currentPassword}
|
|
onChange={handlePasswordChange('currentPassword')}
|
|
disabled={isLoading}
|
|
className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
|
|
errors.currentPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
|
|
}`}
|
|
placeholder="••••••••"
|
|
/>
|
|
{errors.currentPassword && (
|
|
<p className="text-xs text-red-500 mt-1">{errors.currentPassword}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
|
|
<Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
|
|
{t('profile.password.new_password')}
|
|
<span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="password"
|
|
value={passwordData.newPassword}
|
|
onChange={handlePasswordChange('newPassword')}
|
|
disabled={isLoading}
|
|
className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
|
|
errors.newPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
|
|
}`}
|
|
placeholder="••••••••"
|
|
/>
|
|
{errors.newPassword && (
|
|
<p className="text-xs text-red-500 mt-1">{errors.newPassword}</p>
|
|
)}
|
|
</div>
|
|
{/* Password Strength Meter */}
|
|
<PasswordStrengthMeter password={passwordData.newPassword} />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
|
|
<Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
|
|
{t('profile.password.confirm_password')}
|
|
<span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="password"
|
|
value={passwordData.confirmPassword}
|
|
onChange={handlePasswordChange('confirmPassword')}
|
|
disabled={isLoading}
|
|
className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
|
|
errors.confirmPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
|
|
}`}
|
|
placeholder="••••••••"
|
|
/>
|
|
{errors.confirmPassword && (
|
|
<p className="text-xs text-red-500 mt-1">{errors.confirmPassword}</p>
|
|
)}
|
|
{/* Password Match Indicator */}
|
|
{passwordData.confirmPassword && passwordData.newPassword && (
|
|
<div className="mt-2 flex items-center gap-2 text-xs">
|
|
{passwordData.newPassword === passwordData.confirmPassword ? (
|
|
<>
|
|
<CheckCircle className="w-3 h-3 text-green-500" />
|
|
<span className="text-green-600">Las contraseñas coinciden</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertCircle className="w-3 h-3 text-red-500" />
|
|
<span className="text-red-600">Las contraseñas no coinciden</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Action Buttons */}
|
|
<div className="flex gap-3 pt-4 border-t border-[var(--border-primary)] flex-wrap">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowPasswordForm(false);
|
|
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
|
setErrors({});
|
|
}}
|
|
disabled={isLoading}
|
|
>
|
|
{t('profile.cancel')}
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleChangePasswordSubmit}
|
|
isLoading={isLoading}
|
|
loadingText={t('common.saving')}
|
|
disabled={!passwordData.currentPassword || !passwordData.newPassword || passwordData.newPassword !== passwordData.confirmPassword}
|
|
>
|
|
<Check className="w-4 h-4 mr-2" />
|
|
{t('profile.password.change_password')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Security Tip */}
|
|
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg text-sm">
|
|
<div className="flex items-start gap-2">
|
|
<Shield className="w-4 h-4 text-yellow-600 mt-0.5 flex-shrink-0" />
|
|
<p className="text-yellow-700 dark:text-yellow-300">
|
|
<strong>Consejo de seguridad:</strong> Usa una contraseña única que no utilices en otros servicios. Considera usar un gestor de contraseñas para mayor seguridad.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* Notifications Section */}
|
|
<CollapsibleSection
|
|
title={t('profile.tabs.notifications')}
|
|
icon={<Bell className="w-5 h-5 text-orange-500" />}
|
|
isOpen={showNotifications}
|
|
onToggle={() => setShowNotifications(!showNotifications)}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Spacing between content blocks */}
|
|
<div className="h-6"></div>
|
|
|
|
<CommunicationPreferences
|
|
userEmail={profile?.email || ''}
|
|
userPhone={profile?.phone || ''}
|
|
userLanguage={profile?.language || 'es'}
|
|
userTimezone={profile?.timezone || 'Europe/Madrid'}
|
|
onSave={handleSaveNotificationPreferences}
|
|
onReset={handleNotificationReset}
|
|
onPreferencesChange={handleNotificationPreferencesChange}
|
|
hasChanges={notificationHasChanges}
|
|
/>
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* Privacy & Data Section */}
|
|
<CollapsibleSection
|
|
title={t('profile.tabs.privacy')}
|
|
icon={<Shield className="w-5 h-5 text-purple-500" />}
|
|
isOpen={showPrivacy}
|
|
onToggle={() => setShowPrivacy(!showPrivacy)}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Spacing between content blocks */}
|
|
<div className="h-6"></div>
|
|
|
|
{/* GDPR Rights Information */}
|
|
<Card className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
|
<div className="flex items-start gap-3">
|
|
<Shield className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">
|
|
{t('profile.privacy.gdpr_rights')}
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
{t('profile.privacy.gdpr_description')}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<a
|
|
href="/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
|
|
>
|
|
{t('profile.privacy.privacy_policy')}
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
<span className="text-gray-400">•</span>
|
|
<a
|
|
href="/terms"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
|
|
>
|
|
{t('profile.privacy.terms')}
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Cookie Preferences */}
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/20 flex-shrink-0">
|
|
<Cookie className="w-6 h-6 text-yellow-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.cookie_preferences')}</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
Gestiona tus preferencias de cookies
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate('/cookie-preferences')}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<Cookie className="w-4 h-4 mr-2" />
|
|
Gestionar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Export */}
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-green-500/10 rounded-lg border border-green-500/20 flex-shrink-0">
|
|
<Download className="w-6 h-6 text-green-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.export_data')}</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
{t('profile.privacy.export_description')}
|
|
</p>
|
|
<Button
|
|
onClick={handleDataExport}
|
|
variant="primary"
|
|
size="sm"
|
|
disabled={isExporting}
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
{isExporting ? t('common.loading') : t('profile.privacy.export_button')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Account Deletion */}
|
|
<div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
|
|
<AlertCircle className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.delete_account')}</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
|
|
{t('profile.privacy.delete_description')}
|
|
</p>
|
|
<p className="text-xs text-red-600 font-semibold mb-4">
|
|
{t('profile.privacy.delete_warning')}
|
|
</p>
|
|
<Button
|
|
onClick={() => setShowDeleteModal(true)}
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{t('profile.privacy.delete_button')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CollapsibleSection>
|
|
</div>
|
|
|
|
{/* Delete Account Modal (updated to match subscription page style) */}
|
|
{showDeleteModal && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
|
<Card className="max-w-md w-full p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<AlertCircle className="w-6 h-6 text-red-600 flex-shrink-0" />
|
|
<div>
|
|
<h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{t('profile.privacy.delete_account')}?
|
|
</h2>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{t('profile.privacy.delete_warning')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Input
|
|
label="Confirma tu email"
|
|
type="email"
|
|
placeholder={user?.email || ''}
|
|
value={deleteConfirmEmail}
|
|
onChange={(e) => setDeleteConfirmEmail(e.target.value)}
|
|
required
|
|
/>
|
|
|
|
<Input
|
|
label="Introduce tu contraseña"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={deletePassword}
|
|
onChange={(e) => setDeletePassword(e.target.value)}
|
|
required
|
|
leftIcon={<Lock className="w-4 h-4" />}
|
|
/>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Motivo (opcional)
|
|
</label>
|
|
<textarea
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
|
|
rows={3}
|
|
placeholder="Ayúdanos a mejorar..."
|
|
value={deleteReason}
|
|
onChange={(e) => setDeleteReason(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-6 flex-wrap">
|
|
<Button
|
|
onClick={() => {
|
|
setShowDeleteModal(false);
|
|
setDeleteConfirmEmail('');
|
|
setDeletePassword('');
|
|
setDeleteReason('');
|
|
}}
|
|
variant="outline"
|
|
className="flex-1"
|
|
disabled={isDeleting}
|
|
>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button
|
|
onClick={handleAccountDeletion}
|
|
variant="primary"
|
|
className="flex-1 bg-red-600 hover:bg-red-700 text-white"
|
|
disabled={isDeleting || !deleteConfirmEmail || !deletePassword}
|
|
>
|
|
{isDeleting ? t('common.loading') : t('common.delete')}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewProfileSettingsPage;
|