@coorpacademy/app-review 0.5.6-alpha.2 → 0.5.6-alpha.6

package/es/locales/en/review.json

@@ -0,0 +1,14 @@
+{
+    "Review Title": "Review Mode",
+    "Content Parent Title": "From `{{contentTitle}}` `{{contentType}}`",
+    "Validate": "Validate",
+    "Next Question": "Next Question",
+    "KLF": "Key Learning Factor",
+    "Correct Answer": "Correct Answer",
+    "Wrong Answer": "Wrong Answer",
+    "You have won": "You have won",
+    "You are now": "You are now",
+    "Revise another skill": "Revise another skill",
+    "Continue reviewing": "Continue reviewing",
+    "Congratulations!": "Congratulations!"
+}

package/es/sandbox/index.d.ts

@@ -0,0 +1,9 @@
+declare type SandboxOptions = {
+    container: string;
+};
+declare global {
+    interface Window {
+        createSandbox?: (sandboxOptions: SandboxOptions) => void;
+    }
+}
+export {};

package/es/sandbox/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from 'react-dom';
+import isNil from 'lodash/fp/isNil';
+import get from 'lodash/fp/get';
+import pipe from 'lodash/fp/pipe';
+import createTranslate from '@coorpacademy/translate';
+import { WebContext } from '@coorpacademy/components/es/atom/provider';
+import localesComponents from '@coorpacademy/components/locales/en/global.json';
+import localesAppReview from '../locales/en/review.json';
+import AppReview from '../src';
+import { services } from '../src/test/util/services.mock';
+const translate = (key, data) => {
+    try {
+        return createTranslate({
+            ...localesAppReview,
+            ...localesComponents
+        })(key, data);
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        return createTranslate({ [key]: key })(key, data);
+    }
+};
+const isContainerAvailable = (options) => !pipe(get('container'), isNil)(options);
+const createSandbox = (options) => {
+    if (!isContainerAvailable(options)) {
+        // eslint-disable-next-line no-console
+        console.error('[AppReview sandbox] Requires a container.');
+    }
+    else {
+        const container = document.getElementById(options.container);
+        // mode mobile/web
+        const appOptions = {
+            token: process.env.API_TEST_TOKEN || '',
+            skillRef: '123',
+            services,
+            translate,
+            onQuitClick: () => {
+                location.reload();
+            },
+            url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
+        };
+        const skin = {
+            common: {
+                primary: '#248e59'
+            }
+        };
+        render(React.createElement(WebContext, { skin: skin, translate: translate },
+            React.createElement(AppReview, { options: appOptions })), container);
+    }
+};
+if (window && !window.createSandbox) {
+    window.createSandbox = createSandbox;
+}
+createSandbox({ container: 'root' });

package/es/{index.js → src/index.js}

@@ -11,11 +11,11 @@ import { postProgression } from './actions/api/post-progression';
 import { VIEWS } from './common';
 import { mapStateToSlidesProps } from './views/slides';
 import { mapStateToSkillsProps } from './views/skills';
