@coorpacademy/app-review 0.7.0 → 0.7.1-alpha.10

package/es/index.js

@@ -8,15 +8,15 @@ import { navigateBack, navigateTo } from './actions/ui/navigation';
 import { storeToken } from './actions/data/token';
 import { fetchSkills } from './actions/api/fetch-skills';
 import { postProgression } from './actions/api/post-progression';
-import { mapStateToSlidesProps } from './views/slides';
 import { mapStateToSkillsProps } from './views/skills';
-const ConnectedApp = ({ onQuitClick }) => {
+import { mapStateToSlidesProps } from './views/slides';
+const ConnectedApp = (options) => {
     const dispatch = useDispatch();
     const props = {
-        navigateBack: () => dispatch(navigateBack),
         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)),
+        navigateBack: () => dispatch(navigateBack),
         onboarding: {}
     };
     return React.createElement(AppReviewTemplate, { ...props });
@@ -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/types/common.d.ts

@@ -137,11 +137,17 @@ export declare type Services = {
     fetchRank(token: string): Promise<Rank>;
     fetchSlidesToReviewBySkillRef(url: string, token: string, skillRef: string): Promise<SlideIdFromAPI[]>;
 };
-export declare type AppOptions = {
+export declare type Options = {
+    services: Services;
+};
+export declare type ConnectedOptions = {
+    translate: (key: string, data?: unknown) => string;
+    onQuitClick: () => void;
+};
+export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
     services: Services;
-    onQuitClick: () => void;
     url: string;
     callbackOnViewChanged?: (viewName: ViewName) => void;
 };

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

@@ -1,6 +1,7 @@
 import type { Dispatch } from 'redux';
 import { ReviewPlayerProps } from '@coorpacademy/components/es/template/app-review/player/prop-types';
 import { SlideProps } from '@coorpacademy/components/es/organism/review-slide/prop-types';
+import type { ConnectedOptions } from '../../types/common';
 import type { StoreState } from '../../reducers';
 import type { AnswerUI } from '../../types/slides';
 declare const ICON_VALUES: {
@@ -30,5 +31,5 @@ declare type SlidesStack = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: () => void) => ReviewPlayerProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, options: ConnectedOptions) => ReviewPlayerProps;
 export {};

package/es/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: {
-            'aria-label': '_correctionNextAriaLabel',
-            label: '_correctionNextLabel',
+            'aria-label': 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);
@@ -291,8 +292,8 @@ export const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
     const showCongrats = get(['ui', 'showCongrats'], 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',
@@ -302,16 +303,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, translate),
             endReview: endReview && state.ui.showCongrats
         },
-        congrats: buildCongratsProps(state),
+        congrats: buildCongratsProps(state, translate),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/lib/index.js

@@ -36,15 +36,15 @@ const navigation_1 = require("./actions/ui/navigation");
 const token_1 = require("./actions/data/token");
 const fetch_skills_1 = require("./actions/api/fetch-skills");
 const post_progression_1 = require("./actions/api/post-progression");
-const slides_1 = require("./views/slides");
 const skills_1 = require("./views/skills");
