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