@coorpacademy/app-review 0.5.0 → 0.5.1-alpha.26

package/es/actions/ui/quit-popin.d.ts

@@ -0,0 +1,8 @@
+export declare const OPEN_POPIN: "@@ui/OPEN_POPIN";
+export declare const CLOSE_POPIN: "@@ui/CLOSE_POPIN";
+export declare const openQuitPopin: {
+    type: "@@ui/OPEN_POPIN";
+};
+export declare const closeQuitPopin: {
+    type: "@@ui/CLOSE_POPIN";
+};

package/es/actions/ui/quit-popin.js

@@ -0,0 +1,8 @@
+export const OPEN_POPIN = '@@ui/OPEN_POPIN';
+export const CLOSE_POPIN = '@@ui/CLOSE_POPIN';
+export const openQuitPopin = {
+    type: OPEN_POPIN
+};
+export const closeQuitPopin = {
+    type: CLOSE_POPIN
+};

package/es/common/index.js

@@ -7,7 +7,7 @@ export const VIEWS = {
 };
 export const slideIndexes = ['0', '1', '2', '3', '4'];
 export const getProgressionSlidesRefs = (progression) => {
-    if (progression.state.step.current < 5) {
+    if (progression.state.step.current <= 5) {
         const slideRef = progression.state.nextContent.ref;
         return concat(progression.state.slides, [slideRef]);
     }

package/es/reducers/index.d.ts

@@ -19,6 +19,11 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         answers: import("./ui/answers").UIAnswerState;
         slide: import("./ui/slide").UISlideState;
         positions: import("./ui/positions").UIPositionState;
+        showQuitPopin: boolean;
     }>;
-}>, import("./data/corrections").CorrectionsAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/post-progression").ReceivedProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/answers").EditAnswerAction>;
+}>, import("./data/corrections").CorrectionsAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/post-progression").ReceivedProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/answers").EditAnswerAction | {
+    type: "@@ui/OPEN_POPIN";
+} | {
+    type: "@@ui/CLOSE_POPIN";
+}>;
 export default _default;

package/es/reducers/ui/index.d.ts

@@ -3,12 +3,14 @@ import { NavigationState } from './navigation';
 import { UIAnswerState } from './answers';
 import { UIPositionState } from './positions';
 import { UISlideState } from './slide';
+import { type ShowQuitPopinState } from './quit-popin';
 export declare type UIState = {
     currentSlideRef: CurrentSlideRefState;
     navigation: NavigationState;
     answers: UIAnswerState;
     slide: UISlideState;
     positions: UIPositionState;
+    showQuitPopin: ShowQuitPopinState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     currentSlideRef: string;
@@ -16,5 +18,10 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     answers: UIAnswerState;
     slide: UISlideState;
     positions: UIPositionState;
-}>, import("../../actions/api/fetch-correction").ReceivedCorrection | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-slide").FetchSlide | import("../../actions/api/post-answer").PostAnswerRequestAction | import("../../actions/api/post-progression").ReceivedProgression | import("../../actions/ui/next-slide").NextSlideAction | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack | import("../../actions/ui/answers").EditAnswerAction>;
+    showQuitPopin: boolean;
+}>, import("../../actions/api/fetch-correction").ReceivedCorrection | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-slide").FetchSlide | import("../../actions/api/post-answer").PostAnswerRequestAction | import("../../actions/api/post-progression").ReceivedProgression | import("../../actions/ui/next-slide").NextSlideAction | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack | import("../../actions/ui/answers").EditAnswerAction | {
+    type: "@@ui/OPEN_POPIN";
+} | {
+    type: "@@ui/CLOSE_POPIN";
+}>;
 export default _default;

package/es/reducers/ui/index.js

@@ -4,10 +4,12 @@ import navigation from './navigation';
 import answers from './answers';
 import positions from './positions';
 import slide from './slide';
+import showQuitPopin from './quit-popin';
 export default combineReducers({
     currentSlideRef,
     navigation,
     answers,
     slide,
-    positions
+    positions,
+    showQuitPopin
 });

package/es/reducers/ui/quit-popin.d.ts

