@coorpacademy/app-review 0.5.4-alpha.8 → 0.5.5

package/es/types/common.d.ts

@@ -77,17 +77,19 @@ export declare type ProgressionAnswerItem = {
     slideRef: string;
     answer: string[];
 };
+export declare type SlideContent = {
+    type: 'slide';
+    ref: string;
+};
+export declare type SuccessNodeContent = {
+    type: 'success';
+    ref: 'successExitNode';
+};
 export declare type ProgressionState = {
     allAnswers: ProgressionAnswerItem[];
-    content?: {
-        ref: string;
-        type: string;
-    };
+    content?: SlideContent;
     isCorrect: boolean;
-    nextContent: {
-        type: 'success' | 'slide';
-        ref: 'successExitNode' | string;
-    };
+    nextContent: SlideContent | SuccessNodeContent;
     pendingSlides: string[];
     slides: string[];
     step: {

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

@@ -84,28 +84,58 @@ export declare type SlidesViewProps = {
         endReview: boolean;
     };
     reviewBackgroundAriaLabel?: string;
-    congrats?: {
-        'aria-label'?: string;
-        'data-name'?: string;
-        animationLottie: unknown;
-        title: string;
-        cardCongratsStar: unknown;
-        cardCongratsRank: unknown;
-        buttonRevising: {
-            'aria-label'?: string;
-            label: string;
-            onClick: Function;
-            type: string;
-        };
-        buttonRevisingSkill: {
-            'aria-label'?: string;
-            label: string;
-            onClick: Function;
-            type: string;
-        };
-    };
+    congrats?: CongratsProps;
     quitPopin?: QuitPopinProps;
 };
+declare type LottieAnimationProps = {
+    'aria-label': string;
+    'data-name'?: string;
+    animationSrc: string;
+    loop?: boolean;
+    rendererSettings?: {
+        hideOnTransparent?: boolean;
+        className?: string;
+    };
+    height?: number;
+    width?: number;
+    className?: number;
+    ie11ImageBackup: string;
+    backupImageClassName?: string;
+    autoplay?: boolean;
+    animationControl?: 'play' | 'pause' | 'stop' | 'loading';
+};
+export declare type CongratsCardProps = {
+    'aria-label': string;
+    'data-name': string;
+    animationLottie: LottieAnimationProps;
+    iconAriaLabel: string;
+    className?: string;
+    cardType: string;
+    reviewCardTitle: string;
+    reviewCardValue: string;
+    rankSuffix?: string;
+    timerAnimation: number;
+};
+export declare type CongratsProps = {
+    'aria-label': string;
+    'data-name': 'review-congrats';
+    animationLottie: LottieAnimationProps;
+    title: string;
+    cardCongratsStar: CongratsCardProps;
+    cardCongratsRank?: CongratsCardProps;
+    buttonRevising?: {
+        'aria-label': string;
+        label: string;
+        onClick: Function;
+        type: string;
+    };
+    buttonRevisingSkill?: {
+        label: string;
+        'aria-label': string;
+        onClick: Function;
+        type: string;
+    };
+};
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
 export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;

package/es/views/slides/index.js

@@ -16,7 +16,18 @@ const ICON_VALUES = {
     wrong: 'wrong',
     'no-answer': 'no-answer'
 };
-// TODO replace this, position no more needed
+const confettiAnimation = {
+    'aria-label': 'aria lottie',
+    'data-name': 'default-lottie',
+    className: undefined,
+    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
+    loop: undefined,
+    autoplay: true,
+    rendererSettings: {
+        hideOnTransparent: false
+    },
+    ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg'
+};
 export const initialState = {
     '0': {
         position: 0,
@@ -39,8 +50,17 @@ export const initialState = {
         loading: true
     }
 };
+const getCurrentSlideRef = (state) => {
+    const currentSlideRef = get(['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 buildStackSlides = (state, dispatch) => {
-    const currentSlideRef = state.ui.currentSlideRef;
+    const currentSlideRef = getCurrentSlideRef(state);
     const progression = state.data.progression;
     if (!currentSlideRef || !progression)
         return initialState;
@@ -194,8 +214,76 @@ const buildQuitPopinProps = (dispatch) => (onQuitClick) => {
         }
     };
 };
+const buildRankCard = (rank) => {
+    return {
+        'aria-label': 'Review Card Congrats Container',
+        'data-name': 'card-rank',
+        animationLottie: {
+            'aria-label': 'aria lottie',
+            'data-name': 'default-lottie',
+            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
+            loop: true,
+            autoplay: true,
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
+        },
+        cardType: 'card-rank',
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        reviewCardTitle: 'You are now',
+        reviewCardValue: `${rank}`,
+        rankSuffix: 'th',
+        timerAnimation: 200
+    };
+};
+const buildCongratsProps = (state) => {
+    if (!state.ui.showCongrats)
+        return;
+    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': 'aria lottie',
+            'data-name': 'default-lottie',
+            className: undefined,
+            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+            loop: false,
+            autoplay: undefined,
+            rendererSettings: {
+                hideOnTransparent: false
+            },
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
+        },
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        cardType: 'card-star',
+        reviewCardTitle: '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) : undefined;
+    return {
+        'aria-label': 'Review Congratulations',
+        'data-name': 'review-congrats',
+        animationLottie: confettiAnimation,
+        title: 'Congratulations!',
+        cardCongratsStar,
+        cardCongratsRank,
+        buttonRevising: undefined,
+        buttonRevisingSkill: undefined // TODO make boutons and actions
+    };
+};
+const isEndOfProgression = (progression) => {
+    if (!progression)
+        return false;
+    return progression.state.nextContent.ref === 'successExitNode';
+};
 export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
-    const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+    const currentSlideRef = getCurrentSlideRef(state);
+    const endReview = isEndOfProgression(state.data.progression);
     const correction = get(['data', 'corrections', currentSlideRef], state);
     const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
     const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
@@ -219,9 +307,9 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
                 }
             },
             correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
