Merge pull request #103 from SCCapstone/quiz/finance_fix

Quiz/finance fix

Author: thienle210303

front-end/src/components/Chatbot.jsx

@@ -9,6 +9,7 @@ import {
 import axios from "axios"
 import { script } from './ChatbotScript'
 import { useNavigate } from "react-router-dom"
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const API_URL = import.meta.env.VITE_API_URL
 
@@ -125,6 +126,7 @@ function Chatbot() {
 
     try {
       // const response = await axios.post(API_URL + '/api/Chatbot/send-message', payload)
+      startWindToast("WARNING!", "Our AI service is currently down", 'warning', 3, 'top')
       // const chatContent = response.data.chatContent
       // const carDescriptions = response.data.carDescriptions
       // const citations = response.data.citations

front-end/src/pages/Quiz.jsx

@@ -1,32 +1,34 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import axios from 'axios'
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const API_URL = import.meta.env.VITE_API_URL
 
 const Quiz = () => {
   const navigate = useNavigate()
-
-  const [answers, setAnswers] = useState({})
-  const [inputValue, setInputValue] = useState("")
-  const [showModal, setShowModal] = useState(true)
+  const [answers, setAnswers] = useState({
+    q1: '',
+    q2: '',
+    q3: '',
+    q4: '',
+    q5: '',
+    q6: '',
+    q7: ''
+  })
   const [recommendedCar, setRecommendedCar] = useState(undefined)
   const [showToast, setShowToast] = useState(undefined)
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [loading, setLoading] = useState(false)
 
   const questions = [
-    "What is your budget?",
+    "What is your current budget?",
     "Do you prefer a new or used car?",
-    "What car brands do you prefer?",
-    "What type of car body do you prefer?",
-    "What model year are you looking for?",
-    "Do you need an environmentally friendly car?",
-    "Do you prefer gas, diesel, electric, or hybrid?",
-    "How many miles are you comfortable with on a used car?",
-    "What color options do you prefer?",
-    "Are there any specific features you must have?",
-    "Tell me about your ideal car and what matters most to you"
+    "What is your desired passenger capacity?",
+    "What will be the purpose of your vehicle?",
+    "What features do you want your vehicle to have?",
+    "What are some things you wouldn't like with your vehicle?",
+    "Are there specific safety features you are looking for?",
   ]
 
   const questionKeys = {
@@ -43,53 +45,24 @@ const Quiz = () => {
     10: "situation description"
   }
 
-  const toggleModal = () => {
-    setShowModal(!showModal)
-  }
-
-  const handleNext = () => {
-    const newAnswers = {
-      ...answers,
-      [questionKeys[currentQuestionIndex]]: inputValue
-    }
-    setAnswers(newAnswers)
-    setInputValue("")
-    if (currentQuestionIndex < questions.length - 1) {
-      setCurrentQuestionIndex(currentQuestionIndex + 1)
-    }
-  }
-
-  const handlePrevious = () => {
-    if (currentQuestionIndex > 0) {
-      setCurrentQuestionIndex(currentQuestionIndex - 1)
-      setInputValue(answers[questionKeys[currentQuestionIndex - 1]] || "")
-    }
-  }
-
   const handleBack = () => {
     navigate(-1)
   }
 
   const handleSubmit = async () => {
-    setLoading(true)
-    const finalAnswers = {
-      ...answers,
-      [questionKeys[currentQuestionIndex]]: inputValue
-    }
-
-    if (Object.values(finalAnswers).every(answer => answer === "")) {
+    if (Object.values(answers).every(answer => answer === "")) {
       setShowToast({ key: 'error', value: 'Please provide at least 1 answer' })
       setTimeout(() => setShowToast(undefined), 3000)
       return
     }
 
-    setAnswers(finalAnswers)
-    const flatAnswer = Object.entries(finalAnswers)
+    const flatAnswer = Object.entries(answers)
       .filter(([_, value]) => value)
-      .map(([key, value]) => `${key}: ${value}`)
-      .join(", ")
-
-    await sendAIQuery(flatAnswer)
+      .map(([_, value], index) => `${questions[index]} ${value}`)
+      .join("; ")
+    setLoading(true)
+    // await sendAIQuery(flatAnswer)
+    startWindToast("WARNING!", "Our AI service is currently down", 'warning', 3, 'top')
     setLoading(false)
   }
 
@@ -128,21 +101,12 @@ const Quiz = () => {
       .map(([key, value]) => `${key}: ${value}`)
       .join(", ")
 
-    await sendAIQuery(flatAnswer + "but not previous vehicle")
+    // await sendAIQuery(flatAnswer + "but not previous vehicle")
     setLoading(false)
   }
 
   return (
-    <div className='flex flex-col justify-center items-center'>
-      {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white text-gray-900 p-6 rounded-lg w-11/12 md:w-1/3 relative shadow-lg">
-            <button onClick={toggleModal} className="absolute top-2 right-2 text-gray-600 text-2xl">&times;</button>
-            <h2 className="text-xl font-bold mb-4 text-blue-900">Here to Help!</h2>
-            <p>Answer a few simple questions, and I'll help you find the perfect car!</p>
-          </div>
-        </div>
-      )}
+    <div className='container mx-auto items-center space-y-2'>
 
       {loading && (
         <div className="fixed toast toast-center toast-middle z-50">
@@ -160,54 +124,40 @@ const Quiz = () => {
         </div>
       )}
 
-      <div className='bg-white text-gray-900 p-6 rounded-lg w-3/4 text-center mt-4 shadow-lg'>
-        <div className='h-2 w-full bg-gray-300'>
-          <div
-            className='h-2 bg-[#0a2530] transition-all duration-300'
-            style={{ width: `${((currentQuestionIndex + 1) / questions.length) * 100}%` }}>
-          </div>
-        </div>
-
-        <div className='mx-auto bg-gradient-to-b from-primary to-gray-600 text-white p-6 rounded-lg w-3/4 text-center mt-4'>
-          <h2 className='text-2xl font-bold mb-2 text-blue-800'>
-            Question {currentQuestionIndex + 1}
-          </h2>
-          <p className='text-xl mb-4'>
-            {questions[currentQuestionIndex]}
-          </p>
-
-          <p className=''>
-            <textarea
-              type='textarea'
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              className='w-full p-2 text-black rounded-md'
-              placeholder=''
-            />
-          </p>
-
-
-          <div className='flex justify-between mt-6'>
-            <button
-              onClick={handlePrevious}
-              disabled={currentQuestionIndex === 0}
-              className={`px-4 py-2 rounded-md text-white bg-gray-400 hover:bg-gray-500 transition ${currentQuestionIndex === 0 ? " cursor-not-allowed" : ""}`}>
-              Previous
-            </button>
-
-            {currentQuestionIndex === questions.length - 1 ? (
-              <button
-                onClick={() => handleSubmit()}
-                className='px-4 py-2 rounded-md text-white bg-green-600 hover:bg-green-500 transition'>
-                Finish
-              </button>
-            ) : (
-              <button
-                onClick={handleNext}
-                className={`px-4 py-2 rounded-md text-white bg-gray-400 hover:bg-gray-500 transition`}>
-                Next
-              </button>
-            )}
+      {/*Quiz section*/}
+      <div className='flex justify-center items-center'>
+        <div className="card bg-base-100 shadow-xl w-11/12 md:w-2/3 lg:w-1/2 border border-blue-900">
+          <div className="card-body py-12 px-24">
+            <h2 className="card-title text-center text-2xl font-bold text-blue-500 self-center">
+              Car Quiz
+            </h2>
+            <div className="form-control">
+              {questions.map((question, index) => {
+                const key = Object.keys(answers)[index]
+                return (
+                  <fieldset className="fieldset" key={index}>
+                    <legend className="fieldset-legend">{question}</legend>
+                    <label className="input">
+                      <input
+                        type='text'
+                        value={answers.key}
+                        onChange={(e) => setAnswers(prev => ({ ...prev, [key]: e.target.value }))}
+                        className='grow'
+                      />
+                      <span className="badge badge-neutral badge-xs">Optional</span>
+                    </label>
+                  </fieldset>
+                )
+              })}
+
+              <div className='flex justify-center items center'>
+                <button
+                  onClick={() => handleSubmit()}
+                  className="mt-2 btn w-1/3  bg-gradient-to-tr from-green-600 via-green-400 to-green-600 text-white hover:from-green-500 hover:to-green-400  transition-transform transform hover:scale-105 shadow-lg">
+                  Finish
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -245,6 +195,8 @@ const Quiz = () => {
           Back to Inter
         </button>
       </div>
+
+
     </div>
   )
 }

front-end/src/pages/SearchPage/VehicleList.jsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { isVehicleSustainable } from './FilterTool'
 import sustainableIcon from 'src/assets/sustainableicon.png'
 

front-end/src/pages/WelcomePage.jsx

@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import CarCarousel from '../components/Carousel'
+import { startWindToast } from "@mariojgt/wind-notify/packages/index.js"
 
 const WelcomePage = () => {
   const navigate = useNavigate();
@@ -8,6 +10,10 @@ const WelcomePage = () => {
     navigate('/inter');
   }
 
+  useEffect(() => {
+    startWindToast("WARNING!", "Our AI service is currently down", 'warning', 10, 'middle');
+  }, [])
+
   return (
     <div className="flex flex-col justify-center items-center space-y-8">
       <div className="text-center lg:text-left lg:space-x-8 lg:p-8 flex flex-col lg:flex-row items-center justify-center">