@@ -0,0 +1,4 @@
+import { closeQuitPopin, openQuitPopin } from '../../actions/ui/quit-popin';
+export declare type ShowQuitPopinState = boolean;
+declare const reducer: (state: boolean | undefined, action: typeof openQuitPopin | typeof closeQuitPopin) => ShowQuitPopinState;
+export default reducer;

package/es/reducers/ui/quit-popin.js

@@ -0,0 +1,16 @@
+import { CLOSE_POPIN, OPEN_POPIN } from '../../actions/ui/quit-popin';
+const reducer = (
+// eslint-disable-next-line default-param-last
+state = false, action) => {
+    switch (action.type) {
+        case OPEN_POPIN: {
+            return true;
+        }
+        case CLOSE_POPIN: {
+            return false;
+        }
+        default:
+            return state;
+    }
+};
+export default reducer;

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

@@ -40,6 +40,15 @@ declare type CorrectionPopinNext = {
     ariaLabel: string;
     onClick: Function;
 };
+declare type QuitPopinButton = {
+    label: string;
+    type: string;
+    customStyle?: {
+        color: string;
+    };
+    handleOnclick: Function;
+    ariaLabel: string;
+};
 export declare type CorrectionPopinProps = {
     klf?: CorrectionPopinKlf;
     information: CorrectionPopinInformation;
@@ -47,6 +56,14 @@ export declare type CorrectionPopinProps = {
     resultLabel: string;
     type: 'right' | 'wrong';
 };
+export declare type QuitPopinProps = {
+    content: string;
+    icon: string;
+    mode: string;
+    descriptionText: string;
+    firstButton: QuitPopinButton;
+    secondButton: QuitPopinButton;
+};
 export declare type SlidesViewProps = {
     header: {
         mode: string;
@@ -87,6 +104,7 @@ export declare type SlidesViewProps = {
             type: string;
         };
     };
+    quitPopin?: QuitPopinProps;
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];

package/es/views/slides/index.js

@@ -6,6 +6,7 @@ import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import toInteger from 'lodash/fp/toInteger';
 import join from 'lodash/fp/join';
+import { closeQuitPopin, openQuitPopin } from '../../actions/ui/quit-popin';
 import { getProgressionSlidesRefs } from '../../common';
 import { postAnswer } from '../../actions/api/post-answer';
 import { nextSlide } from '../../actions/ui/next-slide';
@@ -168,16 +169,42 @@ const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf) =>
         type: isCorrect ? 'right' : 'wrong'
     };
 };
+const buildQuitPopinProps = (dispatch) => (onQuitClick) => {
+    return {
+        content: `Tu t'en vas déjà ?`,
+        icon: `MoonRocket`,
+        mode: 'alert',
+        descriptionText: `Tu vas t'en sortir ! Si tu arrêtes maintenant, tu vas perdre ta progression.`,
+        firstButton: {
+            label: 'Arrêter ma session',
+            type: 'tertiary',
+            customStyle: {
+                color: '#ED3436'
+            },
+            handleOnclick: onQuitClick,
+            ariaLabel: 'Stop session'
+        },
+        secondButton: {
+            label: `Continuer d'apprendre`,
+            type: 'primary',
+            handleOnclick: () => {
+                dispatch(closeQuitPopin);
+            },
+            ariaLabel: 'Continue review'
+        }
+    };
+};
 export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
     const currentSlideRef = get(['ui', 'currentSlideRef'], state);
     const correction = get(['data', 'corrections', currentSlideRef], state);
     const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
     const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
