255 lines
9.1 KiB
JavaScript
255 lines
9.1 KiB
JavaScript
// CareerOnboarding.js
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useLocation } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import { Input } from '../ui/input.js'; // Ensure path matches your structure
|
||
import authFetch from '../../utils/authFetch.js';
|
||
|
||
// 1) Import your CareerSearch component
|
||
import CareerSearch from '../CareerSearch.js'; // adjust path as necessary
|
||
|
||
const apiURL = process.env.REACT_APP_API_URL;
|
||
|
||
const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||
// We store local state for “are you working,” “selectedCareer,” etc.
|
||
const [currentlyWorking, setCurrentlyWorking] = useState('');
|
||
const [selectedCareer, setSelectedCareer] = useState('');
|
||
const [collegeEnrollmentStatus, setCollegeEnrollmentStatus] = useState('');
|
||
const [showFinPrompt, setShowFinPrompt] = useState(false);
|
||
const [financialReady, setFinancialReady] = useState(false); // persisted later if you wish
|
||
const Req = () => <span className="text-red-600 ml-0.5">*</span>;
|
||
const ready = selectedCareer && currentlyWorking && collegeEnrollmentStatus;
|
||
|
||
|
||
// 1) Grab the location state values, if any
|
||
const location = useLocation();
|
||
const {
|
||
socCode,
|
||
cipCodes,
|
||
careerTitle, // <--- we passed this from handleSelectForEducation
|
||
userZip,
|
||
userState,
|
||
} = location.state || {};
|
||
|
||
// 2) On mount, see if location.state has a careerTitle and update local states if needed
|
||
useEffect(() => {
|
||
if (careerTitle) {
|
||
setSelectedCareer(careerTitle);
|
||
setData((prev) => ({
|
||
...prev,
|
||
career_name: careerTitle,
|
||
soc_code: socCode || ''
|
||
}));
|
||
}
|
||
}, [careerTitle, socCode, setData]);
|
||
|
||
// Called whenever other <inputs> change
|
||
const handleChange = (e) => {
|
||
setData(prev => ({ ...prev, [e.target.name]: e.target.value }));
|
||
};
|
||
|
||
// Called when user picks a career from CareerSearch and confirms it
|
||
const handleCareerSelected = (careerObj) => {
|
||
// e.g. { title, soc_code, cip_code, ... }
|
||
setSelectedCareer(careerObj.title);
|
||
setData(prev => ({
|
||
...prev,
|
||
career_name: careerObj.title,
|
||
soc_code: careerObj.soc_code || '' // store SOC if needed
|
||
}));
|
||
};
|
||
|
||
const handleSubmit = () => {
|
||
if (!selectedCareer || !currentlyWorking || !collegeEnrollmentStatus) {
|
||
alert('Please complete all required fields before continuing.');
|
||
return;
|
||
}
|
||
const isInCollege =
|
||
collegeEnrollmentStatus === 'currently_enrolled' ||
|
||
collegeEnrollmentStatus === 'prospective_student';
|
||
|
||
// Merge local state into parent data
|
||
setData(prevData => ({
|
||
...prevData,
|
||
career_name: selectedCareer,
|
||
college_enrollment_status: collegeEnrollmentStatus,
|
||
currently_working: currentlyWorking,
|
||
inCollege: isInCollege,
|
||
// fallback defaults, or use user-provided
|
||
status: prevData.status || 'planned',
|
||
start_date: prevData.start_date || new Date().toISOString().slice(0, 10).slice(0, 10),
|
||
projected_end_date: prevData.projected_end_date || null
|
||
}));
|
||
|
||
nextStep();
|
||
};
|
||
|
||
return (
|
||
<div className="max-w-md mx-auto p-6 space-y-4">
|
||
<h2 className="text-2xl font-semibold">Career Details</h2>
|
||
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">
|
||
Are you currently earning any income — even part-time or outside your intended career path? <Req />
|
||
</label>
|
||
<p className="text-sm text-gray-600">
|
||
(We ask this to understand your financial picture. This won’t affect how we track your progress toward your target career.)
|
||
</p>
|
||
<select
|
||
value={currentlyWorking}
|
||
onChange={(e) => {
|
||
setCurrentlyWorking(e.target.value);
|
||
setData(prev => ({ ...prev, currently_working: e.target.value }));
|
||
}}
|
||
required
|
||
className="w-full border rounded p-2"
|
||
>
|
||
<option value="">Select one</option>
|
||
<option value="yes">Yes</option>
|
||
<option value="no">No</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* 2) Replace old local “Search for Career” with <CareerSearch/> */}
|
||
<div className="space-y-2">
|
||
<h3 className="font-medium">
|
||
What career are you planning to pursue? <Req />
|
||
</h3>
|
||
<p className="text-sm text-gray-600">
|
||
This should be your <strong>target career path</strong> — whether it’s a new goal or the one you're already in.
|
||
</p>
|
||
|
||
<CareerSearch onCareerSelected={handleCareerSelected} required />
|
||
</div>
|
||
|
||
{selectedCareer && (
|
||
<p className="text-gray-700">
|
||
Selected Career: <strong>{selectedCareer}</strong>
|
||
</p>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">Status:</label>
|
||
<select
|
||
name="status"
|
||
onChange={handleChange}
|
||
value={data.status || ''}
|
||
className="w-full border rounded p-2"
|
||
>
|
||
<option value="">Select Status</option>
|
||
<option value="planned">Planned</option>
|
||
<option value="current">Current</option>
|
||
<option value="exploring">Exploring</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">Career Start Date:</label>
|
||
<input
|
||
name="start_date"
|
||
type="date"
|
||
onChange={handleChange}
|
||
value={data.start_date || ''}
|
||
className="w-full border rounded p-2"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">Projected End Date (optional):</label>
|
||
<input
|
||
name="projected_end_date"
|
||
type="date"
|
||
onChange={handleChange}
|
||
value={data.projected_end_date || ''}
|
||
className="w-full border rounded p-2"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">
|
||
Are you currently enrolled in college or planning to enroll? <Req />
|
||
</label>
|
||
<select
|
||
value={collegeEnrollmentStatus}
|
||
onChange={(e) => {
|
||
setCollegeEnrollmentStatus(e.target.value);
|
||
setData(prev => ({ ...prev, college_enrollment_status: e.target.value }));
|
||
const needsPrompt = ['currently_enrolled', 'prospective_student'].includes(e.target.value);
|
||
setShowFinPrompt(needsPrompt);
|
||
}}
|
||
required
|
||
className="w-full border rounded p-2"
|
||
>
|
||
<option value="">Select one</option>
|
||
<option value="not_enrolled">Not Enrolled / Not Planning</option>
|
||
<option value="currently_enrolled">Currently Enrolled</option>
|
||
<option value="prospective_student">Planning to Enroll (Prospective)</option>
|
||
</select>
|
||
|
||
{showFinPrompt && !financialReady && (
|
||
<div className="mt-4 p-4 rounded border border-blue-300 bg-blue-50">
|
||
<p className="text-sm mb-3">
|
||
We can give you step-by-step milestones right away. <br />
|
||
If you’d also like a personal cash-flow & tuition projection,<br />
|
||
add a few financial details now—or skip and do it later.
|
||
</p>
|
||
|
||
<button
|
||
className="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded mr-2"
|
||
onClick={() => {
|
||
/* open your ScenarioEditModal or a mini financial modal */
|
||
setShowFinPrompt(false);
|
||
/* maybe set a flag so CareerRoadmap opens the modal */
|
||
}}
|
||
>
|
||
Add Financial Details
|
||
</button>
|
||
|
||
<button
|
||
className="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"
|
||
onClick={() => {
|
||
setFinancialReady(false); // they chose to skip
|
||
setShowFinPrompt(false);
|
||
nextStep(); // continue onboarding
|
||
}}
|
||
>
|
||
Skip for Now
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="block font-medium">Career Goals</label>
|
||
<textarea
|
||
name="career_goals"
|
||
value={data.career_goals || ''}
|
||
onChange={handleChange}
|
||
className="w-full border rounded p-2"
|
||
placeholder="Tell us about your goals, aspirations, or next steps..."
|
||
/>
|
||
</div>
|
||
<div className="flex justify-between pt-4">
|
||
<button
|
||
onClick={prevStep}
|
||
className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
|
||
>
|
||
Back
|
||
</button>
|
||
<button
|
||
onClick={handleSubmit}
|
||
disabled={!ready}
|
||
className={`py-2 px-4 rounded font-semibold
|
||
${selectedCareer && currentlyWorking && collegeEnrollmentStatus
|
||
? 'bg-blue-500 hover:bg-blue-600 text-white'
|
||
: 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
|
||
>
|
||
Financial →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CareerOnboarding;
|