-            endReview: false
+            endReview: endReview && state.ui.showCongrats
         },
-        congrats: undefined,
+        congrats: buildCongratsProps(state),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/lib/types/common.d.ts

@@ -77,17 +77,19 @@ export declare type ProgressionAnswerItem = {
     slideRef: string;
     answer: string[];
 };
+export declare type SlideContent = {
+    type: 'slide';
+    ref: string;
+};
+export declare type SuccessNodeContent = {
+    type: 'success';
+    ref: 'successExitNode';
+};
 export declare type ProgressionState = {
     allAnswers: ProgressionAnswerItem[];
-    content?: {
-        ref: string;
-        type: string;
-    };
+    content?: SlideContent;
     isCorrect: boolean;
-    nextContent: {
-        type: 'success' | 'slide';
-        ref: 'successExitNode' | string;
-    };
+    nextContent: SlideContent | SuccessNodeContent;
     pendingSlides: string[];
     slides: string[];
     step: {

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

@@ -84,28 +84,58 @@ export declare type SlidesViewProps = {
         endReview: boolean;
     };
     reviewBackgroundAriaLabel?: string;
-    congrats?: {
-        'aria-label'?: string;
-        'data-name'?: string;
-        animationLottie: unknown;
-        title: string;
-        cardCongratsStar: unknown;
-        cardCongratsRank: unknown;
-        buttonRevising: {
-            'aria-label'?: string;
-            label: string;
-            onClick: Function;
-            type: string;
-        };
-        buttonRevisingSkill: {
-            'aria-label'?: string;
-            label: string;
-            onClick: Function;
-            type: string;
-        };
-    };
+    congrats?: CongratsProps;
     quitPopin?: QuitPopinProps;
 };
+declare type LottieAnimationProps = {
+    'aria-label': string;
+    'data-name'?: string;
+    animationSrc: string;
+    loop?: boolean;
+    rendererSettings?: {
+        hideOnTransparent?: boolean;
+        className?: string;
+    };
+    height?: number;
+    width?: number;
+    className?: number;
+    ie11ImageBackup: string;
+    backupImageClassName?: string;
+    autoplay?: boolean;
+    animationControl?: 'play' | 'pause' | 'stop' | 'loading';
+};
+export declare type CongratsCardProps = {
+    'aria-label': string;
+    'data-name': string;
+    animationLottie: LottieAnimationProps;
+    iconAriaLabel: string;
+    className?: string;
+    cardType: string;
+    reviewCardTitle: string;
+    reviewCardValue: string;
+    rankSuffix?: string;
+    timerAnimation: number;
+};
+export declare type CongratsProps = {
+    'aria-label': string;
+    'data-name': 'review-congrats';
+    animationLottie: LottieAnimationProps;
+    title: string;
+    cardCongratsStar: CongratsCardProps;
+    cardCongratsRank?: CongratsCardProps;
+    buttonRevising?: {
+        'aria-label': string;
+        label: string;
+        onClick: Function;
+        type: string;
+    };
+    buttonRevisingSkill?: {
+        label: string;
+        'aria-label': string;
+        onClick: Function;
+        type: string;
+    };
+};
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
 export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;

package/lib/views/slides/index.js

@@ -27,7 +27,18 @@ var ICON_VALUES = {
     wrong: 'wrong',
     'no-answer': 'no-answer'
 };
-// TODO replace this, position no more needed
+var confettiAnimation = {
+    'aria-label': 'aria lottie',
+    'data-name': 'default-lottie',
+    className: undefined,
+    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
+    loop: undefined,
+    autoplay: true,
+    rendererSettings: {
+        hideOnTransparent: false
+    },
+    ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg'
+};
 export var initialState = {
     '0': {
         position: 0,
@@ -50,8 +61,17 @@ export var initialState = {
         loading: true
     }
 };
+var getCurrentSlideRef = function (state) {
+    var currentSlideRef = get(['ui', 'currentSlideRef'], state);
+    var endReview = currentSlideRef === 'successExitNode';
+    if (!endReview)
+        return currentSlideRef;
+    var progression = state.data.progression;
+    var content = progression.state.content;
+    return content.ref;
+};
 var buildStackSlides = function (state, dispatch) {
-    var currentSlideRef = state.ui.currentSlideRef;
+    var currentSlideRef = getCurrentSlideRef(state);
     var progression = state.data.progression;
     if (!currentSlideRef || !progression)
         return initialState;
@@ -192,8 +212,76 @@ var buildQuitPopinProps = function (dispatch) {
         };
     };
 };
+var buildRankCard = function (rank) {
+    return {
+        'aria-label': 'Review Card Congrats Container',
+        'data-name': 'card-rank',
+        animationLottie: {
+            'aria-label': 'aria lottie',
+            'data-name': 'default-lottie',
+            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
+            loop: true,
+            autoplay: true,
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
+        },
+        cardType: 'card-rank',
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        reviewCardTitle: 'You are now',
+        reviewCardValue: "".concat(rank),
+        rankSuffix: 'th',
+        timerAnimation: 200
+    };
+};
+var buildCongratsProps = function (state) {
+    if (!state.ui.showCongrats)
+        return;
+    var progression = state.data.progression;
+    var stars = progression.state.stars;
+    var cardCongratsStar = {
+        'aria-label': 'Review Card Congrats Container',
+        'data-name': 'card-star',
+        animationLottie: {
+            'aria-label': 'aria lottie',
+            'data-name': 'default-lottie',
+            className: undefined,
+            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+            loop: false,
+            autoplay: undefined,
+            rendererSettings: {
+                hideOnTransparent: false
+            },
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
+        },
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        cardType: 'card-star',
+        reviewCardTitle: 'You have won',
+        reviewCardValue: "".concat(stars),
+        timerAnimation: 200
+    };
+    var _a = state.data.rank, start = _a.start, end = _a.end;
+    var newRank = start - end;
+    var cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end) : undefined;
+    return {
+        'aria-label': 'Review Congratulations',
+        'data-name': 'review-congrats',
+        animationLottie: confettiAnimation,
+        title: 'Congratulations!',
+        cardCongratsStar: cardCongratsStar,
+        cardCongratsRank: cardCongratsRank,
+        buttonRevising: undefined,
+        buttonRevisingSkill: undefined // TODO make boutons and actions
+    };
+};
+var isEndOfProgression = function (progression) {
+    if (!progression)
+        return false;
+    return progression.state.nextContent.ref === 'successExitNode';
+};
 export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