+    const showQuitPopin = get(['ui', 'showQuitPopin'], state);
     return {
         header: {
             mode: '__revision_mode',
             skillName: '__agility',
-            onQuitClick,
+            onQuitClick: () => dispatch(openQuitPopin),
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
             steps: buildStepItems(state)
@@ -194,6 +221,7 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
             correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
             endReview: false
         },
-        congrats: undefined
+        congrats: undefined,
+        quitPopin: showQuitPopin === true ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/lib/actions/ui/quit-popin.d.ts

@@ -0,0 +1,8 @@
+export declare const OPEN_POPIN: "@@ui/OPEN_POPIN";
+export declare const CLOSE_POPIN: "@@ui/CLOSE_POPIN";
+export declare const openQuitPopin: {
+    type: "@@ui/OPEN_POPIN";
+};
+export declare const closeQuitPopin: {
+    type: "@@ui/CLOSE_POPIN";
+};

package/lib/actions/ui/quit-popin.js

@@ -0,0 +1,8 @@
+export var OPEN_POPIN = '@@ui/OPEN_POPIN';
+export var CLOSE_POPIN = '@@ui/CLOSE_POPIN';
+export var openQuitPopin = {
+    type: OPEN_POPIN
+};
+export var closeQuitPopin = {
+    type: CLOSE_POPIN
+};

package/lib/common/index.js

@@ -7,7 +7,7 @@ export var VIEWS = {
 };
 export var slideIndexes = ['0', '1', '2', '3', '4'];
 export var getProgressionSlidesRefs = function (progression) {
-    if (progression.state.step.current < 5) {
+    if (progression.state.step.current <= 5) {
         var slideRef = progression.state.nextContent.ref;
         return concat(progression.state.slides, [slideRef]);
     }

package/lib/reducers/index.d.ts

@@ -19,6 +19,11 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         answers: import("./ui/answers").UIAnswerState;
         slide: import("./ui/slide").UISlideState;
         positions: import("./ui/positions").UIPositionState;
+        showQuitPopin: boolean;
     }>;
-}>, import("./data/corrections").CorrectionsAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/post-progression").ReceivedProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/answers").EditAnswerAction>;
+}>, import("./data/corrections").CorrectionsAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("../actions/api/post-progression").ReceivedProgression | import("../actions/api/fetch-skills").ReceivedSkills | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/answers").EditAnswerAction | {
+    type: "@@ui/OPEN_POPIN";
+} | {
+    type: "@@ui/CLOSE_POPIN";
+}>;
 export default _default;

package/lib/reducers/ui/index.d.ts

@@ -3,12 +3,14 @@ import { NavigationState } from './navigation';
 import { UIAnswerState } from './answers';
 import { UIPositionState } from './positions';
 import { UISlideState } from './slide';
+import { type ShowQuitPopinState } from './quit-popin';
 export declare type UIState = {
     currentSlideRef: CurrentSlideRefState;
     navigation: NavigationState;
     answers: UIAnswerState;
     slide: UISlideState;
     positions: UIPositionState;
+    showQuitPopin: ShowQuitPopinState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     currentSlideRef: string;
@@ -16,5 +18,10 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     answers: UIAnswerState;
     slide: UISlideState;
     positions: UIPositionState;
-}>, import("../../actions/api/fetch-correction").ReceivedCorrection | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-slide").FetchSlide | import("../../actions/api/post-answer").PostAnswerRequestAction | import("../../actions/api/post-progression").ReceivedProgression | import("../../actions/ui/next-slide").NextSlideAction | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack | import("../../actions/ui/answers").EditAnswerAction>;
+    showQuitPopin: boolean;
+}>, import("../../actions/api/fetch-correction").ReceivedCorrection | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-slide").FetchSlide | import("../../actions/api/post-answer").PostAnswerRequestAction | import("../../actions/api/post-progression").ReceivedProgression | import("../../actions/ui/next-slide").NextSlideAction | import("../../actions/ui/navigation").NavigateTo | import("../../actions/ui/navigation").NavigateBack | import("../../actions/ui/answers").EditAnswerAction | {
+    type: "@@ui/OPEN_POPIN";
+} | {
+    type: "@@ui/CLOSE_POPIN";
+}>;
 export default _default;

package/lib/reducers/ui/index.js

@@ -4,10 +4,12 @@ import navigation from './navigation';
 import answers from './answers';
 import positions from './positions';
 import slide from './slide';
+import showQuitPopin from './quit-popin';
 export default combineReducers({
     currentSlideRef: currentSlideRef,
     navigation: navigation,
     answers: answers,
     slide: slide,
-    positions: positions
+    positions: positions,
+    showQuitPopin: showQuitPopin
 });

package/lib/reducers/ui/quit-popin.d.ts

@@ -0,0 +1,4 @@
+import { closeQuitPopin, openQuitPopin } from '../../actions/ui/quit-popin';
+export declare type ShowQuitPopinState = boolean;
+declare const reducer: (state: boolean | undefined, action: typeof openQuitPopin | typeof closeQuitPopin) => ShowQuitPopinState;
+export default reducer;

