@coorpacademy/app-review 0.1.5 → 0.1.7

package/es/reducers/data/slides.js

@@ -1,6 +1,7 @@
 import map from 'lodash/fp/map';
 import { STORE_FIRST_SLIDE, UPDATE_SLIDES_ON_NEXT, UPDATE_SLIDES_ON_VALIDATION } from '../../actions/data/slides';
 import { HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK } from '../../common';
+import { slide as qcmSlide } from '../../fixtures/qcm-slide';
 // -----------------------------------------------------------------------------
 const getInitialState = () => {
     const state = {
@@ -30,7 +31,7 @@ const setFirstSlide = (state, slide) => {
 // ||-------> Handles the updates of a given slide on validation,
 // & then updates de remaining slides if this given change should impact their content
 const stateUpdateOnValidation = (state, payload) => {
-    const { slideNumber, newSlideContent, numberOfFinishedSlides, nextSlide } = payload;
+    const { slideNumber, newSlideContent, numberOfFinishedSlides, nextContent } = payload;
     const _state = {
         slideNumbers
     };
@@ -43,7 +44,7 @@ const stateUpdateOnValidation = (state, payload) => {
             if (numberOfFinishedSlides === HIGHEST_INDEX) {
                 _state[index] = {
                     ...previousValue,
-                    nextSlide,
+                    nextContent,
                     position: newSlideContent.position,
                     isCorrect: newSlideContent.isCorrect
                 };
@@ -54,7 +55,7 @@ const stateUpdateOnValidation = (state, payload) => {
         else {
             // updates the rest of the slides here
             const { hidden, position } = previousValue;
-            _state[index] = { ...nextSlide, endReview: newSlideContent.endReview, hidden, position };
+            _state[index] = { ...nextContent, endReview: newSlideContent.endReview, hidden, position };
         }
     }, state.slideNumbers);
     return _state;
@@ -72,8 +73,8 @@ const stateUpdateOnNext = (state, payload) => {
         // the current slide
         if (index === slideNumber) {
             // when there is only one slide remaining, updates the slide value
-            if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextSlide) {
-                _state[index] = { ...previousValue.nextSlide, position: previousValue.position };
+            if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextContent) {
+                _state[index] = { ...previousValue.nextContent, position: previousValue.position };
             }
             else
                 _state[slideNumber] = newSlideContent;
@@ -97,7 +98,11 @@ const stateUpdateOnNext = (state, payload) => {
 const reducer = (state = initialState, action) => {
     switch (action.type) {
         case STORE_FIRST_SLIDE: {
-            return setFirstSlide(state, action.payload);
+            // TODO: An intermediate slide transform is needed here (or in fetchSlide)
+            // const apiSlide = action.payload;
+            // apiSlide adapt to uiSlide
+            const uiSlide = qcmSlide;
+            return setFirstSlide(state, uiSlide);
         }
         case UPDATE_SLIDES_ON_VALIDATION: {
             return stateUpdateOnValidation(state, action.payload);

package/es/reducers/index.d.ts

@@ -11,5 +11,5 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         reviewStatus: import("./ui/review-status").ReviewStatusState;
         stepItems: import("./ui/step-items").StepItems;
     }>;
-}>, import("../actions/data/slides").ValidateSlide | import("../actions/data/slides").SlidesAction | import("../actions/data/skills").ReceivedSkills | import("../actions/data/token").StoreToken | import("../actions/ui/finished-slides").UpdateFinishedSlides | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/review-status").UpdateReviewStatus | import("../actions/ui/step-items").StepItemsAction>;
+}>, import("../actions/data/progression").ReceiveProgression | import("../actions/data/slides").ValidateSlide | import("../actions/data/slides").SlidesAction | import("../actions/data/skills").ReceivedSkills | import("../actions/data/token").StoreToken | import("../actions/ui/finished-slides").UpdateFinishedSlides | import("../actions/ui/navigation").NavigateTo | import("../actions/ui/navigation").NavigateBack | import("../actions/ui/review-status").UpdateReviewStatus | import("../actions/ui/step-items").StepItemsAction>;
 export default _default;

package/es/services/fetch-skills.js

@@ -8,8 +8,7 @@ const fetchSkills = fetch => async (token) => {
     const response = await fetch(`${host}/api/v2/skills/review/user/${userId}`, {
         headers: { authorization: token }
     });
-    const skills = (await toJSON(response));
-    return skills;
+    return toJSON(response);
 };
 // -----------------------------------------------------------------------------
 const createFetchSkills = () => {

package/es/services/fetch-slide.d.ts

@@ -0,0 +1,8 @@
+import crossFetch from 'cross-fetch';
+import { SlideFromAPI } from '../actions/data/slides';
+declare type FetchSlide = (slideRef: string, token: string) => Promise<SlideFromAPI>;
+declare type FetchSlideBuilder = (fetch: typeof crossFetch) => FetchSlide;
+declare const fetchSlide: FetchSlideBuilder;
+export { fetchSlide };
+declare const _default: FetchSlide;
+export default _default;

package/es/services/fetch-slide.js

@@ -0,0 +1,26 @@
+import crossFetch from 'cross-fetch';
+// import {JWT} from '../types/common';
+// import {toJSON} from './tools/fetch-responses';
+import { okJSONResponse } from './tools/fetch.mocks';
+// -----------------------------------------------------------------------------
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, unicorn/consistent-function-scoping, require-await
+const fetchSlide = fetch => async (slideRef, token) => {
+    // const {host}: JWT = decode(token);
+    // const response = await fetch(`${host}/api/v2/slide/${slideRef}`, {
+    //   headers: {authorization: token}
+    // });
+    // const slide = (await toJSON(response)) as SlideFromAPI;
+    // return slide;
+    return {};
+};
+// -----------------------------------------------------------------------------
+const createFetchSlide = () => {
+    if (process.env.SERVICES !== 'mocks') {
+        return fetchSlide(crossFetch);
+    }
+    // TODO: use an appropriate mock
+    return fetchSlide(okJSONResponse({}));
+};
+// -----------------------------------------------------------------------------
+export { fetchSlide };
+export default createFetchSlide();

package/es/services/post-progression.d.ts

@@ -0,0 +1,8 @@
+import crossFetch from 'cross-fetch';
+import { ProgressionFromAPI } from '../actions/data/progression';
+declare type PostProgression = (skillRef: string, token: string) => Promise<ProgressionFromAPI>;
+declare type CreatePostProgression = (fetch: typeof crossFetch) => PostProgression;
+declare const postProgression: CreatePostProgression;
+export { postProgression };
+declare const _default: PostProgression;
+export default _default;

package/es/services/post-progression.js

@@ -0,0 +1,33 @@
+import crossFetch from 'cross-fetch';
+import decode from 'jwt-decode';
+import { toJSON } from './tools/fetch-responses';
+import mockPostProgression from './post-progression.mock';
+// -----------------------------------------------------------------------------
+const postProgression = fetch => async (skillRef, token) => {
+    const { host } = decode(token);
+    const response = await fetch(`${host}/api/v2/progressions`, {
+        method: 'post',
+        headers: { authorization: token },
+        body: JSON.stringify({
+            content: {
+                ref: skillRef,
+                type: 'slide'
+            },
+            engine: {
+                ref: 'review',
+                version: '1'
+            }
+        })
+    });
+    return toJSON(response);
+};
+// -----------------------------------------------------------------------------
+const createPostProgression = () => {
+    if (process.env.SERVICES !== 'mocks') {
+        return postProgression(crossFetch);
+    }
+    return postProgression(mockPostProgression);
+};
+// -----------------------------------------------------------------------------
+export { postProgression };
+export default createPostProgression();

package/es/services/post-progression.mock.d.ts

@@ -0,0 +1,5 @@
+import crossFetch from 'cross-fetch';
+import { ProgressionFromAPI } from '../actions/data/progression';
+export declare const mockedProgression: ProgressionFromAPI;
+declare const mockCreateProgression: typeof crossFetch;
+export default mockCreateProgression;

package/es/services/post-progression.mock.js

@@ -0,0 +1,31 @@
+import { okJSONResponse } from './tools/fetch.mocks';
+export const mockedProgression = {
+    _id: '62b1d1087aa12f00253f40ee',
+    state: {
+        // ------------------------------------------------------
+        // unused for now / to decide whether to use it when the
+        // validation-progression is plugged in
+        pendingSlides: [],
+        step: {
+            current: Number.NaN
+        },
+        // ------------------------------------------------------
+        isCorrect: true,
+        nextContent: {
+            ref: 'sli_N1XACJobn',
+            type: 'slide'
+        }
+        // slides: [
+        //   'sli_NJ3m5KtWh',
+        //   'sli_V1gKpYYZ2',
+        //   'sli_VJzOgotbh',
+        //   'sli_V1ug-dtZn',
+        //   'sli_VyZU-ejW3',
+        //   'sli_Vy8ChgjZh',
+        //   'sli_V1ijS1oWh',
+        //   'sli_N1XACJobn'
+        // ],
+    }
+};
+const mockCreateProgression = okJSONResponse(mockedProgression);
+export default mockCreateProgression;

package/es/services/post-progression.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/services/post-progression.test.js

@@ -0,0 +1,30 @@
+import test from 'ava';
+import { postProgression } from './post-progression';
+import { okJSONResponse, token } from './tools/fetch.mocks';
+const skillRef = '_skill-ref';
+test('should create progression with success', async (t) => {
+    const result = {
+        _id: '123456123456',
+        state: {
+            // is "isCorrect" always true for a 1st progression?
+            isCorrect: true,
+            step: {
+                current: 1
+            },
+            nextContent: {
+                type: 'slide',
+                ref: 'sli_NJ3m5KtWh'
+            },
+            pendingSlides: []
+        }
+    };
+    const mockedPostProgression = postProgression(okJSONResponse(result));
+    const progression = await mockedPostProgression(skillRef, token);
+    t.deepEqual(result, progression);
+});
+test('should reject bad token', async (t) => {
+    const badToken = 'token is not a jwt';
+    const mockedPostProgression = postProgression(okJSONResponse(null));
+    const error = await t.throwsAsync(() => mockedPostProgression(skillRef, badToken));
+    t.is(error?.message, "Invalid token specified: Cannot read properties of undefined (reading 'replace')");
+});

package/es/services/tools/fetch-responses.d.ts

@@ -2,6 +2,6 @@ export declare class ResponseError extends Error {
     statusCode: number;
     constructor(statusCode: number, statusText: string, body?: string);
 }
-export declare const toJSON: (response: Response) => Promise<unknown>;
+export declare const toJSON: <T = unknown>(response: Response) => Promise<T>;
 export declare const toText: (response: Response) => Promise<string>;
 export declare const toVoid: (response: Response) => Promise<void>;

package/es/services/tools/sleep.d.ts

@@ -0,0 +1 @@
+export declare const sleep: (msToSleep: number) => Promise<void>;

package/es/services/tools/sleep.js

@@ -0,0 +1,3 @@
+export const sleep = (msToSleep) => new Promise(resolve => {
+    setTimeout(resolve, msToSleep);
+});

package/es/types/common.d.ts

@@ -1,9 +1,14 @@
-import { Slide } from './slides';
+declare type TemplateContextValues = {
+    brandTheme?: unknown;
+    theme?: unknown;
+    translations?: unknown;
+};
 export declare type AppOptions = {
     token: string;
     theme?: unknown;
     translations?: unknown;
-    slide?: Slide;
+    templateContext?: TemplateContextValues;
+    skillRef?: string;
 };
 export declare type JWT = {
     exp: number;
@@ -17,3 +22,4 @@ export declare type JWT = {
 export declare type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
+export {};

package/es/types/ui-progression.d.ts

@@ -0,0 +1,10 @@
+export declare type UiProgression = {
+    _id?: string;
+    slideNumber?: number;
+    isCorrect?: boolean;
+    exitNode?: 'successExitNode' | 'failExitNode';
+    nextContent?: {
+        ref: 'successExitNode' | string;
+        type: 'success' | 'slide';
+    };
+} | null;

package/es/types/ui-progression.js

@@ -0,0 +1 @@
+export {};

package/lib/actions/data/progression.d.ts

@@ -0,0 +1,30 @@
+export declare type ProgressionFromAPI = {
+    _id: string;
+    state: {
+        isCorrect: boolean;
+        step: {
+            current: number;
+        };
+        nextContent: {
+            type: 'success' | 'slide';
+            ref: 'successExitNode' | string;
+        };
+        pendingSlides: [];
+    };
+};
+export declare const RECEIVE_PROGRESSION = "@@data/progression/RECEIVE_PROGRESSION";
+export declare const ERROR_CREATING_PROGRESSION = "@@data/progression/ERROR_CREATING_PROGRESSION";
+export declare type ReceiveProgressionPayload = {
+    progression: ProgressionFromAPI;
+    token: string;
+};
+export declare type ReceiveProgression = {
+    type: typeof RECEIVE_PROGRESSION;
+    payload: ReceiveProgressionPayload;
+};
+export declare type ErrorCreatingProgression = {
+    type: typeof ERROR_CREATING_PROGRESSION;
+    payload: Error;
+};
+export declare const receiveProgression: (payload: ReceiveProgressionPayload) => ReceiveProgression;
+export declare const errorCreatingProgression: (error: Error) => ErrorCreatingProgression;

package/lib/actions/data/progression.js

@@ -0,0 +1,12 @@
+// -----------------------------------------------------------------------------
+export var RECEIVE_PROGRESSION = '@@data/progression/RECEIVE_PROGRESSION';
+export var ERROR_CREATING_PROGRESSION = '@@data/progression/ERROR_CREATING_PROGRESSION';
+// -----------------------------------------------------------------------------
+export var receiveProgression = function (payload) { return ({
+    type: RECEIVE_PROGRESSION,
+    payload: payload
+}); };
+export var errorCreatingProgression = function (error) { return ({
+    type: ERROR_CREATING_PROGRESSION,
+    payload: error
+}); };

package/lib/actions/data/slides.d.ts

@@ -1,32 +1,35 @@
-import { Slide as SlideFromAPI } from '../../types/slides';
+import { Slide as UISlide } from '../../types/slides';
 export declare const STORE_FIRST_SLIDE = "@@slide/STORE_FIRST_SLIDE";
 export declare const UPDATE_SLIDES_ON_VALIDATION = "@@slide/UPDATE_SLIDES_ON_VALIDATION";
 export declare const UPDATE_SLIDES_ON_NEXT = "@@slide/UPDATE_SLIDES_ON_NEXT";
 export declare const VALIDATE_SLIDE = "@@slide/VALIDATE";
 export declare const FETCH_NEXT_CONTENT = "@@slide/FETCH_NEXT_CONTENT";
+export declare const ERROR_FETCHING_SLIDE = "@@data/slide/ERROR_FETCHING_SLIDE";
 declare type SlideUIAnimations = 'unstack' | 'restack';
-export declare type Slide = SlideFromAPI & {
+export declare type Slide = UISlide & {
     hidden?: boolean;
     position: number;
     animationType?: SlideUIAnimations;
     isCorrect?: boolean;
     endReview?: boolean;
-    nextSlide?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextSlide'>;
+    nextContent?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextContent'>;
+};
+export declare type SlideFromAPI = {
+    question: {
+        content: {
+            choices: Record<string, unknown>[];
+        };
+    };
+    klf: string;
+    universalRef: string;
 };
 export declare type ValidationPayload = {
     slideNumber: number;
     newSlideContent: Slide;
     numberOfFinishedSlides: number;
-    nextSlide: Slide;
-};
-export declare type OnNextPayload = Omit<ValidationPayload, 'nextSlide'>;
-export declare type FetchNextPayload = {
-    answer: string[];
-    content: {
-        ref: string;
-        type: string;
-    };
+    nextContent: Slide;
 };
+export declare type OnNextPayload = Omit<ValidationPayload, 'nextContent'>;
 export declare type StoreFirstSlide = {
     type: typeof STORE_FIRST_SLIDE;
     payload: SlideFromAPI;
@@ -42,13 +45,14 @@ export declare type UpdateSlidesOnNext = {
 export declare type ValidateSlide = {
     type: typeof VALIDATE_SLIDE;
 };
-export declare type FetchNextContent = {
-    type: typeof FETCH_NEXT_CONTENT;
-    payload: FetchNextPayload;
+export declare type ErrorFetchingSlide = {
+    type: typeof ERROR_FETCHING_SLIDE;
+    payload: Error;
 };
 export declare type SlidesAction = StoreFirstSlide | UpdateSlidesOnValidation | UpdateSlidesOnNext;
 export declare const storeFirstSlide: (slide: SlideFromAPI) => StoreFirstSlide;
 export declare const updateSlidesOnValidation: (payload: ValidationPayload) => UpdateSlidesOnValidation;
 export declare const updateSlidesOnNext: (payload: OnNextPayload) => UpdateSlidesOnNext;
 export declare const validateSlide: () => ValidateSlide;
+export declare const errorFetchingSlide: (error: Error) => ErrorFetchingSlide;
 export {};

package/lib/actions/data/slides.js

@@ -4,6 +4,7 @@ export var UPDATE_SLIDES_ON_VALIDATION = '@@slide/UPDATE_SLIDES_ON_VALIDATION';
 export var UPDATE_SLIDES_ON_NEXT = '@@slide/UPDATE_SLIDES_ON_NEXT';
 export var VALIDATE_SLIDE = '@@slide/VALIDATE';
 export var FETCH_NEXT_CONTENT = '@@slide/FETCH_NEXT_CONTENT';
+export var ERROR_FETCHING_SLIDE = '@@data/slide/ERROR_FETCHING_SLIDE';
 // -----------------------------------------------------------------------------
 export var storeFirstSlide = function (slide) { return ({
     type: STORE_FIRST_SLIDE,
@@ -20,3 +21,7 @@ export var updateSlidesOnNext = function (payload) { return ({
 export var validateSlide = function () { return ({
     type: VALIDATE_SLIDE
 }); };
+export var errorFetchingSlide = function (error) { return ({
+    type: ERROR_FETCHING_SLIDE,
+    payload: error
+}); };

package/lib/actions/data/token.d.ts

@@ -1,6 +1,6 @@
-export declare const STORE_TOKEN = "@@token/STORE_TOKEN";
+export declare const STORE_TOKEN = "@@data/token/STORE_TOKEN";
 export declare type StoreToken = {
-    type: '@@token/STORE_TOKEN';
+    type: typeof STORE_TOKEN;
     payload: string;
 };
 export declare const storeToken: (token: string) => StoreToken;

package/lib/actions/data/token.js

@@ -1,4 +1,4 @@
-export var STORE_TOKEN = '@@token/STORE_TOKEN';
+export var STORE_TOKEN = '@@data/token/STORE_TOKEN';
 export var storeToken = function (token) { return ({
     type: STORE_TOKEN,
     payload: token

package/lib/actions/index.d.ts

@@ -5,7 +5,8 @@ import { updateFinishedSlides } from './ui/finished-slides';
 import { navigateBack, navigateTo, NavigateBack, NavigateTo, StartApp } from './ui/navigation';
 import { updateReviewStatus } from './ui/review-status';
 import { updateStepItemsOnValidation, updateStepItemsOnNext } from './ui/step-items';
-export declare type Action = NavigateBack | NavigateTo | ReceivedSkills | ErrorFetchingSkills | StartApp | StoreFirstSlide | StoreToken;
+import { ErrorCreatingProgression, ReceiveProgression } from './data/progression';
+export declare type Action = NavigateBack | NavigateTo | ReceivedSkills | ErrorFetchingSkills | StartApp | StoreFirstSlide | StoreToken | ErrorCreatingProgression | ReceiveProgression;
 export declare type Dispatchers = {
     navigateTo: typeof navigateTo;
     navigateBack: typeof navigateBack;

package/lib/configure-store.d.ts

@@ -6,18 +6,10 @@ import { NavigationState } from './reducers/ui/navigation';
 import { ReviewStatusState } from './reducers/ui/review-status';
 import { StepItemsState } from './reducers/ui/step-items';
 import { FinishedSlidesState } from './reducers/ui/finished-slides';
-import { AnswerUI } from './types/slides';
+import { ProgressionState } from './reducers/data/progression';
 declare type DataState = {
     isFetching?: boolean;
-    progression?: {
-        slideNumber: number;
-        isCorrect?: boolean;
-        exitNode?: 'successExitNode' | 'failExitNode';
-        nextSlide?: {
-            questionText?: string;
-            answerUI?: AnswerUI;
-        };
-    } | null;
+    progression?: ProgressionState;
     skills: SkillsState;
     slides: SlidesState;
     token?: TokenState;

package/lib/configure-store.js

@@ -2,6 +2,7 @@ import { applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';
 import onStartApp from './middlewares/on-start-app';
+import onReceiveProgression from './middlewares/on-receive-progression';
 // -----------------------------------------------------------------------------
 export default function configureStore() {
     var _compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -11,7 +12,7 @@ export default function configureStore() {
             traceLimit: 25
         })
         : compose;
-    var enhancer = _compose(applyMiddleware(thunk, onStartApp));
+    var enhancer = _compose(applyMiddleware(thunk, onStartApp, onReceiveProgression));
     var store = createStore(rootReducer, undefined, enhancer);
     return store;
 }

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import type { AppOptions } from './types/common';
 declare const AppReview: ({ options }: {
     options: AppOptions;
-}) => JSX.Element;
+}) => JSX.Element | null;
 declare global {
     interface Window {
         __REDUX_DEVTOOLS_EXTENSION__?: boolean;

package/lib/index.js

@@ -37,6 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useEffect, useState } from 'react';
 import { connect, Provider } from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
+import { TemplateContext } from '@coorpacademy/components/es/template/app-review/template-context';
 import configureStore from './configure-store';
 import { congratsProps, correctionPopinProps } from './fixtures/temp-fixture';
 import { updateSlidesOnNext, updateSlidesOnValidation, validateSlide } from './actions/data/slides';
@@ -59,29 +60,38 @@ var mapDispatchToProps = {
 var getCurrentViewName = function (storeState) {
     return storeState.ui.navigation[storeState.ui.navigation.length - 1];
 };
-var mapStateToSkillsProps = function (state) { return ({
-    title: '@todo title',
-    titleNoSkills: '@todo titleNoSkills',
-    textNoSkills: '@todo textNoSkills',
-    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
-    isLoading: false,
-    isLoadingAriaLabel: '@todo loading',
-    listSkills: state.data.skills.map(function (skill) { return ({
-        'aria-label': '',
-        isCustom: skill.custom,
-        skillTitle: skill.name,
-        skillAriaLabel: '@todo skill aria label',
-        buttonLabel: '@todo button',
-        buttonAriaLabel: '@todo button aria label',
-        reviseLabel: '@todo revise',
-        reviseAriaLabel: '@todo revise aria label',
-        // eslint-disable-next-line no-console
-        onClick: function () { return console.log('@todo plug dispatcher select skill'); }
-    }); })
-}); };
-var mapStateToProps = function (state) { return ({
-    viewName: getCurrentViewName(state),
-    slides: {
+// -----------------------------------------------------------------------------
+var mapStateToSkillsProps = function (state) {
+    if (!state.data.skills) {
+        return null;
+    }
+    return {
+        title: '@todo title',
+        titleNoSkills: '@todo titleNoSkills',
+        textNoSkills: '@todo textNoSkills',
+        iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+        isLoading: false,
+        isLoadingAriaLabel: '@todo loading',
+        listSkills: state.data.skills.map(function (skill) { return ({
+            'aria-label': '',
+            isCustom: skill.custom,
+            skillTitle: skill.name,
+            skillAriaLabel: '@todo skill aria label',
+            buttonLabel: '@todo button',
+            buttonAriaLabel: '@todo button aria label',
+            reviseLabel: '@todo revise',
+            reviseAriaLabel: '@todo revise aria label',
+            // eslint-disable-next-line no-console
+            onClick: function () { return console.log('@todo plug dispatcher select skill'); }
+        }); })
+    };
+};
+// -----------------------------------------------------------------------------
+var mapStateToSlidesProps = function (state) {
+    if (!state.data.slides) {
+        return null;
+    }
+    return {
         headerProps: {
             mode: '__revision_mode',
             skillName: '__agility',
@@ -102,7 +112,12 @@ var mapStateToProps = function (state) { return ({
         correctionPopinProps: correctionPopinProps,
         congratsProps: congratsProps,
         progression: state.data.progression
-    },
+    };
+};
+// -----------------------------------------------------------------------------
+var mapStateToProps = function (state) { return ({
+    viewName: getCurrentViewName(state),
+    slides: mapStateToSlidesProps(state),
     skills: mapStateToSkillsProps(state)
 }); };
 // Props = StaticProps && Dispatchers
@@ -134,9 +149,11 @@ var AppReview = function (_a) {
         }
     }, [options, store]);
     if (!store || !appStarted)
-        return React.createElement("div", null);
+        return null;
+    var values = options.templateContext;
     return (React.createElement(Provider, { store: store },
-        React.createElement(App, null)));
+        React.createElement(TemplateContext, { values: values },
+            React.createElement(App, null))));
 };
 // -----------------------------------------------------------------------------
 export default AppReview;

package/lib/index.test.js

@@ -38,17 +38,12 @@ import browserEnv from 'browser-env';
 import test from 'ava';
 import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
-import { slide } from './fixtures/qcm-slide';
+import { sleep } from './services/tools/sleep';
 import AppReview from '.';
 browserEnv({ pretendToBeVisual: true });
 var elementExists = function (foundElements) {
     return foundElements && foundElements[0];
 };
-var sleep = function (msToSleep) {
-    return new Promise(function (resolve) {
-        setTimeout(resolve, msToSleep);
-    });
-};
 var waitForChanges = function (msToWait) {
     if (msToWait === void 0) { msToWait = 3000; }
     return __awaiter(void 0, void 0, void 0, function () {
@@ -134,7 +129,10 @@ var clickAllSlides = function (t, container, accumulator) {
 };
 var appOptions = {
     token: process.env.API_TEST_TOKEN || '',
-    slide: slide
+    templateContext: {
+        theme: { color: { primary: '#123' } }
+    },
+    skillRef: 'skill_NJC0jFKoH'
 };
 test('should validate all the slides (all correct scenario)', function (t) { return __awaiter(void 0, void 0, void 0, function () {
     var container, wrapper, stackedSlidesContainer;

package/lib/middlewares/on-receive-progression.d.ts

@@ -0,0 +1,6 @@
+import type { Middleware, Store } from 'redux';
+import { Dispatch } from 'redux';
+import { ErrorFetchingSlide, StoreFirstSlide } from '../actions/data/slides';
+import { ReceiveProgression } from '../actions/data/progression';
+declare const onReceiveProgression: Middleware<{}, Store, Dispatch<ReceiveProgression | StoreFirstSlide | ErrorFetchingSlide>>;
+export default onReceiveProgression;