From 96114aa11943249cfb6482c60a683f8af55a0c7e Mon Sep 17 00:00:00 2001 From: Ajinkya Pande Date: Fri, 12 Jul 2024 12:27:06 +0530 Subject: [PATCH 1/3] IssueId #223082 feat: Create Log Out Button in Test-Rig [React] --- src/assets/images/logout.svg | 4 + src/components/Assesment/Assesment.jsx | 201 ++++++++++++++++--------- 2 files changed, 135 insertions(+), 70 deletions(-) create mode 100644 src/assets/images/logout.svg diff --git a/src/assets/images/logout.svg b/src/assets/images/logout.svg new file mode 100644 index 00000000..8546b939 --- /dev/null +++ b/src/assets/images/logout.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx index f22d788a..9a2eaa18 100644 --- a/src/components/Assesment/Assesment.jsx +++ b/src/components/Assesment/Assesment.jsx @@ -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, @@ -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'; @@ -169,7 +170,8 @@ export const LanguageModal = ({ lang, setLang, setOpenLangModal }) => { { 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(); + 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 }) => ( + + ))({ + [`& .MuiTooltip-tooltip`]: { + fontSize: "1.2rem", // Adjust the font size as needed + }, + }); + return ( <> {!!openMessageDialog && ( @@ -377,7 +410,13 @@ export const ProfileHeader = ({ zIndex: 5555, }} > - + {handleBack && ( @@ -388,11 +427,19 @@ export const ProfileHeader = ({ {username && ( <> - profile-pic + profile-pic - {username || ""} + {username || ""} )} - + */} - + @@ -470,6 +517,20 @@ export const ProfileHeader = ({ + + {process.env.REACT_APP_IS_IN_APP_AUTHORISATION === "true" && ( + + + Logout + + + )} + @@ -491,7 +552,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(() => { @@ -524,11 +585,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}` @@ -555,9 +616,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) { @@ -607,7 +668,7 @@ const Assesment = ({ discoverStart }) => { height: "100vh", backgroundImage: `url(${images?.[`desktopLevel${level || 1}`]})`, backgroundRepeat: "round", - backgroundSize: 'auto', + backgroundSize: "auto", position: "relative", }; @@ -675,68 +736,68 @@ const Assesment = ({ discoverStart }) => { ) : ( - - - {discoverStart - ? "Let's test your language skills" - : "You have good language skills"} - - - {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"} + + + {level > 0 + ? `Take the assessment to complete Level ${level}.` + : "Take the assessment to discover your level"} + + + + + - - - - - + )} ); From 18d9bb9cefbfeffa04d4fa8adf2b119a3c3a00b9 Mon Sep 17 00:00:00 2001 From: Ajinkya Pande Date: Fri, 12 Jul 2024 12:46:57 +0530 Subject: [PATCH 2/3] IssueId #223082 feat: Create Log Out Button in Test-Rig [React] --- src/components/Assesment/Assesment.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx index 9a2eaa18..62fb4c34 100644 --- a/src/components/Assesment/Assesment.jsx +++ b/src/components/Assesment/Assesment.jsx @@ -517,8 +517,8 @@ export const ProfileHeader = ({ - - {process.env.REACT_APP_IS_IN_APP_AUTHORISATION === "true" && ( + {process.env.REACT_APP_IS_IN_APP_AUTHORISATION === "true" && ( + - )} - + + )} From bb7c1ecdc858c648ebe5888638b3a8c8baec71aa Mon Sep 17 00:00:00 2001 From: Ajinkya Pande Date: Fri, 12 Jul 2024 13:06:21 +0530 Subject: [PATCH 3/3] IssueId #223082 feat: Create Log Out Button in Test-Rig [React] --- src/components/Assesment/Assesment.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Assesment/Assesment.jsx b/src/components/Assesment/Assesment.jsx index 62fb4c34..6a2a9e2e 100644 --- a/src/components/Assesment/Assesment.jsx +++ b/src/components/Assesment/Assesment.jsx @@ -43,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); @@ -355,6 +356,7 @@ export const ProfileHeader = ({ const handleLogout = () => { localStorage.clear(); + end({}); navigate("/Login"); };