From fdcae3bdfbb2ba0089aed4ca78d1e1215509a531 Mon Sep 17 00:00:00 2001
From: Josh <jcoakley@aptivaai.com>
Date: Fri, 18 Jul 2025 13:11:29 +0000
Subject: [PATCH] Fixed skipping Financial Onboarding. and Program Length calc
 for Undergrad Cert.

---
 .../PremiumOnboarding/CareerOnboarding.js     |  17 ++-
 .../PremiumOnboarding/CollegeOnboarding.js    | 100 ++++++++++--------
 .../PremiumOnboarding/OnboardingContainer.js  |  26 +++--
 3 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/components/PremiumOnboarding/CareerOnboarding.js b/src/components/PremiumOnboarding/CareerOnboarding.js
index 4944a3a..35396ea 100644
--- a/src/components/PremiumOnboarding/CareerOnboarding.js
+++ b/src/components/PremiumOnboarding/CareerOnboarding.js
@@ -79,7 +79,12 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
       projected_end_date: prevData.projected_end_date || null
     }));
 
-    nextStep();
+   if (!showFinPrompt || financialReady) {
+
+   nextStep();                       
+ } else {
+
+ }
   };
 
   return (
@@ -111,7 +116,7 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
       {/* 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 />
+            What career are you planning to pursue? (Please select from drop-down suggestions after typing)<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.
@@ -206,9 +211,11 @@ const CareerOnboarding = ({ nextStep, prevStep, data, setData }) => {
               <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
+                 /* mark intent to skip the finance step */
+                  setData(prev => ({ ...prev, skipFinancialStep: true }));
+
+                  setFinancialReady(false);
+                  setShowFinPrompt(false);           // hide the prompt, stay on page
                 }}
               >
                 Skip for Now
diff --git a/src/components/PremiumOnboarding/CollegeOnboarding.js b/src/components/PremiumOnboarding/CollegeOnboarding.js
index b15afc2..1c6e99a 100644
--- a/src/components/PremiumOnboarding/CollegeOnboarding.js
+++ b/src/components/PremiumOnboarding/CollegeOnboarding.js
@@ -9,6 +9,8 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
   const [schoolSuggestions, setSchoolSuggestions] = useState([]);
   const [programSuggestions, setProgramSuggestions] = useState([]);
   const [availableProgramTypes, setAvailableProgramTypes] = useState([]);
+  const [schoolValid,  setSchoolValid]  = useState(false);
+  const [programValid, setProgramValid] = useState(false);
 
   // Show/hide the financial aid wizard
   const [showAidWizard, setShowAidWizard] = useState(false);
@@ -283,49 +285,34 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
   ]);
 
   // auto-calc program length
