Untitled
unknown
plain_text
a year ago
44 kB
7
Indexable
import React, { useEffect, useState } from 'react';
import styles from './CompletionPopups.module.scss';
import closeIcon from '../../../assets/icons/close.svg';
import Lottie from 'lottie-react';
import giftImg from '../../../assets/icons/gift.svg';
import goldCoin from '../../../assets/icons/goldCoin.svg';
import badgeIcon from '../../../assets/icons/badgeIcon.svg';
import infoIcon from '../../../assets/icons/info.svg';
import certificateIcon from '../../../assets/icons/certificateIcon.svg';
import Button from '../../../components/Atom/Button/Button';
import replayIcon from '../../../assets/icons/replay.svg';
import retryIcon from '../../../assets/icons/replayWhite.svg';
import greenTick from '../../../assets/icons/greenTick.svg';
import tickAnim from '../../../assets/animations/tick.json';
import assessmentPAnim from '../../../assets/animations/cool.json';
import superbAnim from '../../../assets/animations/superb.json';
import thumbsUpAnim from '../../../assets/animations/thumbsUp.json';
import confettiAnim from '../../../assets/animations/confetti.json';
import { fetchAssessmentDetails, fetchAssessmentProgressData, fetchCourseProgressData, fetchCplDetailsData } from './api'
import { useParams, useHistory, useLocation } from 'react-router-dom';
import ShimmerComponent from '../Cards/Card/ShimmerComponent';
import { round } from 'lodash';
function CompletionPopups({
user,
// popupName = "dfdf" /*COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTP, ASSESSMENTC, ASSESSMENTA, ASSESSMENTZ*/,
// lottieLoopTimes = 1,
// onClose, // common for all
// onNextClick, // COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTC
// onReplayClick, // CHAPTER, LEVEL, PLAYLISTC, ASSESSMENTC
// chapterOrLevelTitle, // CHAPTER, LEVEL, PLAYLISTC
// levelTitle, // PLAYLISTC
// isReplayAvailable, // CHAPTER, LEVEL, PLAYLISTC, ASSESSMENTC
// questionsAnswered, //ASSESSMENTP, ASSESSMENTC, ASSESSMENTZ
// correct, //ASSESSMENTC, ASSESSMENTZ
// scoredValue, // COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTC
// resultValue, // ASSESSMENTC, ASSESSMENTZ
// coins, // COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTC, ASSESSMENTP
// badgesCount, // COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTC, ASSESSMENTP
// certificatesCount, // COURSE, CHAPTER, LEVEL, PLAYLIST, PLAYLISTC, ASSESSMENTC
// attemptsLeft, // ASSESSMENTA
// resultPercentage, // ASSESSMENTZ
// passingPercentage, // ASSESSMENTZ
}) {
const { assessmentId, gameId, courseId, levelId, chapterId } = useParams();
const { orgId, userId } = user;
const [loading, setLoading] = useState(true);
const [lottieAnim, setLottieAnim] = useState(null);
const [successTitleText, setSuccessTitleText] = useState(null);
const [successDescriptionText, setSuccessDescriptionText] = useState(null);
const [earningTextTitle, setEarningTextTitle] = useState(null);
const [assessmentFailTitle, setAssessmentFailTitle] = useState(null);
const [successButtonText, setSuccessButtonText] = useState(null);
const [assessmentData, setAssessmentData] = useState(null);
const [assessmentProgressData, setAssessmentProgressData] = useState(null);
const [courseProgressData, setCourseProgressData] = useState(null);
const [leveldata, SetLevelData] = useState(null);
const [cplDeatilsData, setCplDeatilsData] = useState(null);
const [playlistLeveldata, SetPlaylistLevelData] = useState(null);
const [playlistChapterData, SetPlaylistChapterData] = useState(null);
const [popupName, setPopupName] = useState('');
const [lottieLoopTimes, setLottieLoopTimes] = useState(2);
const [chapterOrLevelTitle, setChapterOrLevelTitle] = useState('');
const [levelTitle, setLevelTitle] = useState('');
const [isReplayAvailable, setIsReplayAvailable] = useState(false);
const [questionsAnswered, setQuestionsAnswered] = useState('');
const [correct, setCorrect] = useState('');
const [scoredValue, setScoredValue] = useState('');
const [resultValue, setResultValue] = useState('');
const [coins, setCoins] = useState('');
const [badgesCount, setBadgesCount] = useState('');
const [certificatesCount, setCertificatesCount] = useState('');
const [attemptsLeft, setAttemptsLeft] = useState('');
const [resultPercentage, setResultPercentage] = useState('');
const [passingPercentage, setPassingPercentage] = useState('');
const history = useHistory();
const location = useLocation();
const redirectedCplId = location?.state?.cplId || 0;
useEffect(() => {
setSuccessTitleText(null);
setSuccessDescriptionText(null);
setEarningTextTitle(null);
setAssessmentFailTitle(null);
setSuccessButtonText(null);
setAssessmentData(null);
setAssessmentProgressData(null);
setCourseProgressData(null);
SetLevelData(null);
setCplDeatilsData(null);
SetPlaylistLevelData(null);
SetPlaylistChapterData(null);
// setPopupName(null);
setChapterOrLevelTitle(null);
setLevelTitle(null);
setQuestionsAnswered(null);
setCorrect(null);
setScoredValue(null);
setScoredValue(null);
setResultValue(null);
setCoins(null);
setBadgesCount(null);
setCertificatesCount(null);
setAttemptsLeft(null);
setResultPercentage(null);
setPassingPercentage(null);
}, [])
useEffect(() => {
if (redirectedCplId) {
fetchCplDetailsData(orgId, redirectedCplId, userId)
.then(cplDataRes => {
setCplDeatilsData(cplDataRes);
})
.catch(error => {
console.error('Error fetching assessment data:', error);
setLoading(false);
});
}
if (location.pathname.includes("assessment")) {
if (assessmentId) {
fetchAssessmentDetails(orgId, assessmentId, userId)
.then(assessmentDataRes => {
setAssessmentData(assessmentDataRes);
fetchAssessmentProgressData(orgId, assessmentId, userId)
.then(assessmentProgressDataRes => {
setAssessmentProgressData(assessmentProgressDataRes);
// setLoading(false);
})
.catch(error => {
console.error('Error fetching assessment progress data:', error);
setLoading(false);
});
})
.catch(error => {
console.error('Error fetching assessment data:', error);
setLoading(false);
});
}
} else if (location.pathname.includes("chapter") || location.pathname.includes("coursecom")) {
if (courseId) {
fetchCourseProgressData(orgId, courseId, userId)
.then(courseDataRes => {
setCourseProgressData(courseDataRes);
// setLoading(false);
})
.catch(error => {
console.error('Error fetching assessment data:', error);
setLoading(false);
})
}
}
setLoading(true);
}, [assessmentId, courseId, gameId, levelId, location.pathname, orgId, userId, chapterId, redirectedCplId]);
const handleCplCheck = (playlistLeveldata, cplDeatilsData) => {
if (playlistLeveldata?.levelCompleted && !cplDeatilsData?.cplCompleted) {
console.log('99its coming here');
const nextLevelData = cplDeatilsData?.cplContentPlayListItems.find(item => item.sequence === playlistLeveldata?.sequence + 1);
if (nextLevelData?.levelType=== "COURSE"){
console.log('990its coming here');
history.replace(`/course/${nextLevelData?.levelId}`, { cplId: redirectedCplId });
} else if(nextLevelData?.levelType=== "ASSESSMENT"){
console.log('991its coming here');
history.replace(`/assessment/${nextLevelData?.levelId}`, { cplId: redirectedCplId });
}
} else if (cplDeatilsData?.cplCompleted) {
console.log('4its coming here');
history.replace(`/course/${courseId}/playlistcomplete/${levelId}/completionpopups`, { cplId: redirectedCplId });
} else {
console.log('18its coming here', redirectedCplId);
history.replace(`/playlist/${redirectedCplId}`)
}
}
const handleAssessmentData = (assessmentData, assessmentProgressData) => {
if (assessmentData && assessmentProgressData?.passed === true) {
setEarningTextTitle('Total earnings');
setLottieLoopTimes(true);
if (assessmentData.showAssessmentResultScore === true) {
setPopupName("ASSESSMENTC");
setLoading(false);
setLottieAnim(superbAnim);
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed the assessment');
setSuccessButtonText('Next');
setCorrect(assessmentProgressData.nQuestionCorrect);
setScoredValue(`${assessmentProgressData.userFinalScore} / ${(assessmentProgressData.totalQuestion * assessmentData.questionXp)}`);
const percentage = (assessmentProgressData.nQuestionCorrect / assessmentProgressData.totalQuestion) * 100;
const roundedPercentage = isNaN(percentage) ? 0 : round(percentage, 2);
const formattedPercentage = `${roundedPercentage}%`;
setResultValue(formattedPercentage);
} else if (assessmentData.showAssessmentResultScore === false) {
setPopupName("ASSESSMENTP");
setLottieAnim(assessmentPAnim);
setSuccessTitleText('Relax');
setSuccessDescriptionText('You have successfully completed the assessment');
setSuccessButtonText('Done');
}
if (assessmentData.certificate) {
setCertificatesCount(1);
}
const correctAnswers = assessmentProgressData.nQuestionCorrect + assessmentProgressData.nQuestionWrong;
const questionsAnsweredText = `${correctAnswers} / ${assessmentProgressData.totalQuestion}`;
setQuestionsAnswered(questionsAnsweredText);
} else if (assessmentProgressData?.passed === false) {
if (assessmentData.reattemptAllowed === true && assessmentProgressData.attemptCount < assessmentData.noOfAttemptAllowedToPass) {
setPopupName("ASSESSMENTA");
setLoading(false);
setLottieAnim(thumbsUpAnim);
setAssessmentFailTitle('Sorry!');
setSuccessTitleText('');
setSuccessDescriptionText('You haven’t passed the assessment');
setSuccessButtonText('Retry');
setAttemptsLeft(`${assessmentData.noOfAttemptAllowedToPass - assessmentProgressData.attemptCount}/${assessmentData.noOfAttemptAllowedToPass}`);
} else {
if (assessmentData.showAssessmentResultScore) {
setPopupName("ASSESSMENTZ");
setLoading(false);
setLottieAnim(thumbsUpAnim);
setSuccessTitleText('');
setAssessmentFailTitle('Great Attempt !');
setSuccessDescriptionText('You haven’t passed the assessment');
setSuccessButtonText('Done');
const correctAnswers = assessmentProgressData.nQuestionCorrect + assessmentProgressData.nQuestionWrong;
const questionsAnsweredText = `${correctAnswers} / ${assessmentProgressData.totalQuestion}`;
setQuestionsAnswered(questionsAnsweredText);
setCorrect(assessmentProgressData.nQuestionCorrect);
setPassingPercentage(`${assessmentData.passPercentage}%`);
const percentage = (assessmentProgressData.nQuestionCorrect / assessmentProgressData.totalQuestion) * 100;
const roundedPercentage = isNaN(percentage) ? 0 : round(percentage, 2);
const formattedPercentage = `${roundedPercentage}%`;
setResultPercentage(formattedPercentage);
} else {
setPopupName("ASSESSMENTP");
setLoading(false);
setLottieAnim(assessmentPAnim);
setSuccessTitleText('Relax');
setSuccessDescriptionText('You have successfully completed the assessment');
setSuccessButtonText('Done');
if (assessmentData.certificate) {
setCertificatesCount(1);
}
const correctAnswers = assessmentProgressData.nQuestionCorrect + assessmentProgressData.nQuestionWrong;
const questionsAnsweredText = `${correctAnswers} / ${assessmentProgressData.totalQuestion}`;
setQuestionsAnswered(questionsAnsweredText);
}
}
}
};
useEffect(() => {
if (redirectedCplId && redirectedCplId !== null && redirectedCplId !== undefined && redirectedCplId !== 0) {
if (cplDeatilsData) {
if (cplDeatilsData?.cplCompleted && location.pathname.includes("playlistcomplete")) {
setPopupName('PLAYLIST');
setLoading(false);
setLottieAnim(superbAnim);
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed the Playlist');
setEarningTextTitle('Total earnings');
setSuccessButtonText('Next');
setCoins(cplDeatilsData?.cplTotalCoins);
if (cplDeatilsData?.cplCertificate) {
setCertificatesCount(1);
}
} else {
cplDeatilsData?.cplContentPlayListItems.forEach(levelVal => {
if (levelVal?.levelId === parseInt(courseId)) {
SetPlaylistLevelData(levelVal)
if (levelVal?.levelCompleted && location.pathname.includes("playlistlevel")) {
setPopupName('LEVEL');
setLoading(false);
setChapterOrLevelTitle(`Level ${levelVal?.sequence}`)
setLottieAnim(tickAnim);
} else {
levelVal?.chapters?.forEach(chapter => {
if (chapter?.chapterId === parseInt(levelId)) {
setLevelTitle(`Level ${levelVal?.sequence}`)
SetPlaylistChapterData(chapter);
if (playlistChapterData) {
setChapterOrLevelTitle(`Chapter ${playlistChapterData?.sequence}`);
setPopupName('PLAYLISTC');
setLoading(false);
setLottieAnim(superbAnim);
}
}
});
}
if (location.pathname.includes("coursecom") && courseProgressData) {
setPopupName('COURSE');
setLoading(false);
setLottieAnim(superbAnim);
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed the Course');
setEarningTextTitle('Total earnings');
setSuccessButtonText('Next');
setCoins(courseProgressData.totalOc);
if (courseProgressData.xp) {
let totalUserCardScore = 0;
courseProgressData?.levels?.forEach(level => {
level.cards.forEach(card => {
totalUserCardScore = totalUserCardScore + card?.userCardScore;
});
});
setScoredValue(`${totalUserCardScore} / ${courseProgressData?.xp}`)
}
} else {
// common
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed');
setEarningTextTitle('Your earnings');
setSuccessButtonText('Next');
if (courseProgressData) {
const levelDataRes = courseProgressData.levels.find(level => level.levelId === parseInt(levelId));
SetLevelData(levelDataRes);
if (leveldata) {
setCoins(leveldata.totalOc);
// setChapterOrLevelTitle(leveldata.levelName);
if (courseProgressData.enableBadge) {
setBadgesCount(1);
}
if (courseProgressData.certificate) {
setCertificatesCount(1);
}
if (leveldata.xp) {
const totalUserCardScore = leveldata.cards.reduce((total, card) => total + card.userCardScore, 0);
setScoredValue(`${totalUserCardScore} / ${leveldata.xp}`)
}
}
}
}
} else if (levelVal?.levelId === parseInt(assessmentId)) {
SetPlaylistLevelData(levelVal);
handleAssessmentData(assessmentData, assessmentProgressData);
}
});
}
}
} else if (location.pathname.includes("assessment")) {
handleAssessmentData(assessmentData, assessmentProgressData);
} else if (location.pathname.includes("chapter")) {
if (!redirectedCplId && courseProgressData) {
setPopupName('CHAPTER');
setLoading(false);
setLottieAnim(superbAnim);
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed');
setEarningTextTitle('Your earnings');
setSuccessButtonText('Next');
if (courseProgressData) {
const levelDataRes = courseProgressData.levels.find(level => level.levelId === parseInt(levelId));
SetLevelData(levelDataRes);
if (leveldata) {
setCoins(leveldata.totalOc);
setChapterOrLevelTitle(leveldata.levelName);
console.log("check the data", location);
if (courseProgressData.enableBadge) {
setBadgesCount(1);
}
if (courseProgressData.certificate) {
setCertificatesCount(1);
}
if (leveldata.xp) {
const totalUserCardScore = leveldata.cards.reduce((total, card) => total + card.userCardScore, 0);
setScoredValue(`${totalUserCardScore} / ${leveldata.xp}`)
}
}
}
}
} else if (location.pathname.includes("coursecom")) {
if (!redirectedCplId && courseProgressData) {
setPopupName('COURSE');
setLoading(false);
setLottieAnim(superbAnim);
setSuccessTitleText('Congratulations');
setSuccessDescriptionText('Successfully completed the Course');
setEarningTextTitle('Total earnings');
setSuccessButtonText('Next');
setCoins(courseProgressData.totalOc);
if (courseProgressData.xp) {
let totalUserCardScore = 0;
courseProgressData?.levels?.forEach(level => {
level.cards.forEach(card => {
totalUserCardScore = totalUserCardScore + card?.userCardScore;
});
});
setScoredValue(`${totalUserCardScore} / ${courseProgressData?.xp}`)
}
}
}
// setLoading(false);
}, [assessmentData, assessmentId, assessmentProgressData, courseId, courseProgressData, cplDeatilsData, levelId, leveldata, location, location.pathname, playlistChapterData, popupName, redirectedCplId]);
const handleClick = () => {
if (redirectedCplId && location.pathname.includes("playlistlevel")) {
if (cplDeatilsData?.cplCompleted) {
console.log('0its coming here');
history.replace(`/course/${courseId}/playlistcomplete/${levelId}/completionpopups`, { cplId: redirectedCplId });
} else {
console.log('1its coming here');
history.replace(`/playlist/${redirectedCplId}`)
}
} else if (redirectedCplId && location.pathname.includes("playlistcomplete")) {
console.log('3its coming here');
history.push('/');
} else if (location.pathname.includes("assessment")) {
if (redirectedCplId) {
handleCplCheck(playlistLeveldata, cplDeatilsData);
// if (cplDeatilsData?.cplCompleted) {
// console.log('4its coming here');
// history.replace(`/course/${courseId}/playlistcomplete/${levelId}/completionpopups`, { cplId: redirectedCplId });
// } else {
// console.log('5its coming here');
// history.replace(`/playlist/${redirectedCplId}`)
// }
} else {
console.log('6its coming here');
history.push('/');
}
} else if (redirectedCplId && location.pathname.includes("chapter")) {
if (courseProgressData.courseCompleted) {
console.log('7its coming here');
history.replace(`/course/${courseId}/coursecom/${levelId}/completionpopups`, { cplId: redirectedCplId });
} else {
console.log('8its coming here');
if (courseProgressData && !courseProgressData.courseCompleted) {
const completedLevel = courseProgressData.levels.find(level => level.chapterCompleted && level.levelId === parseInt(levelId));
if (completedLevel) {
const nextSequence = completedLevel.sequence + 1;
const nextLevel = courseProgressData.levels.find(level => level.sequence === nextSequence);
if (nextLevel) {
const cardWithSequence = nextLevel.cards.find((card) => card.sequence === 1);
if (cardWithSequence) {
history.push(`/course/${courseId}/level/${nextLevel?.levelId}`, {
cplId: redirectedCplId,
courseLevelUpdateTS: nextLevel?.updateTime,
currentCourseCardId: cardWithSequence.cardId
})
}
}
}
}
// history.replace(`/course/${courseId}`, { cplId: redirectedCplId });
}
} else if (redirectedCplId && location.pathname.includes("coursecom")){
handleCplCheck(playlistLeveldata, cplDeatilsData);
} else if (!redirectedCplId && location.pathname.includes("chapter")) {
if (courseProgressData.courseCompleted) {
console.log('9its coming here');
history.replace(`/course/${courseId}/coursecom/${levelId}/completionpopups`, { cplId: redirectedCplId });
} else {
console.log('10its coming here');
// need to check, can we go to the next module
if (courseProgressData && !courseProgressData.courseCompleted) {
const completedLevel = courseProgressData.levels.find(level => level.chapterCompleted && level.levelId === parseInt(levelId));
if (completedLevel) {
const nextSequence = completedLevel.sequence + 1;
const nextLevel = courseProgressData.levels.find(level => level.sequence === nextSequence);
if (nextLevel) {
const cardWithSequence = nextLevel.cards.find((card) => card.sequence === 1);
if (cardWithSequence) {
history.push(`/course/${courseId}/level/${nextLevel?.levelId}`, {
cplId: redirectedCplId,
courseLevelUpdateTS: nextLevel?.updateTime,
currentCourseCardId: cardWithSequence.cardId
})
}
}
}
}
// history.replace(`/course/${courseId}`);
}
} else if (!redirectedCplId && location.pathname.includes("coursecom")) {
console.log('11its coming here');
history.push('/');
} else if (redirectedCplId) {
if (playlistLeveldata?.levelCompleted) {
console.log('12its coming here', redirectedCplId);
history.replace(`/course/${courseId}/playlistlevel/${levelId}/completionpopups`, { cplId: redirectedCplId });
} else {
console.log('13its coming here', redirectedCplId);
history.replace(`/playlist/${redirectedCplId}`)
}
}
};
const handleRetryClick = () => {
if (location.pathname.includes("assessment")) {
history.replace(`/assessment/${assessmentId}`);
}
}
return (
<div>
{loading ?
(<ShimmerComponent />) :
<div className={styles.pageContainer}>
<div className={styles.solidContainer}>
<div className={styles.closeIconContainer}>
<img
className={styles.closeIcon}
src={closeIcon}
onClick={handleClick}
alt="close page"
/>
</div>
<div>
<Lottie
animationData={lottieAnim}
loop={lottieLoopTimes}
className={styles.lottieStyle}
/>
</div>
{successTitleText && (
<div className={styles.textHeadStyle}> {successTitleText}</div>
)}
{(popupName.toUpperCase() === 'ASSESSMENTA' ||
popupName.toUpperCase() === 'ASSESSMENTZ') && (
<div
className={
popupName.toUpperCase() === 'ASSESSMENTA'
? styles.textTitleStyleA
: popupName.toUpperCase() === 'ASSESSMENTZ'
? styles.textTitleStyleZ
: ''
}
>
{assessmentFailTitle}
</div>
)}
{successDescriptionText && (
<div className={styles.textSubStyle}>{successDescriptionText}</div>
)}
{resultPercentage && (
<div className={styles.resultContainer}>
<p>Result</p>
<div className={styles.resultValueContainer}>
<p>{`${resultPercentage} | Failed`}</p>
</div>
</div>
)}
{popupName.toUpperCase() === 'ASSESSMENTZ' && (
<div className={styles.QaContainerZ}>
{questionsAnswered && (
<div className={styles.TitleContainerZ}>
<span>Questions Answered</span>
<div className={styles.QaNumbersZ}>{questionsAnswered}</div>
</div>
)}
{correct > 0 && (
<div className={styles.TitleContainerZ}>
<span>Correct</span>
<div className={styles.correctNumberZ}>{correct}</div>
</div>
)}
{passingPercentage && (
<div
className={styles.passingStyle}
>{`Passing percentage was ${passingPercentage}`}</div>
)}
</div>
)}
{popupName.toUpperCase() === 'PLAYLISTC' && levelTitle && (
<div className={styles.levelTitleStyle}>{levelTitle}</div>
)}
{(popupName.toUpperCase() === 'CHAPTER' ||
popupName.toUpperCase() === 'LEVEL' ||
popupName.toUpperCase() === 'PLAYLISTC') &&
chapterOrLevelTitle && (
<div className={styles.textChapterContainer}>
<div className={styles.textChapterLevelStyle}>
<img src={greenTick} alt='greenTick' />
<span>{chapterOrLevelTitle}</span>
</div>
</div>
)}
{/*Assessment*/}
{popupName.toUpperCase() === 'ASSESSMENTC' && (
<div className={styles.QaContainerC}>
<div className={styles.TitleContainer}>
<span>Questions Answered</span>
<div className={styles.QaNumbers}>{questionsAnswered}</div>
</div>
<div className={styles.TitleContainer}>
<span>Correct</span>
<div className={styles.correctNumber}>{correct}</div>
</div>
</div>
)}
{popupName.toUpperCase() === 'ASSESSMENTP' && (
<div className={styles.QaContainerP}>
<div className={styles.TitleContainer}>
<span>Questions Answered</span>
<div className={styles.QaNumbers}>{questionsAnswered}</div>
</div>
<div className={styles.TitleContainerTwo}>
<img src={infoIcon} alt='infoIcon' />
<span>Result will be declared later!</span>
</div>
</div>
)}
{popupName.toUpperCase() !== 'ASSESSMENTZ' &&
popupName.toUpperCase() !== 'ASSESSMENTA' &&
popupName.toUpperCase() !== 'LEVEL' &&
(scoredValue ||
resultValue ||
coins ||
badgesCount ||
certificatesCount) && (
<div
className={
popupName.toUpperCase() === 'COURSE' ||
popupName.toUpperCase() === 'ASSESSMENTC' ||
popupName.toUpperCase() === 'ASSESSMENTP' ||
popupName.toUpperCase() === 'PLAYLIST'
? styles.roundedImageContainer
: popupName.toUpperCase() === 'CHAPTER' ||
popupName.toUpperCase() === 'PLAYLISTC'
? styles.roundedContainer
: ''
}
>
{(popupName.toUpperCase() === 'COURSE' ||
popupName.toUpperCase() === 'ASSESSMENTC' ||
popupName.toUpperCase() === 'ASSESSMENTP' ||
popupName.toUpperCase() === 'PLAYLIST') && (
<div className={styles.imageContainer}>
<img src={giftImg} alt='giftImage' />
</div>
)}
{earningTextTitle && (
<div
className={
popupName.toUpperCase() === 'COURSE' ||
popupName.toUpperCase() === 'ASSESSMENTC' ||
popupName.toUpperCase() === 'ASSESSMENTP' ||
popupName.toUpperCase() === 'PLAYLIST'
? styles.totalEarningsImage
: popupName.toUpperCase() === 'CHAPTER' ||
popupName.toUpperCase() === 'PLAYLISTC'
? styles.totalEarnings
: ''
}
>
{earningTextTitle}
</div>
)}
{(scoredValue || resultValue) && (
<div className={styles.scoredContainer}>
<div
className={
popupName.toUpperCase() === 'ASSESSMENTC'
? styles.scoreResultContainerAssessment
: ''
}
>
{popupName.toUpperCase() !== 'ASSESSMENTP' && scoredValue && (
<div className={styles.scoredTextContainer}>
<span>Scored</span>
<div className={styles.scoredStyle}>{scoredValue}</div>
</div>
)}
{popupName.toUpperCase() === 'ASSESSMENTC' && resultValue && (
<div className={styles.scoredTextContainer}>
<span>Result</span>
<div className={styles.scoredStyle}>{resultValue}</div>
</div>
)}
{popupName.toUpperCase() === 'ASSESSMENTP' && resultValue && (
<div className={styles.scoredTextContainer}>
<span>Result</span>
<div className={styles.resultStylePending}>
Pending
</div>
</div>
)}
</div>
<div className={styles.scoredDashedLine}></div>
</div>
)}
{(coins || certificatesCount || badgesCount) && (
<div className={styles.itemsContainer}>
{coins && (
<div className={styles.singleItemContainer}>
<img
className={styles.singleItemImage}
src={goldCoin}
alt="coins"
/>
<div className={styles.singleItemBox}>{coins}</div>
</div>
)}
{badgesCount && (
<div className={styles.singleItemContainer}>
<img
className={styles.singleItemImage}
src={badgeIcon}
alt="badges"
/>
<div className={styles.singleItemBox}>{badgesCount}</div>
</div>
)}
{certificatesCount && (
<div className={styles.singleItemContainer}>
<img
className={styles.singleItemImage}
src={certificateIcon}
alt="cetificates"
/>
<div className={styles.singleItemBox}>
{certificatesCount}
</div>
</div>
)}
</div>
)}
</div>
)}
</div>
{popupName.toUpperCase() === 'ASSESSMENTA' && (
<div className={styles.attemptLeft}>
{`You have ${attemptsLeft} attempts left`}
</div>
)}
{popupName.toUpperCase() === 'ASSESSMENTA' && (
<div className={styles.submitParent}>
<Button
iconSize="large"
className={styles.retryButton}
label="Retry"
iconLeft={retryIcon}
onClick={handleRetryClick}
/>
</div>
)}
{popupName.toUpperCase() !== 'ASSESSMENTA' && (
<div className={styles.submitParent}>
{isReplayAvailable && (
<Button
iconSize="large"
className={styles.replayButton}
label={successButtonText}
iconLeft={replayIcon}
onClick={handleClick}
/>
)}
<Button
className={styles.submitButton}
label={successButtonText}
onClick={handleClick}
></Button>
</div>
)}
</div>}
</div>
);
}
export default CompletionPopups;Editor is loading...
Leave a Comment