@coorpacademy/app-review 0.46.14-alpha.9 → 0.46.14-react18.80

package/lib/views/slides/index.js

@@ -1,395 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapStateToSlidesProps = exports.buildStepItems = exports.initialState = void 0;
-const findLast_1 = __importDefault(require("lodash/fp/findLast"));
-const get_1 = __importDefault(require("lodash/fp/get"));
-const getOr_1 = __importDefault(require("lodash/fp/getOr"));
-const last_1 = __importDefault(require("lodash/fp/last"));
-const reduce_1 = __importDefault(require("lodash/fp/reduce"));
-const set_1 = __importDefault(require("lodash/fp/set"));
-const toInteger_1 = __importDefault(require("lodash/fp/toInteger"));
-const join_1 = __importDefault(require("lodash/fp/join"));
-const quit_popin_1 = require("../../actions/ui/quit-popin");
-const common_1 = require("../../common");
-const post_answer_1 = require("../../actions/api/post-answer");
-const post_progression_1 = require("../../actions/api/post-progression");
-const next_slide_1 = require("../../actions/ui/next-slide");
-const map_api_slide_to_ui_1 = require("./map-api-slide-to-ui");
-const ICON_VALUES = {
-    right: 'right',
-    wrong: 'wrong',
-    'no-answer': 'no-answer'
-};
-const buildConfettiAnimation = (translate) => ({
-    'aria-label': translate('Congratulations confetti animation'),
-    'data-name': 'default-lottie',
-    className: undefined,
-    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
-    loop: undefined,
-    autoplay: true,
-    rendererSettings: {
-        hideOnTransparent: false
-    }
-});
-exports.initialState = {
-    '0': {
-        position: 0,
-        loading: true
-    },
-    '1': {
-        position: 1,
-        loading: true
-    },
-    '2': {
-        position: 2,
-        loading: true
-    },
-    '3': {
-        position: 3,
-        loading: true
-    },
-    '4': {
-        position: 4,
-        loading: true
-    }
-};
-const getCurrentSlideRef = (state) => {
-    const currentSlideRef = (0, get_1.default)(['ui', 'currentSlideRef'], state);
-    const endReview = currentSlideRef === 'successExitNode';
-    if (!endReview)
-        return currentSlideRef;
-    const progression = state.data.progression;
-    const content = progression.state.content;
-    return content.ref;
-};
-const isLastSlideAnswered = (slidesRef, slideRef) => {
-    return (0, last_1.default)(slidesRef) === slideRef;
-};
-const getSlideMedia = (state, slideFromAPI) => {
-    const media = (0, get_1.default)(['question', 'medias', '0'], slideFromAPI);
-    if (!media)
-        return;
-    const { type } = media;
-    const resource = (0, get_1.default)(['src', '0'], media);
-    switch (type) {
-        case 'img':
-        case 'audio': {
-            const mediaProps = {
-                ...resource,
-                type,
-                url: (0, get_1.default)('url', resource)
-            };
-            return mediaProps;
-        }
-        case 'video': {
-            const videoProps = (0, get_1.default)(['data', 'videos', slideFromAPI._id, 'src', '0'], state);
-            return videoProps;
-        }
-    }
-};
-const buildStackSlides = (state, dispatch, options) => {
-    const { translate } = options;
-    const currentSlideRef = getCurrentSlideRef(state);
-    const progression = state.data.progression;
-    if (!currentSlideRef || !progression)
-        return exports.initialState;
-    const slideRefs = (0, common_1.getProgressionSlidesRefs)(progression);
-    // @ts-expect-error typescript does not support capped versions of lodash functions
-    const stack = reduce_1.default.convert({ cap: false })((acc, uiSlide, _index) => {
-        const index = (0, toInteger_1.default)(_index);
-        const slideRef = slideRefs[index];
-        const lastAnsweredSlideRef = isLastSlideAnswered(progression.state.slides, slideRef);
-        const positions = state.ui.positions;
-        // when unstack the last answered slide (position -1), we set the position to 0 only during the animation
-        // to avoid to hide the slide (caused by the position -1).
-        const position = lastAnsweredSlideRef && positions[index] === -1 ? 0 : positions[index];
-        if (!slideRef)
-            return (0, set_1.default)(index, { ...uiSlide, position }, acc);
-        const slideFromAPI = (0, get_1.default)(slideRef, state.data.slides);
-        if (!slideFromAPI)
-            return (0, set_1.default)(index, { ...uiSlide, position }, acc);
-        const answers = (0, getOr_1.default)([], ['ui', 'answers', slideRef], state);
-        const media = getSlideMedia(state, slideFromAPI);
-        const { questionText, answerUI } = (0, map_api_slide_to_ui_1.mapApiSlideToUi)(dispatch, translate)(slideFromAPI, answers, media);
-        const { title: parentContentTitle, type: parentContentType } = slideFromAPI.parentContentTitle;
-        const isCurrentSlideRef = currentSlideRef === slideRef;
-        const slideUI = (0, get_1.default)(['ui', 'slide', slideRef], state);
-        const animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
-        const showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
-        const animationType = lastAnsweredSlideRef ? slideUI.animationType : undefined;
-        const disabledContent = (0, get_1.default)(['ui', 'slide', slideRef, 'pendingAnswerRequest'], state);
-        const updatedUiSlide = {
-            ...uiSlide,
-            position,
-            showCorrectionPopin,
-            animateCorrectionPopin,
-            loading: false,
-            questionText,
-            answerUI,
-            disabledContent,
-            parentContentTitle: translate('Content Parent Title', {
-                contentTitle: parentContentTitle,
-                contentType: parentContentType
-            }),
-            animationType
-        };
-        return (0, set_1.default)(index, updatedUiSlide, acc);
-    }, exports.initialState, exports.initialState);
-    return stack;
-};
-const getIconForCurrentStep = (slideRef, lastGivenAnswerForSlide, currentSlideRef, lastGivenAnswer) => {
-    if (slideRef !== currentSlideRef)
-        return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
-    if (lastGivenAnswer.slideRef !== slideRef)
-        return 'no-answer';
-    return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
-};
-const buildStepItems = (state) => {
-    const { progression } = state.data;
-    const { currentSlideRef } = state.ui;
-    if (!progression)
-        return [];
-    const defaultProps = [
-        {
-            icon: 'no-answer',
-            current: true,
-            value: '1'
-        },
-        {
-            icon: 'no-answer',
-            current: false,
-            value: '2'
-        },
-        {
-            icon: 'no-answer',
-            current: false,
-            value: '3'
-        },
-        {
-            icon: 'no-answer',
-            current: false,
-            value: '4'
-        },
-        {
-            icon: 'no-answer',
-            current: false,
-            value: '5'
-        }
-    ];
-    const slideRefs = (0, common_1.getProgressionSlidesRefs)(progression);
-    const allAnswers = progression.state.allAnswers;
-    const step = progression.state.step;
-    const nextContentRef = progression.state.nextContent.ref;
-    const lastGivenAnswer = (0, last_1.default)(allAnswers);
-    if (!lastGivenAnswer)
-        return defaultProps;
-    const steps = defaultProps.map((stepItem, index) => {
-        const slideRef = slideRefs[index];
-        if (!slideRef)
-            return stepItem; // non fecthed slide pour given index
-        const lastGivenAnswerForSlide = (0, findLast_1.default)(answer => answer.slideRef === slideRef, allAnswers);
-        // never answered slide
-        if (!lastGivenAnswerForSlide) {
-            return {
-                ...stepItem,
-                current: nextContentRef === currentSlideRef && step.current === index + 1
-            };
-        }
-        // already answered slide, we computed based on the lastGivenAnswer
-        return {
-            ...stepItem,
-            icon: getIconForCurrentStep(slideRef, lastGivenAnswerForSlide, currentSlideRef, lastGivenAnswer),
-            current: lastGivenAnswerForSlide.slideRef === currentSlideRef
-        };
-    });
-    return steps;
-};
-exports.buildStepItems = buildStepItems;
-const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf, translate, endReview) => {
-    const nextLabel = endReview ? translate('Continue') : translate('Next Question');
-    return {
-        klf: isCorrect
-            ? undefined
-            : {
-                label: translate('KLF'),
-                tooltip: klf
-            },
-        resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
-        information: {
-            label: isCorrect ? translate('KLF') : translate('Correct Answer'),
-            message: isCorrect ? klf : (0, join_1.default)(', ', correctAnswer)
-        },
-        next: {
-            'aria-label': nextLabel,
-            label: nextLabel,
-            onClick: () => {
-                dispatch(next_slide_1.nextSlide);
-            }
-        },
-        type: isCorrect ? 'right' : 'wrong'
-    };
-};
-const buildQuitPopinProps = (dispatch) => (onQuitClick, translate, skin) => {
-    return {
-        content: translate('Quit Title'),
-        icon: `MoonRocket`,
-        mode: 'alert',
-        descriptionText: translate('Quit Description Text'),
-        firstButton: {
-            label: translate('Stop learning'),
-            type: 'tertiary',
-            customStyle: {
-                color: '#ED3436'
-            },
-            handleOnclick: () => {
-                dispatch(quit_popin_1.closeQuitPopin);
-                onQuitClick();
-            },
-            'aria-label': translate('Stop learning')
-        },
-        secondButton: {
-            label: translate('Continue learning'),
-            type: 'primary',
-            customStyle: {
-                backgroundColor: (0, get_1.default)(['common', 'primary'], skin)
-            },
-            handleOnclick: () => {
-                dispatch(quit_popin_1.closeQuitPopin);
-            },
-            'aria-label': translate('Continue learning')
-        }
-    };
-};
-const buildRankCard = (rank, translate) => {
-    return {
-        'aria-label': 'Review Card Congrats Container',
-        'data-name': 'card-rank',
-        animationLottie: {
-            'aria-label': translate('New rank animation'),
-            'data-name': 'default-lottie',
-            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
-            loop: true,
-            autoplay: true
-        },
-        cardType: 'card-rank',
-        iconAriaLabel: 'Image without information',
-        className: undefined,
-        reviewCardTitle: translate('You are now'),
-        reviewCardValue: `${rank}`,
-        rankSuffix: 'th',
-        timerAnimation: 200
-    };
-};
-const buildCongratsProps = (state, dispatch, options) => {
-    if (!state.ui.showCongrats)
-        return;
-    const { translate, onQuitClick } = options;
-    const progression = state.data.progression;
-    const stars = progression.state.stars;
-    const cardCongratsStar = {
-        'aria-label': 'Review Card Congrats Container',
-        'data-name': 'card-star',
-        animationLottie: {
-            'aria-label': translate('Acquired stars animation'),
-            'data-name': 'default-lottie',
-            className: undefined,
-            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
-            loop: false,
-            autoplay: undefined,
-            rendererSettings: {
-                hideOnTransparent: false
-            }
-        },
-        iconAriaLabel: 'Image without information',
-        className: undefined,
-        cardType: 'card-star',
-        reviewCardTitle: translate('You have won'),
-        reviewCardValue: `${stars}`,
-        timerAnimation: 200
-    };
-    const { start, end } = state.data.rank;
-    const newRank = start - end;
-    const cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end, translate) : undefined;
-    const skillRef = progression.content.ref;
-    const buttonRevising = state.ui.showButtonRevising
-        ? {
-            'aria-label': translate('Continue reviewing'),
-            label: translate('Continue reviewing'),
-            onClick: () => {
-                dispatch((0, post_progression_1.postProgression)(skillRef));
-            },
-            type: 'tertiary'
-        }
-        : undefined;
-    const buttonRevisingSkill = {
-        'aria-label': translate('Revise another skill'),
-        label: translate('Revise another skill'),
-        onClick: onQuitClick,
-        type: 'primary'
-    };
-    return {
-        'aria-label': 'Review Congratulations',
-        'data-name': 'review-congrats',
-        animationLottie: buildConfettiAnimation(translate),
-        title: translate('Congratulations!'),
-        cardCongratsStar,
-        cardCongratsRank,
-        buttonRevising,
-        buttonRevisingSkill
-    };
-};
-const isEndOfProgression = (progression) => {
-    if (!progression)
-        return false;
-    return progression.state.nextContent.ref === 'successExitNode';
-};
-const mapStateToSlidesProps = (state, dispatch, options) => {
-    const { translate, onQuitClick, skin, backgroundImage } = options;
-    const currentSlideRef = getCurrentSlideRef(state);
-    const endReview = isEndOfProgression(state.data.progression);
-    const correction = (0, get_1.default)(['data', 'corrections', currentSlideRef], state);
-    const isCorrect = (0, get_1.default)(['data', 'progression', 'state', 'isCorrect'], state);
-    const klf = (0, getOr_1.default)('', ['data', 'slides', currentSlideRef, 'klf'], state);
-    const showQuitPopin = (0, get_1.default)(['ui', 'showQuitPopin'], state);
-    const showCongrats = (0, get_1.default)(['ui', 'showCongrats'], state);
-    const skillName = (0, getOr_1.default)('', ['data', 'currentSkill', 'name'], state);
-    return {
-        header: {
-            mode: translate('Review Title'),
-            skillName,
-            onQuitClick: showCongrats
-                ? onQuitClick
-                : () => {
-                    dispatch(quit_popin_1.openQuitPopin);
-                },
-            'aria-label': 'aria-header-wrapper',
-            closeButtonAriaLabel: 'aria-close-button',
-            steps: (0, exports.buildStepItems)(state),
-            hiddenSteps: showCongrats
-        },
-        stack: state.data.progression
-            ? {
-                slides: buildStackSlides(state, dispatch, options),
-                validateButton: {
-                    label: translate('Validate'),
-                    disabled: !(0, get_1.default)(['ui', 'slide', currentSlideRef, 'validateButton'], state),
-                    onClick: () => {
-                        dispatch(post_answer_1.postAnswer);
-                    }
-                },
-                correctionPopinProps: correction &&
-                    getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, translate, endReview),
-                endReview: endReview && state.ui.showCongrats
-            }
-            : null,
-        backgroundImage,
-        congrats: buildCongratsProps(state, dispatch, options),
-        quitPopin: showQuitPopin
-            ? buildQuitPopinProps(dispatch)(onQuitClick, translate, skin)
-            : undefined
-    };
-};
-exports.mapStateToSlidesProps = mapStateToSlidesProps;

