@selfcommunity/react-ui 0.10.2-courses.141 → 0.10.2-courses.143

package/lib/cjs/components/CourseDashboard/Student.js

@@ -58,6 +58,9 @@ function getUrlNextLesson(course) {
     });
     return data;
 }
+function getIsNextLessonAvailable(course) {
+    return course.sections.some((section) => section.num_lessons_completed < section.num_lessons && section.lessons[section.num_lessons_completed].locked);
+}
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
@@ -116,7 +119,7 @@ function Student(inProps) {
     const actionButton = (0, react_1.useMemo)(() => {
         return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.CREATOR || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.MANAGER) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: messages.dashboard, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.MANAGER || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.JOINED) &&
                     ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) !== null || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) !== types_1.SCCoursePrivacyType.PRIVATE) &&
-                    (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) < 100 && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: scCourse.num_lessons_completed === 0 ? messages.start : messages.continue, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) === types_1.SCCoursePrivacyType.PRIVATE &&
+                    (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) < 100 && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: scCourse.num_lessons_completed === 0 ? messages.start : messages.continue, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)), disabled: getIsNextLessonAvailable(scCourse) })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) === types_1.SCCoursePrivacyType.PRIVATE &&
                     ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === null || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: sentRequest ? messages.cancel : messages.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/cjs/components/LessonObject/LessonObject.js

@@ -13,12 +13,7 @@ const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent
 const contribution_1 = require("../../utils/contribution");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const ContentLesson_1 = tslib_1.__importDefault(require("../Composer/Content/ContentLesson"));
-const types_1 = require("@selfcommunity/types");
-const react_intl_1 = require("react-intl");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const api_services_1 = require("@selfcommunity/api-services");
-const lab_1 = require("@mui/lab");
-const CourseCompletedDialog_1 = tslib_1.__importDefault(require("../CourseCompletedDialog"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -26,8 +21,7 @@ const classes = {
     title: `${constants_1.PREFIX}-title`,
     text: `${constants_1.PREFIX}-text`,
     navigation: `${constants_1.PREFIX}-navigation`,
-    editor: `${constants_1.PREFIX}-editor`,
-    button: `${constants_1.PREFIX}-button`
+    editor: `${constants_1.PREFIX}-editor`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -41,13 +35,8 @@ function LessonObject(inProps) {
         name: constants_1.PREFIX
     });
     const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = tslib_1.__rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [completed, setCompleted] = (0, react_1.useState)((lesson === null || lesson === void 0 ? void 0 : lesson.completion_status) === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
-    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
-    //HOOKS
-    const isCourseAdmin = (0, react_1.useMemo)(() => course && (course.join_status === types_1.SCCourseJoinStatusType.CREATOR || course.join_status === types_1.SCCourseJoinStatusType.MANAGER), [course]);
     // HANDLERS
     const handleChangeLesson = (0, react_1.useCallback)((content) => {
         if (onContentChange) {
@@ -59,35 +48,14 @@ function LessonObject(inProps) {
             onMediaChange(medias);
         }
     }, [onMediaChange]);
-    function toggleLessonCompletion(completed) {
-        setLoading(true);
-        const service = completed
-            ? () => api_services_1.CourseService.markLessonIncomplete(course.id, lesson.section_id, lesson.id)
-            : () => api_services_1.CourseService.markLessonComplete(course.id, lesson.section_id, lesson.id);
-        service()
-            .then(() => {
-            setCompleted(!completed);
-            setLoading(false);
-            if (course.num_lessons - course.num_lessons_completed === 1) {
-                setOpenDialog(true);
-            }
-        })
-            .catch((error) => {
-            setLoading(false);
-            console.log(error);
-        });
-    }
-    const handleCloseDialog = (0, react_1.useCallback)(() => {
-        setOpenDialog(false);
-    }, [setOpenDialog]);
     // RENDER
     if (!course || !lesson) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson, 
-                                //error={{error}}
-                                onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
-                                    __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
-                                } })) })) }), !isCourseAdmin && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.completed", defaultMessage: "ui.lessonObject.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.complete", defaultMessage: "ui.lessonObject.button.complete" })) })))] })), openDialog && (0, jsx_runtime_1.jsx)(CourseCompletedDialog_1.default, { course: course, onClose: handleCloseDialog })] }));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson, 
+                    //error={{error}}
+                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
+                        __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
+                    } })) })) }) })));
 }
 exports.default = LessonObject;

package/lib/cjs/shared/AccordionLessons/AccordionLessons.js

@@ -43,6 +43,6 @@ function AccordionLessons(inProps) {
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                         lessonsNumber: section.lessons.length
-                                    } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
+                                    } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
 }
 exports.default = AccordionLessons;

package/lib/esm/components/CourseDashboard/Student.js

@@ -56,6 +56,9 @@ function getUrlNextLesson(course) {
     });
     return data;
 }
