const ContactInformationView = ({ currentUser, setCurrentUser }) => { const { useState, useEffect, useRef } = React; const [email, setEmail] = useState(currentUser.Email || ''); const [phone, setPhone] = useState(currentUser.Phone || ''); const [preferredContactMethods, setPreferredContactMethods] = useState(currentUser.PreferredContactMethods || ['email']); const [showSuccess, setShowSuccess] = useState(false); const [showError, setShowError] = useState(false); const [errorMessage, setErrorMessage] = useState(''); const [isSaving, setIsSaving] = useState(false); const [attachments, setAttachments] = useState([]); const [isDragging, setIsDragging] = useState(false); const fileInputRef = useRef(null); console.log('ContactInformationView rendered with:', { email: currentUser.Email, phone: currentUser.Phone, preferredContactMethods: currentUser.PreferredContactMethods }); // Helper to format 10-digit phone to display format const formatPhoneForDisplay = (digits) => { if (!digits) return ''; const cleaned = digits.replace(/\D/g, ''); if (cleaned.length !== 10) return digits; // Return as-is if not 10 digits return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`; }; // Update local state when currentUser changes (from login or other updates) useEffect(() => { console.log('ContactInformationView useEffect triggered - updating local state'); setEmail(currentUser.Email || ''); setPhone(currentUser.Phone || ''); setPreferredContactMethods(currentUser.PreferredContactMethods || ['email']); }, [currentUser.Email, currentUser.Phone, currentUser.PreferredContactMethods]); const formatPhoneNumber = (value) => { const digits = value.replace(/\D/g, ''); if (digits.length === 0) return ''; if (digits.length <= 3) return `(${digits}`; if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`; return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`; }; const handlePhoneChange = (e) => { const formatted = formatPhoneNumber(e.target.value); setPhone(formatted); }; const handleSave = async () => { // Strip phone formatting to get only digits (database expects 10 digits only) const phoneDigits = phone ? phone.replace(/\D/g, '') : null; // Validate phone has exactly 10 digits if provided if (!phoneDigits) { setErrorMessage('Phone number is required'); setShowError(true); setTimeout(() => setShowError(false), 5000); return; } if (phoneDigits.length !== 10) { setErrorMessage('Phone number must be exactly 10 digits'); setShowError(true); setTimeout(() => setShowError(false), 5000); return; } setIsSaving(true); setShowError(false); setShowSuccess(false); console.log('DEBUG: Saving phone number...'); console.log('DEBUG: Username:', currentUser.Username); console.log('DEBUG: Phone (formatted):', phone); console.log('DEBUG: Phone (digits only):', phoneDigits); try { const requestBody = { username: currentUser.Username, phone: phoneDigits, // Send only digits to database preferred_contact_methods: preferredContactMethods }; console.log('DEBUG: Request body:', requestBody); const response = await fetch('/api/contact/update', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestBody) }); console.log('DEBUG: Response status:', response.status); if (!response.ok) { const error = await response.json(); throw new Error(error.detail || 'Failed to update contact information'); } const data = await response.json(); console.log('DEBUG: Response data:', data); // Format phone from database (10 digits) for display const formattedPhone = data.user.phone ? formatPhoneForDisplay(data.user.phone) : ''; // Update currentUser in parent component setCurrentUser({ ...currentUser, Email: data.user.email, Phone: formattedPhone, PreferredContactMethods: data.user.preferred_contact_methods || ['email'] }); // Update local state setEmail(data.user.email); setPhone(formattedPhone); setPreferredContactMethods(data.user.preferred_contact_methods || ['email']); console.log('DEBUG: Updated currentUser with:', data.user.email, formattedPhone, data.user.preferred_contact_methods); setShowSuccess(true); setTimeout(() => setShowSuccess(false), 5000); } catch (err) { setErrorMessage(err.message || 'Failed to update contact information. Please try again.'); setShowError(true); setTimeout(() => setShowError(false), 5000); } finally { setIsSaving(false); } }; const handleFileSelect = (e) => { const files = Array.from(e.target.files); const newAttachments = files.map(file => ({ id: Date.now() + Math.random(), name: file.name, size: file.size })); setAttachments(prev => [...prev, ...newAttachments]); }; const removeAttachment = (id) => { setAttachments(prev => prev.filter(att => att.id !== id)); }; const handleDragOver = (e) => { e.preventDefault(); setIsDragging(true); }; const handleDragLeave = (e) => { e.preventDefault(); setIsDragging(false); }; const handleDrop = (e) => { e.preventDefault(); setIsDragging(false); const files = Array.from(e.dataTransfer.files); const newAttachments = files.map(file => ({ id: Date.now() + Math.random(), name: file.name, size: file.size })); setAttachments(prev => [...prev, ...newAttachments]); }; const formatFileSize = (bytes) => { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]; }; return (
{/* Header */}

My Profile

Review your details and manage your contact preferences

{/* Profile Card */}
{/* Profile Header with Gradient */}
{currentUser.FirstName?.[0]}{currentUser.LastName?.[0]}

{currentUser.FirstName} {currentUser.LastName}

{/* Username + Role pills */}
{/* Username pill */}
@{currentUser.Username}
{/* Role pill */}
{currentUser.Role || "Not assigned"}
{/* Contact Information Card */}
{/* Email - Read Only */}
{/* Phone Number */}
{/* Divider */}
{/* Contact Preferences */}
{/* Email Checkbox */} {/* Phone Call Checkbox */} {/* Text Message Checkbox */}
{/* Alerts */} {showError && (

Update Failed

{errorMessage}

)} {showSuccess && (

Success!

Your contact information has been updated

)} {/* Action Buttons */}
); }; // ═══════════════════════════════════════════════════════════════════════════ // VENDORS VIEW COMPONENT // ═══════════════════════════════════════════════════════════════════════════