Merge pull request #1637 from gtech-mulearn/dev

Dev Server

.env.sample

@@ -1,4 +1,5 @@
 VITE_BACKEND_URL=
 VITE_FRONTEND_URL=
 VITE_DISCORD_INVITE_URL=
-VITE_RAZORPAY_KEY_ID=
+VITE_RAZORPAY_KEY_ID=
+VITE_DISCORD_AUTH_URL=

package.json

@@ -36,6 +36,7 @@
         "react-select": "^5.7.7",
         "react-spinners": "^0.13.8",
         "react-tabs": "^6.0.1",
+        "react-tag-input-component": "^2.0.2",
         "react-tooltip": "^5.18.1",
         "recharts": "^2.10.2",
         "sass": "^1.62.1",

src/App.css

@@ -15,6 +15,14 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-tap-highlight-color: transparent;
 }
+.rti--container {
+    width: 250px;
+    max-height: 100px;
+    overflow: scroll;
+}
+.rti--container .rti--input {
+    width: 100%;
+}
 
 .css-13cymwt-control,
 .css-t3ipsp-control {

src/App.tsx

@@ -47,6 +47,7 @@ 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";
 
 const Profile = lazy(
     () => import("./modules/Dashboard/modules/Profile/pages/Profile")
@@ -291,7 +292,19 @@ function App() {
             element: <AuthRoutes />,
             children: [
                 { path: "register/:role", element: <AccountCreation /> },
-                { path: "register/", element: <AccountCreation /> },
+                {
+                    path: "register/",
+                    children: [
+                        {
+                            path: "",
+                            element: <AccountCreation />
+                        },
+                        {
+                            path: "interests",
+                            element: <UserInterest />
+                        }
+                    ]
+                },
                 { path: "login", element: <SignIn /> },
                 { path: "forgot-password", element: <ForgetPassword /> },
                 { path: "reset-password", element: <ResetPassword /> }

src/modules/Common/Authentication/pages/Onboarding/AccountCreation/AccountCreation.tsx

@@ -3,31 +3,20 @@ import { HiEye, HiEyeSlash } from "react-icons/hi2";
 
 import OnboardingTemplate from "../../../components/OnboardingTeamplate/OnboardingTemplate";
 import OnboardingHeader from "../../../components/OnboardingHeader/OnboardingHeader";
-import {
-    getDWMSDetails,
-    getRoles,
-    validate
-} from "../../../services/newOnboardingApis";
+import { getDWMSDetails } from "../../../services/newOnboardingApis";
 import { Form, Formik } from "formik";
 import * as z from "yup";
 import { FormikTextInputWithoutLabel as SimpleInput } from "@/MuLearnComponents/FormikComponents/FormikComponents";
 import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
-// import { useToast } from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
-import Select from "react-select";
 import makeAnimated from "react-select/animated";
-import { getCommunities } from "../../../services/onboardingApis";
 import { BiSupport } from "react-icons/bi";
 import { isDev } from "@/MuLearnServices/common_functions";
-import roleOptions from "../RolePage/data/roleOptions";
-import muBrand from "/src/modules/Common/Authentication/assets/µLearn.png";
 import { submitUserData } from "../../../services/newOnboardingApis";
 import toast from "react-hot-toast";
 
-const animatedComponents = makeAnimated();
-
 type DWMSData = {
     email: string;
     fullName: string;
@@ -77,29 +66,29 @@ const scheme = z.object({
 
 export default function AccountCreation() {
     let { role } = useParams();
-    const [popUP, setPopUp] = useState(role ? false : true);
+    // const [popUP, setPopUp] = useState(role ? false : true);
     // const toast = useToast();
     const navigate = useNavigate();
-    const [roles, setRoles] = useState([{ id: "", title: "" }]);
+    // const [roles, setRoles] = useState([{ id: "", title: "" }]);
     const urlParams = new URLSearchParams(window.location.search);
     const param = urlParams.get("param");
     const referralId = urlParams.get("referral_id");
-    const [selectedRoleId, setSelectedRoleId] = useState<string>("");
-    const [selectedRole, setSelectedRole] = useState<string>("");
+    // const [selectedRoleId, setSelectedRoleId] = useState<string>("");
+    // const [selectedRole, setSelectedRole] = useState<string>("");
 
     //ref to community selector for resetting - temporary fix
-    const community_select_ref = useRef<any>();
+    // const community_select_ref = useRef<any>();
 
     const [isLoading, setIsLoading] = useState(false);
     const [isVisible, setVisible] = useState(false);
-    const [isVisibleC, setVisibleC] = useState(false);
+    // const [isVisibleC, setVisibleC] = useState(false);
     const [dwmsData, setDWMSData] = useState<DWMSData>();
 
     const [isTncChecked, setTncChecked] = useState(false);
 
-    const [communitiesList, setCommunitiesList] = useState([
-        { id: "", title: "" }
-    ]);
+    // const [communitiesList, setCommunitiesList] = useState([
+    //     { id: "", title: "" }
+    // ]);
     const [initialValues, setInitialValues] = useState({
         email: "",
         fullName: "",
@@ -117,19 +106,6 @@ export default function AccountCreation() {
     useEffect(() => {
         if (isLoading) return;
         setIsLoading(true);
-        getCommunities({
-            setCommunityAPI: setCommunitiesList,
-            setIsLoading: setIsLoading
-        });
-        getRoles().then((res: any) => {
-            setRoles(res);
-            setIsLoading(false);
-            setSelectedRoleId(
-                res.find((role: any) => role.title.toLowerCase() === role)
-                    ?.id || ""
-            );
-            // setSelectedRole(role);
-        });
         if (param) {
             getDWMSDetails(param, (data: any) => {
                 setDWMSData({
@@ -206,14 +182,6 @@ export default function AccountCreation() {
             userData.communities = values.communities;
         }
 
-        if (role) {
-            userData.role = roles.find(e => e.title.toLowerCase() === role)?.id;
-        }
-
-        if (selectedRoleId) {
-            userData.role = selectedRoleId;
-        }
-
         if (param) {
             userData.integration = {
                 param: param,
@@ -225,22 +193,22 @@ export default function AccountCreation() {
             userData.dob = dwmsData.dob;
         }
 
-        const isSuccess = await validate({
+        // const isSuccess = await validate({
+        //     userData: userData,
+        //     setIsSubmitting: setIsLoading
+        //     // toast: toast // Make sure to pass the toast parameter correctly
+        // });
+        submitUserData({
+            setIsLoading: setIsLoading,
             userData: userData,
-            setIsSubmitting: setIsLoading
-            // toast: toast // Make sure to pass the toast parameter correctly
+            // toast: toast,
+            navigate: navigate
         });
+        // if (isSuccess && selectedRole.toLowerCase() !== "other") {
+        //     navigate("/register/about", { state: userData });
+        // } else if (isSuccess && selectedRole.toLowerCase() === "other") {
 
-        if (isSuccess && selectedRole.toLowerCase() !== "other") {
-            navigate("/register/about", { state: userData });
-        } else if (isSuccess && selectedRole.toLowerCase() === "other") {
-            submitUserData({
-                setIsLoading: setIsLoading,
-                userData: userData,
-                // toast: toast,
-                navigate: navigate
-            });
-        }
+        // }
     };
     // console.log(selectedRole, role);
 
@@ -258,7 +226,7 @@ export default function AccountCreation() {
             >
                 {formik => (
                     <Form>
-                        {popUP && (
+                        {/* {popUP && (
                             <div className={styles.popUp}>
                                 <div className={styles.box}>
                                     <img src={muBrand} alt="mulearn" />
@@ -302,7 +270,7 @@ export default function AccountCreation() {
                                     </div>
                                 </div>
                             </div>
-                        )}
+                        )} */}
                         <div className={styles.accountCreationContainer}>
                             <div className={styles.accountCreationInputs}>
                                 <div className={styles.inputBox}>
@@ -628,13 +596,7 @@ export default function AccountCreation() {
                                     style={{ marginTop: "10px" }}
                                     isLoading={isLoading}
                                 >
-                                    {selectedRole.toLowerCase() !== "other"
-                                        ? isLoading
-                                            ? "Validating..."
-                                            : "Next Step"
-                                        : isLoading
-                                          ? "Validating..."
-                                          : "Submit"}
+                                    {isLoading ? "Validating..." : "Submit"}
                                 </PowerfulButton>
                             </div>
 

src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx

@@ -79,7 +79,7 @@ export default function CollegePage({
     ): boolean => {
         if (value === "Others") return true; // Always show "Others" option
         if (!string) return true;
-        return label.toLowerCase().startsWith(string.toLowerCase());
+        return label.toLowerCase().includes(string.toLowerCase());
     };
 
     useEffect(() => {