-
+
-
+
-
+
- {/* Only show the planned overrides if isEditMode is true */}
- {isEditMode && (
-
- )}
-
+
+ {showExpensesWizard && (
+ setShowExpensesWizard(false)}>
+ setShowExpensesWizard(false)}
+ onExpensesCalculated={handleExpensesCalculated}
+ />
+
+ )}
+
);
diff --git a/src/components/PremiumOnboarding/OnboardingContainer.js b/src/components/PremiumOnboarding/OnboardingContainer.js
index 37cb6d1..8b1e061 100644
--- a/src/components/PremiumOnboarding/OnboardingContainer.js
+++ b/src/components/PremiumOnboarding/OnboardingContainer.js
@@ -1,4 +1,3 @@
-// OnboardingContainer.js
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import PremiumWelcome from './PremiumWelcome.js';
@@ -12,41 +11,62 @@ import authFetch from '../../utils/authFetch.js';
const OnboardingContainer = () => {
console.log('OnboardingContainer MOUNT');
+ const navigate = useNavigate();
+
+ // 1. Local state for multi-step onboarding
const [step, setStep] = useState(0);
const [careerData, setCareerData] = useState({});
const [financialData, setFinancialData] = useState({});
const [collegeData, setCollegeData] = useState({});
- const navigate = useNavigate();
- const nextStep = () => setStep(step + 1);
- const prevStep = () => setStep(step - 1);
+ // 2. On mount, check if localStorage has onboarding data
+ useEffect(() => {
+ const stored = localStorage.getItem('premiumOnboardingState');
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored);
+ // Restore step and data if they exist
+ if (parsed.step !== undefined) setStep(parsed.step);
+ if (parsed.careerData) setCareerData(parsed.careerData);
+ if (parsed.financialData) setFinancialData(parsed.financialData);
+ if (parsed.collegeData) setCollegeData(parsed.collegeData);
+ } catch (err) {
+ console.warn('Failed to parse premiumOnboardingState:', err);
+ }
+ }
+ }, []);
+
+ // 3. Whenever any key pieces of state change, save to localStorage
+ useEffect(() => {
+ const stateToStore = {
+ step,
+ careerData,
+ financialData,
+ collegeData
+ };
+ localStorage.setItem('premiumOnboardingState', JSON.stringify(stateToStore));
+ }, [step, careerData, financialData, collegeData]);
+
+ // Move user to next or previous step
+ const nextStep = () => setStep((prev) => prev + 1);
+ const prevStep = () => setStep((prev) => prev - 1);
function parseFloatOrNull(value) {
- // If user left it blank ("" or undefined), treat it as NULL.
- if (value == null || value === '') {
- return null;
+ if (value == null || value === '') {
+ return null;
+ }
+ const parsed = parseFloat(value);
+ return isNaN(parsed) ? null : parsed;
}
- const parsed = parseFloat(value);
- // If parseFloat can't parse, also return null
- return isNaN(parsed) ? null : parsed;
-}
console.log('Final collegeData in OnboardingContainer:', collegeData);
- // Final “all done” submission when user finishes the last step
+ // 4. Final “all done” submission
const handleFinalSubmit = async () => {
try {
- // Build a scenarioPayload that includes optional planned_* fields:
const scenarioPayload = {
...careerData,
- planned_monthly_expenses: parseFloatOrNull(careerData.planned_monthly_expenses),
- planned_monthly_debt_payments: parseFloatOrNull(careerData.planned_monthly_debt_payments),
- planned_monthly_retirement_contribution: parseFloatOrNull(careerData.planned_monthly_retirement_contribution),
- planned_monthly_emergency_contribution: parseFloatOrNull(careerData.planned_monthly_emergency_contribution),
- planned_surplus_emergency_pct: parseFloatOrNull(careerData.planned_surplus_emergency_pct),
- planned_surplus_retirement_pct: parseFloatOrNull(careerData.planned_surplus_retirement_pct),
- planned_additional_income: parseFloatOrNull(careerData.planned_additional_income),
-};
+ };
// 1) POST career-profile (scenario)
const careerRes = await authFetch('/api/premium/career-profile', {
@@ -56,7 +76,7 @@ const OnboardingContainer = () => {
});
if (!careerRes.ok) throw new Error('Failed to save career profile');
const careerJson = await careerRes.json();
- const { career_profile_id } = careerJson; // <-- Renamed from career_profile_id
+ const { career_profile_id } = careerJson;
if (!career_profile_id) {
throw new Error('No career_profile_id returned by server');
}
@@ -69,34 +89,38 @@ const OnboardingContainer = () => {
});
if (!financialRes.ok) throw new Error('Failed to save financial profile');
- // 3) Only do college-profile if user is "currently_enrolled" or "prospective_student"
- if (
- careerData.college_enrollment_status === 'currently_enrolled' ||
- careerData.college_enrollment_status === 'prospective_student'
- ) {
- const mergedCollege = {
- ...collegeData,
- career_profile_id,
- college_enrollment_status: careerData.college_enrollment_status,
- };
- const collegeRes = await authFetch('/api/premium/college-profile', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(mergedCollege),
- });
- if (!collegeRes.ok) throw new Error('Failed to save college profile');
- } else {
- console.log('Skipping college-profile upsert because user is not enrolled/planning.');
- }
+ // 3) Possibly POST college-profile
+ if (
+ careerData.college_enrollment_status === 'currently_enrolled' ||
+ careerData.college_enrollment_status === 'prospective_student'
+ ) {
+ const mergedCollege = {
+ ...collegeData,
+ career_profile_id,
+ college_enrollment_status: careerData.college_enrollment_status,
+ };
+ const collegeRes = await authFetch('/api/premium/college-profile', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(mergedCollege),
+ });
+ if (!collegeRes.ok) throw new Error('Failed to save college profile');
+ } else {
+ console.log('Skipping college-profile upsert because user is not enrolled/planning.');
+ }
- // Done => navigate
- navigate('/milestone-tracker');
+ // 4) Clear localStorage so next onboarding starts fresh (optional)
+ localStorage.removeItem('premiumOnboardingState');
+
+ // 5) Navigate away
+ navigate('/milestone-tracker');
} catch (err) {
console.error(err);
- // (optionally show error to user)
+ // Optionally show error to user
}
};
+ // 5. Array of steps
const onboardingSteps = [
,
@@ -121,7 +145,6 @@ const OnboardingContainer = () => {
nextStep={nextStep}
data={{
...collegeData,
- // keep enrollment status from careerData if relevant:
college_enrollment_status: careerData.college_enrollment_status,
}}
setData={setCollegeData}
diff --git a/src/components/PremiumOnboarding/ReviewPage.js b/src/components/PremiumOnboarding/ReviewPage.js
index e7c12d1..c39ad7d 100644
--- a/src/components/PremiumOnboarding/ReviewPage.js
+++ b/src/components/PremiumOnboarding/ReviewPage.js
@@ -87,19 +87,26 @@ function ReviewPage({
{/* --- COLLEGE SECTION --- */}
{inOrPlanningCollege && (
-
-
College Info
-
College Name: {collegeData.college_name || 'N/A'}
-
Major: {collegeData.major || 'N/A'}
- {/* If you have these fields, show them if they're meaningful */}
- {collegeData.tuition != null && (
-
Tuition (calculated): {formatNum(collegeData.tuition)}
- )}
- {collegeData.program_length != null && (
-
Program Length (years): {formatNum(collegeData.program_length)}
- )}
-
- )}
+
+
College Info
+
+
College Name
+
Major
+
Program Type
+
Tuition (calculated)
+
Program Length (years)
+
Credit Hours Per Year
+
Credit Hours Required
+
Hours Completed
+
Is In State?
+
Loan Deferral Until Graduation?
+
Annual Financial Aid
+
Existing College Debt
+
Extra Monthly Payment
+
Expected Graduation
+
Expected Salary
+
+)}
{/* --- ACTION BUTTONS --- */}