package/lib/views/slides/map-api-slide-to-ui.js

@@ -1,182 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapApiSlideToUi = exports.getQuestionType = void 0;
-const fp_1 = require("lodash/fp");
-const answers_1 = require("../../actions/ui/answers");
-const qcmProps = (dispatch) => (answers, question) => {
-    return {
-        type: 'qcm',
-        answers: (0, fp_1.map)(choice => {
-            const label = (0, fp_1.getOr)('', 'label', choice);
-            return {
-                title: label,
-                selected: (0, fp_1.includes)(label, answers),
-                onClick: () => {
-                    dispatch((0, answers_1.editAnswer)([label]));
-                },
-                'aria-label': label
-            };
-        }, question.content.choices)
-    };
-};
-const qcmDragProps = (dispatch) => (answers, question) => {
-    return {
-        type: 'qcmDrag',
-        answers: (0, fp_1.map)(choice => {
-            const label = (0, fp_1.getOr)('', 'label', choice);
-            const indexInAnswer = (0, fp_1.indexOf)(label, answers);
-            return {
-                title: label,
-                selected: (0, fp_1.includes)(label, answers),
-                order: indexInAnswer,
-                onClick: () => {
-                    dispatch((0, answers_1.editAnswer)([label]));
-                }
-            };
-        }, question.content.choices)
-    };
-};
-const qcmGraphicProps = (dispatch) => (answers, question) => {
-    return {
-        type: 'qcmGraphic',
-        answers: (0, fp_1.map)(choice => {
-            const label = (0, fp_1.getOr)('', 'label', choice);
-            return {
-                title: label,
-                image: (0, fp_1.get)('media.src.0.url', choice),
-                selected: (0, fp_1.includes)(label, answers),
-                onClick: () => {
-                    dispatch((0, answers_1.editAnswer)([label]));
-                },
-                ariaLabel: label
-            };
-        }, question.content.choices)
-    };
-};
-const updateTemplateAnswer = (text, _answers, index, max) => {
-    const answers = (0, fp_1.isEmpty)(_answers) ? (0, fp_1.times)((0, fp_1.constant)(undefined), max) : _answers;
-    return (0, fp_1.map)(a => ((0, fp_1.isNil)(a) ? '' : a), (0, fp_1.set)(index, text, answers));
-};
-const templateTextProps = (dispatch, translate, answers, choice, index, maxLength) => {
-    return {
-        type: 'text',
-        name: (0, fp_1.getOr)('', 'name', choice),
-        placeholder: translate('Type here'),
-        value: (0, fp_1.get)(index, answers),
-        onChange: (text) => {
-            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
-            dispatch((0, answers_1.editAnswer)(newAnswers));
-        }
-    };
-};
-const templateSelectProps = (dispatch, translate, answers, choice, index, maxLength) => {
-    const answer = (0, fp_1.get)(index, answers);
-    const temporaryOption = {
-        name: translate('Select an answer'),
-        value: '',
-        validOption: false,
-        selected: true
-    };
-    const selectOptions = choice.items.map((item) => {
-        const itemText = (0, fp_1.getOr)('', 'text', item);
-        return {
-            name: itemText,
-            value: itemText,
-            validOption: true,
-            selected: itemText === answer
-        };
-    });
-    return {
-        type: 'select',
-        name: (0, fp_1.getOr)('', 'name', choice),
-        onChange: (text) => {
-            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
-            dispatch((0, answers_1.editAnswer)(newAnswers));
-        },
-        options: (0, fp_1.isEmpty)(answer) ? (0, fp_1.concat)([temporaryOption], selectOptions) : selectOptions,
-        'aria-label': translate('Select an answer')
-    };
-};
-const templateProps = (dispatch, translate) => (answers, question) => {
-    const choices = question.content.choices;
-    const maxLength = (0, fp_1.size)(choices);
-    return {
-        type: 'template',
-        template: (0, fp_1.get)('content.template', question),
-        answers: choices.map((choice, index) => choice.type === 'text'
-            ? templateTextProps(dispatch, translate, answers, choice, index, maxLength)
-            : templateSelectProps(dispatch, translate, answers, choice, index, maxLength))
-    };
-};
-const basicProps = (dispatch) => (answers, question) => {
-    return {
-        type: 'freeText',
-        placeholder: (0, fp_1.getOr)('', 'content.placeholder', question),
-        value: (0, fp_1.getOr)('', '0', answers),
-        onChange: (text) => {
-            dispatch((0, answers_1.editAnswer)([text]));
-        }
-    };
-};
-const sliderProps = (dispatch) => (answers, question) => {
-    const values = (0, fp_1.rangeStep)((0, fp_1.getOr)(1, 'content.step', question), (0, fp_1.get)('content.min', question), (0, fp_1.get)('content.max', question) + 1
-    // Lodash doesn't infer the type very well here
-    );
-    const stateValue = (0, fp_1.head)(answers) || question.content.min;
-    const currentValue = (0, fp_1.toInteger)(stateValue);
-    const indexValue = (0, fp_1.indexOf)(currentValue, values);
-    const maxValue = (0, fp_1.size)(values) - 1;
-    const sliderPosition = (0, fp_1.divide)(indexValue, maxValue);
-    const unitLabel = (0, fp_1.get)('content.unitLabel', question);
-    return {
-        type: 'slider',
-        placeholder: question.explanation,
-        minLabel: `${question.content.min} ${unitLabel}`,
-        maxLabel: `${question.content.max} ${unitLabel}`,
-        title: `${currentValue} ${question.content.unitLabel}`,
-        value: sliderPosition,
-        onChange: (position) => {
-            // atom/range handler
-            const newValue = (0, fp_1.pipe)((0, fp_1.multiply)(maxValue), fp_1.round, (0, fp_1.get)(fp_1.__, values), fp_1.toString)(position);
-            dispatch((0, answers_1.editAnswer)([newValue]));
-        },
-        onSliderChange: (newValue) => {
-            // mobile/slider handler
-            dispatch((0, answers_1.editAnswer)([`${newValue}`]));
-        }
-    };
-};
-const getQuestionType = (question) => question.type;
-exports.getQuestionType = getQuestionType;
-const getHelp = (slide) => (0, fp_1.get)('question.explanation', slide);
-const getAnswerUIModel = (question, answers, dispatch, translate) => {
-    const type = (0, exports.getQuestionType)(question);
-    switch (type) {
-        case 'qcm':
-            return qcmProps(dispatch)(answers, question);
-        case 'qcmGraphic':
-            return qcmGraphicProps(dispatch)(answers, question);
-        case 'qcmDrag':
-            return qcmDragProps(dispatch)(answers, question);
-        case 'basic':
-            return basicProps(dispatch)(answers, question);
-        case 'template':
-            return templateProps(dispatch, translate)(answers, question);
-        case 'slider':
-            return sliderProps(dispatch)(answers, question);
-        default:
-            throw new Error(`${type} is not an handled question.type`);
-    }
-};
-const mapApiSlideToUi = (dispatch, translate) => (slide, answers, media) => {
-    const questionText = (0, fp_1.getOr)('', 'question.header', slide);
-    return {
-        questionText,
-        answerUI: {
-            model: getAnswerUIModel(slide.question, answers, dispatch, translate),
-            help: getHelp(slide),
-            media
-        }
-    };
-};
-exports.mapApiSlideToUi = mapApiSlideToUi;