UI Update for Premium Onboarding
This commit is contained in:
parent
d207dce5d4
commit
e1f1782b01
@ -1,4 +1,4 @@
|
||||
// CareerOnboarding.js (inline implementation of career search)
|
||||
// CareerOnboarding.js
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Input } from '../ui/input.js'; // Ensure path matches your structure
|
||||
@ -25,7 +25,6 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Fetch careers exactly once on mount
|
||||
useEffect(() => {
|
||||
const fetchCareerTitles = async () => {
|
||||
try {
|
||||
@ -62,7 +61,6 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
fetchCareerTitles();
|
||||
}, []);
|
||||
|
||||
// Update career selection automatically whenever the searchInput matches a valid career explicitly
|
||||
useEffect(() => {
|
||||
if (careers.includes(searchInput)) {
|
||||
setSelectedCareer(searchInput);
|
||||
@ -78,7 +76,6 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
const inputValue = e.target.value;
|
||||
setSearchInput(inputValue);
|
||||
|
||||
// only set explicitly when an exact match occurs
|
||||
if (careers.includes(inputValue)) {
|
||||
setSelectedCareer(inputValue);
|
||||
setData(prev => ({ ...prev, career_name: inputValue }));
|
||||
@ -110,11 +107,11 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
nextStep();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Career Details</h2>
|
||||
<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 working or earning any income (even part-time)?
|
||||
</label>
|
||||
@ -127,14 +124,16 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Search for Career</h3>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-medium">Search for Career</h3>
|
||||
<input
|
||||
value={searchInput}
|
||||
onChange={handleCareerInputChange}
|
||||
placeholder="Start typing a career..."
|
||||
list="career-titles"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
<datalist id="career-titles">
|
||||
{careers.map((career, index) => (
|
||||
@ -143,22 +142,50 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
{selectedCareer && <p>Selected Career: <strong>{selectedCareer}</strong></p>}
|
||||
{selectedCareer && (
|
||||
<p className="text-gray-700">
|
||||
Selected Career: <strong>{selectedCareer}</strong>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<label>Status:</label>
|
||||
<select name="status" onChange={handleChange} value={data.status || ''}>
|
||||
<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>
|
||||
|
||||
<label>Career Start Date:</label>
|
||||
<input name="start_date" type="date" onChange={handleChange} value={data.start_date || ''} />
|
||||
<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>
|
||||
|
||||
<label>Projected End Date (optional):</label>
|
||||
<input name="projected_end_date" type="date" onChange={handleChange} value={data.projected_end_date || ''} />
|
||||
<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?
|
||||
</label>
|
||||
@ -172,9 +199,22 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
|
||||
<option value="currently_enrolled">Currently Enrolled</option>
|
||||
<option value="prospective_student">Planning to Enroll (Prospective Student)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button onClick={prevStep}>Back</button>
|
||||
<button onClick={handleSubmit}>Financial →</button>
|
||||
<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}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
|
||||
>
|
||||
Financial →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// CollegeOnboarding.js
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import authFetch from '../../utils/authFetch.js';
|
||||
|
||||
|
||||
function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId }) {
|
||||
// CIP / iPEDS local states (purely for CIP data and suggestions)
|
||||
const [schoolData, setSchoolData] = useState([]);
|
||||
@ -11,8 +11,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
const [availableProgramTypes, setAvailableProgramTypes] = useState([]);
|
||||
|
||||
// ---- DESCTRUCTURE PARENT DATA FOR ALL FIELDS EXCEPT TUITION/PROGRAM_LENGTH ----
|
||||
// We'll store user "typed" values for tuition/program_length in local states,
|
||||
// but everything else comes directly from `data`.
|
||||
const {
|
||||
college_enrollment_status = '',
|
||||
selected_school = '',
|
||||
@ -34,59 +32,42 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
hours_completed = '',
|
||||
credit_hours_required = '',
|
||||
tuition_paid = '',
|
||||
// We do NOT consume data.tuition or data.program_length directly here
|
||||
// because we store them in local states (manualTuition, manualProgramLength).
|
||||
} = data;
|
||||
|
||||
// ---- 1. LOCAL STATES for auto/manual logic on TWO fields ----
|
||||
// manualTuition: user typed override
|
||||
// autoTuition: iPEDS calculation
|
||||
const [manualTuition, setManualTuition] = useState(''); // '' means no manual override
|
||||
const [manualTuition, setManualTuition] = useState('');
|
||||
const [autoTuition, setAutoTuition] = useState(0);
|
||||
|
||||
// same approach for program_length
|
||||
const [manualProgramLength, setManualProgramLength] = useState('');
|
||||
const [autoProgramLength, setAutoProgramLength] = useState('0.00');
|
||||
|
||||
// ------------------------------------------
|
||||
// Universal handleChange for all parent fields
|
||||
// ------------------------------------------
|
||||
// -- universal handleChange for all parent fields except tuition/program_length
|
||||
const handleParentFieldChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
let val = value;
|
||||
if (type === 'checkbox') {
|
||||
val = checked;
|
||||
}
|
||||
// parse numeric fields that are NOT tuition or program_length
|
||||
if (['interest_rate','loan_term','extra_payment','expected_salary'].includes(name)) {
|
||||
val = parseFloat(val) || 0;
|
||||
} else if (
|
||||
['annual_financial_aid','existing_college_debt','credit_hours_per_year',
|
||||
'hours_completed','credit_hours_required','tuition_paid']
|
||||
.includes(name)
|
||||
'hours_completed','credit_hours_required','tuition_paid'].includes(name)
|
||||
) {
|
||||
val = val === '' ? '' : parseFloat(val);
|
||||
}
|
||||
|
||||
setData(prev => ({ ...prev, [name]: val }));
|
||||
};
|
||||
|
||||
// ------------------------------------------
|
||||
// handleManualTuition, handleManualProgramLength
|
||||
// for local fields
|
||||
// ------------------------------------------
|
||||
const handleManualTuitionChange = (e) => {
|
||||
// user typed something => override
|
||||
setManualTuition(e.target.value); // store as string for partial typing
|
||||
setManualTuition(e.target.value);
|
||||
};
|
||||
|
||||
const handleManualProgramLengthChange = (e) => {
|
||||
setManualProgramLength(e.target.value);
|
||||
};
|
||||
|
||||
// ------------------------------------------
|
||||
// CIP Data fetch once
|
||||
// ------------------------------------------
|
||||
// CIP fetch
|
||||
useEffect(() => {
|
||||
async function fetchCipData() {
|
||||
try {
|
||||
@ -104,9 +85,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
fetchCipData();
|
||||
}, []);
|
||||
|
||||
// ------------------------------------------
|
||||
// iPEDS Data fetch once
|
||||
// ------------------------------------------
|
||||
// iPEDS fetch
|
||||
useEffect(() => {
|
||||
async function fetchIpedsData() {
|
||||
try {
|
||||
@ -125,9 +104,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
fetchIpedsData();
|
||||
}, []);
|
||||
|
||||
// ------------------------------------------
|
||||
// handleSchoolChange, handleProgramChange, etc. => update parent fields
|
||||
// ------------------------------------------
|
||||
// handleSchoolChange
|
||||
const handleSchoolChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setData(prev => ({
|
||||
@ -137,7 +114,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
program_type: '',
|
||||
credit_hours_required: '',
|
||||
}));
|
||||
// CIP suggestions
|
||||
const filtered = schoolData.filter(s =>
|
||||
s.INSTNM.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
@ -163,7 +139,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
const handleProgramChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setData(prev => ({ ...prev, selected_program: value }));
|
||||
|
||||
if (!value) {
|
||||
setProgramSuggestions([]);
|
||||
return;
|
||||
@ -188,11 +163,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
program_type: val,
|
||||
credit_hours_required: '',
|
||||
}));
|
||||
setManualProgramLength(''); // reset manual override
|
||||
setManualProgramLength('');
|
||||
setAutoProgramLength('0.00');
|
||||
};
|
||||
|
||||
// Once we have school+program, load possible program types
|
||||
// once we have school+program, load possible program types
|
||||
useEffect(() => {
|
||||
if (!selected_program || !selected_school || !schoolData.length) return;
|
||||
const possibleTypes = schoolData
|
||||
@ -204,15 +179,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
setAvailableProgramTypes([...new Set(possibleTypes)]);
|
||||
}, [selected_program, selected_school, schoolData]);
|
||||
|
||||
// ------------------------------------------
|
||||
// Auto-calc Tuition => store in local autoTuition
|
||||
// ------------------------------------------
|
||||
// auto-calc tuition
|
||||
useEffect(() => {
|
||||
// do we have enough to calc?
|
||||
if (!icTuitionData.length) return;
|
||||
if (!selected_school || !program_type || !credit_hours_per_year) return;
|
||||
|
||||
// find row
|
||||
const found = schoolData.find(s => s.INSTNM.toLowerCase() === selected_school.toLowerCase());
|
||||
if (!found) return;
|
||||
const unitId = found.UNITID;
|
||||
@ -221,7 +192,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
const match = icTuitionData.find(row => row.UNITID === unitId);
|
||||
if (!match) return;
|
||||
|
||||
// grad or undergrad
|
||||
const isGradOrProf = [
|
||||
"Master's Degree",
|
||||
"Doctoral Degree",
|
||||
@ -258,7 +228,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
|
||||
const chpy = parseFloat(credit_hours_per_year) || 0;
|
||||
let estimate = 0;
|
||||
// threshold
|
||||
if (chpy < 24 && partTimeRate) {
|
||||
estimate = partTimeRate * chpy;
|
||||
} else {
|
||||
@ -266,15 +235,12 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
}
|
||||
|
||||
setAutoTuition(Math.round(estimate));
|
||||
|
||||
}, [
|
||||
icTuitionData, selected_school, program_type,
|
||||
credit_hours_per_year, is_in_state, is_in_district, schoolData
|
||||
]);
|
||||
|
||||
// ------------------------------------------
|
||||
// Auto-calc Program Length => store in local autoProgramLength
|
||||
// ------------------------------------------
|
||||
// auto-calc program length
|
||||
useEffect(() => {
|
||||
if (!program_type) return;
|
||||
if (!hours_completed || !credit_hours_per_year) return;
|
||||
@ -299,9 +265,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
setAutoProgramLength(calcLength);
|
||||
}, [program_type, hours_completed, credit_hours_per_year, credit_hours_required]);
|
||||
|
||||
// ------------------------------------------
|
||||
// handleSubmit => merges final chosen values
|
||||
// ------------------------------------------
|
||||
// final handleSubmit
|
||||
const handleSubmit = () => {
|
||||
const chosenTuition = manualTuition.trim() === ''
|
||||
? autoTuition
|
||||
@ -310,78 +274,78 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
? autoProgramLength
|
||||
: manualProgramLength;
|
||||
|
||||
// Update parent’s data (collegeData)
|
||||
setData(prev => ({
|
||||
...prev,
|
||||
tuition: chosenTuition, // match name used by parent or server
|
||||
program_length: chosenProgramLength // match name used by parent
|
||||
tuition: chosenTuition,
|
||||
program_length: chosenProgramLength
|
||||
}));
|
||||
|
||||
// Then go to the next step in the parent’s wizard
|
||||
nextStep();
|
||||
};
|
||||
|
||||
// The displayed tuition => (manualTuition !== '' ? manualTuition : autoTuition)
|
||||
const displayedTuition = (manualTuition.trim() === '' ? autoTuition : manualTuition);
|
||||
|
||||
// The displayed program length => (manualProgramLength !== '' ? manualProgramLength : autoProgramLength)
|
||||
const displayedProgramLength = (manualProgramLength.trim() === '' ? autoProgramLength : manualProgramLength);
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>College Details</h2>
|
||||
<div className="max-w-md mx-auto p-6 space-y-4">
|
||||
<h2 className="text-2xl font-semibold">College Details</h2>
|
||||
|
||||
{(college_enrollment_status === 'currently_enrolled' ||
|
||||
college_enrollment_status === 'prospective_student') ? (
|
||||
<>
|
||||
<label>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_in_district"
|
||||
checked={is_in_district}
|
||||
onChange={handleParentFieldChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
In District?
|
||||
</label>
|
||||
<label className="font-medium">In District?</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_in_state"
|
||||
checked={is_in_state}
|
||||
onChange={handleParentFieldChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
In State Tuition?
|
||||
</label>
|
||||
<label className="font-medium">In State Tuition?</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="is_online"
|
||||
checked={is_online}
|
||||
onChange={handleParentFieldChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
Program is Fully Online
|
||||
</label>
|
||||
<label className="font-medium">Program is Fully Online</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="loan_deferral_until_graduation"
|
||||
checked={loan_deferral_until_graduation}
|
||||
onChange={handleParentFieldChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
Defer Loan Payments until Graduation?
|
||||
</label>
|
||||
<label className="font-medium">Defer Loan Payments until Graduation?</label>
|
||||
</div>
|
||||
|
||||
<label>School Name*</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">School Name*</label>
|
||||
<input
|
||||
name="selected_school"
|
||||
value={selected_school}
|
||||
onChange={handleSchoolChange}
|
||||
list="school-suggestions"
|
||||
placeholder="Enter school name..."
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
<datalist id="school-suggestions">
|
||||
{schoolSuggestions.map((sch, idx) => (
|
||||
@ -392,14 +356,17 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
/>
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<label>Program Name*</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Program Name*</label>
|
||||
<input
|
||||
name="selected_program"
|
||||
value={selected_program}
|
||||
onChange={handleProgramChange}
|
||||
list="program-suggestions"
|
||||
placeholder="Enter program name..."
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
<datalist id="program-suggestions">
|
||||
{programSuggestions.map((prog, idx) => (
|
||||
@ -410,153 +377,203 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
/>
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<label>Program Type*</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Program Type*</label>
|
||||
<select
|
||||
name="program_type"
|
||||
value={program_type}
|
||||
onChange={handleProgramTypeSelect}
|
||||
className="w-full border rounded p-2"
|
||||
>
|
||||
<option value="">Select Program Type</option>
|
||||
{availableProgramTypes.map((t, i) => (
|
||||
<option key={i} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{(program_type === 'Graduate/Professional Certificate' ||
|
||||
program_type === 'First Professional Degree' ||
|
||||
program_type === 'Doctoral Degree') && (
|
||||
<>
|
||||
<label>Credit Hours Required</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Credit Hours Required</label>
|
||||
<input
|
||||
type="number"
|
||||
name="credit_hours_required"
|
||||
value={credit_hours_required}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 30"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label>Credit Hours Per Year</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Credit Hours Per Year</label>
|
||||
<input
|
||||
type="number"
|
||||
name="credit_hours_per_year"
|
||||
value={credit_hours_per_year}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 24"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Yearly Tuition</label>
|
||||
{/* If user typed a custom value => manualTuition, else autoTuition */}
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Yearly Tuition</label>
|
||||
<input
|
||||
type="number"
|
||||
value={displayedTuition}
|
||||
onChange={handleManualTuitionChange}
|
||||
placeholder="Leave blank to use auto, or type an override"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Annual Financial Aid</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Annual Financial Aid</label>
|
||||
<input
|
||||
type="number"
|
||||
name="annual_financial_aid"
|
||||
value={annual_financial_aid}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 2000"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Existing College Loan Debt</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Existing College Loan Debt</label>
|
||||
<input
|
||||
type="number"
|
||||
name="existing_college_debt"
|
||||
value={existing_college_debt}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 2000"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{college_enrollment_status === 'currently_enrolled' && (
|
||||
<>
|
||||
<label>Tuition Paid</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Tuition Paid</label>
|
||||
<input
|
||||
type="number"
|
||||
name="tuition_paid"
|
||||
value={tuition_paid}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="Already paid"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Hours Completed</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Hours Completed</label>
|
||||
<input
|
||||
type="number"
|
||||
name="hours_completed"
|
||||
value={hours_completed}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="Credit hours done"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Program Length</label>
|
||||
{/* If user typed a custom => manualProgramLength, else autoProgramLength */}
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Program Length</label>
|
||||
<input
|
||||
type="number"
|
||||
value={displayedProgramLength}
|
||||
onChange={handleManualProgramLengthChange}
|
||||
placeholder="Leave blank to use auto, or type an override"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<label>Expected Graduation</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Expected Graduation</label>
|
||||
<input
|
||||
type="date"
|
||||
name="expected_graduation"
|
||||
value={expected_graduation}
|
||||
onChange={handleParentFieldChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Loan Interest Rate (%)</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Loan Interest Rate (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="interest_rate"
|
||||
value={interest_rate}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 5.5"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Loan Term (years)</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Loan Term (years)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="loan_term"
|
||||
value={loan_term}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 10"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Extra Monthly Payment</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Extra Monthly Payment</label>
|
||||
<input
|
||||
type="number"
|
||||
name="extra_payment"
|
||||
value={extra_payment}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="Optional"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Expected Salary After Graduation</label>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Expected Salary After Graduation</label>
|
||||
<input
|
||||
type="number"
|
||||
name="expected_salary"
|
||||
value={expected_salary}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="e.g. 65000"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
|
||||
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p>Not currently enrolled or prospective student. Skipping college onboarding.</p>
|
||||
)}
|
||||
|
||||
<button onClick={prevStep} style={{ marginRight: '1rem' }}>← Previous</button>
|
||||
<button onClick={handleSubmit}>Finish Onboarding</button>
|
||||
<div className="pt-4">
|
||||
<button
|
||||
onClick={prevStep}
|
||||
style={{ marginRight: '1rem' }}
|
||||
className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded"
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
|
||||
>
|
||||
Finish Onboarding
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// FinancialOnboarding.js
|
||||
import React from 'react';
|
||||
|
||||
const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = false }) => {
|
||||
@ -13,7 +14,6 @@ const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = f
|
||||
emergency_contribution = 0,
|
||||
extra_cash_emergency_pct = "",
|
||||
extra_cash_retirement_pct = "",
|
||||
|
||||
planned_monthly_expenses = '',
|
||||
planned_monthly_debt_payments = '',
|
||||
planned_monthly_retirement_contribution = '',
|
||||
@ -42,172 +42,250 @@ const FinancialOnboarding = ({ nextStep, prevStep, data, setData, isEditMode = f
|
||||
extra_cash_emergency_pct: 100 - val
|
||||
}));
|
||||
} else {
|
||||
setData(prevData => ({
|
||||
...prevData,
|
||||
[name]: val
|
||||
}));
|
||||
setData(prevData => ({ ...prevData, [name]: val }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Financial Details</h2>
|
||||
<div className="max-w-md mx-auto p-6 space-y-6">
|
||||
<h2 className="text-2xl font-semibold">Financial Details</h2>
|
||||
|
||||
{currently_working === 'yes' && (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block font-medium">Current Annual Salary</label>
|
||||
<input
|
||||
name="current_salary"
|
||||
type="number"
|
||||
placeholder="Current Annual Salary"
|
||||
value={current_salary || ''} // controlled
|
||||
value={current_salary || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Additional Annual Income</label>
|
||||
<input
|
||||
name="additional_income"
|
||||
type="number"
|
||||
placeholder="Additional Annual Income (Investments, annuitites, additional jobs, etc. - optional)"
|
||||
placeholder="Investments, side jobs, etc. (optional)"
|
||||
value={additional_income || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block font-medium">Monthly Expenses</label>
|
||||
<input
|
||||
name="monthly_expenses"
|
||||
type="number"
|
||||
placeholder="Monthly Expenses"
|
||||
value={monthly_expenses || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Monthly Debt Payments (optional)</label>
|
||||
<input
|
||||
name="monthly_debt_payments"
|
||||
type="number"
|
||||
placeholder="Monthly Debt Payments (optional)"
|
||||
placeholder="Monthly Debt Payments"
|
||||
value={monthly_debt_payments || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Retirement Savings</label>
|
||||
<input
|
||||
name="retirement_savings"
|
||||
type="number"
|
||||
placeholder="Retirement Savings"
|
||||
value={retirement_savings || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Monthly Retirement Contribution</label>
|
||||
<input
|
||||
name="retirement_contribution"
|
||||
type="number"
|
||||
placeholder="Monthly Retirement Contribution"
|
||||
value={retirement_contribution || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Emergency Fund Savings</label>
|
||||
<input
|
||||
name="emergency_fund"
|
||||
type="number"
|
||||
placeholder="Emergency Fund Savings"
|
||||
value={emergency_fund || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Monthly Emergency Fund Contribution</label>
|
||||
<input
|
||||
name="emergency_contribution"
|
||||
type="number"
|
||||
placeholder="Monthly Emergency Fund Contribution (optional)"
|
||||
value={emergency_contribution || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Extra Monthly Cash Allocation</h3>
|
||||
<p>If you have extra money left each month after expenses, how would you like to allocate it? (Must add to 100%)</p>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Extra Monthly Cash Allocation</h3>
|
||||
<p className="text-gray-600">
|
||||
If you have extra money left each month after expenses, how would you like to allocate it?
|
||||
(Must add to 100%)
|
||||
</p>
|
||||
|
||||
<label>Extra Monthly Cash to Emergency Fund (%)</label>
|
||||
<div>
|
||||
<label className="block font-medium">Extra Monthly Cash to Emergency Fund (%)</label>
|
||||
<input
|
||||
name="extra_cash_emergency_pct"
|
||||
type="number"
|
||||
placeholder="% to Emergency Savings (e.g., 30)"
|
||||
value={extra_cash_emergency_pct}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Extra Monthly Cash to Retirement Fund (%)</label>
|
||||
<div>
|
||||
<label className="block font-medium">Extra Monthly Cash to Retirement Fund (%)</label>
|
||||
<input
|
||||
name="extra_cash_retirement_pct"
|
||||
type="number"
|
||||
placeholder="% to Retirement Savings (e.g., 70)"
|
||||
value={extra_cash_retirement_pct}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Only show the planned overrides if isEditMode is true */}
|
||||
{isEditMode && (
|
||||
<>
|
||||
<hr />
|
||||
<h2>Planned Scenario Overrides</h2>
|
||||
<p>These fields let you override your real finances for this scenario.</p>
|
||||
{/* Only show the planned overrides if isEditMode is true */}
|
||||
{isEditMode && (
|
||||
<div className="space-y-4">
|
||||
<hr className="my-4" />
|
||||
<h2 className="text-xl font-medium">Planned Scenario Overrides</h2>
|
||||
<p className="text-gray-600">
|
||||
These fields let you override your real finances for this scenario.
|
||||
</p>
|
||||
|
||||
<label>Planned Monthly Expenses</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Monthly Expenses</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_monthly_expenses"
|
||||
value={planned_monthly_expenses}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Monthly Debt Payments</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Monthly Debt Payments</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_monthly_debt_payments"
|
||||
value={planned_monthly_debt_payments}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Monthly Retirement Contribution</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Monthly Retirement Contribution</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_monthly_retirement_contribution"
|
||||
value={planned_monthly_retirement_contribution}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Monthly Emergency Contribution</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Monthly Emergency Contribution</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_monthly_emergency_contribution"
|
||||
value={planned_monthly_emergency_contribution}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Surplus % to Emergency</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Surplus % to Emergency</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_surplus_emergency_pct"
|
||||
value={planned_surplus_emergency_pct}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Surplus % to Retirement</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Surplus % to Retirement</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_surplus_retirement_pct"
|
||||
value={planned_surplus_retirement_pct}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Planned Additional Annual Income</label>
|
||||
<div>
|
||||
<label className="block font-medium">Planned Additional Annual Income</label>
|
||||
<input
|
||||
type="number"
|
||||
name="planned_additional_income"
|
||||
value={planned_additional_income}
|
||||
onChange={handleChange}
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<button onClick={prevStep}>← Previous: Career</button>
|
||||
<button onClick={nextStep}>Next: College →</button>
|
||||
|
||||
<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"
|
||||
>
|
||||
← Previous: Career
|
||||
</button>
|
||||
<button
|
||||
onClick={nextStep}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
|
||||
>
|
||||
Next: College →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,12 +2,17 @@
|
||||
import React from 'react';
|
||||
|
||||
const PremiumWelcome = ({ nextStep }) => (
|
||||
<div>
|
||||
<h2>Welcome to AptivaAI Premium!</h2>
|
||||
<p>
|
||||
<div className="max-w-md mx-auto text-center p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">Welcome to AptivaAI Premium!</h2>
|
||||
<p className="mb-6">
|
||||
Let's get started by gathering some quick information to personalize your experience.
|
||||
</p>
|
||||
<button onClick={nextStep}>Get Started</button>
|
||||
<button
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
|
||||
onClick={nextStep}
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user