Untitled

mail@pastecode.io avatar
unknown
plain_text
2 months ago
44 kB
2
Indexable
Never
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;
Leave a Comment