package/lib/reducers/ui/quit-popin.js

@@ -0,0 +1,17 @@
+import { CLOSE_POPIN, OPEN_POPIN } from '../../actions/ui/quit-popin';
+var reducer = function (
+// eslint-disable-next-line default-param-last
+state, action) {
+    if (state === void 0) { state = false; }
+    switch (action.type) {
+        case OPEN_POPIN: {
+            return true;
+        }
+        case CLOSE_POPIN: {
+            return false;
+        }
+        default:
+            return state;
+    }
+};
+export default reducer;

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

@@ -40,6 +40,15 @@ declare type CorrectionPopinNext = {
     ariaLabel: string;
     onClick: Function;
 };
+declare type QuitPopinButton = {
+    label: string;
+    type: string;
+    customStyle?: {
+        color: string;
+    };
+    handleOnclick: Function;
+    ariaLabel: string;
+};
 export declare type CorrectionPopinProps = {
     klf?: CorrectionPopinKlf;
     information: CorrectionPopinInformation;
@@ -47,6 +56,14 @@ export declare type CorrectionPopinProps = {
     resultLabel: string;
     type: 'right' | 'wrong';
 };
+export declare type QuitPopinProps = {
+    content: string;
+    icon: string;
+    mode: string;
+    descriptionText: string;
+    firstButton: QuitPopinButton;
+    secondButton: QuitPopinButton;
+};
 export declare type SlidesViewProps = {
     header: {
         mode: string;
@@ -87,6 +104,7 @@ export declare type SlidesViewProps = {
             type: string;
         };
     };
+    quitPopin?: QuitPopinProps;
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];

package/lib/views/slides/index.js

@@ -17,6 +17,7 @@ import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import toInteger from 'lodash/fp/toInteger';
 import join from 'lodash/fp/join';
+import { closeQuitPopin, openQuitPopin } from '../../actions/ui/quit-popin';
 import { getProgressionSlidesRefs } from '../../common';
 import { postAnswer } from '../../actions/api/post-answer';
 import { nextSlide } from '../../actions/ui/next-slide';
@@ -164,16 +165,44 @@ var getCorrectionPopinProps = function (dispatch) {
         };
     };
 };
+var buildQuitPopinProps = function (dispatch) {
+    return function (onQuitClick) {
+        return {
+            content: "Tu t'en vas d\u00E9j\u00E0 ?",
+            icon: "MoonRocket",
+            mode: 'alert',
+            descriptionText: "Tu vas t'en sortir ! Si tu arr\u00EAtes maintenant, tu vas perdre ta progression.",
+            firstButton: {
+                label: 'Arrêter ma session',
+                type: 'tertiary',
+                customStyle: {
+                    color: '#ED3436'
+                },
+                handleOnclick: onQuitClick,
+                ariaLabel: 'Stop session'
+            },
+            secondButton: {
+                label: "Continuer d'apprendre",
+                type: 'primary',
+                handleOnclick: function () {
+                    dispatch(closeQuitPopin);
+                },
+                ariaLabel: 'Continue review'
+            }
+        };
+    };
+};
 export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
     var currentSlideRef = get(['ui', 'currentSlideRef'], state);
     var correction = get(['data', 'corrections', currentSlideRef], state);
     var isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
     var klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