-const ConnectedApp = ({ onQuitClick }) => {
+const ConnectedApp = (options) => {
     const dispatch = useDispatch();
     const props = {
         viewName: useSelector((state) => state.ui.navigation[state.ui.navigation.length - 1]),
-        slides: useSelector((state) => mapStateToSlidesProps(state, dispatch, onQuitClick)),
+        slides: useSelector((state) => mapStateToSlidesProps(state, dispatch, options)),
         skills: useSelector((state) => mapStateToSkillsProps(state)),
         onboarding: {}
     };
@@ -24,7 +24,7 @@ const ConnectedApp = ({ onQuitClick }) => {
 const AppReview = ({ options }) => {
     const [store, setStore] = useState(null);
     const [isProgressionCreated, setIsProgressionCreated] = useState(false);
-    const onQuitClick = options.onQuitClick;
+    const { translate, onQuitClick } = options;
     useEffect(() => {
         if (store)
             return;
@@ -68,6 +68,6 @@ const AppReview = ({ options }) => {
     if (!store)
         return null;
     return (React.createElement(Provider, { store: store },
-        React.createElement(ConnectedApp, { onQuitClick: onQuitClick })));
+        React.createElement(ConnectedApp, { onQuitClick: onQuitClick, translate: translate })));
 };
 export default AppReview;

package/es/{test → src/test}/index.test.js

@@ -40,6 +40,7 @@ const appOptions = {
     skillRef: 'skill_NJC0jFKoH',
     services,
     onQuitClick: identity,
+    translate: key => key,
     url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
 };
 test('should show the loader while the app is fetching the data', async (t) => {

package/{lib → es/src}/test/util/services.mock.d.ts

@@ -5,3 +5,4 @@ export declare const incorrectFreeTextPostAnswerResponse: ProgressionFromAPI;
 export declare const progressionSlideWithPendingSlide: ProgressionFromAPI;
 export declare const getChoicesCorrection: (ref: string, wrongChoice?: boolean) => CorrectionFromAPI;
 export declare const services: Services;
+export declare const translate: (key: string) => string;

package/es/{test → src/test}/util/services.mock.js

@@ -442,3 +442,4 @@ export const services = {
     fetchRank: () => Promise.resolve(fetchRankResponse),
     fetchSlidesToReviewBySkillRef: () => Promise.resolve(fetchSlidesToReviewBySkillRefResponse)
 };
+export const translate = (key) => `___${key}`;

package/{lib → es/src}/types/common.d.ts

@@ -139,11 +139,14 @@ export declare type Services = {
 export declare type Options = {
     services: Services;
 };
-export declare type AppOptions = {
+export declare type ConnectedOptions = {
+    translate: (key: string, data?: unknown) => string;
+    onQuitClick: Function;
+};
+export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
     services: Services;
-    onQuitClick: Function;
     url: string;
 };
 export declare type JWT = {

package/{lib → es/src}/views/slides/index.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch } from 'redux';
+import type { ConnectedOptions } from '../../types/common';
 import { type SlideIndexes } from '../../common';
 import type { StoreState } from '../../reducers';
 import type { AnswerUI } from '../../types/slides';
@@ -138,5 +139,5 @@ export declare type CongratsProps = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, options: ConnectedOptions) => SlidesViewProps;
 export {};

package/es/{views → src/views}/slides/index.js

@@ -166,22 +166,22 @@ export const buildStepItems = (state) => {
     });
     return steps;
 };
-const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf) => {
+const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf, translate) => {
     return {
         klf: isCorrect
             ? undefined
             : {
-                label: '_klf',
+                label: translate('KLF'),
                 tooltip: klf
             },
-        resultLabel: isCorrect ? '_right' : '_wrong',
+        resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
         information: {
-            label: isCorrect ? '_klf' : '_correctAnswer',
+            label: isCorrect ? translate('KLF') : translate('Correct Answer'),
             message: isCorrect ? klf : join(',', correctAnswer)
         },
         next: {
-            ariaLabel: '_correctionNextAriaLabel',
-            label: '_correctionNextLabel',
+            ariaLabel: translate('Next Question'),
+            label: translate('Next Question'),
             onClick: () => {
                 dispatch(nextSlide);
             }
@@ -214,7 +214,7 @@ const buildQuitPopinProps = (dispatch) => (onQuitClick) => {
         }
     };
 };
-const buildRankCard = (rank) => {
+const buildRankCard = (rank, translate) => {
     return {
         'aria-label': 'Review Card Congrats Container',
         'data-name': 'card-rank',
@@ -229,13 +229,13 @@ const buildRankCard = (rank) => {
         cardType: 'card-rank',
         iconAriaLabel: 'Image without information',
         className: undefined,
-        reviewCardTitle: 'You are now',
+        reviewCardTitle: translate('You are now'),
         reviewCardValue: `${rank}`,
         rankSuffix: 'th',
         timerAnimation: 200
     };
 };
-const buildCongratsProps = (state) => {
+const buildCongratsProps = (state, translate) => {
     if (!state.ui.showCongrats)
         return;
     const progression = state.data.progression;
@@ -258,18 +258,18 @@ const buildCongratsProps = (state) => {
         iconAriaLabel: 'Image without information',
         className: undefined,
         cardType: 'card-star',
-        reviewCardTitle: 'You have won',
+        reviewCardTitle: translate('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;
+    const cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end, translate) : undefined;
     return {
         'aria-label': 'Review Congratulations',
         'data-name': 'review-congrats',
         animationLottie: confettiAnimation,
-        title: 'Congratulations!',
+        title: translate('Congratulations!'),
         cardCongratsStar,
         cardCongratsRank,
         buttonRevising: undefined,
@@ -281,7 +281,8 @@ const isEndOfProgression = (progression) => {
         return false;
     return progression.state.nextContent.ref === 'successExitNode';
 };
-export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
+export const mapStateToSlidesProps = (state, dispatch, options) => {
+    const { translate, onQuitClick } = options;
     const currentSlideRef = getCurrentSlideRef(state);
     const endReview = isEndOfProgression(state.data.progression);
     const correction = get(['data', 'corrections', currentSlideRef], state);
@@ -290,8 +291,8 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
     const showQuitPopin = get(['ui', 'showQuitPopin'], state);
     return {
         header: {
-            mode: '__revision_mode',
-            skillName: '__agility',
+            mode: translate('Review Title'),
+            skillName: translate('Content Parent Title'),
             onQuitClick: () => dispatch(openQuitPopin),
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
@@ -300,16 +301,17 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
         stack: {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
-                label: '__validate',
+                label: translate('Validate'),
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
                 onClick: () => {
                     dispatch(postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction &&
+                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, options.translate),
             endReview: endReview && state.ui.showCongrats
         },
-        congrats: buildCongratsProps(state),
+        congrats: buildCongratsProps(state, options.translate),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/lib/locales/en/review.json

@@ -0,0 +1,14 @@
+{
+    "Review Title": "Review Mode",
+    "Content Parent Title": "From `{{contentTitle}}` `{{contentType}}`",
+    "Validate": "Validate",
+    "Next Question": "Next Question",
+    "KLF": "Key Learning Factor",
+    "Correct Answer": "Correct Answer",
+    "Wrong Answer": "Wrong Answer",
+    "You have won": "You have won",
+    "You are now": "You are now",
+    "Revise another skill": "Revise another skill",
+    "Continue reviewing": "Continue reviewing",
+    "Congratulations!": "Congratulations!"
+}

package/lib/sandbox/index.d.ts

@@ -0,0 +1,9 @@
+declare type SandboxOptions = {
+    container: string;
+};
+declare global {
+    interface Window {
+        createSandbox?: (sandboxOptions: SandboxOptions) => void;
+    }
+}
+export {};

package/lib/sandbox/index.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { render } from 'react-dom';
+import isNil from 'lodash/fp/isNil';
+import get from 'lodash/fp/get';
+import pipe from 'lodash/fp/pipe';
+import createTranslate from '@coorpacademy/translate';
+import { WebContext } from '@coorpacademy/components/es/atom/provider';
+import localesComponents from '@coorpacademy/components/locales/en/global.json';
+import localesAppReview from '../locales/en/review.json';
+import AppReview from '../src';
+import { services } from '../src/test/util/services.mock';
+var translate = function (key, data) {
+    var _a;
+    try {
+        return createTranslate(__assign(__assign({}, localesAppReview), localesComponents))(key, data);
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        return createTranslate((_a = {}, _a[key] = key, _a))(key, data);
+    }
+};
+var isContainerAvailable = function (options) {
+    return !pipe(get('container'), isNil)(options);
+};
+var createSandbox = function (options) {
+    if (!isContainerAvailable(options)) {
+        // eslint-disable-next-line no-console
+        console.error('[AppReview sandbox] Requires a container.');
+    }
+    else {
+        var container = document.getElementById(options.container);
+        // mode mobile/web
+        var appOptions = {
+            token: process.env.API_TEST_TOKEN || '',
+            skillRef: '123',
+            services: services,
+            translate: translate,
+            onQuitClick: function () {
+                location.reload();
+            },
+            url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
+        };
+        var skin = {
+            common: {
+                primary: '#248e59'
+            }
+        };
+        render(React.createElement(WebContext, { skin: skin, translate: translate },
+            React.createElement(AppReview, { options: appOptions })), container);
+    }
+};
+if (window && !window.createSandbox) {
+    window.createSandbox = createSandbox;
+}
+createSandbox({ container: 'root' });

package/lib/{index.js → src/index.js}

@@ -22,12 +22,11 @@ import { postProgression } from './actions/api/post-progression';
 import { VIEWS } from './common';
 import { mapStateToSlidesProps } from './views/slides';
 import { mapStateToSkillsProps } from './views/skills';
-var ConnectedApp = function (_a) {
-    var onQuitClick = _a.onQuitClick;
+var ConnectedApp = function (options) {
     var dispatch = useDispatch();
     var props = {
         viewName: useSelector(function (state) { return state.ui.navigation[state.ui.navigation.length - 1]; }),
-        slides: useSelector(function (state) { return mapStateToSlidesProps(state, dispatch, onQuitClick); }),
+        slides: useSelector(function (state) { return mapStateToSlidesProps(state, dispatch, options); }),
         skills: useSelector(function (state) { return mapStateToSkillsProps(state); }),
         onboarding: {}
     };
@@ -37,7 +36,7 @@ var AppReview = function (_a) {
     var options = _a.options;
     var _b = useState(null), store = _b[0], setStore = _b[1];
     var _c = useState(false), isProgressionCreated = _c[0], setIsProgressionCreated = _c[1];
-    var onQuitClick = options.onQuitClick;
+    var translate = options.translate, onQuitClick = options.onQuitClick;
     useEffect(function () {
         if (store)
             return;
@@ -81,6 +80,6 @@ var AppReview = function (_a) {
     if (!store)
         return null;
     return (React.createElement(Provider, { store: store },
-        React.createElement(ConnectedApp, { onQuitClick: onQuitClick })));
+        React.createElement(ConnectedApp, { onQuitClick: onQuitClick, translate: translate })));
 };
 export default AppReview;

package/lib/{test → src/test}/index.test.js

@@ -135,6 +135,7 @@ var appOptions = {
     skillRef: 'skill_NJC0jFKoH',
     services: services,
     onQuitClick: identity,
+    translate: function (key) { return key; },
     url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
 };
 test('should show the loader while the app is fetching the data', function (t) { return __awaiter(void 0, void 0, void 0, function () {

package/{es → lib/src}/test/util/services.mock.d.ts

@@ -5,3 +5,4 @@ export declare const incorrectFreeTextPostAnswerResponse: ProgressionFromAPI;
 export declare const progressionSlideWithPendingSlide: ProgressionFromAPI;
 export declare const getChoicesCorrection: (ref: string, wrongChoice?: boolean) => CorrectionFromAPI;
 export declare const services: Services;
+export declare const translate: (key: string) => string;

package/lib/{test → src/test}/util/services.mock.js

@@ -446,3 +446,4 @@ export var services = {
     fetchRank: function () { return Promise.resolve(fetchRankResponse); },
     fetchSlidesToReviewBySkillRef: function () { return Promise.resolve(fetchSlidesToReviewBySkillRefResponse); }
 };
+export var translate = function (key) { return "___".concat(key); };

package/{es → lib/src}/types/common.d.ts

@@ -139,11 +139,14 @@ export declare type Services = {
 export declare type Options = {
     services: Services;
 };
-export declare type AppOptions = {
+export declare type ConnectedOptions = {
+    translate: (key: string, data?: unknown) => string;
+    onQuitClick: Function;
+};
+export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
     services: Services;
-    onQuitClick: Function;
     url: string;
 };
 export declare type JWT = {

package/{es → lib/src}/views/slides/index.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch } from 'redux';
+import type { ConnectedOptions } from '../../types/common';
 import { type SlideIndexes } from '../../common';
 import type { StoreState } from '../../reducers';
 import type { AnswerUI } from '../../types/slides';
@@ -138,5 +139,5 @@ export declare type CongratsProps = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: Function) => SlidesViewProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, options: ConnectedOptions) => SlidesViewProps;
 export {};

package/lib/{views → src/views}/slides/index.js

@@ -161,22 +161,22 @@ export var buildStepItems = function (state) {
     return steps;
 };
 var getCorrectionPopinProps = function (dispatch) {
-    return function (isCorrect, correctAnswer, klf) {
+    return function (isCorrect, correctAnswer, klf, translate) {
         return {
             klf: isCorrect
                 ? undefined
                 : {
-                    label: '_klf',
+                    label: translate('KLF'),
                     tooltip: klf
                 },
-            resultLabel: isCorrect ? '_right' : '_wrong',
+            resultLabel: isCorrect ? translate('Correct Answer') : translate('Wrong Answer'),
             information: {
-                label: isCorrect ? '_klf' : '_correctAnswer',
+                label: isCorrect ? translate('KLF') : translate('Correct Answer'),
                 message: isCorrect ? klf : join(',', correctAnswer)
             },
             next: {
-                ariaLabel: '_correctionNextAriaLabel',
-                label: '_correctionNextLabel',
+                ariaLabel: translate('Next Question'),
+                label: translate('Next Question'),
                 onClick: function () {
                     dispatch(nextSlide);
                 }
@@ -212,7 +212,7 @@ var buildQuitPopinProps = function (dispatch) {
         };
     };
 };
-var buildRankCard = function (rank) {
+var buildRankCard = function (rank, translate) {
     return {
         'aria-label': 'Review Card Congrats Container',
         'data-name': 'card-rank',
@@ -227,13 +227,13 @@ var buildRankCard = function (rank) {
         cardType: 'card-rank',
         iconAriaLabel: 'Image without information',
         className: undefined,
-        reviewCardTitle: 'You are now',
+        reviewCardTitle: translate('You are now'),
         reviewCardValue: "".concat(rank),
         rankSuffix: 'th',
         timerAnimation: 200
     };
 };
-var buildCongratsProps = function (state) {
+var buildCongratsProps = function (state, translate) {
     if (!state.ui.showCongrats)
         return;
     var progression = state.data.progression;
@@ -256,18 +256,18 @@ var buildCongratsProps = function (state) {
         iconAriaLabel: 'Image without information',
         className: undefined,
         cardType: 'card-star',
-        reviewCardTitle: 'You have won',
+        reviewCardTitle: translate('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;
+    var cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end, translate) : undefined;
     return {
         'aria-label': 'Review Congratulations',
         'data-name': 'review-congrats',
         animationLottie: confettiAnimation,
-        title: 'Congratulations!',
+        title: translate('Congratulations!'),
         cardCongratsStar: cardCongratsStar,
         cardCongratsRank: cardCongratsRank,
         buttonRevising: undefined,
@@ -279,7 +279,8 @@ var isEndOfProgression = function (progression) {
         return false;
     return progression.state.nextContent.ref === 'successExitNode';
 };
-export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
+export var mapStateToSlidesProps = function (state, dispatch, options) {
+    var translate = options.translate, onQuitClick = options.onQuitClick;
     var currentSlideRef = getCurrentSlideRef(state);
     var endReview = isEndOfProgression(state.data.progression);
     var correction = get(['data', 'corrections', currentSlideRef], state);
@@ -288,8 +289,8 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
     var showQuitPopin = get(['ui', 'showQuitPopin'], state);
     return {
         header: {
-            mode: '__revision_mode',
-            skillName: '__agility',
+            mode: translate('Review Title'),
+            skillName: translate('Content Parent Title'),
             onQuitClick: function () { return dispatch(openQuitPopin); },
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
@@ -298,16 +299,17 @@ export var mapStateToSlidesProps = function (state, dispatch, onQuitClick) {
         stack: {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
-                label: '__validate',
+                label: translate('Validate'),
                 disabled: !get(['ui', 'slide', currentSlideRef, 'validateButton'], state),
                 onClick: function () {
                     dispatch(postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction &&
+                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, options.translate),
             endReview: endReview && state.ui.showCongrats
         },
-        congrats: buildCongratsProps(state),
+        congrats: buildCongratsProps(state, options.translate),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.5.6-alpha.2+eed634ba0",
+  "version": "0.5.6-alpha.6+107e6d7b9",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -42,8 +42,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.24.5-alpha.2+eed634ba0",
+    "@coorpacademy/components": "10.24.4",
     "@coorpacademy/redux-task": "1.1.6",
+    "@coorpacademy/translate": "6.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
     "react-redux": "^7.2.9",
@@ -77,5 +78,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "eed634ba0e2edfffa5b5797dd6251d2e63128bda"
+  "gitHead": "107e6d7b95995a99a2746554a73d1b7d8ac61c94"
 }

package/src/index.tsx

@@ -8,7 +8,7 @@ import isEmpty from 'lodash/fp/isEmpty';
 import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 
-import type {AppOptions} from './types/common';
+import type {AppOptions, ConnectedOptions} from './types/common';
 import type {StoreState} from './reducers';
 
 import {navigateTo, ViewPath} from './actions/ui/navigation';
@@ -19,14 +19,13 @@ import {VIEWS} from './common';
 import {mapStateToSlidesProps} from './views/slides';
 import {mapStateToSkillsProps} from './views/skills';
 
-const ConnectedApp = ({onQuitClick}: {onQuitClick: Function}): JSX.Element => {
+const ConnectedApp = (options: ConnectedOptions): JSX.Element => {
   const dispatch = useDispatch();
-
   const props = {
     viewName: useSelector(
       (state: StoreState) => state.ui.navigation[state.ui.navigation.length - 1]
     ),
-    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch, onQuitClick)),
+    slides: useSelector((state: StoreState) => mapStateToSlidesProps(state, dispatch, options)),
     skills: useSelector((state: StoreState) => mapStateToSkillsProps(state)),
     onboarding: {}
   };
@@ -37,7 +36,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
   const [isProgressionCreated, setIsProgressionCreated] = useState(false);
 
-  const onQuitClick = options.onQuitClick;
+  const {translate, onQuitClick} = options;
 
   useEffect(() => {
     if (store) return;
@@ -90,7 +89,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
   return (
     <Provider store={store}>
-      <ConnectedApp onQuitClick={onQuitClick} />
+      <ConnectedApp onQuitClick={onQuitClick} translate={translate} />
     </Provider>
   );
 };