Skip to content

Commit

Permalink
Merge branch 'all-1.2' of github.com:Sunbird-ALL/storylingo-v2 into a…
Browse files Browse the repository at this point in the history 
…ll-1.2
  • Loading branch information
@gouravmore
gouravmore committed Jul 12, 2024
2 parents 04c9989 + 6e3bdda commit 49e768a
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 70 deletions.
4 changes: 4 additions & 0 deletions src/assets/images/logout.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 133 additions & 70 deletions src/components/Assesment/Assesment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import {
Box,
Grid,
IconButton,
Tooltip,
Typography,
} from "../../../node_modules/@mui/material/index";
import LogoutImg from "../../assets/images/logout.svg";
import { styled } from "@mui/material/styles";
import {
RoundTick,
SelectLanguageButton,
Expand All @@ -16,9 +19,7 @@ import {
setLocalData,
} from "../../utils/constants";
import practicebg from "../../assets/images/practice-bg.svg";
import {
useNavigate,
} from "../../../node_modules/react-router-dom/dist/index";
import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
import { useEffect, useState } from "react";
import axios from "../../../node_modules/axios/index";
// import { useDispatch } from 'react-redux';
Expand All @@ -42,6 +43,7 @@ import config from "../../utils/urlConstants.json";
import panda from "../../assets/images/panda.svg";
import cryPanda from "../../assets/images/cryPanda.svg";
import { uniqueId } from "../../services/utilService";
import { end } from "../../services/telementryService";

export const LanguageModal = ({ lang, setLang, setOpenLangModal }) => {
const [selectedLang, setSelectedLang] = useState(lang);
Expand Down Expand Up @@ -169,7 +171,8 @@ export const LanguageModal = ({ lang, setLang, setOpenLangModal }) => {
</Box>
<Box
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
mt={5} mb={1}
mt={5}
mb={1}
// mr="110px"
>
<Box
Expand Down Expand Up @@ -340,17 +343,49 @@ export const ProfileHeader = ({

const handleProfileBack = () => {
try {
if (process.env.REACT_APP_IS_APP_IFRAME === 'true') {
window.parent.postMessage({ type: 'restore-iframe-content' }, '*');
navigate("/")
if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
window.parent.postMessage({ type: "restore-iframe-content" }, "*");
navigate("/");
} else {
navigate("/discover-start")
navigate("/discover-start");
}
} catch (error) {
console.error("Error posting message:", error);
}
};

const handleLogout = () => {
localStorage.clear();
end({});
navigate("/Login");
};

const CustomIconButton = styled(IconButton)({
padding: "6px 20px",
color: "white",
fontSize: "20px",
fontWeight: 500,
borderRadius: "8px",
marginRight: "10px",
fontFamily: '"Lato", "sans-serif"',
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& .logout-img": {
display: "block",
filter: "invert(1)",
},
});

const CustomTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />
))({
[`& .MuiTooltip-tooltip`]: {
fontSize: "1.2rem", // Adjust the font size as needed
},
});

return (
<>
{!!openMessageDialog && (
Expand All @@ -377,7 +412,13 @@ export const ProfileHeader = ({
zIndex: 5555,
}}
>
<Box sx={{ display: "flex", alignItems: "center", width: { xs: "100%", sm: "50%" } }}>
<Box
sx={{
display: "flex",
alignItems: "center",
width: { xs: "100%", sm: "50%" },
}}
>
{handleBack && (
<Box ml={{ xs: "10px", sm: "94px" }}>
<IconButton onClick={handleBack}>
Expand All @@ -388,11 +429,19 @@ export const ProfileHeader = ({
{username && (
<>
<Box
ml={handleBack ? { xs: "10px", sm: "12px" } : { xs: "10px", sm: "94px" }}
ml={
handleBack
? { xs: "10px", sm: "12px" }
: { xs: "10px", sm: "94px" }
}
sx={{ cursor: "pointer" }}
onClick={handleProfileBack}
>
<img src={profilePic} alt="profile-pic" style={{ height: "30px" }} />
<img
src={profilePic}
alt="profile-pic"
style={{ height: "30px" }}
/>
</Box>
<Box ml="12px">
<span
Expand All @@ -404,13 +453,13 @@ export const ProfileHeader = ({
lineHeight: "25px",
}}
>
{username || ""}
{username || ""}
</span>
</Box>
</>
)}
</Box>

<Box
sx={{
justifySelf: "flex-end",
Expand Down Expand Up @@ -440,7 +489,7 @@ export const ProfileHeader = ({
</span>
</Box>
</Box> */}

<Box
mr={{ xs: "10px", sm: "90px" }}
onClick={() =>
Expand Down Expand Up @@ -470,6 +519,20 @@ export const ProfileHeader = ({
</Box>
</Box>
</Box>
{process.env.REACT_APP_IS_IN_APP_AUTHORISATION === "true" && (
<CustomTooltip title="Logout">
<Box>
<CustomIconButton onClick={handleLogout}>
<img
className="logout-img"
style={{ height: 30, width: 35 }}
src={LogoutImg}
alt="Logout"
/>
</CustomIconButton>
</Box>
</CustomTooltip>
)}
</Box>
</Box>
</>
Expand All @@ -491,7 +554,7 @@ const Assesment = ({ discoverStart }) => {
const [level, setLevel] = useState("");
const dispatch = useDispatch();
const [openLangModal, setOpenLangModal] = useState(false);
const [lang, setLang] = useState(getLocalData("lang") || "en");
const [lang, setLang] = useState(getLocalData("lang") || "en");
const [points, setPoints] = useState(0);

useEffect(() => {
Expand Down Expand Up @@ -524,11 +587,11 @@ const Assesment = ({ discoverStart }) => {
);
let session_id = localStorage.getItem("sessionId");

if (!session_id){
if (!session_id) {
session_id = uniqueId();
localStorage.setItem("sessionId", session_id)
localStorage.setItem("sessionId", session_id);
}

localStorage.setItem("lang", lang || "ta");
const getPointersDetails = await axios.get(
`${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${usernameDetails?.data?.result?.virtualID}/${session_id}?language=${lang}`
Expand All @@ -555,9 +618,9 @@ const Assesment = ({ discoverStart }) => {
);
let sessionId = getLocalData("sessionId");

if (!sessionId || sessionId === 'null'){
if (!sessionId || sessionId === "null") {
sessionId = uniqueId();
localStorage.setItem("sessionId", sessionId)
localStorage.setItem("sessionId", sessionId);
}

if (virtualId) {
Expand Down Expand Up @@ -607,7 +670,7 @@ const Assesment = ({ discoverStart }) => {
height: "100vh",
backgroundImage: `url(${images?.[`desktopLevel${level || 1}`]})`,
backgroundRepeat: "round",
backgroundSize: 'auto',
backgroundSize: "auto",
position: "relative",
};

Expand Down Expand Up @@ -675,68 +738,68 @@ const Assesment = ({ discoverStart }) => {
</Box>
) : (
<MainLayout
showNext={false}
showTimer={false}
cardBackground={assessmentBackground}
backgroundImage={practicebg}
{...{
setOpenLangModal,
lang,
points,
}}
>
<Box
sx={{
position: "absolute",
right: { xs: 20, md: 200 },
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
mt: { xs: 2, md: 5 },
showNext={false}
showTimer={false}
cardBackground={assessmentBackground}
backgroundImage={practicebg}
{...{
setOpenLangModal,
lang,
points,
}}
>
<Typography
<Box
sx={{
color: "#322020",
fontWeight: 700,
fontSize: { xs: "24px", md: "40px" },
fontFamily: "Quicksand",
lineHeight: { xs: "36px", md: "62px" },
textAlign: "center",
position: "absolute",
right: { xs: 20, md: 200 },
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
mt: { xs: 2, md: 5 },
}}
>
{discoverStart
? "Let's test your language skills"
: "You have good language skills"}
</Typography>
<Box>
<Typography
sx={{
color: "#1CB0F6",
fontWeight: 600,
fontSize: { xs: "20px", md: "30px" },
color: "#322020",
fontWeight: 700,
fontSize: { xs: "24px", md: "40px" },
fontFamily: "Quicksand",
lineHeight: { xs: "30px", md: "50px" },
lineHeight: { xs: "36px", md: "62px" },
textAlign: "center",
}}
>
{level > 0
? `Take the assessment to complete Level ${level}.`
: "Take the assessment to discover your level"}
{discoverStart
? "Let's test your language skills"
: "You have good language skills"}
</Typography>
<Box>
<Typography
sx={{
color: "#1CB0F6",
fontWeight: 600,
fontSize: { xs: "20px", md: "30px" },
fontFamily: "Quicksand",
lineHeight: { xs: "30px", md: "50px" },
textAlign: "center",
}}
>
{level > 0
? `Take the assessment to complete Level ${level}.`
: "Take the assessment to discover your level"}
</Typography>
</Box>
<Box
sx={{
cursor: "pointer",
mt: { xs: 1, md: 2 },
}}
onClick={handleRedirect}
>
<StartAssessmentButton />
</Box>
</Box>
<Box
sx={{
cursor: "pointer",
mt: { xs: 1, md: 2 },
}}
onClick={handleRedirect}
>
<StartAssessmentButton />
</Box>
</Box>
</MainLayout>
</MainLayout>
)}
</>
);
Expand Down

0 comments on commit 49e768a

Please sign in to comment.