-    var currentSlideRef = get(['ui', 'currentSlideRef'], state);
+    var currentSlideRef = getCurrentSlideRef(state);
+    var endReview = isEndOfProgression(state.data.progression);
     var correction = get(['data', 'corrections', currentSlideRef], state);
     var isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
     var klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
@@ -217,9 +305,9 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
                 }
             },
             correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
-            endReview: false
+            endReview: endReview && state.ui.showCongrats
         },
-        congrats: undefined,
+        congrats: buildCongratsProps(state),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.5.4-alpha.8+085f42ee1",
+  "version": "0.5.5",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -42,7 +42,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.24.3-alpha.8+085f42ee1",
+    "@coorpacademy/components": "10.24.4",
     "@coorpacademy/redux-task": "1.1.6",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -55,9 +55,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@coorpacademy/css-modules-require-hook": "2.1.6-alpha.193+085f42ee1",
+    "@coorpacademy/css-modules-require-hook": "3.0.0",
     "@coorpacademy/eslint-plugin-coorpacademy": "^11.0.0",
-    "@coorpacademy/webpack-config": "11.0.1-alpha.10+085f42ee1",
+    "@coorpacademy/webpack-config": "12.0.0",
     "@testing-library/react": "^12.1.5",
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
@@ -77,5 +77,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "085f42ee17112db779e2499778858cd65901d316"
+  "gitHead": "687ef3d5b4d1326232d6fa71565c9b50207df1f0"
 }

