@coorpacademy/app-review 0.3.4 → 0.4.0

package/es/actions/api/fetch-slide.js

@@ -22,8 +22,6 @@ export const fetchSlide = (slideRef) => async (dispatch, getState, { services })
     const response = await dispatch(action);
     if (response.type === SLIDE_FETCH_SUCCESS) {
         const slideFromAPI = response.payload;
-        if (!slideFromAPI)
-            throw new Error('Slide not found');
         const state = getState();
         const slides = get('data.progression.state.slides', state);
         if (isEmpty(slides)) {

package/es/actions/ui/next-slide.js

@@ -1,11 +1,14 @@
 import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 export const NEXT_SLIDE = '@@slide/NEXT_SLIDE';
 export const nextSlide = (dispatch, getState) => {
     const state = getState();
     const payload = {
         currentSlideRef: get(['ui', 'currentSlideRef'], state),
-        nextSlideRef: get(['data', 'progression', 'state', 'nextContent', 'ref'], state),
-        animationType: state.data.progression?.state.isCorrect ? 'unstack' : 'restack'
+        nextSlideRef: get(['state', 'nextContent', 'ref'], state.data.progression),
+        animationType: getOr(false, ['state', 'isCorrect'], state.data.progression)
+            ? 'unstack'
+            : 'restack'
     };
     const action = {
         type: NEXT_SLIDE,

package/es/views/slides/index.d.ts

@@ -14,18 +14,19 @@ declare type StepItem = {
     value: string;
 };
 declare type SlideUIAnimations = 'unstack' | 'restack';
-export declare type UISlide = {
+export declare type ReviewSlide = {
+    hidden: boolean;
+    position: number;
+    loading: boolean;
+    showCorrectionPopin?: boolean;
+    animateCorrectionPopin?: boolean;
+    parentContentTitle?: string;
     questionText?: string;
     answerUI?: AnswerUI;
-    hidden?: boolean;
-    position: number;
     animationType?: SlideUIAnimations;
-    isCorrect?: boolean;
-    endReview?: boolean;
-    loading: boolean;
 };
 declare type SlidesStack = {
-    [key in SlideIndexes]: UISlide;
+    [key in SlideIndexes]: ReviewSlide;
 };
 declare type CorrectionPopinInformation = {
     label: string;
@@ -38,6 +39,7 @@ declare type CorrectionPopinKlf = {
 declare type CorrectionPopinNext = {
     label: string;
     ariaLabel: string;
+    onClick: Function;
 };
 export declare type CorrectionPopinProps = {
     klf?: CorrectionPopinKlf;

package/es/views/slides/index.js

@@ -3,13 +3,13 @@ import findLast from 'lodash/fp/findLast';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import last from 'lodash/fp/last';
-import pipe from 'lodash/fp/pipe';
 import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
 import join from 'lodash/fp/join';
 import { postAnswer } from '../../actions/api/post-answer';
+import { nextSlide } from '../../actions/ui/next-slide';
 import { mapApiSlideToUi } from './map-api-slide-to-ui';
 const ICON_VALUES = {
     right: 'right',
@@ -71,9 +71,17 @@ const buildStackSlides = (state, dispatch) => {
         const isCurrentSlideRef = currentSlideRef === slideRef;
         const animateCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'animateCorrectionPopin'], state);
         const showCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'showCorrectionPopin'], state);
-        const updatedUiSlide = pipe(set('showCorrectionPopin', showCorrectionPopin), set('animateCorrectionPopin', animateCorrectionPopin), set('loading', false), set('questionText', questionText), set('answerUI', answerUI), set('parentContentTitle', `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
-        // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
-        )(uiSlide);
+        const animationType = get(['ui', 'slide', slideRef, 'animationType'], state);
+        const updatedUiSlide = {
+            ...uiSlide,
+            showCorrectionPopin,
+            animateCorrectionPopin,
+            loading: false,
+            questionText,
+            answerUI,
+            parentContentTitle: `From "${parentContentTitle}" ${parentContentType}`,
+            animationType
+        };
         return set(index, updatedUiSlide, acc);
     }, initialState, initialState);
     return stack;
@@ -145,24 +153,29 @@ export const buildStepItems = (state) => {
     });
     return steps;
 };
-const getCorrectionPopinProps = (isCorrect, correctAnswer, klf) => ({
-    klf: isCorrect
-        ? undefined
-        : {
-            label: '_klf',
-            tooltip: klf
+const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf) => {
+    return {
+        klf: isCorrect
+            ? undefined
+            : {
+                label: '_klf',
+                tooltip: klf
+            },
+        resultLabel: isCorrect ? '_right' : '_wrong',
+        information: {
+            label: isCorrect ? '_klf' : '_correctAnswer',
+            message: isCorrect ? klf : join(',', correctAnswer)
         },
-    resultLabel: isCorrect ? '_right' : '_wrong',
-    information: {
-        label: isCorrect ? '_klf' : '_correctAnswer',
-        message: isCorrect ? klf : join(',', correctAnswer)
-    },
-    next: {
-        ariaLabel: '_correctionNextAriaLabel',
-        label: '_correctionNextLabel'
-    },
-    type: isCorrect ? 'right' : 'wrong'
-});
+        next: {
+            ariaLabel: '_correctionNextAriaLabel',
+            label: '_correctionNextLabel',
+            onClick: () => {
+                dispatch(nextSlide);
+            }
+        },
+        type: isCorrect ? 'right' : 'wrong'
+    };
+};
 export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
     const currentSlideRef = get(['ui', 'currentSlideRef'], state);
     const correction = get(['data', 'corrections', currentSlideRef], state);
@@ -182,11 +195,11 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
             validateButton: {
                 label: '__validate',
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
-                onClick: /* istanbul ignore next */ () => {
+                onClick: () => {
                     dispatch(postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
             endReview: false
         },
         congratsProps: undefined

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

@@ -164,9 +164,6 @@ const getAnswerUIModel = (question, answers, dispatch) => {
     }
 };
 export const mapApiSlideToUi = (dispatch) => (slide, answers) => {
-    if (!slide) {
-        throw new Error('no slide was found');
-    }
     const questionText = getOr('', 'question.header', slide);
     return {
         questionText,

package/es/views/slides/test/fixtures/free-text.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const freeTextSlide: SlideFromAPI;
-export declare const freeTextUISlide: Partial<UISlide>;
+export declare const freeTextUISlide: Partial<ReviewSlide>;

package/es/views/slides/test/fixtures/qcm-drag.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmDragSlide: SlideFromAPI;
-export declare const qcmDragUISlide: Partial<UISlide>;
+export declare const qcmDragUISlide: Partial<ReviewSlide>;

package/es/views/slides/test/fixtures/qcm-graphic.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmGraphicSlide: SlideFromAPI;
-export declare const qcmGraphicUISlide: Partial<UISlide>;
+export declare const qcmGraphicUISlide: Partial<ReviewSlide>;

package/es/views/slides/test/fixtures/qcm.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmSlide: SlideFromAPI;
-export declare const qcmUISlide: Partial<UISlide>;
+export declare const qcmUISlide: Partial<ReviewSlide>;

package/es/views/slides/test/fixtures/slider.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const sliderSlide: SlideFromAPI;
-export declare const sliderUISlide: Partial<UISlide>;
+export declare const sliderUISlide: Partial<ReviewSlide>;

package/es/views/slides/test/fixtures/template.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const templateSlide: SlideFromAPI;
-export declare const templateUISlide: Partial<UISlide>;
+export declare const templateUISlide: Partial<ReviewSlide>;

package/lib/actions/api/fetch-slide.js

@@ -67,8 +67,6 @@ export var fetchSlide = function (slideRef) {
                         response = _b.sent();
                         if (response.type === SLIDE_FETCH_SUCCESS) {
                             slideFromAPI = response.payload;
-                            if (!slideFromAPI)
-                                throw new Error('Slide not found');
                             state = getState();
                             slides = get('data.progression.state.slides', state);
                             if (isEmpty(slides)) {

package/lib/actions/ui/next-slide.js

@@ -1,12 +1,14 @@
 import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 export var NEXT_SLIDE = '@@slide/NEXT_SLIDE';
 export var nextSlide = function (dispatch, getState) {
-    var _a;
     var state = getState();
     var payload = {
         currentSlideRef: get(['ui', 'currentSlideRef'], state),
-        nextSlideRef: get(['data', 'progression', 'state', 'nextContent', 'ref'], state),
-        animationType: ((_a = state.data.progression) === null || _a === void 0 ? void 0 : _a.state.isCorrect) ? 'unstack' : 'restack'
+        nextSlideRef: get(['state', 'nextContent', 'ref'], state.data.progression),
+        animationType: getOr(false, ['state', 'isCorrect'], state.data.progression)
+            ? 'unstack'
+            : 'restack'
     };
     var action = {
         type: NEXT_SLIDE,

package/lib/views/slides/index.d.ts

@@ -14,18 +14,19 @@ declare type StepItem = {
     value: string;
 };
 declare type SlideUIAnimations = 'unstack' | 'restack';
-export declare type UISlide = {
+export declare type ReviewSlide = {
+    hidden: boolean;
+    position: number;
+    loading: boolean;
+    showCorrectionPopin?: boolean;
+    animateCorrectionPopin?: boolean;
+    parentContentTitle?: string;
     questionText?: string;
     answerUI?: AnswerUI;
-    hidden?: boolean;
-    position: number;
     animationType?: SlideUIAnimations;
-    isCorrect?: boolean;
-    endReview?: boolean;
-    loading: boolean;
 };
 declare type SlidesStack = {
-    [key in SlideIndexes]: UISlide;
+    [key in SlideIndexes]: ReviewSlide;
 };
 declare type CorrectionPopinInformation = {
     label: string;
@@ -38,6 +39,7 @@ declare type CorrectionPopinKlf = {
 declare type CorrectionPopinNext = {
     label: string;
     ariaLabel: string;
+    onClick: Function;
 };
 export declare type CorrectionPopinProps = {
     klf?: CorrectionPopinKlf;

package/lib/views/slides/index.js

@@ -14,13 +14,13 @@ import findLast from 'lodash/fp/findLast';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import last from 'lodash/fp/last';
-import pipe from 'lodash/fp/pipe';
 import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
 import join from 'lodash/fp/join';
 import { postAnswer } from '../../actions/api/post-answer';
+import { nextSlide } from '../../actions/ui/next-slide';
 import { mapApiSlideToUi } from './map-api-slide-to-ui';
 var ICON_VALUES = {
     right: 'right',
@@ -82,9 +82,8 @@ var buildStackSlides = function (state, dispatch) {
         var isCurrentSlideRef = currentSlideRef === slideRef;
         var animateCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'animateCorrectionPopin'], state);
         var showCorrectionPopin = isCurrentSlideRef && get(['ui', 'slide', slideRef, 'showCorrectionPopin'], state);
-        var updatedUiSlide = pipe(set('showCorrectionPopin', showCorrectionPopin), set('animateCorrectionPopin', animateCorrectionPopin), set('loading', false), set('questionText', questionText), set('answerUI', answerUI), set('parentContentTitle', "From \"".concat(parentContentTitle, "\" ").concat(parentContentType)) // TODO translate: -From- .... -Course/chapter-
-        // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
-        )(uiSlide);
+        var animationType = get(['ui', 'slide', slideRef, 'animationType'], state);
+        var updatedUiSlide = __assign(__assign({}, uiSlide), { showCorrectionPopin: showCorrectionPopin, animateCorrectionPopin: animateCorrectionPopin, loading: false, questionText: questionText, answerUI: answerUI, parentContentTitle: "From \"".concat(parentContentTitle, "\" ").concat(parentContentType), animationType: animationType });
         return set(index, updatedUiSlide, acc);
     }, initialState, initialState);
     return stack;
@@ -149,24 +148,31 @@ export var buildStepItems = function (state) {
     });
     return steps;
 };
-var getCorrectionPopinProps = function (isCorrect, correctAnswer, klf) { return ({
-    klf: isCorrect
-        ? undefined
-        : {
-            label: '_klf',
-            tooltip: klf
-        },
-    resultLabel: isCorrect ? '_right' : '_wrong',
-    information: {
-        label: isCorrect ? '_klf' : '_correctAnswer',
-        message: isCorrect ? klf : join(',', correctAnswer)
-    },
-    next: {
-        ariaLabel: '_correctionNextAriaLabel',
-        label: '_correctionNextLabel'
-    },
-    type: isCorrect ? 'right' : 'wrong'
-}); };
+var getCorrectionPopinProps = function (dispatch) {
+    return function (isCorrect, correctAnswer, klf) {
+        return {
+            klf: isCorrect
+                ? undefined
+                : {
+                    label: '_klf',
+                    tooltip: klf
+                },
+            resultLabel: isCorrect ? '_right' : '_wrong',
+            information: {
+                label: isCorrect ? '_klf' : '_correctAnswer',
+                message: isCorrect ? klf : join(',', correctAnswer)
+            },
+            next: {
+                ariaLabel: '_correctionNextAriaLabel',
+                label: '_correctionNextLabel',
+                onClick: function () {
+                    dispatch(nextSlide);
+                }
+            },
+            type: isCorrect ? 'right' : 'wrong'
+        };
+    };
+};
 export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
     var currentSlideRef = get(['ui', 'currentSlideRef'], state);
     var correction = get(['data', 'corrections', currentSlideRef], state);
@@ -186,11 +192,11 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
             validateButton: {
                 label: '__validate',
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
-                onClick: /* istanbul ignore next */ function () {
+                onClick: function () {
                     dispatch(postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
             endReview: false
         },
         congratsProps: undefined

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

@@ -179,9 +179,6 @@ var getAnswerUIModel = function (question, answers, dispatch) {
 };
 export var mapApiSlideToUi = function (dispatch) {
     return function (slide, answers) {
-        if (!slide) {
-            throw new Error('no slide was found');
-        }
         var questionText = getOr('', 'question.header', slide);
         return {
             questionText: questionText,

package/lib/views/slides/test/fixtures/free-text.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const freeTextSlide: SlideFromAPI;
-export declare const freeTextUISlide: Partial<UISlide>;
+export declare const freeTextUISlide: Partial<ReviewSlide>;

package/lib/views/slides/test/fixtures/qcm-drag.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmDragSlide: SlideFromAPI;
-export declare const qcmDragUISlide: Partial<UISlide>;
+export declare const qcmDragUISlide: Partial<ReviewSlide>;

package/lib/views/slides/test/fixtures/qcm-graphic.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmGraphicSlide: SlideFromAPI;
-export declare const qcmGraphicUISlide: Partial<UISlide>;
+export declare const qcmGraphicUISlide: Partial<ReviewSlide>;

package/lib/views/slides/test/fixtures/qcm.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const qcmSlide: SlideFromAPI;
-export declare const qcmUISlide: Partial<UISlide>;
+export declare const qcmUISlide: Partial<ReviewSlide>;

package/lib/views/slides/test/fixtures/slider.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const sliderSlide: SlideFromAPI;
-export declare const sliderUISlide: Partial<UISlide>;
+export declare const sliderUISlide: Partial<ReviewSlide>;

package/lib/views/slides/test/fixtures/template.d.ts

@@ -1,4 +1,4 @@
-import { UISlide } from '../..';
+import { ReviewSlide } from '../..';
 import { SlideFromAPI } from '../../../../types/common';
 export declare const templateSlide: SlideFromAPI;
-export declare const templateUISlide: Partial<UISlide>;
+export declare const templateUISlide: Partial<ReviewSlide>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -42,7 +42,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.23.1",
+    "@coorpacademy/components": "10.23.2",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -77,5 +77,5 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },
-  "gitHead": "2e7232c224a8bfedf65813b403b69c9b7fb9bbde"
+  "gitHead": "e61dd34ad35298d25b20f60966d679a7f1f5657d"
 }

package/src/actions/api/fetch-slide.ts

@@ -41,7 +41,6 @@ export const fetchSlide =
 
     if (response.type === SLIDE_FETCH_SUCCESS) {
       const slideFromAPI = response.payload;
-      if (!slideFromAPI) throw new Error('Slide not found');
       const state = getState();
       const slides = get('data.progression.state.slides', state);
       if (isEmpty(slides)) {

package/src/actions/ui/next-slide.ts

@@ -1,6 +1,8 @@
 import type {Dispatch} from 'redux';
 import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import type {StoreState} from '../../reducers';
+import {ProgressionFromAPI} from '../../types/common';
 
 export const NEXT_SLIDE = '@@slide/NEXT_SLIDE' as const;
 
@@ -19,8 +21,13 @@ export const nextSlide = (dispatch: Dispatch, getState: () => StoreState): NextS
   const state = getState();
   const payload = {
     currentSlideRef: get(['ui', 'currentSlideRef'], state),
-    nextSlideRef: get(['data', 'progression', 'state', 'nextContent', 'ref'], state),
-    animationType: state.data.progression?.state.isCorrect ? 'unstack' : 'restack'
+    nextSlideRef: get(
+      ['state', 'nextContent', 'ref'],
+      state.data.progression as ProgressionFromAPI
+    ),
+    animationType: getOr(false, ['state', 'isCorrect'], state.data.progression)
+      ? 'unstack'
+      : 'restack'
   };
   const action = {
     type: NEXT_SLIDE,

package/src/views/slides/index.ts

@@ -3,7 +3,6 @@ import findLast from 'lodash/fp/findLast';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import last from 'lodash/fp/last';
-import pipe from 'lodash/fp/pipe';
 import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
@@ -15,6 +14,7 @@ import type {SlideIndexes} from '../../common';
 import type {StoreState} from '../../reducers';
 import type {AnswerUI} from '../../types/slides';
 import {postAnswer} from '../../actions/api/post-answer';
+import {nextSlide} from '../../actions/ui/next-slide';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
 const ICON_VALUES = {
@@ -33,19 +33,20 @@ type StepItem = {
 
 type SlideUIAnimations = 'unstack' | 'restack';
 
-export type UISlide = {
+export type ReviewSlide = {
+  hidden: boolean;
+  position: number;
+  loading: boolean;
+  showCorrectionPopin?: boolean;
+  animateCorrectionPopin?: boolean;
+  parentContentTitle?: string;
   questionText?: string;
   answerUI?: AnswerUI;
-  hidden?: boolean;
-  position: number;
   animationType?: SlideUIAnimations;
-  isCorrect?: boolean;
-  endReview?: boolean;
-  loading: boolean;
 };
 
 type SlidesStack = {
-  [key in SlideIndexes]: UISlide;
+  [key in SlideIndexes]: ReviewSlide;
 };
 
 type CorrectionPopinInformation = {
@@ -61,6 +62,7 @@ type CorrectionPopinKlf = {
 type CorrectionPopinNext = {
   label: string;
   ariaLabel: string;
+  onClick: Function;
 };
 
 export type CorrectionPopinProps = {
@@ -158,10 +160,9 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
 
   // @ts-expect-error typescript does not support capped versions of lodash functions
   const stack = reduce.convert({cap: false})(
-    (acc: SlidesStack, uiSlide: UISlide, index: string) => {
+    (acc: SlidesStack, uiSlide: ReviewSlide, index: string): SlidesStack => {
       const slideRef = slideRefs[toInteger(index)];
       if (!slideRef) return set(index, uiSlide, acc);
-
       const slideFromAPI = get(slideRef, state.data.slides);
       if (!slideFromAPI) return set(index, uiSlide, acc);
 
@@ -175,16 +176,18 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
         isCurrentSlideRef && get(['ui', 'slide', slideRef, 'animateCorrectionPopin'], state);
       const showCorrectionPopin =
         isCurrentSlideRef && get(['ui', 'slide', slideRef, 'showCorrectionPopin'], state);
-
-      const updatedUiSlide = pipe(
-        set('showCorrectionPopin', showCorrectionPopin),
-        set('animateCorrectionPopin', animateCorrectionPopin),
-        set('loading', false),
-        set('questionText', questionText),
-        set('answerUI', answerUI),
-        set('parentContentTitle', `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
-        // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
-      )(uiSlide);
+      const animationType = get(['ui', 'slide', slideRef, 'animationType'], state);
+
+      const updatedUiSlide = {
+        ...uiSlide,
+        showCorrectionPopin,
+        animateCorrectionPopin,
+        loading: false,
+        questionText,
+        answerUI,
+        parentContentTitle: `From "${parentContentTitle}" ${parentContentType}`,
+        animationType
+      };
 
       return set(index, updatedUiSlide, acc);
     },
@@ -275,28 +278,31 @@ export const buildStepItems = (state: StoreState): StepItem[] => {
   return steps;
 };
 
-const getCorrectionPopinProps = (
-  isCorrect: boolean,
-  correctAnswer: string[],
-  klf: string
-): CorrectionPopinProps => ({
-  klf: isCorrect
-    ? undefined
-    : {
-        label: '_klf',
-        tooltip: klf
+const getCorrectionPopinProps =
+  (dispatch: Dispatch) =>
+  (isCorrect: boolean, correctAnswer: string[], klf: string): CorrectionPopinProps => {
+    return {
+      klf: isCorrect
+        ? undefined
+        : {
+            label: '_klf',
+            tooltip: klf
+          },
+      resultLabel: isCorrect ? '_right' : '_wrong',
+      information: {
+        label: isCorrect ? '_klf' : '_correctAnswer',
+        message: isCorrect ? klf : join(',', correctAnswer)
       },
-  resultLabel: isCorrect ? '_right' : '_wrong',
-  information: {
-    label: isCorrect ? '_klf' : '_correctAnswer',
-    message: isCorrect ? klf : join(',', correctAnswer)
-  },
-  next: {
-    ariaLabel: '_correctionNextAriaLabel',
-    label: '_correctionNextLabel'
-  },
-  type: isCorrect ? 'right' : 'wrong'
-});
+      next: {
+        ariaLabel: '_correctionNextAriaLabel',
+        label: '_correctionNextLabel',
+        onClick: (): void => {
+          dispatch(nextSlide);
+        }
+      },
+      type: isCorrect ? 'right' : 'wrong'
+    };
+  };
 
 export const mapStateToSlidesProps = (
   state: StoreState,
@@ -322,12 +328,12 @@ export const mapStateToSlidesProps = (
       validateButton: {
         label: '__validate',
         disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
-        onClick: /* istanbul ignore next */ (): void => {
+        onClick: (): void => {
           dispatch(postAnswer);
         }
       },
       correctionPopinProps:
-        correction && getCorrectionPopinProps(isCorrect, correction.correctAnswer, klf),
+        correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
       endReview: false
     },
     congratsProps: undefined

package/src/views/slides/map-api-slide-to-ui.ts

@@ -278,9 +278,6 @@ const getAnswerUIModel = (
 export const mapApiSlideToUi =
   (dispatch: Dispatch) =>
   (slide: SlideFromAPI, answers: string[]): {questionText: string; answerUI: AnswerUI} => {
-    if (!slide) {
-      throw new Error('no slide was found');
-    }
     const questionText = getOr('', 'question.header', slide);
 
     return {

package/src/views/slides/test/fixtures/free-text.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const freeTextSlide: SlideFromAPI = {
@@ -29,7 +29,7 @@ export const freeTextSlide: SlideFromAPI = {
   }
 };
 
-export const freeTextUISlide: Partial<UISlide> = {
+export const freeTextUISlide: Partial<ReviewSlide> = {
   answerUI: {
     help: 'Type your answer.',
     model: {

package/src/views/slides/test/fixtures/qcm-drag.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmDragSlide: SlideFromAPI = {
@@ -75,7 +75,7 @@ export const qcmDragSlide: SlideFromAPI = {
   }
 };
 
-export const qcmDragUISlide: Partial<UISlide> = {
+export const qcmDragUISlide: Partial<ReviewSlide> = {
   questionText: "Remettez dans l'ordre les quatre étapes du burn out.",
   answerUI: {
     help: 'Sélectionnez les réponses ci-dessous dans le bon ordre.',

package/src/views/slides/test/fixtures/qcm-graphic.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmGraphicSlide: SlideFromAPI = {
@@ -187,7 +187,7 @@ export const qcmGraphicSlide: SlideFromAPI = {
   }
 };
 
-export const qcmGraphicUISlide: Partial<UISlide> = {
+export const qcmGraphicUISlide: Partial<ReviewSlide> = {
   questionText: 'Quels sont les 4 piliers de l’apprentissage ?',
   answerUI: {
     help: 'Sélectionnez les 4 bonnes réponses.',

package/src/views/slides/test/fixtures/qcm.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const qcmSlide: SlideFromAPI = {
@@ -78,7 +78,7 @@ export const qcmSlide: SlideFromAPI = {
   }
 };
 
-export const qcmUISlide: Partial<UISlide> = {
+export const qcmUISlide: Partial<ReviewSlide> = {
   questionText: "Après la vente d'un NFT, son créateur peut-il toucher de l'argent ?",
   answerUI: {
     help: 'Sélectionnez la bonne réponse.',

package/src/views/slides/test/fixtures/slider.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const sliderSlide: SlideFromAPI = {
@@ -24,7 +24,7 @@ export const sliderSlide: SlideFromAPI = {
   }
 };
 
-export const sliderUISlide: Partial<UISlide> = {
+export const sliderUISlide: Partial<ReviewSlide> = {
   questionText:
     'En combien d’années la communauté de communes du Thouarsais est-elle passée de zéro à un tiers d’énergies renouvelables ?',
   answerUI: {

package/src/views/slides/test/fixtures/template.ts

@@ -1,5 +1,5 @@
 import noop from 'lodash/fp/noop';
-import {UISlide} from '../..';
+import {ReviewSlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
 export const templateSlide: SlideFromAPI = {
@@ -91,7 +91,7 @@ export const templateSlide: SlideFromAPI = {
   }
 };
 
-export const templateUISlide: Partial<UISlide> = {
+export const templateUISlide: Partial<ReviewSlide> = {
   questionText: 'Complétez la phrase ci-dessous.',
   answerUI: {
     help: 'Saisissez votre réponse ou sélectionnez la bonne réponse dans le(s) menu(s) déroulant(s).',

package/src/views/slides/test/index.test.ts

@@ -9,7 +9,7 @@ import {
   getChoicesCorrection,
   incorrectFreeTextPostAnswerResponse
 } from '../../../test/util/services.mock';
-import {type CorrectionPopinProps, mapStateToSlidesProps} from '..';
+import {mapStateToSlidesProps} from '..';
 import type {StoreState} from '../../../reducers';
 import {freeTextSlide} from './fixtures/free-text';
 import {qcmGraphicSlide} from './fixtures/qcm-graphic';
@@ -17,36 +17,6 @@ import {templateSlide} from './fixtures/template';
 import {qcmSlide} from './fixtures/qcm';
 import {sliderSlide} from './fixtures/slider';
 
-const popinPropsRightAnswer: CorrectionPopinProps = {
-  resultLabel: '_right',
-  information: {
-    label: '_klf',
-    message:
-      'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.'
-  },
-  klf: undefined,
-  next: {
-    ariaLabel: '_correctionNextAriaLabel',
-    label: '_correctionNextLabel'
-  },
-  type: 'right'
-};
-
-const popinPropsWrongAnswer: CorrectionPopinProps = {
-  ...popinPropsRightAnswer,
-  klf: {
-    label: '_klf',
-    tooltip:
-      'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.'
-  },
-  type: 'wrong',
-  resultLabel: '_wrong',
-  information: {
-    label: '_correctAnswer',
-    message: 'Benchmark'
-  }
-};
-
 test('should create initial props when fetched slide is not still received', t => {
   // SCENARIO : @@progression/POST_SUCCESS ok and @@slides/FETCH_REQUEST, (the slide is being fetched)
   const state: StoreState = {
@@ -209,6 +179,7 @@ test('should create props when first slide is on the state', t => {
     endReview: false
   });
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -318,6 +289,7 @@ test('should create props when slide is on the state and user has selected answe
     endReview: false
   });
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -433,6 +405,7 @@ test('should verify props when first slide was answered correctly and next slide
     endReview: false
   });
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -619,11 +592,23 @@ test('should verify props when first slide was answered, next slide is fetched &
       }
     ]
   });
-  t.deepEqual(omit(['validateButton', 'slides', 'correctionPopinProps.klf.onClick'], props.stack), {
-    correctionPopinProps: popinPropsRightAnswer,
-    endReview: false
+  t.is(props.stack.endReview, false);
+  t.deepEqual(omit('next.onClick', props.stack.correctionPopinProps), {
+    resultLabel: '_right',
+    information: {
+      label: '_klf',
+      message:
+        'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.'
+    },
+    klf: undefined,
+    next: {
+      ariaLabel: '_correctionNextAriaLabel',
+      label: '_correctionNextLabel'
+    },
+    type: 'right'
   });
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: true,
     showCorrectionPopin: true,
     hidden: false,
@@ -642,6 +627,7 @@ test('should verify props when first slide was answered, next slide is fetched &
     }
   });
   t.deepEqual(omit('answerUI', props.stack.slides['1']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -740,11 +726,26 @@ test('should verify props when first slide was answered incorrectly, next slide
       }
     ]
   });
-  t.deepEqual(omit(['validateButton', 'slides', 'correctionPopinProps.klf.onClick'], props.stack), {
-    correctionPopinProps: popinPropsWrongAnswer,
-    endReview: false
+  t.is(props.stack.endReview, false);
+  t.deepEqual(omit('next.onClick', props.stack.correctionPopinProps), {
+    resultLabel: '_wrong',
+    information: {
+      label: '_correctAnswer',
+      message: 'Benchmark'
+    },
+    klf: {
+      label: '_klf',
+      tooltip:
+        'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.'
+    },
+    next: {
+      ariaLabel: '_correctionNextAriaLabel',
+      label: '_correctionNextLabel'
+    },
+    type: 'wrong'
   });
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: true,
     showCorrectionPopin: true,
     hidden: false,
@@ -763,6 +764,7 @@ test('should verify props when first slide was answered incorrectly, next slide
     }
   });
   t.deepEqual(omit('answerUI', props.stack.slides['1']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -811,13 +813,15 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
       currentSlideRef: 'sli_VkSQroQnx',
       navigation: ['loader', 'slides'],
       answers: {
-        sli_VJYjJnJhg: ['Benchmark']
+        sli_VJYjJnJhg: ['Benchmark'],
+        sli_VkSQroQnx: []
       },
       slide: {
         sli_VJYjJnJhg: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: true
+          showCorrectionPopin: true,
+          animationType: 'unstack'
         },
         sli_VkSQroQnx: {
           validateButton: false,
@@ -904,22 +908,26 @@ test('should verify props when progression is in success', t => {
         sli_VJYjJnJhg: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_VkSQroQnx: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_N1XACJobn: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_VkAzsCLKb: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         'sli_N13-hG3kX': {
           validateButton: false,
@@ -1011,22 +1019,26 @@ test('should verify props when progression has answered a current pendingSlide',
         sli_VkSQroQnx: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_N1XACJobn: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'restack'
         },
         sli_VkAzsCLKb: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         'sli_N13-hG3kX': {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         }
       }
     }
@@ -1105,12 +1117,14 @@ test('should verify props when progression still has a pendingSlide', t => {
         sli_VJYjJnJhg: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_VkSQroQnx: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         sli_N1XACJobn: {
           validateButton: false,
@@ -1120,12 +1134,14 @@ test('should verify props when progression still has a pendingSlide', t => {
         sli_VkAzsCLKb: {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         },
         'sli_N13-hG3kX': {
           validateButton: false,
           animateCorrectionPopin: false,
-          showCorrectionPopin: false
+          showCorrectionPopin: false,
+          animationType: 'unstack'
         }
       }
     }

package/src/views/slides/test/map-api-slide-to-ui.test.ts

@@ -2,7 +2,7 @@ import test from 'ava';
 import identity from 'lodash/fp/identity';
 import {SlideFromAPI} from '../../../types/common';
 import {mapApiSlideToUi} from '../map-api-slide-to-ui';
-import {UISlide} from '..';
+import {ReviewSlide} from '..';
 import {qcmUISlide, qcmSlide} from './fixtures/qcm';
 import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
 import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';
@@ -21,7 +21,7 @@ const macro = test.macro({
     arg: {
       slide: SlideFromAPI;
       answers: string[];
-      expectedUiSlide: Partial<UISlide>;
+      expectedUiSlide: Partial<ReviewSlide>;
     }
   ) {
     t.deepEqual(

package/src/views/slides/test/slide.free-text.on-change.test.ts

@@ -72,6 +72,7 @@ test('should dispatch EDIT_BASIC action via the property onChange of a Free Text
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,

package/src/views/slides/test/slide.qcm-drag.on-click.test.ts

@@ -72,6 +72,7 @@ test('should dispatch EDIT_QCM_DRAG action via the property onClick of a QCM Dra
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,

package/src/views/slides/test/slide.qcm-graphic.on-click.test.ts

@@ -72,6 +72,7 @@ test('should dispatch EDIT_QCM_GRAPHIC action via the property onClick of a QCM
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,

package/src/views/slides/test/slide.qcm.on-click.test.ts

@@ -74,6 +74,7 @@ test('should dispatch EDIT_QCM action via the property onClick of a QCM slide',
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,

package/src/views/slides/test/slide.slider.on-change.test.ts

@@ -72,6 +72,7 @@ test('should dispatch EDIT_SLIDER action via the property onChange of a Slider s
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,

package/src/views/slides/test/slide.template.on-change.test.ts

@@ -68,6 +68,7 @@ test('should dispatch EDIT_TEMPLATE action via the property onChange of a Templa
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,
@@ -92,6 +93,7 @@ test('should dispatch EDIT_TEMPLATE action via the property onChange of a Templa
 
   const props = mapStateToSlidesProps(getState(), dispatch, identity);
   t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+    animationType: undefined,
     animateCorrectionPopin: false,
     showCorrectionPopin: false,
     hidden: false,