-  useEffect(() => {
-  // If user hasn't selected a program type or credit_hours_per_year is missing, skip
-  if (!program_type) return;
-  if (!credit_hours_per_year) return;
+ useEffect(() => {
+  if (!program_type || !credit_hours_per_year) return;
 
-  // If hours_completed is blank, treat as 0
   const completed = parseInt(hours_completed, 10) || 0;
-  const perYear = parseFloat(credit_hours_per_year) || 1;
+  const perYear   = parseFloat(credit_hours_per_year) || 1;
 
   let required = 0;
   switch (program_type) {
-    case "Associate's Degree":
-      required = 60;  // total for an associate's
-      break;
-    case "Bachelor's Degree":
-      required = 120; // total for a bachelor's
-      break;
-    case "Master's Degree":
-      required = 180; // e.g. 120 undergrad + 60 grad
-      break;
-    case "Doctoral Degree":
-      required = 240; // e.g. 120 undergrad + 120 grad
-      break;
-    case "First Professional Degree":
-      // If you want 180 or 240, up to you
-      required = 180;
-      break;
+    case "Associate's Degree":           required = 60;  break;
+    case "Bachelor's Degree":            required = 120; break;
+    case "Master's Degree":              required = 180; break;
+    case "Doctoral Degree":              required = 240; break;
+    case "First Professional Degree":    required = 180; break;
     case "Graduate/Professional Certificate":
-      // Possibly read from credit_hours_required
       required = parseInt(credit_hours_required, 10) || 0;
       break;
+    case "Undergraduate Certificate or Diploma":
+      required = parseInt(credit_hours_required, 10) || 30;   // sensible default
+      break;
     default:
-      // For any other program type, use whatever is in credit_hours_required
       required = parseInt(credit_hours_required, 10) || 0;
-      break;
   }
 
-  // Subtract however many credits they've already completed (that count)
-  const remain = required - completed;
-  const yrs = remain / perYear;
-  const calcLength = yrs.toFixed(2);
+  /* never negative */
+  const remain = Math.max(0, required - completed);
+  const yrs    = remain / perYear;
 
-  setAutoProgramLength(calcLength);
+  setAutoProgramLength(yrs.toFixed(2));
 }, [
   program_type,
   hours_completed,
@@ -333,9 +320,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
   credit_hours_required
 ]);
 
-
-
-
   // final handleSubmit => we store chosen tuition + program_length, then move on
   const handleSubmit = () => {
     const chosenTuition = manualTuition.trim() === ''
@@ -358,6 +342,12 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
   const displayedTuition = (manualTuition.trim() === '' ? autoTuition : manualTuition);
   const displayedProgramLength = (manualProgramLength.trim() === '' ? autoProgramLength : manualProgramLength);
 
+  const ready =
+  (college_enrollment_status === 'currently_enrolled' ||
+   college_enrollment_status === 'prospective_student')
+    ? schoolValid && programValid && program_type
+    : true;
+    
   return (
     <div className="max-w-md mx-auto p-6 space-y-4">
       <h2 className="text-2xl font-semibold">College Details</h2>
@@ -412,14 +402,21 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
 
           {/* School */}
           <div className="space-y-1">
-            <label className="block font-medium">School Name* {infoIcon("Start typing and click from auto-suggest")}</label>
+            <label className="block font-medium">School Name* (Please select from drop-down after typing){infoIcon("Start typing and click from auto-suggest")}</label>
             <input
               name="selected_school"
               value={selected_school}
               onChange={handleSchoolChange}
+              onBlur={() => {
+                const ok = schoolData.some(
+                  s => s.INSTNM.toLowerCase() === selected_school.toLowerCase()
+                );
+                setSchoolValid(ok);
+                if (!ok) alert("Please pick a school from the list.");
+              }}
               list="school-suggestions"
-              placeholder="Enter school name..."
-              className="w-full border rounded p-2"
+              className={`w-full border rounded p-2 ${schoolValid ? '' : 'border-red-500'}`}
+              placeholder="Start typing and choose…"
             />
             <datalist id="school-suggestions">
               {schoolSuggestions.map((sch, idx) => (
@@ -433,14 +430,25 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
           </div>
 
           <div className="space-y-1">
-            <label className="block font-medium">Marjor/Program Name* {infoIcon("Search and click from auto-suggest.  If for some reason your major isn't listed, please send us a note.")}</label>
+            <label className="block font-medium">Marjor/Program Name* (Please select from drop-down after typing){infoIcon("Search and click from auto-suggest.  If for some reason your major isn't listed, please send us a note.")}</label>
             <input
               name="selected_program"
               value={selected_program}
               onChange={handleProgramChange}
+              onBlur={() => {
+                const ok =
+                  selected_school &&                      // need a school first
+                  schoolData.some(
+                    s =>
+                      s.INSTNM.toLowerCase() === selected_school.toLowerCase() &&
+                      s.CIPDESC.toLowerCase() === selected_program.toLowerCase()
+                  );
+                setProgramValid(ok);
+                if (!ok) alert("Please pick a program from the list.");
+              }}
               list="program-suggestions"
-              placeholder="Enter program name..."
-              className="w-full border rounded p-2"
+              className={`w-full border rounded p-2 ${programValid ? '' : 'border-red-500'}`}
+              placeholder="Start typing and choose…"
             />
             <datalist id="program-suggestions">
               {programSuggestions.map((prog, idx) => (
@@ -487,9 +495,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
           {/* If Grad/Professional => credit_hours_required */}
           {(program_type === 'Graduate/Professional Certificate' ||
             program_type === 'First Professional Degree' ||
-            program_type === 'Doctoral Degree') && (
+            program_type === 'Doctoral Degree' ||
+            program_type === 'Undergraduate Certificate or Diploma'
+          ) && (
             <div className="space-y-1">
-              <label className="block font-medium">Credit Hours Required {infoIcon("Some Graduate and Professional Programs differ on number of hours required.")}</label>
+              <label className="block font-medium">Credit Hours Required {infoIcon("Some Certificate, Graduate, and Professional Programs differ on number of hours required.")}</label>
               <input
                 type="number"
                 name="credit_hours_required"
@@ -639,7 +649,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
           </div>
 
           <div className="space-y-1">
-            <label className="block font-medium">Expected Salary After Graduation {infoIcon("If you're just starting out, expect towards the 10th percentile values for your targeted career.")}</label>
+            <label className="block font-medium">Expected Salary After Graduation {infoIcon("If you're just starting out, expect towards the 10th percentile values for your targeted career.  Can be found using Career Explorer if needed or input later.")}</label>
             <input
               type="number"
               name="expected_salary"
@@ -664,7 +674,11 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
         </button>
         <button
           onClick={handleSubmit}
-          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+          disabled={!ready}
+          className={`py-2 px-4 rounded font-semibold
+            ${ready
+                ? 'bg-blue-500 hover:bg-blue-600 text-white'
+                : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
         >
           Finish Onboarding
         </button>
diff --git a/src/components/PremiumOnboarding/OnboardingContainer.js b/src/components/PremiumOnboarding/OnboardingContainer.js
index aeac7b8..9c68e53 100644
--- a/src/components/PremiumOnboarding/OnboardingContainer.js
+++ b/src/components/PremiumOnboarding/OnboardingContainer.js
@@ -24,6 +24,7 @@ const OnboardingContainer = () => {
   const [financialData, setFinancialData] = useState({});
   const [collegeData, setCollegeData] = useState({});
   const [lastSelectedCareerProfileId, setLastSelectedCareerProfileId] = useState();
+  const skipFin = careerData.skipFinancialStep;
 
  useEffect(() => {
   // 1) Load premiumOnboardingState
@@ -60,7 +61,6 @@ const OnboardingContainer = () => {
   setCollegeData(localCollegeData);
 }, []);
 
-
   // 3. Whenever any key pieces of state change, save to localStorage
   useEffect(() => {
     const stateToStore = {
@@ -213,15 +213,21 @@ navigate(`/career-roadmap/${finalCareerProfileId}`, {
       setData={setCareerData}
     />,
 
-    <FinancialOnboarding
-      nextStep={nextStep}
-      prevStep={prevStep}
-      data={{
-        ...financialData,
-        currently_working: careerData.currently_working,
-      }}
-      setData={setFinancialData}
-    />,
+        /* insert **only if** the user did NOT press “Skip for now” */
+    ...(!skipFin
+        ? [
+            <FinancialOnboarding
+              key="fin"
+              nextStep={nextStep}
+              prevStep={prevStep}
+              data={{
+                ...financialData,
+                currently_working: careerData.currently_working,
+              }}
+              setData={setFinancialData}
+            />,
+          ]
+        : []),
 
     <CollegeOnboarding
       prevStep={prevStep}