package/src/types/common.ts

@@ -92,17 +92,21 @@ export type ProgressionAnswerItem = {
   answer: string[];
 };
 
+export type SlideContent = {
+  type: 'slide';
+  ref: string;
+};
+
+export type SuccessNodeContent = {
+  type: 'success';
+  ref: 'successExitNode';
+};
+
 export type ProgressionState = {
   allAnswers: ProgressionAnswerItem[];
-  content?: {
-    ref: string;
-    type: string;
-  };
+  content?: SlideContent;
   isCorrect: boolean;
-  nextContent: {
-    type: 'success' | 'slide';
-    ref: 'successExitNode' | string;
-  };
+  nextContent: SlideContent | SuccessNodeContent;
   pendingSlides: string[];
   slides: string[];
   step: {

package/src/views/slides/index.ts

@@ -8,12 +8,13 @@ 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 type {ProgressionAnswerItem, ProgressionFromAPI, SlideContent} from '../../types/common';
 import {getProgressionSlidesRefs, 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 {ProgressionState} from '../../reducers/data/progression';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
 const ICON_VALUES = {
@@ -110,30 +111,75 @@ export type SlidesViewProps = {
     endReview: boolean;
   };
   reviewBackgroundAriaLabel?: string;
-  congrats?: {
-    'aria-label'?: string;
-    'data-name'?: string;
-    animationLottie: unknown;
-    title: string;
-    cardCongratsStar: unknown;
-    cardCongratsRank: unknown;
-    buttonRevising: {
-      'aria-label'?: string;
-      label: string;
-      onClick: Function;
-      type: string;
-    };
-    buttonRevisingSkill: {
-      'aria-label'?: string;
-      label: string;
-      onClick: Function;
-      type: string;
-    };
-  };
+  congrats?: CongratsProps;
   quitPopin?: QuitPopinProps;
 };
 
-// TODO replace this, position no more needed
+type LottieAnimationProps = {
+  'aria-label': string;
+  'data-name'?: string;
+  animationSrc: string;
+  loop?: boolean;
+  rendererSettings?: {
+    hideOnTransparent?: boolean;
+    className?: string;
+  };
+  height?: number;
+  width?: number;
+  className?: number;
+  ie11ImageBackup: string;
+  backupImageClassName?: string;
+  autoplay?: boolean;
+  animationControl?: 'play' | 'pause' | 'stop' | 'loading';
+};
+
+export type CongratsCardProps = {
+  'aria-label': string;
+  'data-name': string;
+  animationLottie: LottieAnimationProps;
+  iconAriaLabel: string;
+  className?: string;
+  cardType: string;
+  reviewCardTitle: string;
+  reviewCardValue: string;
+  rankSuffix?: string;
+  timerAnimation: number;
+};
+
+export type CongratsProps = {
+  'aria-label': string;
+  'data-name': 'review-congrats';
+  animationLottie: LottieAnimationProps;
+  title: string;
+  cardCongratsStar: CongratsCardProps;
+  cardCongratsRank?: CongratsCardProps;
+  buttonRevising?: {
+    'aria-label': string;
+    label: string;
+    onClick: Function;
+    type: string;
+  };
+  buttonRevisingSkill?: {
+    label: string;
+    'aria-label': string;
+    onClick: Function;
+    type: string;
+  };
+};
+
+const confettiAnimation: LottieAnimationProps = {
+  'aria-label': 'aria lottie',
+  'data-name': 'default-lottie',
+  className: undefined,
+  animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
+  loop: undefined,
+  autoplay: true,
+  rendererSettings: {
+    hideOnTransparent: false
+  },
+  ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg'
+};
+
 export const initialState: SlidesStack = {
   '0': {
     position: 0,
@@ -157,8 +203,18 @@ export const initialState: SlidesStack = {
   }
 };
 
+const getCurrentSlideRef = (state: StoreState): string => {
+  const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+  const endReview = currentSlideRef === 'successExitNode';
+
+  if (!endReview) return currentSlideRef;
+  const progression = state.data.progression as ProgressionFromAPI;
+  const content = progression.state.content as SlideContent;
+  return content.ref;
+};
+
 const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack => {
-  const currentSlideRef = state.ui.currentSlideRef;
+  const currentSlideRef = getCurrentSlideRef(state);
   const progression = state.data.progression;
 
   if (!currentSlideRef || !progression) return initialState;
@@ -341,12 +397,87 @@ const buildQuitPopinProps =
       }
     };
   };
+
+const buildRankCard = (rank: number): CongratsCardProps => {
+  return {
+    'aria-label': 'Review Card Congrats Container',
+    'data-name': 'card-rank',
+    animationLottie: {
+      'aria-label': 'aria lottie',
+      'data-name': 'default-lottie',
+      animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
+      loop: true,
+      autoplay: true,
+      ie11ImageBackup:
+        'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
+    },
+    cardType: 'card-rank',
+    iconAriaLabel: 'Image without information',
+    className: undefined,
+    reviewCardTitle: 'You are now',
+    reviewCardValue: `${rank}`,
+    rankSuffix: 'th',
+    timerAnimation: 200
+  };
+};
+
+const buildCongratsProps = (state: StoreState): CongratsProps | undefined => {
+  if (!state.ui.showCongrats) return;
+
+  const progression = state.data.progression as ProgressionFromAPI;
+  const stars = progression.state.stars;
+  const cardCongratsStar: CongratsCardProps = {
+    'aria-label': 'Review Card Congrats Container',
+    'data-name': 'card-star',
+    animationLottie: {
+      'aria-label': 'aria lottie',
+      'data-name': 'default-lottie',
+      className: undefined,
+      animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+      loop: false,
+      autoplay: undefined,
+      rendererSettings: {
+        hideOnTransparent: false
+      },
+      ie11ImageBackup:
+        'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
+    },
+    iconAriaLabel: 'Image without information',
+    className: undefined,
+    cardType: 'card-star',
+    reviewCardTitle: '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) : undefined;
+
+  return {
+    'aria-label': 'Review Congratulations',
+    'data-name': 'review-congrats',
+    animationLottie: confettiAnimation,
+    title: 'Congratulations!',
+    cardCongratsStar,
+    cardCongratsRank,
+    buttonRevising: undefined, // TODO make boutons and actions
+    buttonRevisingSkill: undefined // TODO make boutons and actions
+  };
+};
+
+const isEndOfProgression = (progression: ProgressionState): boolean => {
+  if (!progression) return false;
+  return progression.state.nextContent.ref === 'successExitNode';
+};
+
 export const mapStateToSlidesProps = (
   state: StoreState,
   dispatch: Dispatch,
   onQuitClick: Function
 ): SlidesViewProps => {
-  const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+  const currentSlideRef = getCurrentSlideRef(state);
+  const endReview = isEndOfProgression(state.data.progression);
   const correction = get(['data', 'corrections', currentSlideRef], state);
   const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
   const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
@@ -371,9 +502,9 @@ export const mapStateToSlidesProps = (
       },
       correctionPopinProps:
         correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
-      endReview: false
+      endReview: endReview && state.ui.showCongrats
     },
-    congrats: undefined,
+    congrats: buildCongratsProps(state),
     quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
   };
 };

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

@@ -10,7 +10,7 @@ import {
   getChoicesCorrection,
   incorrectFreeTextPostAnswerResponse
 } from '../../../test/util/services.mock';
-import {mapStateToSlidesProps} from '..';
+import {CongratsCardProps, CongratsProps, mapStateToSlidesProps} from '..';
 import type {StoreState} from '../../../reducers';
 import {freeTextSlide} from './fixtures/free-text';
 import {qcmGraphicSlide} from './fixtures/qcm-graphic';
@@ -890,7 +890,7 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
   });
 });
 
-test('should verify props when progression is in success', t => {
+test('should verify props when progression is in success, showing last correction popin', t => {
   // state after receive last POST_ANSWER_SUCCESS and before last NEXT_SLIDE
   const state: StoreState = {
     data: {
@@ -996,7 +996,263 @@ test('should verify props when progression is in success', t => {
     ]
   });
 
-  // TODO update test with props.stack validations when NEXT_SLIDE implemented
+  t.deepEqual(omit(['next.onClick'], props.stack.correctionPopinProps), {
+    information: {
+      label: '_klf',
+      message:
+        'L’apprenant peut aussi évaluer sa performance grâce à un classement disponible sur la vue leaderboard. Elle compare sa position par rapport à celle des autres apprenants de la plateforme.'
+    },
+    klf: undefined,
+    next: {
+      ariaLabel: '_correctionNextAriaLabel',
+      label: '_correctionNextLabel'
+    },
+    resultLabel: '_right',
+    type: 'right'
+  });
+});
+
+test('should verify props showing congrats', t => {
+  const state: StoreState = {
+    data: {
+      progression: postAnswerResponses[templateSlide.universalRef],
+      skills: [],
+      slides: {
+        [freeTextSlide.universalRef]: freeTextSlide,
+        [qcmGraphicSlide.universalRef]: qcmGraphicSlide,
+        [qcmSlide.universalRef]: qcmSlide,
+        [sliderSlide.universalRef]: sliderSlide,
+        [templateSlide.universalRef]: templateSlide
+      },
+      token: '1234',
+      corrections: {
+        [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id),
+        [qcmGraphicSlide.universalRef]: getChoicesCorrection(qcmGraphicSlide._id),
+        [qcmSlide.universalRef]: getChoicesCorrection(qcmSlide._id),
+        [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
+        [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
+      },
+      rank: {start: 10, end: 9}
+    },
+    ui: {
+      showCongrats: true,
+      showQuitPopin: false,
+      currentSlideRef: 'successExitNode',
+      navigation: ['loader', 'slides'],
+      answers: {
+        sli_VJYjJnJhg: ['Benchmark'],
+        sli_VkSQroQnx: ['Faux'],
+        sli_N1XACJobn: ['Le créateur peut fixer un pourcentage pour chaque transaction future'],
+        sli_VkAzsCLKb: ['7'],
+        'sli_N13-hG3kX': ['Leaderboard', 'utilisateurs', 'étoiles']
+      },
+      positions: [-1, -1, -1, -1, 0],
+      slide: {
+        sli_VJYjJnJhg: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkSQroQnx: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkAzsCLKb: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        'sli_N13-hG3kX': {
+          validateButton: false,
+          animateCorrectionPopin: true,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        }
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity, identity);
+  const congrats = props.congrats as CongratsProps;
+  t.is(congrats.title, 'Congratulations!');
+  t.is(
+    congrats.animationLottie.animationSrc,
+    'https://static-staging.coorpacademy.com/animations/review/confetti.json'
+  );
+  const {cardCongratsStar, buttonRevising, buttonRevisingSkill} = congrats;
+  const cardCongratsRank = congrats.cardCongratsRank as CongratsCardProps;
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsRank.animationLottie,
+      rankSuffix: cardCongratsRank.rankSuffix,
+      reviewCardTitle: cardCongratsRank.reviewCardTitle,
+      reviewCardValue: cardCongratsRank.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
+        'aria-label': 'aria lottie',
+        autoplay: true,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
+        loop: true
+      },
+      rankSuffix: 'th',
+      reviewCardTitle: 'You are now',
+      reviewCardValue: '9'
+    }
+  );
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsStar.animationLottie,
+      rankSuffix: cardCongratsStar.rankSuffix,
+      reviewCardTitle: cardCongratsStar.reviewCardTitle,
+      reviewCardValue: cardCongratsStar.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+        'aria-label': 'aria lottie',
+        autoplay: undefined,
+        className: undefined,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',
+        loop: false,
+        rendererSettings: {
+          hideOnTransparent: false
+        }
+      },
+      rankSuffix: undefined,
+      reviewCardTitle: 'You have won',
+      reviewCardValue: '40'
+    }
+  );
+
+  t.is(buttonRevising, undefined);
+  t.is(buttonRevisingSkill, undefined);
+});
+
+test('should verify props showing congrats, with only stars card, if user has no earn positions on raking', t => {
+  const state: StoreState = {
+    data: {
+      progression: postAnswerResponses[templateSlide.universalRef],
+      skills: [],
+      slides: {
+        [freeTextSlide.universalRef]: freeTextSlide,
+        [qcmGraphicSlide.universalRef]: qcmGraphicSlide,
+        [qcmSlide.universalRef]: qcmSlide,
+        [sliderSlide.universalRef]: sliderSlide,
+        [templateSlide.universalRef]: templateSlide
+      },
+      token: '1234',
+      corrections: {
+        [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id),
+        [qcmGraphicSlide.universalRef]: getChoicesCorrection(qcmGraphicSlide._id),
+        [qcmSlide.universalRef]: getChoicesCorrection(qcmSlide._id),
+        [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
+        [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
+      },
+      rank: {start: 10, end: 10}
+    },
+    ui: {
+      showCongrats: true,
+      showQuitPopin: false,
+      currentSlideRef: 'successExitNode',
+      navigation: ['loader', 'slides'],
+      answers: {
+        sli_VJYjJnJhg: ['Benchmark'],
+        sli_VkSQroQnx: ['Faux'],
+        sli_N1XACJobn: ['Le créateur peut fixer un pourcentage pour chaque transaction future'],
+        sli_VkAzsCLKb: ['7'],
+        'sli_N13-hG3kX': ['Leaderboard', 'utilisateurs', 'étoiles']
+      },
+      positions: [-1, -1, -1, -1, 0],
+      slide: {
+        sli_VJYjJnJhg: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkSQroQnx: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkAzsCLKb: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        'sli_N13-hG3kX': {
+          validateButton: false,
+          animateCorrectionPopin: true,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        }
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity, identity);
+  const congrats = props.congrats as CongratsProps;
+  t.is(congrats.title, 'Congratulations!');
+  t.is(
+    congrats.animationLottie.animationSrc,
+    'https://static-staging.coorpacademy.com/animations/review/confetti.json'
+  );
+  const {cardCongratsStar, buttonRevising, buttonRevisingSkill} = congrats;
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsStar.animationLottie,
+      rankSuffix: cardCongratsStar.rankSuffix,
+      reviewCardTitle: cardCongratsStar.reviewCardTitle,
+      reviewCardValue: cardCongratsStar.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+        'aria-label': 'aria lottie',
+        autoplay: undefined,
+        className: undefined,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',
+        loop: false,
+        rendererSettings: {
+          hideOnTransparent: false
+        }
+      },
+      rankSuffix: undefined,
+      reviewCardTitle: 'You have won',
+      reviewCardValue: '40'
+    }
+  );
+  const cardCongratsRank = congrats.cardCongratsRank;
+  t.is(cardCongratsRank, undefined);
+
+  t.is(buttonRevising, undefined);
+  t.is(buttonRevisingSkill, undefined);
 });
 
 test('should verify props when progression has answered a current pendingSlide', t => {