+function getIsNextLessonAvailable(course) {
+    return course.sections.some((section) => section.num_lessons_completed < section.num_lessons && section.lessons[section.num_lessons_completed].locked);
+}
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
@@ -114,7 +117,7 @@ function Student(inProps) {
     const actionButton = useMemo(() => {
         return (_jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.CREATOR || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.MANAGER) && (_jsx(ActionButton, { labelId: messages.dashboard, to: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.MANAGER || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.JOINED) &&
                     ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) !== null || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) !== SCCoursePrivacyType.PRIVATE) &&
-                    (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) < 100 && (_jsx(ActionButton, { labelId: scCourse.num_lessons_completed === 0 ? messages.start : messages.continue, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) === SCCoursePrivacyType.PRIVATE &&
+                    (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) < 100 && (_jsx(ActionButton, { labelId: scCourse.num_lessons_completed === 0 ? messages.start : messages.continue, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)), disabled: getIsNextLessonAvailable(scCourse) })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) === SCCoursePrivacyType.PRIVATE &&
                     ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === null || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.REQUESTED) && (_jsx(ActionButton, { labelId: sentRequest ? messages.cancel : messages.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/esm/components/LessonObject/LessonObject.js

@@ -1,22 +1,17 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { Box, Icon, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { PREFIX } from './constants';
 import { useSCRouting } from '@selfcommunity/react-core';
 import CardContent from '@mui/material/CardContent';
 import { getContributionHtml } from '../../utils/contribution';
 import Widget from '../Widget';
 import ContentLesson from '../Composer/Content/ContentLesson';
-import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
-import { FormattedMessage } from 'react-intl';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-import { CourseService } from '@selfcommunity/api-services';
-import { LoadingButton } from '@mui/lab';
-import CourseCompletedDialog from '../CourseCompletedDialog';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -24,8 +19,7 @@ const classes = {
     title: `${PREFIX}-title`,
     text: `${PREFIX}-text`,
     navigation: `${PREFIX}-navigation`,
-    editor: `${PREFIX}-editor`,
-    button: `${PREFIX}-button`
+    editor: `${PREFIX}-editor`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -39,13 +33,8 @@ export default function LessonObject(inProps) {
         name: PREFIX
     });
     const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = __rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
-    const [loading, setLoading] = useState(false);
-    const [completed, setCompleted] = useState((lesson === null || lesson === void 0 ? void 0 : lesson.completion_status) === SCCourseLessonCompletionStatusType.COMPLETED);
-    const [openDialog, setOpenDialog] = useState(false);
     // CONTEXT
     const scRoutingContext = useSCRouting();
-    //HOOKS
-    const isCourseAdmin = useMemo(() => course && (course.join_status === SCCourseJoinStatusType.CREATOR || course.join_status === SCCourseJoinStatusType.MANAGER), [course]);
     // HANDLERS
     const handleChangeLesson = useCallback((content) => {
         if (onContentChange) {
@@ -57,34 +46,13 @@ export default function LessonObject(inProps) {
             onMediaChange(medias);
         }
     }, [onMediaChange]);
-    function toggleLessonCompletion(completed) {
-        setLoading(true);
-        const service = completed
-            ? () => CourseService.markLessonIncomplete(course.id, lesson.section_id, lesson.id)
-            : () => CourseService.markLessonComplete(course.id, lesson.section_id, lesson.id);
-        service()
-            .then(() => {
-            setCompleted(!completed);
-            setLoading(false);
-            if (course.num_lessons - course.num_lessons_completed === 1) {
-                setOpenDialog(true);
-            }
-        })
-            .catch((error) => {
-            setLoading(false);
-            console.log(error);
-        });
-    }
-    const handleCloseDialog = useCallback(() => {
-        setOpenDialog(false);
-    }, [setOpenDialog]);
     // RENDER
     if (!course || !lesson) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(Widget, { children: _jsx(CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? (_jsx(ContentLesson, { value: lesson, 
-                                //error={{error}}
-                                onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : (_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
-                                    __html: getContributionHtml(lesson.html, scRoutingContext.url)
-                                } })) })) }), !isCourseAdmin && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? (_jsx(FormattedMessage, { id: "ui.lessonObject.button.completed", defaultMessage: "ui.lessonObject.button.completed" })) : (_jsx(FormattedMessage, { id: "ui.lessonObject.button.complete", defaultMessage: "ui.lessonObject.button.complete" })) })))] })), openDialog && _jsx(CourseCompletedDialog, { course: course, onClose: handleCloseDialog })] }));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(Widget, { children: _jsx(CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? (_jsx(ContentLesson, { value: lesson, 
+                    //error={{error}}
+                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : (_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
+                        __html: getContributionHtml(lesson.html, scRoutingContext.url)
+                    } })) })) }) })));
 }

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -40,5 +40,5 @@ export default function AccordionLessons(inProps) {
     }
     return (_jsx(Fragment, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_less" }) }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                         lessonsNumber: section.lessons.length
-                                    } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : (_jsx(Box, { className: classes.circle })), _jsx(Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
+                                    } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), _jsx(Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
 }