-const ConnectedApp = ({ onQuitClick }) => {
+const slides_1 = require("./views/slides");
+const ConnectedApp = (options) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const props = {
-        navigateBack: () => dispatch(navigation_1.navigateBack),
         viewName: (0, react_redux_1.useSelector)((state) => state.ui.navigation[state.ui.navigation.length - 1]),
-        slides: (0, react_redux_1.useSelector)((state) => (0, slides_1.mapStateToSlidesProps)(state, dispatch, onQuitClick)),
+        slides: (0, react_redux_1.useSelector)((state) => (0, slides_1.mapStateToSlidesProps)(state, dispatch, options)),
         skills: (0, react_redux_1.useSelector)((state) => (0, skills_1.mapStateToSkillsProps)(state)),
+        navigateBack: () => dispatch(navigation_1.navigateBack),
         onboarding: {}
     };
     return react_1.default.createElement(app_review_1.default, { ...props });
@@ -52,7 +52,7 @@ const ConnectedApp = ({ onQuitClick }) => {
 const AppReview = ({ options }) => {
     const [store, setStore] = (0, react_1.useState)(null);
     const [isProgressionCreated, setIsProgressionCreated] = (0, react_1.useState)(false);
-    const onQuitClick = options.onQuitClick;
+    const { translate, onQuitClick } = options;
     (0, react_1.useEffect)(() => {
         if (store)
             return;
@@ -96,6 +96,6 @@ const AppReview = ({ options }) => {
     if (!store)
         return null;
     return (react_1.default.createElement(react_redux_1.Provider, { store: store },
-        react_1.default.createElement(ConnectedApp, { onQuitClick: onQuitClick })));
+        react_1.default.createElement(ConnectedApp, { onQuitClick: onQuitClick, translate: translate })));
 };
 exports.default = AppReview;

package/lib/types/common.d.ts

@@ -137,11 +137,17 @@ export declare type Services = {
     fetchRank(token: string): Promise<Rank>;
     fetchSlidesToReviewBySkillRef(url: string, token: string, skillRef: string): Promise<SlideIdFromAPI[]>;
 };
-export declare type AppOptions = {
+export declare type Options = {
+    services: Services;
+};
+export declare type ConnectedOptions = {
+    translate: (key: string, data?: unknown) => string;
+    onQuitClick: () => void;
+};
+export declare type AppOptions = ConnectedOptions & {
     token: string;
     skillRef?: string;
     services: Services;
-    onQuitClick: () => void;
     url: string;
     callbackOnViewChanged?: (viewName: ViewName) => void;
 };

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

@@ -1,6 +1,7 @@
 import type { Dispatch } from 'redux';
 import { ReviewPlayerProps } from '@coorpacademy/components/es/template/app-review/player/prop-types';
 import { SlideProps } from '@coorpacademy/components/es/organism/review-slide/prop-types';
+import type { ConnectedOptions } from '../../types/common';
 import type { StoreState } from '../../reducers';
 import type { AnswerUI } from '../../types/slides';
 declare const ICON_VALUES: {
@@ -30,5 +31,5 @@ declare type SlidesStack = {
 };
 export declare const initialState: SlidesStack;
 export declare const buildStepItems: (state: StoreState) => StepItem[];
-export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, onQuitClick: () => void) => ReviewPlayerProps;
+export declare const mapStateToSlidesProps: (state: StoreState, dispatch: Dispatch, options: ConnectedOptions) => ReviewPlayerProps;
 export {};

package/lib/views/slides/index.js

@@ -173,22 +173,22 @@ const buildStepItems = (state) => {
     return steps;
 };
 exports.buildStepItems = buildStepItems;
-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 : (0, join_1.default)(',', correctAnswer)
         },
         next: {
-            'aria-label': '_correctionNextAriaLabel',
-            label: '_correctionNextLabel',
+            'aria-label': translate('Next Question'),
+            label: translate('Next Question'),
             onClick: () => {
                 dispatch(next_slide_1.nextSlide);
             }
@@ -221,7 +221,7 @@ const buildQuitPopinProps = (dispatch) => (onQuitClick) => {
         }
     };
 };
-const buildRankCard = (rank) => {
+const buildRankCard = (rank, translate) => {
     return {
         'aria-label': 'Review Card Congrats Container',
         'data-name': 'card-rank',
@@ -236,13 +236,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;
@@ -265,18 +265,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,
@@ -288,7 +288,8 @@ const isEndOfProgression = (progression) => {
         return false;
     return progression.state.nextContent.ref === 'successExitNode';
 };
-const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
+const mapStateToSlidesProps = (state, dispatch, options) => {
+    const { translate, onQuitClick } = options;
     const currentSlideRef = getCurrentSlideRef(state);
     const endReview = isEndOfProgression(state.data.progression);
     const correction = (0, get_1.default)(['data', 'corrections', currentSlideRef], state);
@@ -298,8 +299,8 @@ const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
     const showCongrats = (0, get_1.default)(['ui', 'showCongrats'], state);
     return {
         header: {
-            mode: '__revision_mode',
-            skillName: '__agility',
+            mode: translate('Review Title'),
+            skillName: translate('Content Parent Title'),
             onQuitClick: () => dispatch(quit_popin_1.openQuitPopin),
             'aria-label': 'aria-header-wrapper',
             closeButtonAriaLabel: 'aria-close-button',
@@ -309,16 +310,17 @@ const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
         stack: {
             slides: buildStackSlides(state, dispatch),
             validateButton: {
-                label: '__validate',
+                label: translate('Validate'),
                 disabled: !(0, get_1.default)(['ui', 'slide', currentSlideRef, 'validateButton'], state),
                 onClick: () => {
                     dispatch(post_answer_1.postAnswer);
                 }
             },
-            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+            correctionPopinProps: correction &&
+                getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf, translate),
             endReview: endReview && state.ui.showCongrats
         },
-        congrats: buildCongratsProps(state),
+        congrats: buildCongratsProps(state, translate),
         quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
     };
 };

package/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 point",
+    "Correct Answer": "Good Answer",
+    "Wrong Answer": "Wrong Answer",
+    "You have won": "You have won",
+    "You are now": "You are now",
+    "Revise another skill": "Review another skill",
+    "Continue reviewing": "Keep reviewing",
+    "Congratulations!": "Congratulations!"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.7.0",
+  "version": "0.7.1-alpha.10+c25fc5a79",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -29,6 +29,7 @@
   "files": [
     "lib",
     "es",
+    "locales",
     "readme.md"
   ],
   "main": "lib/index.js",
@@ -36,6 +37,7 @@
   "dependencies": {
     "@coorpacademy/components": "10.26.0",
     "@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",
@@ -69,5 +71,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "dd58aa89c267084ec7338274ff946b3af97730b3"
+  "gitHead": "c25fc5a790ad6f08d1930a44eb65decd19f9f143"
 }