Fixed Upgrade button and Chatbot intro

backend/server.js

@@ -73,21 +73,32 @@ app.use((req, res, next) => {
 
 // Route for user registration
 app.post('/api/register', async (req, res) => {
-  const { userId, username, password } = req.body;
+  const {
+    userId,
+    username,
+    password,
+    firstname,
+    lastname,
+    email,
+    zipcode,
+    state,
+    area
+  } = req.body;
 
-  if (!userId || !username || !password) {
+  // Validate all required fields
+  if (!userId || !username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
     return res.status(400).json({ error: 'All fields are required' });
   }
 
   try {
-    const hashedPassword = await bcrypt.hash(password, 10); // Hash the password
+    const hashedPassword = await bcrypt.hash(password, 10);
-  
+
-    // Step 1: Insert into user_auth
+    // Insert into user_auth
     const authQuery = `
-      INSERT INTO user_auth (username, hashed_password)
+      INSERT INTO user_auth (user_id, username, hashed_password)
-      VALUES (?, ?)
+      VALUES (?, ?, ?)
     `;
-    db.run(authQuery, [username, hashedPassword], function (err) {
+    db.run(authQuery, [userId, username, hashedPassword], function (err) {
       if (err) {
         console.error('Error inserting into user_auth:', err.message);
         if (err.message.includes('UNIQUE constraint failed')) {
@@ -95,22 +106,19 @@ app.post('/api/register', async (req, res) => {
         }
         return res.status(500).json({ error: 'Failed to register user' });
       }
-  
+
-      const user_id = this.lastID; // Retrieve the auto-generated id from user_auth
+      // Insert into user_profile with actual provided values
-  
-      // Step 2: Insert into user_profile
       const profileQuery = `
-        INSERT INTO user_profile (id, user_id, firstname, lastname, email, zipcode, state, area)
+        INSERT INTO user_profile (user_id, firstname, lastname, email, zipcode, state, area)
-        VALUES (?, ?, NULL, NULL, NULL, NULL, NULL, NULL)
+        VALUES (?, ?, ?, ?, ?, ?, ?)
       `;
-      db.run(profileQuery, [user_id, user_id], (err) => {
+      db.run(profileQuery, [userId, firstname, lastname, email, zipcode, state, area], (err) => {
         if (err) {
           console.error('Error inserting into user_profile:', err.message);
           return res.status(500).json({ error: 'Failed to create user profile' });
         }
-  
+
-        // Return success response after both inserts
+        res.status(201).json({ message: 'User registered successfully', userId });
-        res.status(201).json({ message: 'User registered successfully', user_id });
       });
     });
   } catch (error) {
@@ -119,6 +127,7 @@ app.post('/api/register', async (req, res) => {
   }
 });
 
+
 // Route to save or update user profile
 app.post('/api/user-profile', (req, res) => {
   const token = req.headers.authorization?.split(' ')[1];

backend/server3.js

@@ -66,6 +66,38 @@ const authenticatePremiumUser = (req, res, next) => {
   }
 };
 
+/* ------------------------------------------------------------------
+PREMIUM UPGRADE ENDPOINT
+------------------------------------------------------------------ */
+app.post('/api/activate-premium', (req, res) => {
+  const token = req.headers.authorization?.split(' ')[1];
+  if (!token) {
+    return res.status(401).json({ error: 'Authorization token is required' });
+  }
+
+  let userId;
+  try {
+    const decoded = jwt.verify(token, SECRET_KEY);
+    userId = decoded.userId;
+  } catch (error) {
+    return res.status(401).json({ error: 'Invalid or expired token' });
+  }
+
+  const query = `
+    UPDATE user_profile
+    SET is_premium = 1, is_pro_premium = 1
+    WHERE user_id = ?
+  `;
+  db.run(query, [userId], (err) => {
+    if (err) {
+      console.error('Error updating premium status:', err.message);
+      return res.status(500).json({ error: 'Failed to activate premium' });
+    }
+    res.status(200).json({ message: 'Premium activated successfully' });
+  });
+});
+
+
 /* ------------------------------------------------------------------
    CAREER PROFILE ENDPOINTS
    ------------------------------------------------------------------ */

src/App.js

@@ -7,6 +7,7 @@ import {
   useLocation,
   Link,
 } from 'react-router-dom';
+import { Button } from './components/ui/button.js';
 
 // Import all components
 import PremiumRoute from './components/PremiumRoute.js';
@@ -103,168 +104,114 @@ function App() {
           <h1 className="text-lg font-semibold">
             AptivaAI - Career Guidance Platform (beta)
           </h1>
-
+  
-          {/* Navigation Menu */}
           {isAuthenticated && (
             <nav>
               <ul className="flex space-x-4">
                 {/* Free sections */}
                 <li>
-                  <Link
+                  <Link className="text-blue-600 hover:text-blue-800" to="/getting-started">
-                    className="text-blue-600 hover:text-blue-800"
-                    to="/getting-started"
-                  >
                     Getting Started
                   </Link>
                 </li>
                 <li>
-                  <Link
+                  <Link className="text-blue-600 hover:text-blue-800" to="/interest-inventory">
-                    className="text-blue-600 hover:text-blue-800"
-                    to="/interest-inventory"
-                  >
                     Interest Inventory
                   </Link>
                 </li>
                 <li>
-                  <Link
+                  <Link className="text-blue-600 hover:text-blue-800" to="/dashboard">
-                    className="text-blue-600 hover:text-blue-800"
-                    to="/dashboard"
-                  >
                     Dashboard
                   </Link>
                 </li>
                 <li>
-                  <Link
+                  <Link className="text-blue-600 hover:text-blue-800" to="/profile">
-                    className="text-blue-600 hover:text-blue-800"
-                    to="/profile"
-                  >
                     Profile
                   </Link>
                 </li>
-
+  
-                {/* Premium sections (still checking only user?.is_premium for these) */}
+                {/* Premium sections */}
                 <li>
                   {user?.is_premium ? (
-                    <Link
+                    <Link className="text-blue-600 hover:text-blue-800" to="/milestone-tracker">
-                      className="text-blue-600 hover:text-blue-800"
-                      to="/milestone-tracker"
-                    >
                       Career Planner
                     </Link>
                   ) : (
                     <span className="text-gray-400 cursor-not-allowed">
-                      Milestone Tracker{' '}
+                      Career/Financial Planner{' '}
-                      <span className="text-green-600">
+                      <span className="text-green-600">(Premium)</span>
-                        (Premium Subscribers Only)
-                      </span>
                     </span>
                   )}
                 </li>
-
                 <li>
                   {user?.is_premium ? (
-                    <Link
+                    <Link className="text-blue-600 hover:text-blue-800" to="/financial-profile">
-                      className="text-blue-600 hover:text-blue-800"
-                      to="/financial-profile"
-                    >
                       Financial Profile
                     </Link>
                   ) : (
                     <span className="text-gray-400 cursor-not-allowed">
                       Financial Profile{' '}
-                      <span className="text-green-600">
+                      <span className="text-green-600">(Premium)</span>
-                        (Premium Subscribers Only)
-                      </span>
                     </span>
                   )}
                 </li>
-
                 <li>
                   {user?.is_premium ? (
-                    <Link
+                    <Link className="text-blue-600 hover:text-blue-800" to="/multi-scenario">
-                      className="text-blue-600 hover:text-blue-800"
-                      to="/multi-scenario"
-                    >
                       Multi Scenario
                     </Link>
                   ) : (
                     <span className="text-gray-400 cursor-not-allowed">
-                      Multi Scenario{' '}
+                      Compare Career/Financial Scenarios{' '}
-                      <span className="text-green-600">
+                      <span className="text-green-600">(Premium)</span>
-                        (Premium Subscribers Only)
-                      </span>
                     </span>
                   )}
                 </li>
-
-                <li>
-                  {user?.is_premium ? (
-                    <Link
-                      className="text-blue-600 hover:text-blue-800"
-                      to="/premium-onboarding"
-                    >
-                      Premium Onboarding
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 cursor-not-allowed">
-                      Premium Onboarding{' '}
-                      <span className="text-green-600">
-                        (Premium Subscribers Only)
-                      </span>
-                    </span>
-                  )}
-                </li>
-
-                {/* 3) A new link for Resume Optimizer that checks canAccessPremium */}
                 <li>
                   {canAccessPremium ? (
-                    <Link
+                    <Link className="text-blue-600 hover:text-blue-800" to="/resume-optimizer">
-                      className="text-blue-600 hover:text-blue-800"
-                      to="/resume-optimizer"
-                    >
                       Resume Optimizer
                     </Link>
                   ) : (
                     <span className="text-gray-400 cursor-not-allowed">
                       Resume Optimizer{' '}
-                      <span className="text-green-600">
+                      <span className="text-green-600">(Premium)</span>
-                        (Premium or Pro Only)
-                      </span>
                     </span>
                   )}
                 </li>
-
-                {/* Logout */}
-                <li>
-                <button
-                  className="text-red-600 hover:text-red-800 bg-transparent border-none"
-                  onClick={handleLogout}
-                >
-                  Logout
-                </button>
-                </li>
               </ul>
             </nav>
           )}
         </div>
-
+  
-        {/* "Upgrade to Premium" button if not premium/pro and on a free path */}
+        {/* Grouped Logout and Upgrade buttons */}
-        {showPremiumCTA && isAuthenticated && !canAccessPremium && (
+        {isAuthenticated && (
+          <div className="flex items-center space-x-4">
           <button
-            className="rounded bg-blue-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            className="text-red-600 hover:text-red-800 bg-transparent border-none"
+            onClick={handleLogout}
+          >
+            Logout
+          </button>
+        
+          {showPremiumCTA && !canAccessPremium && (
+            <Button
+            className="bg-green-600 hover:bg-green-700 max-w-fit text-center"
             onClick={() => navigate('/paywall')}
           >
             Upgrade to Premium
-          </button>
+          </Button>
+          )}
+        </div>
         )}
       </header>
-
+  
       {/* Main Content */}
       <main className="flex-1 p-6">
         <Routes>
           {/* Default to /signin */}
           <Route path="/" element={<Navigate to="/signin" />} />
-
+  
           {/* Public routes */}
           <Route
             path="/signin"
@@ -273,10 +220,10 @@ function App() {
             }
           />
           <Route path="/signup" element={<SignUp />} />
-
+  
           {/* Paywall (public) */}
           <Route path="/paywall" element={<Paywall />} />
-
+  
           {/* Authenticated routes */}
           {isAuthenticated && (
             <>
@@ -284,7 +231,7 @@ function App() {
               <Route path="/interest-inventory" element={<InterestInventory />} />
               <Route path="/dashboard" element={<Dashboard />} />
               <Route path="/profile" element={<UserProfile />} />
-
+  
               {/* Premium-only routes */}
               <Route
                 path="/milestone-tracker"
@@ -318,8 +265,8 @@ function App() {
                   </PremiumRoute>
                 }
               />
-
+  
-              {/* 4) The new Resume Optimizer route */}
+              {/* Resume Optimizer route */}
               <Route
                 path="/resume-optimizer"
                 element={
@@ -330,16 +277,17 @@ function App() {
               />
             </>
           )}
-
+  
           {/* 404 / Fallback */}
           <Route path="*" element={<Navigate to="/signin" />} />
         </Routes>
       </main>
-
+  
       {/* Session Handler */}
       <SessionExpiredHandler />
     </div>
   );
+  
 }
 
 export default App;

src/components/Chatbot.js

@@ -7,7 +7,7 @@ const Chatbot = ({ context }) => {
     {
       role: "assistant",
       content:
-        "Hi! I’m here to help you with career suggestions, ROI analysis, and any questions you have about your career. How can I assist you today?",
+        "Hi! I’m here to help you with suggestions, analyzing career options, and any questions you have about your career. How can I assist you today?",
     },
   ]);
   const [input, setInput] = useState("");

src/components/Paywall.js

@@ -1,19 +1,38 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { Button } from './ui/button.js';
 
 const Paywall = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
-  // Extract the selectedCareer from location state
   const { selectedCareer } = state || {};
 
-  const handleSubscribe = () => {
+  const handleSubscribe = async () => {
-    // Once the user subscribes, navigate to MilestoneTracker
+    const token = localStorage.getItem('token');
-    navigate('/PremiumOnboarding', {
+    if (!token) {
-      state: {
+      navigate('/signin');
-        selectedCareer,
+      return;
-      },
+    }
-    });
+
+    try {
+      const response = await fetch('/api/activate-premium', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        navigate('/PremiumOnboarding', { state: { selectedCareer } });
+      } else if (response.status === 401) {
+        navigate('/GettingStarted', { state: { selectedCareer } });
+      } else {
+        console.error('Failed to activate premium:', await response.text());
+      }
+    } catch (err) {
+      console.error('Error activating premium:', err);
+    }
   };
 
   return (
@@ -25,8 +44,14 @@ const Paywall = () => {
         <li>✅ Detailed College Guidance & Analysis</li>
       </ul>
 
-      <button onClick={handleSubscribe}>Subscribe Now</button>
+      <Button
-      <button onClick={() => navigate(-1)}>Cancel / Go Back</button>
+      onClick={handleSubscribe}
+      className="bg-green-600 hover:bg-green-700"
+    >
+      Subscribe Now
+    </Button>
+      
+      <Button onClick={() => navigate(-1)}>Cancel / Go Back</Button>
     </div>
   );
 };

src/components/PremiumOnboarding/CollegeOnboarding.js

@@ -434,7 +434,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
           </div>
 
           <div className="space-y-1">
-            <label className="block font-medium">Annual Financial Aid</label>
+            <label className="block font-medium">(Estimated) Annual Financial Aid</label>
             <input
               type="number"
               name="annual_financial_aid"
@@ -459,17 +459,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
 
           {college_enrollment_status === 'currently_enrolled' && (
             <>
-              <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>
 
               <div className="space-y-1">
                 <label className="block font-medium">Hours Completed</label>

src/components/SignUp.js

@@ -1,18 +1,82 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Button } from './ui/button.js';
 
 function SignUp() {
   const navigate = useNavigate();
+
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [firstname, setFirstname] = useState('');
+  const [lastname, setLastname] = useState('');
+  const [email, setEmail] = useState('');
+  const [zipcode, setZipcode] = useState('');
+  const [state, setState] = useState('');
+  const [area, setArea] = useState('');
+  const [areas, setAreas] = useState([]);
   const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
 
-  const handleSignUp = async (event) => {
+  const states = [
-    event.preventDefault();
+    { name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' },
+    { name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'Colorado', code: 'CO' },
+    { name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DE' }, { name: 'District of Columbia', code: 'DC' },
+    { name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' },
+    { name: 'Idaho', code: 'ID' }, { name: 'Illinois', code: 'IL' }, { name: 'Indiana', code: 'IN' },
+    { name: 'Iowa', code: 'IA' }, { name: 'Kansas', code: 'KS' }, { name: 'Kentucky', code: 'KY' },
+    { name: 'Louisiana', code: 'LA' }, { name: 'Maine', code: 'ME' }, { name: 'Maryland', code: 'MD' },
+    { name: 'Massachusetts', code: 'MA' }, { name: 'Michigan', code: 'MI' }, { name: 'Minnesota', code: 'MN' },
+    { name: 'Mississippi', code: 'MS' }, { name: 'Missouri', code: 'MO' }, { name: 'Montana', code: 'MT' },
+    { name: 'Nebraska', code: 'NE' }, { name: 'Nevada', code: 'NV' }, { name: 'New Hampshire', code: 'NH' },
+    { name: 'New Jersey', code: 'NJ' }, { name: 'New Mexico', code: 'NM' }, { name: 'New York', code: 'NY' },
+    { name: 'North Carolina', code: 'NC' }, { name: 'North Dakota', code: 'ND' }, { name: 'Ohio', code: 'OH' },
+    { name: 'Oklahoma', code: 'OK' }, { name: 'Oregon', code: 'OR' }, { name: 'Pennsylvania', code: 'PA' },
+    { name: 'Rhode Island', code: 'RI' }, { name: 'South Carolina', code: 'SC' }, { name: 'South Dakota', code: 'SD' },
+    { name: 'Tennessee', code: 'TN' }, { name: 'Texas', code: 'TX' }, { name: 'Utah', code: 'UT' },
+    { name: 'Vermont', code: 'VT' }, { name: 'Virginia', code: 'VA' }, { name: 'Washington', code: 'WA' },
+    { name: 'West Virginia', code: 'WV' }, { name: 'Wisconsin', code: 'WI' }, { name: 'Wyoming', code: 'WY' },
+  ];
 
-    if (!username || !password) {
+  useEffect(() => {
-      setError('Please enter a username and password');
+    const fetchAreas = async () => {
+      if (!state) {
+        setAreas([]);
+        return;
+      }
+      try {
+        const res = await fetch(`/api/areas?state=${state}`);
+        const data = await res.json();
+        setAreas(data.areas || []);
+      } catch (err) {
+        console.error('Error fetching areas:', err);
+        setAreas([]);
+      }
+    };
+
+    fetchAreas();
+  }, [state]);
+
+  const handleSignUp = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+    const zipRegex = /^\d{5}$/;
+    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
+
+    if (!username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
+      setError('All fields are required.');
+      return;
+    }
+    if (!emailRegex.test(email)) {
+      setError('Enter a valid email address.');
+      return;
+    }
+    if (!zipRegex.test(zipcode)) {
+      setError('ZIP code must be exactly 5 digits.');
+      return;
+    }
+    if (!passwordRegex.test(password)) {
+      setError('Password must include at least 8 characters, one uppercase, one lowercase, one number, and one special character.');
       return;
     }
 
@@ -21,71 +85,57 @@ function SignUp() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          userId: Math.floor(Math.random() * 10000000), // Temporary ID logic
+          userId: Math.floor(Math.random() * 1000000000),
-          username,
+          username, password, firstname, lastname, email, zipcode, state, area,
-          password,
         }),
       });
 
-      if (response.ok) {
+      const data = await response.json();
-        setSuccess(true);
+
-        console.log('User registered successfully');
+      if (!response.ok) {
-        // Redirect to GettingStarted after successful sign-up
+        setError(data.error || 'Registration failed. Please try again.');
-        navigate('/getting-started');
+        return;
-      } else {
-        const data = await response.json();
-        setError(data.error || 'Failed to register user');
       }
+
+      navigate('/getting-started');
     } catch (err) {
-      console.error('Error during registration:', err.message);
+      console.error(err);
-      setError('An error occurred while registering. Please try again.');
+      setError('An unexpected error occurred. Please try again later.');
     }
   };
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
-      <div className="w-full max-w-sm rounded-md bg-white p-6 shadow-md">
+      <div className="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
-        <h1 className="mb-6 text-center text-2xl font-semibold">Sign Up</h1>
+        <h2 className="mb-4 text-2xl font-semibold text-center">Sign Up</h2>
 
         {error && (
-          <p className="mb-4 rounded bg-red-50 p-2 text-sm text-red-600">
+          <div className="mb-4 p-2 text-sm text-red-600 bg-red-100 rounded">
             {error}
-          </p>
+          </div>
         )}
 
-        {/* 
+        <form onSubmit={handleSignUp} className="space-y-3">
-          Success is briefly shown, but you navigate away immediately 
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
-          after a successful response. You may keep or remove this. 
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
-        */}
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="First Name" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
-        {success && (
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Last Name" value={lastname} onChange={(e) => setLastname(e.target.value)} />
-          <p className="mb-4 rounded bg-green-50 p-2 text-sm text-green-600">
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-            Registration successful!
+          <input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Zip Code" value={zipcode} onChange={(e) => setZipcode(e.target.value)} />
-          </p>
-        )}
 
-        <form onSubmit={handleSignUp} className="flex flex-col space-y-4">
+          <select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={state} onChange={(e) => setState(e.target.value)}>
-          <input
+            <option value="">Select State</option>
-            type="text"
+            {states.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
-            placeholder="Username"
+          </select>
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            className="w-full rounded border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
-          />
 
-          <input
+          <select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={area} onChange={(e) => setArea(e.target.value)}>
-            type="password"
+            <option value="">Select Area</option>
-            placeholder="Password"
+            {areas.map((a, i) => <option key={i} value={a}>{a}</option>)}
-            value={password}
+          </select>
-            onChange={(e) => setPassword(e.target.value)}
-            className="w-full rounded border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
-          />
 
-          <button
+          <Button type="submit" className="w-full">
-            type="submit"
-            className="mx-auto rounded bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none"
-          >
             Sign Up
-          </button>
+          </Button>
         </form>
       </div>
     </div>