+    var showQuitPopin = get(['ui', 'showQuitPopin'], state);
     return {
         header: {
             mode: '__revision_mode',
             skillName: '__agility',
-            onQuitClick: onQuitClick,
+            onQuitClick: function () { return dispatch(openQuitPopin); },
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
             steps: buildStepItems(state)
@@ -190,6 +219,7 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
             correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
             endReview: false
         },
-        congrats: undefined
+        congrats: undefined,
+        quitPopin: showQuitPopin === true ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.5.0",
+  "version": "0.5.1-alpha.26+f825a15a6",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -9,7 +9,7 @@
   "scripts": {
     "static": "webpack --progress --output-path static/dist",
     "poststatic": "cp sandbox/index.html static/index.html",
-    "start": "cross-env BABEL_ENV=es webpack-dev-server --content-base sandbox --host 0.0.0.0 --history-api-fallback true --hot true",
+    "start": "cross-env BABEL_ENV=es webpack-dev-server",
     "prepare": "npm run clean && npm run build --production",
     "build:commonjs": "tsc -p tsconfig.lib.json",
     "build:es": "tsc -p tsconfig.es.json",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@coorpacademy/components": "10.23.8",
-    "@coorpacademy/redux-task": "^1.1.5",
+    "@coorpacademy/redux-task": "1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
-    "react-redux": "7.2.8",
+    "react-redux": "^7.2.9",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1"
   },
@@ -66,17 +66,16 @@
     "ava": "^4.3.0",
     "browser-env": "^3.3.0",
     "concurrently": "^5.2.0",
-    "dotenv": "^16.0.1",
     "eslint": "^8.18.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "nock": "^13.2.9",
     "react-dom": "^17.0.2",
-    "ts-loader": "^8.2.0",
+    "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "ef2f2340a0169672d5880e8fb9900cd7c7ebf12c"
+  "gitHead": "f825a15a6a6ff42539c9f4848db71ea526cad455"
 }

package/src/actions/api/test/fetch-correction.test.ts

@@ -43,7 +43,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

package/src/actions/api/test/fetch-rank.test.ts

@@ -28,7 +28,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/actions/api/test/fetch-skills.test.ts

@@ -24,7 +24,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

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

@@ -26,7 +26,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/actions/api/test/post-answer.test.ts

