@selfcommunity/react-ui 0.10.2-courses.104 → 0.10.2-courses.106

package/lib/cjs/components/Course/CreatePlaceholder.d.ts

@@ -1,5 +1,11 @@
 import { WidgetProps } from '../Widget';
+import { CreateCourseButtonProps } from '../CreateCourseButton';
 export interface CourseSkeletonProps extends WidgetProps {
+    /**
+     * Props to spread to CreateCourseButton component
+     * @default {}
+     */
+    CreateCourseButtonComponentProps?: CreateCourseButtonProps;
     /**
      * Overrides or extends the styles applied to the component.
      * @default null

package/lib/cjs/components/Course/CreatePlaceholder.js

@@ -51,9 +51,9 @@ function CourseCreatePlaceholder(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    const { CreateCourseButtonComponentProps = {}, className } = props, rest = tslib_1.__rest(props, ["CreateCourseButtonComponentProps", "className"]);
     // HOOK
     const { preferences } = (0, react_core_1.useSCPreferences)();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, Object.assign({}, CreateCourseButtonComponentProps)) }))] })));
 }
 exports.default = CourseCreatePlaceholder;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const types_1 = require("@selfcommunity/types");
 const react_intl_1 = require("react-intl");
 const constants_1 = require("./constants");
 const react_1 = require("react");
@@ -30,12 +31,13 @@ function HeaderCourseDashboard(props) {
         }
     }, [course, hasAction]);
     const iconData = (0, react_1.useMemo)(() => {
+        const underId = (course === null || course === void 0 ? void 0 : course.privacy) === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course === null || course === void 0 ? void 0 : course.privacy;
         return [
             {
                 id: 'ui.course.label',
                 icon: 'public',
                 key: 'privacy',
-                underId: `ui.course.privacy.${course === null || course === void 0 ? void 0 : course.privacy}`
+                underId: `ui.course.privacy.${underId}`
             },
             {
                 id: 'ui.course.type',

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

@@ -28,6 +28,7 @@ const classes = {
     root: `${constants_1.PREFIX}-root`,
     studentContainer: `${constants_1.PREFIX}-student-container`,
     userWrapper: `${constants_1.PREFIX}-user-wrapper`,
+    actionsWrapper: `${constants_1.PREFIX}-actions-wrapper`,
     user: `${constants_1.PREFIX}-user`,
     avatar: `${constants_1.PREFIX}-avatar`,
     progress: `${constants_1.PREFIX}-progress`,
@@ -112,12 +113,12 @@ function Student(inProps) {
         if (!scCourse) {
             return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "160px", height: "28px" });
         }
-        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ sx: { flexDirection: 'row', gap: '5px' } }, { 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) &&
+        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.privacy !== types_1.SCCoursePrivacyType.PRIVATE) &&
                     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.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || 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]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [scCourse ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", className: classes.avatar })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: scCourse ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.role }))] })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "105px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "74px", height: "21px" })] })) })] })), actionButton] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.CREATOR ||
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, classes.studentContainer, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.user }, { children: [scCourse ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", className: classes.avatar })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: scCourse ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })), (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.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "105px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "74px", height: "21px" })] })) })] })), actionButton] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), ((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 ||
                 (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.JOINED ||
                 (scCourse === null || scCourse === void 0 ? void 0 : scCourse.privacy) !== types_1.SCCoursePrivacyType.PRIVATE) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.box }, { children: scCourse ? (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", height: "130px" }) }))] })), ((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) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.box }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.percentageWrapper }, { children: scCourse ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(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.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), (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.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "168px", height: "19px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "108px", height: "19px" })] })) })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) === 100 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.completedWrapper, classes.margin) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [scCourse ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {

package/lib/cjs/components/CourseDashboard/Teacher.d.ts

@@ -1,11 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { CourseDashboardPage } from './types';
 import { SCCourseType } from '@selfcommunity/types';
 export interface TeacherCourseDashboardProps {
     courseId?: number;
     course?: SCCourseType;
-    page: CourseDashboardPage;
-    onTabChange: (page: CourseDashboardPage) => void;
     className?: HTMLAttributes<HTMLDivElement>['className'];
     [p: string]: any;
 }

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

@@ -43,15 +43,14 @@ function Teacher(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { courseId, course, page, onTabChange, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "page", "onTabChange", "className"]);
+    const { courseId, course, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "className"]);
     // STATES
-    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum[`${page.toUpperCase()}`]);
+    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum.STUDENTS);
     // HOOKS
     const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.DASHBOARD } });
     // HANDLERS
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
         setTabValue(newTabValue);
-        onTabChange(types_1.TabContentEnum[newTabValue]);
     }, [setTabValue]);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { course: scCourse, hasAction: true }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoWrapper }, { children: [(0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: "first" }), (0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: "second" })] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classes.tab }, i))) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentEnum.STUDENTS }, { children: (0, jsx_runtime_1.jsx)(Students_1.default, { course: scCourse }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentEnum.COMMENTS }, { children: (0, jsx_runtime_1.jsx)(Comments_1.default, { course: scCourse }) }))] }))] })));
 }

package/lib/cjs/components/CourseDashboard/types.d.ts

@@ -1,24 +1,5 @@
-export declare type CourseDashboardPage = 'students' | 'comments';
 export declare type TabContentType = '1' | '2';
 export declare enum TabContentEnum {
     STUDENTS = "1",
     COMMENTS = "2"
 }
-declare type LessonsUserType = {
-    id: number;
-    name: string;
-    avatar: string;
-    date: string;
-    comment: string;
-};
-declare type CommentsLessonType = {
-    id: number;
-    name: string;
-    users: LessonsUserType[];
-};
-export declare type CommentsType = {
-    total: number;
-    next: boolean;
-    lessons: CommentsLessonType[];
-};
-export {};

package/lib/cjs/components/CourseForm/CourseForm.d.ts

@@ -1,8 +1,8 @@
 import { BoxProps } from '@mui/material';
 import { SCCourseType } from '@selfcommunity/types';
 export declare enum SCCourseFormStepType {
-    ONE = "one",
-    TWO = "two"
+    GENERAL = "general",
+    CUSTOMIZATION = "customization"
 }
 export interface CourseFormProps extends BoxProps {
     /**
@@ -22,7 +22,7 @@ export interface CourseFormProps extends BoxProps {
     onSuccess?: (data: SCCourseType) => void;
     /**
      * step name
-     * @default `SCCourseFormStepType.ONE`
+     * @default `SCCourseFormStepType.GENERAL`
      */
     step?: SCCourseFormStepType;
     /**

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -65,8 +65,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 })(() => ({}));
 var SCCourseFormStepType;
 (function (SCCourseFormStepType) {
-    SCCourseFormStepType["ONE"] = "one";
-    SCCourseFormStepType["TWO"] = "two";
+    SCCourseFormStepType["GENERAL"] = "general";
+    SCCourseFormStepType["CUSTOMIZATION"] = "customization";
 })(SCCourseFormStepType = exports.SCCourseFormStepType || (exports.SCCourseFormStepType = {}));
 /**
  *> API documentation for the Community-JS  Course Form component. Learn about the available props and the CSS API.
@@ -109,7 +109,7 @@ function CourseForm(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.ONE } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step"]);
+    const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.GENERAL } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step"]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     const initialFieldState = {
@@ -254,20 +254,20 @@ function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === SCCourseFormStepType.ONE ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.ONE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.TWO && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                         endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                     }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                                         endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
-                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.ONE
+                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
-                                    : _step === SCCourseFormStepType.TWO &&
+                                    : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||
                                             Object.keys(error).length !== 0 ||
                                             field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ||
-                                            field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.ONE
-                                    ? () => handleChangeStep(SCCourseFormStepType.TWO)
+                                            field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.GENERAL
+                                    ? () => handleChangeStep(SCCourseFormStepType.CUSTOMIZATION)
                                     : field.privacy !== types_1.SCCoursePrivacyType.DRAFT && course.privacy === types_1.SCCoursePrivacyType.DRAFT
                                         ? () => setOpenDialog(true)
-                                        : handleSubmit, color: "primary" }, { children: course ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.ONE ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })), openDialog && (0, jsx_runtime_1.jsx)(Dialog_1.default, { onSubmit: handleSubmit, onClose: handleClose })] }));
+                                        : handleSubmit, color: "primary" }, { children: course ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.GENERAL ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })), openDialog && (0, jsx_runtime_1.jsx)(Dialog_1.default, { onSubmit: handleSubmit, onClose: handleClose })] }));
 }
 exports.default = CourseForm;

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js

@@ -43,7 +43,7 @@ function CourseFormDialog(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, CourseFormComponentProps = { step: CourseForm_2.SCCourseFormStepType.ONE } } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
+    const { className, open = true, onClose, CourseFormComponentProps = { step: CourseForm_2.SCCourseFormStepType.GENERAL } } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
     const handleSuccess = (0, react_1.useCallback)((course) => {
         var _a;
         (_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);

package/lib/cjs/components/Courses/Courses.d.ts

@@ -2,6 +2,7 @@ import { GridProps } from '@mui/material';
 import React from 'react';
 import { CourseProps, CourseSkeletonProps } from '../Course';
 import { CoursesSkeletonProps } from '../Courses/Skeleton';
+import { CreateCourseButtonProps } from '../CreateCourseButton';
 export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 }, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -31,6 +32,11 @@ export interface CoursesProps {
      * @default {}
      */
     CoursesSkeletonComponentProps?: CoursesSkeletonProps;
+    /**
+     * Props to spread to CreateCourseButton component
+     * @default {}
+     */
+    CreateCourseButtonComponentProps?: CreateCourseButtonProps;
     /**
      * Props spread to grid container
      * @default {}

package/lib/cjs/components/Courses/Courses.js

@@ -88,7 +88,7 @@ function Courses(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, CourseComponentProps = {}, CoursesSkeletonComponentProps = {}, CourseSkeletonComponentProps = { template: course_1.SCCourseTemplateType.PREVIEW }, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = true, filters } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "CourseComponentProps", "CoursesSkeletonComponentProps", "CourseSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters"]);
+    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, CourseComponentProps = {}, CoursesSkeletonComponentProps = {}, CourseSkeletonComponentProps = { template: course_1.SCCourseTemplateType.PREVIEW }, CreateCourseButtonComponentProps = {}, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = true, filters } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "CourseComponentProps", "CoursesSkeletonComponentProps", "CourseSkeletonComponentProps", "CreateCourseButtonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters"]);
     // STATE
     const [courses, setCourses] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -224,7 +224,7 @@ function Courses(inProps) {
                                 // @ts-expect-error this is needed to use showForMe into SCCourses
                                 showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick, 
                                 // @ts-expect-error this is needed to use showForMe into SCCourses
-                                showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, {}) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
+                                showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -84,6 +84,14 @@ function LiveStreamSelector(inProps) {
         react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_2.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_2.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_2.SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
     const intl = (0, react_intl_1.useIntl)();
     const options = [
         {
@@ -157,11 +165,11 @@ function LiveStreamSelector(inProps) {
     }, []);
     const warning = (0, react_1.useMemo)(() => {
         let _message;
-        if (isFreeTrialTier && isCommunityOwner) {
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
-                    link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: constants_2.SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {

package/lib/cjs/components/EditCourse/Customize.js

@@ -30,6 +30,6 @@ function Customize(props) {
     if (!course) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return (0, jsx_runtime_1.jsx)(CourseForm_1.default, { course: course, step: CourseForm_2.SCCourseFormStepType.TWO, onSuccess: handleSuccess, onError: handleError });
+    return (0, jsx_runtime_1.jsx)(CourseForm_1.default, { course: course, step: CourseForm_2.SCCourseFormStepType.CUSTOMIZATION, onSuccess: handleSuccess, onError: handleError });
 }
 exports.default = (0, react_1.memo)(Customize);

package/lib/cjs/components/LiveStreamForm/LiveStreamForm.js

@@ -87,7 +87,6 @@ function LiveStreamForm(inProps) {
     });
     const { className, onSuccess, onError, liveStream = null } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "liveStream"]);
     // HOOKS
-    const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
     const { preferences } = (0, react_core_1.useSCPreferences)();
     const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
@@ -95,6 +94,14 @@ function LiveStreamForm(inProps) {
         react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_1.SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
     const intl = (0, react_intl_1.useIntl)();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -191,11 +198,11 @@ function LiveStreamForm(inProps) {
     }, [setField]);
     const warning = (0, react_1.useMemo)(() => {
         let _message;
-        if (isFreeTrialTier && isCommunityOwner) {
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
-                    link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: constants_2.SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON) {

package/lib/cjs/components/LiveStreamForm/LiveStreamFormSettings.js

@@ -63,6 +63,11 @@ function LiveStreamSettingsForm(inProps) {
         features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
         react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const liveStreamVideoConferenceEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED].value, [preferences, features]);
     const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
     const isCommunityOwner = (0, react_1.useMemo)(() => authUserId === 1, [authUserId]);
     const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
@@ -73,7 +78,7 @@ function LiveStreamSettingsForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), isEnterpriseFeaturesVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
                             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
                         } }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { textWrap: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) }))] }) }), f))) }))] }))] })));
 }

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

@@ -40,8 +40,8 @@ function AccordionLessons(inProps) {
     if (!course) {
         return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.accordion }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.summary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "210px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "54px", height: "21px" })] })) })) })));
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: (_a = course.sections) === null || _a === void 0 ? void 0 : _a.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))) })));
+    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" }) }))) }));
 }
 exports.default = AccordionLessons;

package/lib/esm/components/Course/CreatePlaceholder.d.ts

@@ -1,5 +1,11 @@
 import { WidgetProps } from '../Widget';
+import { CreateCourseButtonProps } from '../CreateCourseButton';
 export interface CourseSkeletonProps extends WidgetProps {
+    /**
+     * Props to spread to CreateCourseButton component
+     * @default {}
+     */
+    CreateCourseButtonComponentProps?: CreateCourseButtonProps;
     /**
      * Overrides or extends the styles applied to the component.
      * @default null

package/lib/esm/components/Course/CreatePlaceholder.js

@@ -49,8 +49,8 @@ export default function CourseCreatePlaceholder(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { CreateCourseButtonComponentProps = {}, className } = props, rest = __rest(props, ["CreateCourseButtonComponentProps", "className"]);
     // HOOK
     const { preferences } = useSCPreferences();
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateCourseButton, {}) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateCourseButton, Object.assign({}, CreateCourseButtonComponentProps)) }))] })));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Icon, Skeleton, Stack, Typography } from '@mui/material';
+import { SCCoursePrivacyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { PREFIX } from './constants';
 import { memo, useMemo } from 'react';
@@ -28,12 +29,13 @@ function HeaderCourseDashboard(props) {
         }
     }, [course, hasAction]);
     const iconData = useMemo(() => {
+        const underId = (course === null || course === void 0 ? void 0 : course.privacy) === SCCoursePrivacyType.DRAFT ? 'draft' : course === null || course === void 0 ? void 0 : course.privacy;
         return [
             {
                 id: 'ui.course.label',
                 icon: 'public',
                 key: 'privacy',
-                underId: `ui.course.privacy.${course === null || course === void 0 ? void 0 : course.privacy}`
+                underId: `ui.course.privacy.${underId}`
             },
             {
                 id: 'ui.course.type',

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

@@ -26,6 +26,7 @@ const classes = {
     root: `${PREFIX}-root`,
     studentContainer: `${PREFIX}-student-container`,
     userWrapper: `${PREFIX}-user-wrapper`,
+    actionsWrapper: `${PREFIX}-actions-wrapper`,
     user: `${PREFIX}-user`,
     avatar: `${PREFIX}-avatar`,
     progress: `${PREFIX}-progress`,
@@ -110,12 +111,12 @@ function Student(inProps) {
         if (!scCourse) {
             return _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "160px", height: "28px" });
         }
-        return (_jsxs(Stack, Object.assign({ sx: { flexDirection: 'row', gap: '5px' } }, { 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) &&
+        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.privacy !== SCCoursePrivacyType.PRIVATE) &&
                     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.privacy === SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || 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]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [scCourse ? (_jsx(Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username })) : (_jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.avatar })), _jsx(Box, { children: scCourse ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.role }))] })) : (_jsxs(Fragment, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "105px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "74px", height: "21px" })] })) })] })), actionButton] })), _jsx(Divider, {}), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.CREATOR ||
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.studentContainer, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.user }, { children: [scCourse ? (_jsx(Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username })) : (_jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.avatar })), _jsx(Box, { children: scCourse ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })) : (_jsxs(Fragment, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "105px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "74px", height: "21px" })] })) })] })), actionButton] })), _jsx(Divider, {}), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.CREATOR ||
                 (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.privacy) !== SCCoursePrivacyType.PRIVATE) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classes.box }, { children: scCourse ? _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.description })) : _jsx(Skeleton, { animation: "wave", variant: "text", height: "130px" }) }))] })), ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.MANAGER || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.JOINED) && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsx(Stack, Object.assign({ className: classes.percentageWrapper }, { children: scCourse ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })) : (_jsxs(Fragment, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "168px", height: "19px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "108px", height: "19px" })] })) })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate })] })), (scCourse === null || scCourse === void 0 ? void 0 : scCourse.user_completion_rate) === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classes.margin }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [scCourse ? (_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {

package/lib/esm/components/CourseDashboard/Teacher.d.ts

@@ -1,11 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { CourseDashboardPage } from './types';
 import { SCCourseType } from '@selfcommunity/types';
 export interface TeacherCourseDashboardProps {
     courseId?: number;
     course?: SCCourseType;
-    page: CourseDashboardPage;
-    onTabChange: (page: CourseDashboardPage) => void;
     className?: HTMLAttributes<HTMLDivElement>['className'];
     [p: string]: any;
 }

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

@@ -41,15 +41,14 @@ function Teacher(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { courseId, course, page, onTabChange, className } = props, rest = __rest(props, ["courseId", "course", "page", "onTabChange", "className"]);
+    const { courseId, course, className } = props, rest = __rest(props, ["courseId", "course", "className"]);
     // STATES
-    const [tabValue, setTabValue] = useState(TabContentEnum[`${page.toUpperCase()}`]);
+    const [tabValue, setTabValue] = useState(TabContentEnum.STUDENTS);
     // HOOKS
     const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.DASHBOARD } });
     // HANDLERS
     const handleTabChange = useCallback((_evt, newTabValue) => {
         setTabValue(newTabValue);
-        onTabChange(TabContentEnum[newTabValue]);
     }, [setTabValue]);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse, hasAction: true }), _jsxs(Stack, Object.assign({ className: classes.infoWrapper }, { children: [_jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: "first" }), _jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: "second" })] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classes.tab }, i))) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentEnum.STUDENTS }, { children: _jsx(Students, { course: scCourse }) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentEnum.COMMENTS }, { children: _jsx(Comments, { course: scCourse }) }))] }))] })));
 }