diff --git a/src/App.tsx b/src/App.tsx index 5ed8e6153..7e0485555 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,10 +17,8 @@ import { CampusStudentList, ConnectDiscord } from "./modules/Dashboard/modules"; import LandingPage from "./modules/Public/LearningCircles/pages/LandingPage"; import ProfileV2 from "./modules/Dashboard/modules/ProfileV2/pages/Profile"; -import AccountCreation from "./modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation"; import Rolepage from "./modules/Common/Authentication/pages/Onboarding/RolePage/RolePage"; import CollegePage from "./modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage"; -import CompanyPage from "./modules/Common/Authentication/pages/Onboarding/CompanyPage/CompanyPage"; import SignIn from "./modules/Common/Authentication/pages/Onboarding/SignIn/SignIn"; import ErrorLog from "./modules/Dashboard/modules/ErrorLog/ErrorLog"; @@ -43,7 +41,6 @@ import Donation from "./modules/Public/Donation/Donation"; import Refund from "./modules/Public/Donation/pages/Refund"; import DonationSuccess from "./modules/Public/Donation/pages/DonationSuccess"; import OpenGrad from "./modules/Dashboard/modules/OpenGrad"; -import UserInterest from "./modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest"; import LcMeetupIfo from "./modules/Dashboard/modules/LearningCircle/pages/Meetup/LcMeetup"; import OrganizationSetting from "./modules/Dashboard/modules/Settings/pages/Organization/Organization"; import SettingsHome from "./modules/Dashboard/modules/Settings/pages/Settings/SettingsHome"; @@ -58,7 +55,9 @@ import YourLC from "./modules/Dashboard/modules/LearningCircleV2/pages/YourLC/Yo import MoreInfoLC from "./modules/Dashboard/modules/LearningCircleV2/pages/moreInfoLC/MoreInfoLC"; import AttendeeReport from "./modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport"; import LCReport from "./modules/Dashboard/modules/LearningCircleV2/pages/LCReport/LCReport"; +import UserInterest from "./modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest"; import PathFinder from "./modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder"; +import RegisterPage from "./modules/Common/Authentication/pages/Onboarding/Register/Register"; const Profile = lazy( () => import("./modules/Dashboard/modules/Profile/pages/Profile") @@ -302,17 +301,16 @@ function App() { path: "/", element: , children: [ - { path: "register/:role", element: }, + { path: "register/:role", element: }, { path: "register/", children: [ { path: "", - element: + element: } ] }, - { path: "login", element: }, { path: "forgot-password", element: }, { path: "reset-password", element: } diff --git a/src/modules/Common/Authentication/assets/explore.png b/src/modules/Common/Authentication/assets/explore.png new file mode 100644 index 000000000..e4fdb6b94 Binary files /dev/null and b/src/modules/Common/Authentication/assets/explore.png differ diff --git a/src/modules/Common/Authentication/assets/quiz.png b/src/modules/Common/Authentication/assets/quiz.png new file mode 100644 index 000000000..37d549016 Binary files /dev/null and b/src/modules/Common/Authentication/assets/quiz.png differ diff --git a/src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.module.css b/src/modules/Common/Authentication/components/AccountCreation/AccountCreationComponent.module.css similarity index 100% rename from src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.module.css rename to src/modules/Common/Authentication/components/AccountCreation/AccountCreationComponent.module.css diff --git a/src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.tsx b/src/modules/Common/Authentication/components/AccountCreation/AccountCreationComponent.tsx similarity index 76% rename from src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.tsx rename to src/modules/Common/Authentication/components/AccountCreation/AccountCreationComponent.tsx index 4e07133c0..e1e88294f 100644 --- a/src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.tsx +++ b/src/modules/Common/Authentication/components/AccountCreation/AccountCreationComponent.tsx @@ -1,46 +1,29 @@ -import styles from "./AccountCreation.module.css"; -import { HiEye, HiEyeSlash } from "react-icons/hi2"; - -import OnboardingTemplate from "../../../components/OnboardingTeamplate/OnboardingTemplate"; -import OnboardingHeader from "../../../components/OnboardingHeader/OnboardingHeader"; -import { getDWMSDetails } from "../../../services/newOnboardingApis"; +import OnboardingHeader from "../OnboardingHeader/OnboardingHeader"; +import OnboardingTemplate from "../OnboardingTeamplate/OnboardingTemplate"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { Form, Formik } from "formik"; +import { isDev } from "@/MuLearnServices/common_functions"; import * as z from "yup"; +import styles from "./AccountCreationComponent.module.css"; import { FormikTextInputWithoutLabel as SimpleInput } from "@/MuLearnComponents/FormikComponents/FormikComponents"; -import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; -import { useEffect, useState } from "react"; - -import { useNavigate, useParams } from "react-router-dom"; -import makeAnimated from "react-select/animated"; +import { HiEye } from "react-icons/hi"; +import { HiEyeSlash } from "react-icons/hi2"; import { BiSupport } from "react-icons/bi"; -import { isDev } from "@/MuLearnServices/common_functions"; -import { submitUserData } from "../../../services/newOnboardingApis"; +import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; +import { getDWMSDetails } from "../../services/newOnboardingApis"; import toast from "react-hot-toast"; -type DWMSData = { - email: string; - fullName: string; - phoneNumber: string; - gender?: string; - dob?: string; -}; - const scheme = z.object({ email: z .string() .required(`Email is Required`) .min(5, `Email must be at least 3 characters`) .max(100, `Email must be at most 100 characters`), - fullName: z + full_name: z .string() .required(`Full Name is Required`) .min(3, `Full Name must be at least 3 characters`) .max(100, `Full Name must be at most 100 characters`), - // phoneNumber: z - // .string() - // .required(`Phone number is Required`) - // .min(10, `Phone number must be at least 10 characters`) - // .max(10, `Phone number must be at most 10 characters`), ...(isDev() ? { password: z.string().required(`Password is Required`) @@ -52,51 +35,62 @@ const scheme = z.object({ .min(8, `Password must be at least 8 characters`) .max(100, `Password must be at most 100 characters`) }) - // confirmPassword: z - // .string() - // .required(`Password is Required`) - // .test( - // "passwords-match", - // "Passwords are not matching", - // function (value) { - // return this.parent.password === value; - // } - // ) }); -export default function AccountCreation() { - let { role } = useParams(); - const navigate = useNavigate(); - const urlParams = new URLSearchParams(window.location.search); - const param = urlParams.get("param"); - const referralId = urlParams.get("referral_id"); - - const [isLoading, setIsLoading] = useState(false); - const [isVisible, setVisible] = useState(false); - const [dwmsData, setDWMSData] = useState(); - - const [isTncChecked, setTncChecked] = useState(false); - - const [initialValues, setInitialValues] = useState({ +export default function AccountCreationComponent({ + ruri, + isLoading, + setIsLoading, + dwmsParam, + refferalId, + onContinue +}: { + ruri?: string; + isLoading: boolean; + setIsLoading: Dispatch>; + dwmsParam?: string; + refferalId?: string; + onContinue: (data: RegisterRequestDataType) => void; +}) { + const [initialValues, setInitialValues] = useState({ + full_name: "", email: "", - fullName: "", - password: "", - role: "", - muid: "", - communities: [] + password: "" }); - const ruri = window.location.href.split("=")[1]; + const [dwmsData, setDWMSData] = useState(); + const [isVisible, setVisible] = useState(false); + const [isTncChecked, setTncChecked] = useState(false); - role = - role === "student" || role === "mentor" || role === "enabler" - ? role - : "other"; + const onSubmit = (values: any) => { + if (!isTncChecked) { + toast.error("Please accept the terms and conditions"); + return; + } + const userData: RegisterRequestDataType = { + user: { + full_name: values.full_name, + email: values.email, + password: values.password + }, + interests: { + choosen_interests: [], + choosen_endgoals: [], + other_interests: [], + other_endgoals: [] + }, + integration: dwmsParam + ? { param: dwmsParam, title: "DWMS" } + : undefined, + referral: refferalId ? { muid: refferalId } : undefined + }; + onContinue(userData); + }; useEffect(() => { if (isLoading) return; setIsLoading(true); - if (param) { - getDWMSDetails(param, (data: any) => { + if (dwmsParam) { + getDWMSDetails(dwmsParam, (data: any) => { setDWMSData({ email: data?.email_id || "", fullName: @@ -110,10 +104,9 @@ export default function AccountCreation() { setInitialValues({ ...initialValues, email: data?.email_id || "", - fullName: + full_name: data?.job_seeker_fname + " " + data?.job_seeker_lname || "" - // phoneNumber: data?.mobile_no || "" }); }); } @@ -121,63 +114,6 @@ export default function AccountCreation() { setIsLoading(false); }, []); - const onsubmit = async (values: any, actions: any) => { - if (!isTncChecked) { - toast.error("Please accept the terms and conditions"); - return; - } - const userData: { - user: { - full_name: any; - email: any; - password: any; - }; - role?: string; - referral?: { muid: string }; - gender?: string; - dob?: string; - communities?: string[]; - integration?: { - param: string; - title: string; - }; - } = { - user: { - full_name: values.fullName, - email: values.email, - password: values.password - } - }; - - if (dwmsData && dwmsData.gender) { - userData.gender = dwmsData.gender; - } - - if (param) { - userData.integration = { - param: param, - title: "DWMS" - }; - } - - if (dwmsData && dwmsData.dob) { - userData.dob = dwmsData.dob; - } - - submitUserData({ - setIsLoading: setIsLoading, - userData: userData - }).then(res => { - if (res) { - navigate( - ruri - ? `/register/interests/?ruri=${ruri}` - : "/register/interests" - ); - } - }); - }; - return ( {formik => (
@@ -221,12 +157,12 @@ export default function AccountCreation() {
{ + const shuffled = [...questions]; + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; + } + return shuffled; +}; + +export default function PathFinderComponent({ + onContinue +}: { + onContinue: (interests: string[]) => void; +}) { + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(-1); + const [scores, setScores] = useState>( + { + A: 0, + B: 0, + C: 0, + D: 0 + } + ); + const [selectedOptions, setSelectedOptions] = useState< + Record + >({}); + const [questions, setQuestions] = useState([]); + const navigate = useNavigate(); + const [searchParams, setSearchParams] = useSearchParams(); + const ruri = searchParams.get("ruri"); + useEffect(() => { + setQuestions(shuffleQuestions(originalQuestions)); + }, []); + const location = useLocation(); + + const handleNextQuestion = () => { + const updatedScores = { ...scores }; + (selectedOptions[currentQuestionIndex] ?? []).forEach(category => { + updatedScores[category as "A" | "B" | "C" | "D"] += 1; + }); + setScores(updatedScores); + + if (currentQuestionIndex + 1 < questions.length) { + setCurrentQuestionIndex(currentQuestionIndex + 1); + } else { + console.log("getRecommendedPathways", getRecommendedPathways()); + onContinue(getRecommendedPathways()); + } + }; + + const handlePrevQuestion = () => { + if (currentQuestionIndex > 0) { + setCurrentQuestionIndex(currentQuestionIndex - 1); + } + }; + + const handleOptionChange = (category: string) => { + setSelectedOptions(prevSelectedOptions => { + const updatedOptions = [ + ...(prevSelectedOptions[currentQuestionIndex] || []) + ]; + if (updatedOptions.includes(category)) { + const index = updatedOptions.indexOf(category); + updatedOptions.splice(index, 1); // Remove category + } else { + updatedOptions.push(category); // Add category + } + return { + ...prevSelectedOptions, + [currentQuestionIndex]: updatedOptions + }; + }); + }; + + const getRecommendedPathways = () => { + const pathways = []; + if (scores.A > 2) pathways.push("hardware"); + if (scores.B > 2) pathways.push("coder"); + if (scores.C > 2) pathways.push("creative"); + if (scores.D > 2) pathways.push("others"); + return pathways; + }; + + return ( + +
+ {currentQuestionIndex < 0 ? ( +
+
+ navigate( + ruri + ? "/register/interests?ruri=" + ruri + : "/register/interests?ruri=noredirect" + ) + } + > + Explore +

Know what your interest is?

+ Get started by selecting your interests + + Select Interests + +
+
setCurrentQuestionIndex(0)} + > + Quiz +

Not sure what to choose?

+ + Take a quick quiz to find out what interests you + + + Start Quiz + +
+
+ ) : ( +
+ {questions[currentQuestionIndex] && ( + <> + + Question {currentQuestionIndex + 1} of{" "} + {questions.length} + + +

+ {questions[currentQuestionIndex].question} +

+ + + {questions[ + currentQuestionIndex + ].options.map((option, index) => ( + + handleOptionChange( + option.category + ) + } + > + + + ))} + +
+ + handleOptionChange( + option.category + ) + } + /> + {option.text} +
+ +
+ {/* + Skip + */} + + {!selectedOptions[ + currentQuestionIndex + ] || + selectedOptions[currentQuestionIndex] + .length === 0 + ? "Skip" + : currentQuestionIndex + 1 < + questions.length + ? "Continue" + : "Find your interest"}{" "} + {currentQuestionIndex + 1 < + questions.length ? ( + + ) : ( + + )} + +
+ + )} +
+ )} +
+ + ); +} diff --git a/src/modules/Common/Authentication/components/PathFinder/questions.ts b/src/modules/Common/Authentication/components/PathFinder/questions.ts new file mode 100644 index 000000000..9088f62d4 --- /dev/null +++ b/src/modules/Common/Authentication/components/PathFinder/questions.ts @@ -0,0 +1,172 @@ +export const originalQuestions: Question[] = [ + { + question: "What kind of activities do you enjoy the most?", + options: [ + { + text: "Building or crafting physical projects and experimenting with new materials.", + category: "A" + }, + { + text: "Coding and creating software solutions or working with technology.", + category: "B" + }, + { + text: "Designing visual elements, user interfaces, or developing creative content.", + category: "C" + }, + { + text: "Managing projects, understanding market needs, or exploring new knowledge areas.", + category: "D" + } + ] + }, + { + question: + "Which of the following skills do you want to improve or develop?", + options: [ + { + text: "Robotics, 3D printing, or IoT-based projects.", + category: "A" + }, + { + text: "Programming, debugging, or developing new applications and algorithms.", + category: "B" + }, + { + text: "Visual communication, UX/UI design, or multimedia creation.", + category: "C" + }, + { + text: "Leadership, marketing, research, or analysis skills.", + category: "D" + } + ] + }, + { + question: "How do you approach problem-solving?", + options: [ + { + text: "By physically experimenting, creating prototypes, and iterating based on testing.", + category: "A" + }, + { + text: "By writing code, creating logical solutions, and troubleshooting issues.", + category: "B" + }, + { + text: "By brainstorming creative approaches, sketching, or creating visual solutions.", + category: "C" + }, + { + text: "By analyzing the problem holistically, researching, and planning solutions with strategic thinking.", + category: "D" + } + ] + }, + { + question: + "Which tools or resources are you most interested in using or learning?", + options: [ + { + text: "Electronic components, fabrication tools, robotics kits.", + category: "A" + }, + { + text: "Programming languages, development frameworks, software tools.", + category: "B" + }, + { + text: "Graphic design tools, wireframing software, creative suites.", + category: "C" + }, + { + text: "Business models, research papers, management tools, or policy frameworks.", + category: "D" + } + ] + }, + { + question: "What kind of project excites you the most?", + options: [ + { + text: "Creating a new physical device, electronic gadget, or automated system.", + category: "A" + }, + { + text: "Developing an app, creating a software tool, or building a machine learning model.", + category: "B" + }, + { + text: "Designing a logo, improving a website’s user experience, or making digital illustrations.", + category: "C" + }, + { + text: "Organizing an event, analyzing data trends, developing a new business idea.", + category: "D" + } + ] + }, + { + question: "Which statement resonates most with your aspirations?", + options: [ + { + text: "I want to bring my ideas to life by building things with my hands.", + category: "A" + }, + { + text: "I want to create impactful digital solutions and applications.", + category: "B" + }, + { + text: "I want to communicate stories and ideas through design and visuals.", + category: "C" + }, + { + text: "I want to lead, strategize, and innovate to solve broader problems.", + category: "D" + } + ] + }, + { + question: "In a team project, you usually prefer to:", + options: [ + { + text: "Take the lead in building and assembling the project.", + category: "A" + }, + { + text: "Handle the technical aspects and coding of the project.", + category: "B" + }, + { + text: "Focus on the design and presentation of the project.", + category: "C" + }, + { + text: "Organize the project, plan timelines, and ensure communication.", + category: "D" + } + ] + }, + { + question: "What motivates you the most?", + options: [ + { + text: "The thrill of creating something tangible and functional.", + category: "A" + }, + { + text: "Solving complex problems and coding challenges.", + category: "B" + }, + { + text: "Creating visually appealing designs that communicate effectively.", + category: "C" + }, + { + text: "Leading a team to success and achieving strategic goals.", + category: "D" + } + ] + } +]; diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css b/src/modules/Common/Authentication/components/UserInterest/UserInterestComponent.module.css similarity index 100% rename from src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css rename to src/modules/Common/Authentication/components/UserInterest/UserInterestComponent.module.css diff --git a/src/modules/Common/Authentication/components/UserInterest/UserInterestComponent.tsx b/src/modules/Common/Authentication/components/UserInterest/UserInterestComponent.tsx new file mode 100644 index 000000000..a7d6934a8 --- /dev/null +++ b/src/modules/Common/Authentication/components/UserInterest/UserInterestComponent.tsx @@ -0,0 +1,312 @@ +import { useEffect, useState, useCallback } from "react"; +import { + Link, + useLocation, + useNavigate, + useSearchParams +} from "react-router-dom"; +import { TagsInput } from "react-tag-input-component"; +import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; +import { privateGateway, publicGateway } from "@/MuLearnServices/apiGateways"; +import { onboardingRoutes } from "@/MuLearnServices/urls"; + +import styles from "./UserInterestComponent.module.css"; +import muBrand from "/src/modules/Common/Authentication/assets/µLearn.png"; +import OnboardingTemplate from "../OnboardingTeamplate/OnboardingTemplate"; +import creative from "/src/modules/Common/Authentication/assets/interests/creative.svg"; +import maker from "/src/modules/Common/Authentication/assets/interests/makers.svg"; +import software from "/src/modules/Common/Authentication/assets/interests/software.svg"; +import others from "/src/modules/Common/Authentication/assets/interests/others.svg"; + +const CheckMark = () => ( + + + +); + +type InterestGroup = { + id: string; + name: string; + category: string; +}; + +type InterestGroups = { + [key: string]: InterestGroup[]; +}; + +const INITIAL_INTERESTS = [ + { title: "Coder", value: "coder", img: software, checked: false }, + { title: "Hardware", value: "hardware", img: maker, checked: false }, + // { title: "Manager", value: "manager", img: management, checked: false }, + { title: "Creative", value: "creative", img: creative, checked: false }, + { title: "Others", value: "others", img: others, checked: false } +]; + +const INITIAL_ENDGOALS = [ + { title: "Job", value: "job", checked: false }, + { title: "Research & Development", value: "r&d", checked: false }, + { title: "Entrepreneurship", value: "entrepreneurship", checked: false }, + { title: "Gig Works", value: "gig_work", checked: false }, + { title: "Higher Education", value: "higher_education", checked: false }, + { title: "Others", value: "others", checked: false } +]; + +export default function UserInterestSelectionComponent({ + onContinue +}: { + onContinue: (data: RegisterInterestData) => void; +}) { + const [stepTwo, setStepTwo] = useState(false); + const [interestGroups, setInterestGroups] = useState({}); + const navigate = useNavigate(); + const [otherInterest, setOtherInterest] = useState([]); + const [otherEndgoal, setOtherEndgoal] = useState([]); + const [interests, setInterests] = useState(INITIAL_INTERESTS); + const [endgoals, setEndgoals] = useState(INITIAL_ENDGOALS); + const [searchParams, setSearchParams] = useSearchParams(); + const defaultInterests = searchParams.get("interests")?.split(",") ?? []; + const defaultEndgoals = searchParams.get("endgoals")?.split(",") ?? []; + + useEffect(() => { + const fetchInterestGroups = async () => { + try { + const res = await publicGateway.get( + onboardingRoutes.interestGroups + ); + const data: InterestGroup[] = + res.data?.response?.interestGroup ?? []; + + const interestGroupsData = interests.reduce( + (acc, interest) => ({ + ...acc, + [interest.value]: data.filter( + group => group.category === interest.value + ) + }), + {} + ); + + setInterestGroups(interestGroupsData); + } catch (err) { + console.error("Failed to fetch interest groups:", err); + } + }; + + fetchInterestGroups(); + }, []); + + useEffect(() => { + setInterests( + interests.map(i => ({ + ...i, + checked: defaultInterests.includes(i.value) + })) + ); + + setEndgoals( + endgoals.map(e => ({ + ...e, + checked: defaultEndgoals.includes(e.value) + })) + ); + }, []); + + const handleChange = useCallback((value: string, isInterest: boolean) => { + const setter = isInterest ? setInterests : setEndgoals; + const otherSetter = isInterest ? setOtherInterest : setOtherEndgoal; + + setter((prev: any) => { + const newItems = prev.map((item: any) => + item.value === value + ? { ...item, checked: !item.checked } + : item + ); + + if ( + value === "others" && + newItems.find((item: any) => item.value === "others") + ?.checked === false + ) { + otherSetter([]); + } + + return newItems; + }); + }, []); + + const handleContinue = useCallback(() => { + const selectedInterests = interests.filter( + interest => interest.checked + ); + if ( + selectedInterests.some(i => i.value === "others") && + otherInterest.length === 0 + ) { + return; + } + if (selectedInterests.length > 0 || otherInterest.length > 0) { + setStepTwo(true); + } + }, [interests, otherInterest]); + + const handleSubmit = () => { + onContinue({ + choosen_interests: interests + .filter(i => i.checked) + .map(i => i.value), + choosen_endgoals: endgoals.filter(e => e.checked).map(e => e.value), + other_interests: otherInterest, + other_endgoals: otherEndgoal + }); + }; + + const isInterestSelected = interests.some(interest => interest.checked); + const isEndgoalSelected = endgoals.some(endgoal => endgoal.checked); + + const renderItems = useCallback( + (items: typeof interests | typeof endgoals, isInterest: boolean) => ( +
+ {items.map(item => { + const isOthers = item.value === "others"; + const isChecked = item.checked; + const otherItems = isInterest + ? otherInterest + : otherEndgoal; + const setOtherItems = isInterest + ? setOtherInterest + : setOtherEndgoal; + + return ( +
handleChange(item.value, isInterest)} + > + {isChecked && } + {isInterest ? ( +
+ +

{item.title}

+
+ ) : ( +

{item.title}

+ )} + {isInterest && ( + <> +
e.stopPropagation()} + > + + + + +
+
+

This category includes:

+
    + {interestGroups[item.value]?.map( + (group: InterestGroup) => ( +
  • + {group.name} +
    • + ) + )} +
+
+ + )} + {isOthers && isChecked && ( +
e.stopPropagation()}> + { + if (e.target.value.length > 0) { + setOtherItems([ + ...otherItems, + e.target.value + ]); + e.target.value = ""; + } + }} + onChange={setOtherItems} + name={`other_${ + isInterest + ? "interests" + : "endgoals" + }`} + placeHolder={`Specify your ${ + isInterest ? "interest" : "endgoal" + }`} + separators={[","]} + /> +
+ )} +
+ ); + })} +
+ ), + [handleChange, interestGroups, otherInterest, otherEndgoal] + ); + + return ( + + {/* */} +
+
+ mulearn +

+ {stepTwo + ? "What do you expect by MuLearning " + : "What describes you the most!"} +

+

+ {stepTwo + ? "Pick your goal." + : "Please select your interested area"} +

+ + {stepTwo + ? renderItems(endgoals, false) + : renderItems(interests, true)} + + {(stepTwo ? isEndgoalSelected : isInterestSelected) && ( + + Continue + + )} +
+
+ + ); +} diff --git a/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx b/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx index 2db7911b2..749b133e6 100644 --- a/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx +++ b/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx @@ -251,11 +251,7 @@ export default function CollegePage() { ...college_types.map(type => ({ value: type, label: type - })), - { - value: "Others", - label: "Others" - } + })) ] as any } name="org_type" @@ -266,6 +262,7 @@ export default function CollegePage() { onChange={(e: any) => { setSelectedOrgType(e.value); }} + required /> ) : null} {isCollege ? ( diff --git a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css deleted file mode 100644 index da3f4af1c..000000000 --- a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.module.css +++ /dev/null @@ -1,114 +0,0 @@ -.pathFinderContainer { - width: 80%; - margin: 0 auto; - padding: 20px; - background-color: #f9f9f9; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -.pathFinderContainer h1 { - text-align: center; - font-size: 2rem; - margin-bottom: 20px; -} - -.pathFinderContainer p { - font-size: 1rem; - margin-bottom: 20px; -} - -.pathFinderContainer .question-box { - padding: 20px; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.pathFinderContainer .question-no { - font-weight: bold; - color: #333; -} - -.pathFinderContainer h4 { - font-size: 1.25rem; - margin-top: 20px; -} - -.pathFinderContainer .options-table { - width: 100%; - margin-top: 10px; -} - -.pathFinderContainer .options-table td { - padding: 10px 0; - font-size: 1rem; -} - -.pathFinderContainer input[type="checkbox"] { - margin-right: 10px; -} - -.pathFinderContainer .button-container { - display: flex; - justify-content: space-between; /* Aligns buttons to left and right */ - margin-top: 20px; -} - -.pathFinderContainer button.prev { - background-color: #ddd; - color: #333; - padding: 10px 20px; - border: none; - border-radius: 5px; -} - -.pathFinderContainer button.prev:hover { - background-color: #ccc; -} - -.pathFinderContainer button.next { - background-color: #007bff; - color: #fff; - padding: 10px 20px; - border: none; - border-radius: 5px; -} - -.pathFinderContainer button.next:hover { - background-color: #0056b3; -} - -.pathFinderContainer .result-box { - padding: 20px; - background-color: #fff; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.pathFinderContainer .bold-text { - font-weight: bold; - font-size: 1.5rem; - color: #007bff; -} - -.pathFinderContainer .result-heading { - margin-top: 20px; - font-size: 1.25rem; - font-weight: bold; -} - -.pathFinderContainer hr { - margin: 20px 0; - border-top: 2px solid #007bff; -} - -.pathFinderContainer strong { - font-weight: bold; -} - -.pathFinderContainer span { - font-size: 1.25rem; - margin-left: 10px; - color: #333; -} diff --git a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx index 457e541b9..06fbbc891 100644 --- a/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx +++ b/src/modules/Common/Authentication/pages/Onboarding/PathFinder/PathFinder.tsx @@ -1,319 +1,8 @@ -import React, { useState, useEffect } from "react"; -import OnboardingTemplate from "../../../components/OnboardingTeamplate/OnboardingTemplate"; -import styles from "./PathFinder.module.css"; -import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; -import { Button } from "@chakra-ui/react"; +import PathFinderComponent from "../../../components/PathFinder/PathFinderComponent"; -interface Question { - question: string; - options: { text: string; category: string }[]; -} - -const originalQuestions: Question[] = [ - { - question: "What kind of activities do you enjoy the most?", - options: [ - { - text: "Building or crafting physical projects and experimenting with new materials.", - category: "A" - }, - { - text: "Coding and creating software solutions or working with technology.", - category: "B" - }, - { - text: "Designing visual elements, user interfaces, or developing creative content.", - category: "C" - }, - { - text: "Managing projects, understanding market needs, or exploring new knowledge areas.", - category: "D" - } - ] - }, - { - question: "Which of the following skills do you want to improve or develop?", - options: [ - { - text: "Robotics, 3D printing, or IoT-based projects.", - category: "A" - }, - { - text: "Programming, debugging, or developing new applications and algorithms.", - category: "B" - }, - { - text: "Visual communication, UX/UI design, or multimedia creation.", - category: "C" - }, - { - text: "Leadership, marketing, research, or analysis skills.", - category: "D" - } - ] - }, - { - question: "How do you approach problem-solving?", - options: [ - { - text: "By physically experimenting, creating prototypes, and iterating based on testing.", - category: "A" - }, - { - text: "By writing code, creating logical solutions, and troubleshooting issues.", - category: "B" - }, - { - text: "By brainstorming creative approaches, sketching, or creating visual solutions.", - category: "C" - }, - { - text: "By analyzing the problem holistically, researching, and planning solutions with strategic thinking.", - category: "D" - } - ] - }, - { - question: "Which tools or resources are you most interested in using or learning?", - options: [ - { - text: "Electronic components, fabrication tools, robotics kits.", - category: "A" - }, - { - text: "Programming languages, development frameworks, software tools.", - category: "B" - }, - { - text: "Graphic design tools, wireframing software, creative suites.", - category: "C" - }, - { - text: "Business models, research papers, management tools, or policy frameworks.", - category: "D" - } - ] - }, - { - question: "What kind of project excites you the most?", - options: [ - { - text: "Creating a new physical device, electronic gadget, or automated system.", - category: "A" - }, - { - text: "Developing an app, creating a software tool, or building a machine learning model.", - category: "B" - }, - { - text: "Designing a logo, improving a website’s user experience, or making digital illustrations.", - category: "C" - }, - { - text: "Organizing an event, analyzing data trends, developing a new business idea.", - category: "D" - } - ] - }, - { - question: "Which statement resonates most with your aspirations?", - options: [ - { - text: "I want to bring my ideas to life by building things with my hands.", - category: "A" - }, - { - text: "I want to create impactful digital solutions and applications.", - category: "B" - }, - { - text: "I want to communicate stories and ideas through design and visuals.", - category: "C" - }, - { - text: "I want to lead, strategize, and innovate to solve broader problems.", - category: "D" - } - ] - }, - { - question: "In a team project, you usually prefer to:", - options: [ - { - text: "Take the lead in building and assembling the project.", - category: "A" - }, - { - text: "Handle the technical aspects and coding of the project.", - category: "B" - }, - { - text: "Focus on the design and presentation of the project.", - category: "C" - }, - { - text: "Organize the project, plan timelines, and ensure communication.", - category: "D" - } - ] - }, - { - question: "What motivates you the most?", - options: [ - { - text: "The thrill of creating something tangible and functional.", - category: "A" - }, - { - text: "Solving complex problems and coding challenges.", - category: "B" - }, - { - text: "Creating visually appealing designs that communicate effectively.", - category: "C" - }, - { - text: "Leading a team to success and achieving strategic goals.", - category: "D" - } - ] - } -]; - -// Function to shuffle questions randomly -const shuffleQuestions = (questions: Question[]): Question[] => { - const shuffled = [...questions]; - for (let i = shuffled.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; - } - return shuffled; -}; - -const PathFinder: React.FC = () => { - const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); - const [scores, setScores] = useState>( - { - A: 0, - B: 0, - C: 0, - D: 0 - } - ); - const [selectedOptions, setSelectedOptions] = useState>({}); - const [showResults, setShowResults] = useState(false); - const [questions, setQuestions] = useState([]); - - useEffect(() => { - // Shuffle questions whenever the component is loaded - setQuestions(shuffleQuestions(originalQuestions)); - }, []); - - const handleNextQuestion = () => { - if (!selectedOptions[currentQuestionIndex] || selectedOptions[currentQuestionIndex].length === 0) { - alert("Please select at least one option to proceed."); - return; - } - - const updatedScores = { ...scores }; - selectedOptions[currentQuestionIndex].forEach(category => { - updatedScores[category as "A" | "B" | "C" | "D"] += 1; - }); - setScores(updatedScores); - - if (currentQuestionIndex + 1 < questions.length) { - setCurrentQuestionIndex(currentQuestionIndex + 1); - } else { - setShowResults(true); - } - }; - - const handlePrevQuestion = () => { - if (currentQuestionIndex > 0) { - setCurrentQuestionIndex(currentQuestionIndex - 1); - } +export default function PathFinder() { + const onSubmit = (data: string[]) => { + console.log(data); }; - - const handleOptionChange = (category: string) => { - setSelectedOptions(prevSelectedOptions => { - const updatedOptions = [...(prevSelectedOptions[currentQuestionIndex] || [])]; - if (updatedOptions.includes(category)) { - const index = updatedOptions.indexOf(category); - updatedOptions.splice(index, 1); // Remove category - } else { - updatedOptions.push(category); // Add category - } - return { - ...prevSelectedOptions, - [currentQuestionIndex]: updatedOptions - }; - }); - }; - - const getRecommendedPathway = () => { - const maxScore = Math.max(scores.A, scores.B, scores.C, scores.D); - if (scores.A === maxScore) return "Maker"; - if (scores.B === maxScore) return "Coder"; - if (scores.C === maxScore) return "Designer"; - return "Others"; - }; - - return ( - -
-

Pathway Identification Questionnaire

-

- Instructions: For each question, select the options that - best describe you. -

- - {!showResults ? ( -
-

- Question No: {currentQuestionIndex + 1} /{" "} - {questions.length} -

- {questions[currentQuestionIndex] && ( - <> -

- {questions[currentQuestionIndex].question} -

- - - {questions[currentQuestionIndex].options.map((option, index) => ( - - - - ))} - -
- -
- -
- - -
- - )} -
- ) : ( -
-

Your Recommended Pathway: {getRecommendedPathway()}

-
- )} -
- - ); -}; - -export default PathFinder; + return ; +} diff --git a/src/modules/Common/Authentication/pages/Onboarding/Register/Register.tsx b/src/modules/Common/Authentication/pages/Onboarding/Register/Register.tsx new file mode 100644 index 000000000..787aea919 --- /dev/null +++ b/src/modules/Common/Authentication/pages/Onboarding/Register/Register.tsx @@ -0,0 +1,111 @@ +import { useEffect, useState } from "react"; +import { useNavigate, useSearchParams } from "react-router-dom"; +import { submitUserData } from "../../../services/newOnboardingApis"; +import toast from "react-hot-toast"; +import UserInterestSelectionComponent from "../../../components/UserInterest/UserInterestComponent"; +import PathFinderComponent from "../../../components/PathFinder/PathFinderComponent"; +import AccountCreationComponent from "../../../components/AccountCreation/AccountCreationComponent"; +import OnboardingTemplate from "../../../components/OnboardingTeamplate/OnboardingTemplate"; +import { INITIAL_ENDGOALS, INITIAL_INTERESTS } from "../constants"; + +export default function RegisterPage() { + const navigate = useNavigate(); + const [searchParams, setSearchParams] = useSearchParams(); + const param = searchParams.get("param"); + const referralId = searchParams.get("referral_id"); + const ruri = searchParams.get("ruri"); + const interests = (searchParams.get("interests")?.split(",") ?? []).filter( + i => i.length > 1 + ); + const endgoals = (searchParams.get("endgoals")?.split(",") ?? []).filter( + i => i.length > 1 + ); + const [isLoading, setIsLoading] = useState(false); + const [userInterest, setUserInterests] = + useState(null); + + useEffect(() => { + console.log("interests", interests); + if (interests.length < 1) { + } else if (endgoals.length < 1) { + navigate( + "/register/interests?" + + (ruri ? `ruri=${ruri}&` : "") + + "interests=" + + interests.join(",") + ); + } else { + var choosen_interests = interests.filter(interest => + INITIAL_INTERESTS.map(i => i.value).includes(interest) + ); + var choosen_endgoals = endgoals.filter(endgoal => + INITIAL_ENDGOALS.map(i => i.value).includes(endgoal) + ); + var other_endgoals = endgoals.filter( + endgoal => !INITIAL_ENDGOALS.map(i => i.value).includes(endgoal) + ); + var other_interests = interests.filter( + interest => + !INITIAL_INTERESTS.map(i => i.value).includes(interest) + ); + setUserInterests({ + choosen_interests: choosen_interests, + choosen_endgoals: choosen_endgoals, + other_endgoals: other_endgoals, + other_interests: other_interests + }); + } + }, []); + + const handlePathFinderOutput = (data: string[]) => { + setSearchParams({ ...searchParams, interests: data.join(",") }); + navigate( + "/register/interests?" + + (ruri ? `ruri=${ruri}&` : "") + + "interests=" + + data.join(",") + ); + }; + + const handleAccountCreation = (userData: RegisterRequestDataType) => { + if (!userInterest) { + toast.error("Please select your interests and endgoals"); + navigate("/register/interests"); + return; + } + userData.interests = userInterest; + submitUserData({ + setIsLoading: setIsLoading, + userData: userData + }).then(res => { + if (res) { + navigate( + ruri + ? `/register/organization/?ruri=${ruri}` + : "/register/organization" + ); + } + }); + }; + + if (!interests || interests.length < 1) { + return ; + } else if (!endgoals || endgoals.length < 1) { + var params = new URLSearchParams(); + params.append("interests", interests.join(",")); + params.append("ruri", ruri ?? ""); + navigate("/register/interests?" + params.toString()); + return null; + } else { + return ( + + ); + } +} diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx index bd6bbc722..a23bbfb56 100644 --- a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx +++ b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx @@ -1,315 +1,73 @@ -import { useEffect, useState, useCallback } from "react"; -import { useNavigate } from "react-router-dom"; -import toast from "react-hot-toast"; -import { TagsInput } from "react-tag-input-component"; - -import OnboardingHeader from "../../../components/OnboardingHeader/OnboardingHeader"; -import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; -import { privateGateway, publicGateway } from "@/MuLearnServices/apiGateways"; +import UserInterestSelectionComponent from "../../../components/UserInterest/UserInterestComponent"; +import { privateGateway } from "@/MuLearnServices/apiGateways"; import { onboardingRoutes } from "@/MuLearnServices/urls"; - -import styles from "./UserInterest.module.css"; -import muBrand from "/src/modules/Common/Authentication/assets/µLearn.png"; -import creative from "/src/modules/Common/Authentication/assets/interests/creative.svg"; -import maker from "/src/modules/Common/Authentication/assets/interests/makers.svg"; -import management from "/src/modules/Common/Authentication/assets/interests/management.svg"; -import software from "/src/modules/Common/Authentication/assets/interests/software.svg"; -import others from "/src/modules/Common/Authentication/assets/interests/others.svg"; - -const CheckMark = () => ( - - - -); - -const INITIAL_INTERESTS = [ - { title: "Coder", value: "coder", img: software, checked: false }, - { title: "Hardware", value: "hardware", img: maker, checked: false }, - // { title: "Manager", value: "manager", img: management, checked: false }, - { title: "Creative", value: "creative", img: creative, checked: false }, - { title: "Others", value: "others", img: others, checked: false } -]; - -const INITIAL_ENDGOALS = [ - { title: "Job", value: "job", checked: false }, - { title: "Research & Development", value: "r&d", checked: false }, - { title: "Entrepreneurship", value: "entrepreneurship", checked: false }, - { title: "Gig Works", value: "gig_work", checked: false }, - { title: "Higher Education", value: "higher_education", checked: false }, - { title: "Others", value: "others", checked: false } -]; - -type InterestGroup = { - id: string; - name: string; - category: string; -}; - -type InterestGroups = { - [key: string]: InterestGroup[]; -}; +import { useEffect, useState } from "react"; +import toast from "react-hot-toast"; +import { useNavigate, useSearchParams } from "react-router-dom"; export default function UserInterest() { - const [interests, setInterests] = useState(INITIAL_INTERESTS); - const [endgoals, setEndgoals] = useState(INITIAL_ENDGOALS); - const [otherInterest, setOtherInterest] = useState([]); - const [otherEndgoal, setOtherEndgoal] = useState([]); - const [stepTwo, setStepTwo] = useState(false); - const [interestGroups, setInterestGroups] = useState({}); + const [searchParams, _] = useSearchParams(); + const ruri = searchParams.get("ruri"); const navigate = useNavigate(); - const ruri = window.location.href.split("=")[1]; - + const [newUser, setNewUser] = useState(true); useEffect(() => { - const fetchInterestGroups = async () => { - try { - const res = await publicGateway.get( - onboardingRoutes.interestGroups + const accessToken = localStorage.getItem("accessToken"); + if (accessToken) { + setNewUser(false); + } + }, []); + const handleSubmit = (interests: RegisterInterestData) => { + if (newUser) { + const params = new URLSearchParams(); + + if (interests.choosen_interests.length) + params.append( + "interests", + interests.choosen_interests.join(",") ); - const data: InterestGroup[] = - res.data?.response?.interestGroup ?? []; - - const interestGroupsData = interests.reduce( - (acc, interest) => ({ - ...acc, - [interest.value]: data.filter( - group => group.category === interest.value - ) - }), - {} + if (interests.other_interests?.length) + params.set( + "interests", + [ + params.get("interests"), + interests.other_interests.join(",") + ] + .filter(Boolean) + .join(",") ); - - setInterestGroups(interestGroupsData); - } catch (err) { - console.error("Failed to fetch interest groups:", err); - } - }; - - fetchInterestGroups(); - }, []); - - const handleChange = useCallback((value: string, isInterest: boolean) => { - const setter = isInterest ? setInterests : setEndgoals; - const otherSetter = isInterest ? setOtherInterest : setOtherEndgoal; - - setter((prev: any) => { - const newItems = prev.map((item: any) => - item.value === value - ? { ...item, checked: !item.checked } - : item - ); - - if ( - value === "others" && - newItems.find((item: any) => item.value === "others") - ?.checked === false - ) { - otherSetter([]); - } - - return newItems; - }); - }, []); - - const handleContinue = useCallback(() => { - const selectedInterests = interests.filter( - interest => interest.checked - ); - if ( - selectedInterests.some(i => i.value === "others") && - otherInterest.length === 0 - ) { - return; - } - if (selectedInterests.length > 0 || otherInterest.length > 0) { - setStepTwo(true); - } - }, [interests, otherInterest]); - - const handleSubmit = useCallback(async () => { - const selectedInterests = interests - .filter(i => i.checked) - .map(i => i.value); - const selectedEndgoals = endgoals - .filter(e => e.checked) - .map(e => e.value); - - const data = { - choosen_interests: selectedInterests, - choosen_endgoals: selectedEndgoals, - other_interests: otherInterest, - other_endgoals: otherEndgoal - }; - - try { - const res = await privateGateway.post( - onboardingRoutes.interests, - data - ); - toast.success(res.data?.message.general[0]); - navigate( - ruri - ? ruri == "noredirect" - ? "/dashboard/profile" - : `/register/organization/?ruri=${ruri}` - : "/register/organization" - ); - } catch (err: any) { - toast.error( - err.response?.data.message.general[0] || - "Unexpected Error occurred" - ); - } - }, [interests, endgoals, otherInterest, otherEndgoal, navigate]); - - const isInterestSelected = interests.some(interest => interest.checked); - const isEndgoalSelected = endgoals.some(endgoal => endgoal.checked); - - const renderItems = useCallback( - (items: typeof interests | typeof endgoals, isInterest: boolean) => ( -
- {items.map(item => { - const isOthers = item.value === "others"; - const isChecked = item.checked; - const otherItems = isInterest - ? otherInterest - : otherEndgoal; - const setOtherItems = isInterest - ? setOtherInterest - : setOtherEndgoal; - - return ( -
handleChange(item.value, isInterest)} - > - {isChecked && } - {isInterest ? ( -
- -

{item.title}

-
- ) : ( -

{item.title}

- )} - {isInterest && ( - <> -
e.stopPropagation()} - > - - - - -
-
-

This category includes:

-
    - {interestGroups[item.value]?.map( - (group: InterestGroup) => ( -
  • - {group.name} -
    • - ) - )} -
-
- - )} - {isOthers && isChecked && ( -
e.stopPropagation()}> - { - if (e.target.value.length > 0) { - setOtherItems([ - ...otherItems, - e.target.value - ]); - e.target.value = ""; - } - }} - onChange={setOtherItems} - name={`other_${ - isInterest - ? "interests" - : "endgoals" - }`} - placeHolder={`Specify your ${ - isInterest ? "interest" : "endgoal" - }`} - separators={ - isInterest ? [","] : undefined - } - /> -
- )} -
+ if (interests.choosen_endgoals.length) + params.append("endgoals", interests.choosen_endgoals.join(",")); + if (interests.other_endgoals?.length) + params.set( + "endgoals", + [params.get("endgoals"), interests.other_endgoals.join(",")] + .filter(Boolean) + .join(",") + ); + if (ruri) params.append("ruri", ruri); + + navigate(`/register?${params.toString()}`); + } else { + privateGateway + .post(onboardingRoutes.interests, interests) + .then(res => { + toast.success(res.data?.message.general[0]); + navigate( + ruri + ? ruri == "noredirect" + ? "/dashboard/profile" + : `/register/organization/?ruri=${ruri}` + : "/register/organization" ); - })} -
- ), - [handleChange, interestGroups, otherInterest, otherEndgoal] - ); - - return ( - <> - -
-
- mulearn -

- {stepTwo - ? "What do you expect by MuLearning " - : "What describes you the most!"} -

-

- {stepTwo - ? "Pick your goal." - : "Please select your interested area"} -

- - {stepTwo - ? renderItems(endgoals, false) - : renderItems(interests, true)} + }) + .catch(err => { + toast.error( + err.response?.data.message.general[0] || + "Unexpected Error occurred" + ); + }); + } + }; - {(stepTwo ? isEndgoalSelected : isInterestSelected) && ( - - Continue - - )} -
-
- - ); + return ; } diff --git a/src/modules/Common/Authentication/pages/Onboarding/constants.ts b/src/modules/Common/Authentication/pages/Onboarding/constants.ts new file mode 100644 index 000000000..9f6f51b49 --- /dev/null +++ b/src/modules/Common/Authentication/pages/Onboarding/constants.ts @@ -0,0 +1,21 @@ +import creative from "/src/modules/Common/Authentication/assets/interests/creative.svg"; +import maker from "/src/modules/Common/Authentication/assets/interests/makers.svg"; +import software from "/src/modules/Common/Authentication/assets/interests/software.svg"; +import others from "/src/modules/Common/Authentication/assets/interests/others.svg"; + +export const INITIAL_INTERESTS = [ + { title: "Coder", value: "coder", img: software, checked: false }, + { title: "Hardware", value: "hardware", img: maker, checked: false }, + // { title: "Manager", value: "manager", img: management, checked: false }, + { title: "Creative", value: "creative", img: creative, checked: false }, + { title: "Others", value: "others", img: others, checked: false } +]; + +export const INITIAL_ENDGOALS = [ + { title: "Job", value: "job", checked: false }, + { title: "Research & Development", value: "r&d", checked: false }, + { title: "Entrepreneurship", value: "entrepreneurship", checked: false }, + { title: "Gig Works", value: "gig_work", checked: false }, + { title: "Higher Education", value: "higher_education", checked: false }, + { title: "Others", value: "others", checked: false } +]; diff --git a/src/modules/Common/Authentication/pages/Onboarding/onboarding.d.ts b/src/modules/Common/Authentication/pages/Onboarding/onboarding.d.ts new file mode 100644 index 000000000..bec71e1a4 --- /dev/null +++ b/src/modules/Common/Authentication/pages/Onboarding/onboarding.d.ts @@ -0,0 +1,38 @@ +interface RegisterUserData { + full_name: string; + email: string; + password: string; +} + +interface DWMSData { + email: string; + fullName: string; + phoneNumber: string; + gender?: string; + dob?: string; +} + +interface RegisterInterestData { + choosen_interests: string[]; + choosen_endgoals: string[]; + other_interests: string[]; + other_endgoals: string[]; +} + +type RegisterRequestDataType = { + user: RegisterUserData; + interests: InterestData; + referral?: { muid: string }; + gender?: string; + dob?: string; + communities?: string[]; + integration?: { + param: string; + title: string; + }; +}; + +interface Question { + question: string; + options: { text: string; category: string }[]; +} diff --git a/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts b/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts index a6ab76aad..c1a76d8af 100644 --- a/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts +++ b/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts @@ -37,7 +37,7 @@ export const getInfo = ( ); if (response.data.response?.interest_selected) { toast.error(response.data.response?.interest_selected); - navigate("/register/interests?ruri=noredirect"); + navigate("/register/pathfinder?ruri=noredirect"); } if (setMuid) setMuid(response.data.response.muid); if (onComplete) onComplete();