Spaces:
Sleeping
Sleeping
File size: 3,419 Bytes
66f3298 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import React from 'react';
import InsuCompassLogo from '../../assets/InsuCompass_Logo.png';
import LocationSection from '../../components/LocationSection';
import PersonalInfoSection from '../../components/PersonalInfoSection';
import HouseholdInfoSection from '../../components/HouseholdInfoSection';
import EmploymentSection from '../../components/EmploymentSection';
import { UserProfile } from '../../interface';
import useProfileScreen from './useProfileScreen';
interface ProfilingScreenProps {
onComplete: (userProfile: UserProfile) => void;
}
const ProfilingScreen: React.FC<ProfilingScreenProps> = ({ onComplete }) => {
const {
formData,
userProfile,
isValidatingZip,
zipError,
isLoading,
handleZipChange,
handleFormChange,
handleSubmit,
} = useProfileScreen({
onComplete,
});
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
{/* Header */}
<div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
<div className="max-w-10xl mx-auto px-6 py-4">
<div className="flex items-center space-x-3">
<img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
<div>
<h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
<p className="text-sm text-gray-600">Your AI guide to U.S. Health Insurance</p>
</div>
</div>
</div>
</div>
{/* Main Content */}
<div className="flex-1 overflow-y-auto pt-20">
<div className="max-w-2xl mx-auto px-6 py-12">
<div className="text-center mb-8">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Let's Get Started</h2>
<p className="text-lg text-gray-600">Tell us about yourself to receive personalized insurance guidance</p>
</div>
<div className="space-y-6">
{/* ZIP Code Section */}
<LocationSection
formData={formData}
onChange={handleZipChange}
isValidatingZip={isValidatingZip}
zipError={zipError}
userProfile={userProfile}
/>
{/* Personal Information */}
{userProfile.city && (
<PersonalInfoSection formData={formData} onChange={handleFormChange} />
)}
{/* Household Information */}
{userProfile.city && (
<HouseholdInfoSection formData={formData} onChange={handleFormChange} />
)}
{/* Employment & Citizenship */}
{userProfile.city && (
<EmploymentSection formData={formData} onChange={handleFormChange} />
)}
{/* Submit Button */}
{userProfile.city && (
<button
onClick={handleSubmit}
disabled={isLoading}
className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-8 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? 'Starting Session...' : 'Start My Personalized Session'}
</button>
)}
</div>
</div>
</div>
</div>
);
};
export default ProfilingScreen; |