@@ -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"}
diff --git a/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx b/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx
index d19c7f946..328a67c12 100644
--- a/src/modules/Common/Authentication/pages/Onboarding/CollegePage/CollegePage.tsx
+++ b/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(() => {
diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css
new file mode 100644
index 000000000..2a54f83b2
--- /dev/null
+++ b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css
@@ -0,0 +1,237 @@
+.popUp {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ backdrop-filter: blur(10px);
+ background-color: #00000014;
+ z-index: 100;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .box {
+ background-color: #fff;
+ border-radius: 20px;
+ padding: 40px 10px 10px;
+ min-height: 300px;
+ max-width: 700px;
+ position: relative;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ h1 {
+ text-align: center;
+ }
+ & img {
+ height: 30px;
+ }
+
+ & h1 {
+ font-size: 2rem;
+ font-weight: 600;
+ }
+
+ .subText {
+ margin-top: 10px;
+ font-size: 1rem;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+
+ .itemsContainer {
+ gap: 1.5rem;
+ z-index: 10;
+ cursor: pointer;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20px;
+ justify-content: center;
+ overflow: show;
+
+ .itemsCard {
+ min-width: 200px;
+ max-height: 120px;
+ border-radius: 10px;
+ background-color: #fff;
+ box-shadow: 0px 0px 17.65823px 0px rgba(0, 0, 0, 0.07);
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ text-align: center;
+ justify-content: center;
+ padding: 10px;
+ position: relative;
+ transition: all 0.3s ease;
+ position: relative;
+
+ .infoButton {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ padding: 5px;
+ border-radius: 50%;
+ cursor: pointer;
+ color: #456ff6;
+ z-index: 11;
+ }
+
+ .interestInfo {
+ display: none;
+ position: absolute;
+ width: 200px;
+ height: 100%;
+ top: 0;
+ left: 0;
+ color: #22222290;
+ font-size: 10px;
+ background: #ffffff;
+ border: 1px solid #456ef694;
+ padding: 10px;
+ border-radius: 10px;
+ z-index: 10;
+ flex-direction: column;
+ justify-content: start;
+ gap: 10px;
+ h4 {
+ font-weight: 800;
+ text-align: start;
+ }
+ ul {
+ display: block;
+ padding: 0;
+ margin: 0;
+ li {
+ margin-left: 20px;
+ text-align: start;
+ width: auto;
+ }
+ }
+ }
+ .content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100px;
+ p {
+ transform: translateY(-90%);
+ }
+ }
+
+ &.others {
+ &.checked {
+ display: flex;
+ width: calc(380px + 3rem);
+ justify-content: space-around;
+ flex-direction: column;
+ overflow: visible;
+ flex-direction: row;
+ gap: 1rem;
+ }
+ }
+
+ .checkmark {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ transform: translate(-30%, -30%);
+ color: #ffffff;
+ background-color: #456ff6;
+ border-radius: 50%;
+ padding: 2px;
+ z-index: 12;
+ }
+
+ div {
+ display: flex;
+ }
+
+ &:hover {
+ outline: 1.177px solid #456ff6;
+ transition: 1s ease;
+
+ .interestInfo {
+ display: flex;
+ }
+ }
+
+ &.others {
+ position: relative;
+ overflow: hidden;
+ }
+ .interestOther {
+ background: red;
+ }
+
+ .othersTextBox {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ transform: translateY(0);
+ transition: transform 0.3s ease-in-out;
+ }
+
+ .tagInput {
+ background: red !important;
+ width: 100%;
+ }
+ .otherInterestInput {
+ width: 90%;
+ padding: 8px;
+ margin-top: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ }
+ .active {
+ outline: 2px solid #456ff6;
+ }
+ .itemImage {
+ margin-top: 1rem;
+ object-fit: cover;
+ height: 70px;
+ width: 70px;
+ -webkit-user-drag: none;
+ }
+ .title {
+ margin-top: 0.5rem;
+ font-weight: bold;
+ }
+ }
+
+ @media (width<500px) {
+ .interestSelectCards .interestSelectCard {
+ max-width: 300px;
+ }
+ .itemsContainer {
+ .itemsCard {
+ max-width: 200px;
+ &.others {
+ &.checked {
+ flex-direction: column;
+ }
+ }
+ }
+ }
+ }
+
+ @media (width<300px) {
+ .interestSelectCards .interestSelectCard {
+ max-width: 200px;
+ font-size: 0.65rem;
+ }
+ }
+ }
+}
diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx
new file mode 100644
index 000000000..ffdd1c08a
--- /dev/null
+++ b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx
@@ -0,0 +1,359 @@
+import { useEffect, useState } from "react";
+import OnboardingHeader from "../../../components/OnboardingHeader/OnboardingHeader";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import styles from "./UserInterest.module.css";
+import muBrand from "/src/modules/Common/Authentication/assets/µLearn.png";
+import { TagsInput } from "react-tag-input-component";
+import { privateGateway, publicGateway } from "@/MuLearnServices/apiGateways";
+import { onboardingRoutes } from "@/MuLearnServices/urls";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+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 = () => (
+
+);
+
+export default function UserInterest() {
+ const [interests, setInterests] = useState([
+ { title: "Software", value: "software", img: software, checked: false },
+ { title: "Maker", value: "maker", img: maker, checked: false },
+ {
+ title: "Management",
+ value: "management",
+ img: management,
+ checked: false
+ },
+ { title: "Creative", value: "creative", img: creative, checked: false },
+ { title: "Others", value: "others", img: others, checked: false }
+ ]);
+ const [endgoals, setEndgoals] = useState([
+ { title: "Job", value: "job", checked: false },
+ {
+ title: "Higher Education",
+ value: "higher_education",
+ checked: false
+ },
+ {
+ title: "Entrepreneurship",
+ value: "entrepreneurship",
+ checked: false
+ },
+ { title: "Gig Works", value: "gig_work", checked: false },
+ { title: "Others", value: "others", checked: false }
+ ]);
+ const [otherInterest, setOtherInterest] = useState
([]);
+ const [otherEndgoal, setOtherEndgoal] = useState([]);
+ const [stepTwo, setStepTwo] = useState(false);
+ const [interestGroups, setInterestGroups] = useState<{}>({});
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ publicGateway
+ .get(onboardingRoutes.interestGroups)
+ .then(res => {
+ var data: [] = res.data?.response?.interestGroup ?? [];
+ var interestGroupsData = {};
+ for (let interest of interests) {
+ (interestGroupsData as any)[interest.value] = data.filter(
+ (group: any) => group?.category == interest.value
+ );
+ }
+ setInterestGroups(interestGroupsData);
+ })
+ .catch(err => {
+ console.log(err);
+ });
+ }, []);
+
+ const handleInterestChange = (value: any) => {
+ if (value === "others") {
+ if (
+ interests.filter(interest => interest.value === value)[0]
+ .checked
+ ) {
+ setOtherInterest([]);
+ }
+ }
+ setInterests(
+ interests.map(interest =>
+ interest.value === value
+ ? { ...interest, checked: !interest.checked }
+ : interest
+ )
+ );
+ };
+
+ const handleEndgoalChange = (value: any) => {
+ if (value === "others") {
+ if (
+ endgoals.filter(endgoal => endgoal.value === value)[0].checked
+ ) {
+ setOtherEndgoal([]);
+ }
+ }
+ setEndgoals(
+ endgoals.map(endgoal =>
+ endgoal.value === value
+ ? { ...endgoal, checked: !endgoal.checked }
+ : endgoal
+ )
+ );
+ };
+
+ const handleContinue = () => {
+ const selectedInterests = interests
+ .filter(interest => interest.checked)
+ .map(interest => interest);
+ if (selectedInterests.find(interest => interest.value === "others")) {
+ if (otherInterest.length === 0) {
+ return;
+ }
+ }
+ if (selectedInterests.length > 0 || otherInterest.length > 0) {
+ setStepTwo(true);
+ }
+ };
+
+ const handleSubmit = () => {
+ const selectedInterests = interests
+ .filter(interest => interest.checked)
+ .map(interest => interest);
+ const selectedEndgoals = endgoals
+ .filter(endgoal => endgoal.checked)
+ .map(endgoal => endgoal);
+ const data = {
+ choosen_interests: selectedInterests.map(
+ interest => interest.value
+ ),
+ choosen_endgoals: selectedEndgoals.map(endgoal => endgoal.value),
+ other_interests: otherInterest,
+ other_endgoals: otherEndgoal
+ };
+ try {
+ privateGateway
+ .post(onboardingRoutes.interests, data)
+ .then(res => {
+ toast.success(res.data?.message.general[0]);
+ navigate("/dashboard/connect-discord");
+ })
+ .catch(err => {
+ toast.error(err.response?.data.message.general[0]);
+ });
+ } catch (err) {
+ toast.error("Unexpected Error occured");
+ }
+ };
+
+ const isInterestSelected = interests.some(interest => interest.checked);
+ const isEndgoalSelected = endgoals.some(endgoal => endgoal.checked);
+
+ return stepTwo ? (
+ <>
+
+
+
+
+
What describes you the most!
+
+ Choose one or goals you expect from µLearn.
+
+
+ {endgoals.map(endgoal => {
+ let classname = `${styles.itemsCard} ${
+ endgoal.checked && styles.checked
+ }`;
+ return (
+
+ handleEndgoalChange(endgoal.value)
+ }
+ >
+ {endgoal.checked &&
}
+
{endgoal.title}
+
+ {endgoal.value == "others" ? (
+ endgoals.find(
+ endgoal =>
+ endgoal.value === "others"
+ )?.checked && (
+
{
+ e.stopPropagation();
+ }}
+ >
+
+
+ )
+ ) : (
+ <>
+ )}
+
+ );
+ })}
+
+
+ {isEndgoalSelected && (
+
+ Submit
+
+ )}
+
+
+
+
+
Your dynamic area of interest!
+
+ Please select your interested area
+
+
+ {interests.map(interest => {
+ let classname = `${styles.itemsCard} ${
+ interest.checked && styles.active
+ }`;
+ return (
+
+ handleInterestChange(interest.value)
+ }
+ >
+ {interest.checked &&
}
+
+
+
+ {interest.title}
+
+
+
{
+ e.stopPropagation();
+ }}
+ >
+
+
+
+
This category includes:
+
+ {(interestGroups as any)[
+ interest.value
+ ]?.map((group: any) => (
+ -
+ {group.name}
+
+ ))}
+
+
+ {interest.value == "others" ? (
+ interests.find(
+ interest =>
+ interest.value === "others"
+ )?.checked && (
+ <>
+
{
+ e.stopPropagation();
+ }}
+ >
+
+
+
+ )
+ ) : (
+ <>
+ )}
+
+ );
+ })}
+
+
+ {isInterestSelected && (
+
+ Continue
+
+ )}
+
+
-
-
-
Join Discord using your µid
-
- To join our discord server you need to connect
- your account with discord. To do so you need to
- copy your µid and paste it in the discord
- server.
-
-
-
+ {/*
Onboarding Flow
@@ -128,14 +165,46 @@ const ConnectDiscord = () => {
-
-
- ) : (
+
*/}
+
+ ) : (
+
+ )}
+
+ ) : discordStatus == "connecting" ? (
+ ) : discordStatus == "connected" ? (
+
+
+
+
Discord Connected
+
+ Your account has been successfully connected to
+ discord.
+
+
+
+
+ ) : (
+
+
+
+
Discord Connection Failed
+
+ Your account could not be connected to discord.
+ Please try again later.
+
+
+
+
)}
);
diff --git a/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts b/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts
index 476b64238..791bdbf20 100644
--- a/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts
+++ b/src/modules/Dashboard/modules/ConnectDiscord/services/apis.ts
@@ -1,8 +1,26 @@
import { privateGateway } from "@/MuLearnServices/apiGateways";
-import { dashboardRoutes } from "@/MuLearnServices/urls";
+import { dashboardRoutes, onboardingRoutes } from "@/MuLearnServices/urls";
type muid = UseStateFunc
;
-
+export const connectDiscord = async (code: string) => {
+ try {
+ return await privateGateway
+ .get(onboardingRoutes.connectDiscord, {
+ params: {
+ code
+ }
+ })
+ .then(response => {
+ return response.status === 200;
+ })
+ .catch(err => {
+ console.log(err);
+ return false;
+ });
+ } catch (err: any) {
+ return false;
+ }
+};
export const getInfo = (setMuid?: muid, onComplete?: Function) => {
privateGateway
.get(dashboardRoutes.getInfo)
diff --git a/src/services/urls.ts b/src/services/urls.ts
index d12bb37cf..c7d6d4baf 100644
--- a/src/services/urls.ts
+++ b/src/services/urls.ts
@@ -9,6 +9,8 @@ export const onboardingRoutes = {
areaOfInterestList: "/api/v1/register/area-of-interest/list/",
communityList: "/api/v1/register/community/list/",
register: "/api/v1/register/",
+ interests: "/api/v1/register/interests/",
+ interestGroups: "/api/v1/dashboard/ig/list/",
emailVerification: "/api/v1/register/email-verification/",
// New Onboarding Routes
createAccount: "/api/v1/register/new/",
@@ -17,7 +19,8 @@ export const onboardingRoutes = {
departments: "/api/v1/register/department/list/",
companies: "/api/v1/register/company/list/",
validate: "/api/v1/register/validate/",
- location: "/api/v1/register/location/?q=${param}"
+ location: "/api/v1/register/location/?q=${param}",
+ connectDiscord: "/api/v1/register/connect-discord/"
} as const;
export const authRoutes = {