@@ -75,7 +75,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 
@@ -177,7 +178,8 @@ test('should dispatch post-answer, fetch-correction and fetch-end-rank actions w
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 

package/src/actions/api/test/post-progression.test.ts

@@ -27,7 +27,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/actions/data/test/token.test.ts

@@ -18,7 +18,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/actions/ui/quit-popin.ts

@@ -0,0 +1,10 @@
+export const OPEN_POPIN = '@@ui/OPEN_POPIN' as const;
+export const CLOSE_POPIN = '@@ui/CLOSE_POPIN' as const;
+
+export const openQuitPopin = {
+  type: OPEN_POPIN
+};
+
+export const closeQuitPopin = {
+  type: CLOSE_POPIN
+};

package/src/actions/ui/test/answers.test.ts

@@ -53,7 +53,8 @@ const initialState: StoreState = {
     currentSlideRef: '',
     navigation: [],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

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

@@ -41,7 +41,8 @@ const state: StoreState = {
         animateCorrectionPopin: true,
         showCorrectionPopin: true
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 test('should dispatch NEXT_SLIDE action when nextSlide is called and the progression state is correct', t => {

package/src/actions/ui/test/quit-popin.test.ts

@@ -0,0 +1,38 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import type {StoreState} from '../../../reducers';
+import {closeQuitPopin, CLOSE_POPIN, openQuitPopin, OPEN_POPIN} from '../quit-popin';
+import {services} from '../../../test/util/services.mock';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: {},
+    slide: {},
+    positions: [],
+    showQuitPopin: false
+  }
+};
+
+test('should dispatch OPEN_POPIN when openQuitPopin action is called', async t => {
+  const expectedAction = [{type: OPEN_POPIN}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  await dispatch(openQuitPopin);
+});
+
+test('should dispatch CLOSE_POPIN when closeQuitPopin action is called', async t => {
+  const expectedAction = [{type: CLOSE_POPIN}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  await dispatch(closeQuitPopin);
+});

package/src/actions/ui/test/slides.test.ts

@@ -19,7 +19,8 @@ const initialState: StoreState = {
     navigation: [],
     positions: [0, 1, 2, 3, 4],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/common/index.ts

@@ -17,7 +17,7 @@ export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
 export type SlideIndexes = typeof slideIndexes[number];
 
 export const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
-  if (progression.state.step.current < 5) {
+  if (progression.state.step.current <= 5) {
     const slideRef = progression.state.nextContent.ref;
     return concat(progression.state.slides, [slideRef]);
   }

package/src/common/test/get-progression-slide-ref.test.ts

@@ -0,0 +1,35 @@
+import test from 'ava';
+import {
+  postAnswerResponses,
+  postProgressionResponse,
+  progressionSlideWithPendingSlide
+} from '../../test/util/services.mock';
+import {templateSlide} from '../../views/slides/test/fixtures/template';
+import {getProgressionSlidesRefs} from '..';
+
+test('should return first slide for a created slide', t => {
+  const slides = getProgressionSlidesRefs(postProgressionResponse);
+  t.deepEqual(slides, ['sli_VJYjJnJhg']);
+});
+
+test('should return all 5 slides when user is going to answer the 5th slide', t => {
+  const slides = getProgressionSlidesRefs(postAnswerResponses[templateSlide._id]);
+  t.deepEqual(slides, [
+    'sli_VJYjJnJhg',
+    'sli_VkSQroQnx',
+    'sli_N1XACJobn',
+    'sli_VkAzsCLKb',
+    'sli_N13-hG3kX'
+  ]);
+});
+
+test('should return all 5 slides when progression has a nextContent ref that is a pending slide', t => {
+  const slides = getProgressionSlidesRefs(progressionSlideWithPendingSlide);
+  t.deepEqual(slides, [
+    'sli_VJYjJnJhg',
+    'sli_VkSQroQnx',
+    'sli_N1XACJobn',
+    'sli_VkAzsCLKb',
+    'sli_N13-hG3kX'
+  ]);
+});

package/src/reducers/ui/index.ts

@@ -5,6 +5,7 @@ import navigation, {NavigationState} from './navigation';
 import answers, {UIAnswerState} from './answers';
 import positions, {UIPositionState} from './positions';
 import slide, {UISlideState} from './slide';
+import showQuitPopin, {type ShowQuitPopinState} from './quit-popin';
 
 export type UIState = {
   currentSlideRef: CurrentSlideRefState;
@@ -12,6 +13,7 @@ export type UIState = {
   answers: UIAnswerState;
   slide: UISlideState;
   positions: UIPositionState;
+  showQuitPopin: ShowQuitPopinState;
 };
 
 export default combineReducers({
@@ -19,5 +21,6 @@ export default combineReducers({
   navigation,
   answers,
   slide,
-  positions
+  positions,
+  showQuitPopin
 });

package/src/reducers/ui/quit-popin.ts

@@ -0,0 +1,22 @@
+import {closeQuitPopin, CLOSE_POPIN, openQuitPopin, OPEN_POPIN} from '../../actions/ui/quit-popin';
+
+export type ShowQuitPopinState = boolean;
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: ShowQuitPopinState = false,
+  action: typeof openQuitPopin | typeof closeQuitPopin
+): ShowQuitPopinState => {
+  switch (action.type) {
+    case OPEN_POPIN: {
+      return true;
+    }
+    case CLOSE_POPIN: {
+      return false;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/test/quit-popin.test.ts

@@ -0,0 +1,24 @@
+import test from 'ava';
+import {CLOSE_POPIN, OPEN_POPIN} from '../../../actions/ui/quit-popin';
+import reducer from '../quit-popin';
+
+test('should have showQuitPopin intial value to false', t => {
+  const state = reducer(undefined, {
+    type: '@@ui/CLOSE_POPIN'
+  });
+  t.is(state, false);
+});
+
+test('should set showQuitPopin to true if OPEN_POPIN is received', t => {
+  const state = reducer(false, {
+    type: OPEN_POPIN
+  });
+  t.is(state, true);
+});
+
+test('should set showQuitPopin to false if CLOSE_POPIN is received', t => {
+  const state = reducer(true, {
+    type: CLOSE_POPIN
+  });
+  t.is(state, false);
+});

package/src/views/skills/test/skills.test.ts

@@ -19,7 +19,8 @@ test('should create initial props when there are no skills on the state', t => {
       positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 
@@ -64,7 +65,8 @@ test('should create initial props when skills on the state', t => {
       positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 

package/src/views/slides/index.ts

@@ -7,6 +7,7 @@ import set from 'lodash/fp/set';
 import toInteger from 'lodash/fp/toInteger';
 import type {Dispatch} from 'redux';
 import join from 'lodash/fp/join';
+import {closeQuitPopin, openQuitPopin} from '../../actions/ui/quit-popin';
 import type {ProgressionAnswerItem} from '../../types/common';
 import {getProgressionSlidesRefs, type SlideIndexes} from '../../common';
 import type {StoreState} from '../../reducers';
@@ -62,6 +63,16 @@ type CorrectionPopinNext = {
   onClick: Function;
 };
 
+type QuitPopinButton = {
+  label: string;
+  type: string;
+  customStyle?: {
+    color: string;
+  };
+  handleOnclick: Function;
+  ariaLabel: string;
+};
+
 export type CorrectionPopinProps = {
   klf?: CorrectionPopinKlf;
   information: CorrectionPopinInformation;
@@ -70,6 +81,15 @@ export type CorrectionPopinProps = {
   type: 'right' | 'wrong';
 };
 
+export type QuitPopinProps = {
+  content: string;
+  icon: string;
+  mode: string;
+  descriptionText: string;
+  firstButton: QuitPopinButton;
+  secondButton: QuitPopinButton;
+};
+
 export type SlidesViewProps = {
   header: {
     mode: string;
@@ -110,6 +130,7 @@ export type SlidesViewProps = {
       type: string;
     };
   };
+  quitPopin?: QuitPopinProps;
 };
 
 // TODO replace this, position no more needed
@@ -293,6 +314,33 @@ const getCorrectionPopinProps =
     };
   };
 
+const buildQuitPopinProps =
+  (dispatch: Dispatch) =>
+  (onQuitClick: Function): QuitPopinProps => {
+    return {
+      content: `Tu t'en vas déjà ?`,
+      icon: `MoonRocket`,
+      mode: 'alert',
+      descriptionText: `Tu vas t'en sortir ! Si tu arrêtes maintenant, tu vas perdre ta progression.`,
+      firstButton: {
+        label: 'Arrêter ma session',
+        type: 'tertiary',
+        customStyle: {
+          color: '#ED3436'
+        },
+        handleOnclick: onQuitClick,
+        ariaLabel: 'Stop session'
+      },
+      secondButton: {
+        label: `Continuer d'apprendre`,
+        type: 'primary',
+        handleOnclick: (): void => {
+          dispatch(closeQuitPopin);
+        },
+        ariaLabel: 'Continue review'
+      }
+    };
+  };
 export const mapStateToSlidesProps = (
   state: StoreState,
   dispatch: Dispatch,
@@ -302,12 +350,12 @@ export const mapStateToSlidesProps = (
   const correction = get(['data', 'corrections', currentSlideRef], state);
   const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
   const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
-
+  const showQuitPopin = get(['ui', 'showQuitPopin'], state);
   return {
     header: {
       mode: '__revision_mode',
       skillName: '__agility',
-      onQuitClick,
+      onQuitClick: () => dispatch(openQuitPopin),
       'aria-label': 'aria-header-wrapper',
       closeButtonAriaLabel: 'aria-close-button',
       steps: buildStepItems(state)
@@ -325,6 +373,7 @@ export const mapStateToSlidesProps = (
         correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
       endReview: false
     },
-    congrats: undefined
+    congrats: undefined,
+    quitPopin: showQuitPopin === true ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
   };
 };

package/src/views/slides/test/header.on-click.test.ts

@@ -0,0 +1,42 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import {createTestStore} from '../../../actions/test/create-test-store';
+import {incorrectFreeTextPostAnswerResponse, services} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {OPEN_POPIN} from '../../../actions/ui/quit-popin';
+import {mapStateToSlidesProps} from '..';
+
+const state: StoreState = {
+  data: {
+    progression: incorrectFreeTextPostAnswerResponse,
+    skills: [],
+    slides: {
+      sli_N1XACJobn: null
+    },
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: ['loader', 'slides'],
+    answers: {},
+    positions: [0, 1, 2, 3, 4],
+    slide: {
+      sli_N1XACJobn: {
+        validateButton: false,
+        animateCorrectionPopin: false,
+        showCorrectionPopin: false
+      }
+    },
+    showQuitPopin: false
+  }
+};
+
+test('should dispatch OPEN_POPIN action after a click on close button in header', async t => {
+  const expectedAction = [{type: OPEN_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, identity);
+  await props.header.onQuitClick();
+  t.pass();
+});

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

@@ -42,7 +42,8 @@ test('should create initial props when fetched slide is not still received', t =
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -133,7 +134,8 @@ test('should create props when first slide is on the state', t => {
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -239,7 +241,8 @@ test('should create props when slide is on the state and user has selected answe
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -351,7 +354,8 @@ test('should verify props when first slide was answered correctly and next slide
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -467,7 +471,8 @@ test('should verify props when first slide was answered with error and next slid
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -540,7 +545,8 @@ test('should verify props when first slide was answered, next slide is fetched &
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -670,7 +676,8 @@ test('should verify props when first slide was answered incorrectly, next slide
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -807,7 +814,8 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -938,7 +946,8 @@ test('should verify props when progression is in success', t => {
           animateCorrectionPopin: true,
           showCorrectionPopin: true
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -1045,7 +1054,8 @@ test('should verify props when progression has answered a current pendingSlide',
           showCorrectionPopin: false,
           animationType: 'unstack'
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -1149,7 +1159,8 @@ test('should verify props when progression still has a pendingSlide', t => {
           showCorrectionPopin: false,
           animationType: 'unstack'
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -1188,3 +1199,34 @@ test('should verify props when progression still has a pendingSlide', t => {
     ]
   });
 });
+
+test('should verify that props quitPopin is not undefined when popin is displayed', t => {
+  const state: StoreState = {
+    data: {
+      progression: createdProgression,
+      skills: [],
+      slides: {
+        sli_N1XACJobn: null
+      },
+      token: '1234',
+      corrections: {},
+      rank: {}
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'slides'],
+      answers: {},
+      positions: [0, 1, 2, 3, 4],
+      slide: {
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false
+        }
+      },
+      showQuitPopin: true
+    }
+  };
+  const props = mapStateToSlidesProps(state, identity, identity);
+  t.not(props.quitPopin, undefined);
+});

package/src/views/slides/test/on-quit-popin.on-click.test.ts

@@ -0,0 +1,64 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import {createTestStore} from '../../../actions/test/create-test-store';
+import {CLOSE_POPIN} from '../../../actions/ui/quit-popin';
+import {incorrectFreeTextPostAnswerResponse, services} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {mapStateToSlidesProps, QuitPopinProps} from '..';
+import {freeTextSlide} from './fixtures/free-text';
+import {qcmGraphicSlide} from './fixtures/qcm-graphic';
+
+const state: StoreState = {
+  data: {
+    progression: incorrectFreeTextPostAnswerResponse,
+    skills: [],
+    slides: {
+      sli_VJYjJnJhg: freeTextSlide,
+      sli_VkSQroQnx: qcmGraphicSlide
+    },
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: 'sli_VJYjJnJhg',
+    navigation: ['loader', 'slides'],
+    answers: {sli_VJYjJnJhg: ['My value']},
+    positions: [0, 1, 2, 3, 4],
+    slide: {
+      sli_VJYjJnJhg: {
+        validateButton: false,
+        animateCorrectionPopin: true,
+        showCorrectionPopin: true
+      },
+      sli_VkSQroQnx: {
+        validateButton: false,
+        animateCorrectionPopin: false,
+        showCorrectionPopin: false
+      }
+    },
+    showQuitPopin: true
+  }
+};
+
+test('should dispatch CLOSE_POPIN action via the property handleOnclick of secondButton when popin is open', async t => {
+  const expectedAction = [{type: CLOSE_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, identity);
+  const quitPopin = props.quitPopin as QuitPopinProps;
+  await quitPopin.secondButton.handleOnclick();
+  const updatedState = getState();
+  t.is(updatedState.ui.showQuitPopin, false);
+  t.pass();
+});
+
+test('should dispatch onQuitClick function via the property handleOnclick of firstButton when popin is open', async t => {
+  t.plan(2);
+
+  const expectedAction = [{type: CLOSE_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, () => t.pass());
+  const quitPopin = props.quitPopin as QuitPopinProps;
+  await quitPopin.firstButton.handleOnclick();
+  t.pass();
+});

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

@@ -66,7 +66,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -43,7 +43,8 @@ test('correction popin actions after click', async t => {
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 

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

@@ -55,7 +55,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -55,7 +55,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -55,7 +55,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -55,7 +55,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -55,7 +55,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };
 

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

@@ -56,7 +56,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };