@coorpacademy/app-review 0.5.3 → 0.5.4

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/skills/test/skills.test.ts

@@ -12,14 +12,16 @@ test('should create initial props when there are no skills on the state', t => {
       slides: {},
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: Number.NaN, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: '',
       positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 
@@ -57,14 +59,16 @@ test('should create initial props when skills on the state', t => {
       slides: {},
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: Number.NaN, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: '',
       positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 

package/src/views/slides/index.ts

@@ -7,12 +7,14 @@ import set from 'lodash/fp/set';
 import toInteger from 'lodash/fp/toInteger';
 import type {Dispatch} from 'redux';
 import join from 'lodash/fp/join';
-import type {ProgressionAnswerItem} from '../../types/common';
+import {closeQuitPopin, openQuitPopin} from '../../actions/ui/quit-popin';
+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 = {
@@ -62,6 +64,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 +82,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;
@@ -90,29 +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;
+};
+
+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'
 };
 
-// TODO replace this, position no more needed
 export const initialState: SlidesStack = {
   '0': {
     position: 0,
@@ -136,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;
@@ -293,21 +370,123 @@ 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'
+      }
+    };
+  };
+
+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);
-
+  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)
@@ -323,8 +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/header.on-click.test.ts

@@ -0,0 +1,46 @@
+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: {start: Number.NaN, end: Number.NaN}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: ['loader', 'slides'],
+    answers: {},
+    positions: [0, 1, 2, 3, 4],
+    slide: {
+      sli_N1XACJobn: {
+        validateButton: false,
+        animateCorrectionPopin: false,
+        showCorrectionPopin: false
+      }
+    },
+    showQuitPopin: false,
+    showCongrats: 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);
+  t.is(props.quitPopin, undefined);
+  await props.header.onQuitClick();
+  const updatedProps = mapStateToSlidesProps(getState(), dispatch, identity);
+  t.not(updatedProps.quitPopin, undefined);
+  t.pass();
+});