@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Errors_1 = require("../../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const CourseUsersTable_1 = tslib_1.__importDefault(require("../../../shared/CourseUsersTable"));
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const widget_1 = require("../../../utils/widget");
+const Pagination_1 = require("../../../constants/Pagination");
+const course_1 = require("../../../types/course");
+const headerCells = [
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.name'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.progress'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.registration'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.latestActivity'
+    },
+    {}
+];
+function Students(props) {
+    // PROPS
+    const { course, endpointQueryParams = { limit: 6, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET } } = props;
+    // STATES
+    const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
+        isLoadingNext: false,
+        next: null,
+        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.STUDENTS_PARTECIPANTS_COURSES_STATE_CACHE_PREFIX_KEY, course.id),
+        cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY,
+        visibleItems: endpointQueryParams.limit
+    }, widget_1.stateWidgetInitializer);
+    // HOOKS
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // CALLBACKS
+    const _init = (0, react_1.useCallback)(() => {
+        if (!state.initialized && !state.isLoadingNext) {
+            dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
+            api_services_1.CourseService.getCourseDashboardUsers(course.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+            })
+                .catch((error) => {
+                dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        let _t;
+        if (scUserContext.user) {
+            _t = setTimeout(_init);
+            return () => {
+                clearTimeout(_t);
+            };
+        }
+    }, [scUserContext.user, _init]);
+    return ((0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { state: state, dispatch: dispatch, course: course, endpointSearch: {
+            url: () => api_services_1.Endpoints.GetCourseDashboardUsers.url({ id: course.id }),
+            method: api_services_1.Endpoints.GetCourseDashboardUsers.method
+        }, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.DASHBOARD, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+}
+exports.default = (0, react_1.memo)(Students);

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+export interface TeacherCourseDashboardProps {
+    courseId?: number;
+    course?: SCCourseType;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    [p: string]: any;
+}
+declare function Teacher(inProps: TeacherCourseDashboardProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Teacher>;
+export default _default;

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const Header_1 = tslib_1.__importDefault(require("./Header"));
+const react_1 = require("react");
+const types_1 = require("./types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const Info_1 = tslib_1.__importDefault(require("./Teacher/Info"));
+const lab_1 = require("@mui/lab");
+const Students_1 = tslib_1.__importDefault(require("./Teacher/Students"));
+const Comments_1 = tslib_1.__importDefault(require("./Teacher/Comments"));
+const react_core_1 = require("@selfcommunity/react-core");
+const api_services_1 = require("@selfcommunity/api-services");
+const Skeleton_1 = tslib_1.__importDefault(require("./Teacher/Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    infoWrapper: `${constants_1.PREFIX}-info-wrapper`,
+    tabList: `${constants_1.PREFIX}-tab-list`,
+    tab: `${constants_1.PREFIX}-tab`,
+    tabPanel: `${constants_1.PREFIX}-tab-panel`,
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.course.dashboard.teacher.tab.students',
+        value: types_1.TabContentType.STUDENTS
+    },
+    {
+        label: 'ui.course.dashboard.teacher.tab.comments',
+        value: types_1.TabContentType.COMMENTS
+    }
+];
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function Teacher(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { courseId, course, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentType.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);
+    }, [setTabValue]);
+    if (!scCourse) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_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.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: types_1.InfoPositionType.FIRST }), (0, jsx_runtime_1.jsx)(Info_1.default, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: types_1.InfoPositionType.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: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: types_1.TabContentType.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.TabContentType.COMMENTS }, { children: (0, jsx_runtime_1.jsx)(Comments_1.default, { course: scCourse }) }))] }))] })));
+}
+exports.default = (0, react_1.memo)(Teacher);

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseDashboard";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseDashboard';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TeacherCourseDashboardProps } from './Teacher';
+import TeacherSkeleton from './Teacher/Skeleton';
+import { StudentCourseDashboardProps } from './Student';
+import StudentSkeleton from './Student/Skeleton';
+declare const _default: {
+    Teacher: import("react").MemoExoticComponent<(inProps: TeacherCourseDashboardProps) => JSX.Element>;
+    Student: import("react").MemoExoticComponent<(inProps: StudentCourseDashboardProps) => JSX.Element>;
+};
+export default _default;
+export { TeacherCourseDashboardProps, TeacherSkeleton, StudentCourseDashboardProps, StudentSkeleton };

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudentSkeleton = exports.TeacherSkeleton = void 0;
+const tslib_1 = require("tslib");
+const Teacher_1 = tslib_1.__importDefault(require("./Teacher"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Teacher/Skeleton"));
+exports.TeacherSkeleton = Skeleton_1.default;
+const Student_1 = tslib_1.__importDefault(require("./Student"));
+const Skeleton_2 = tslib_1.__importDefault(require("./Student/Skeleton"));
+exports.StudentSkeleton = Skeleton_2.default;
+exports.default = { Teacher: Teacher_1.default, Student: Student_1.default };

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

@@ -0,0 +1,8 @@
+export declare enum TabContentType {
+    STUDENTS = "students",
+    COMMENTS = "comments"
+}
+export declare enum InfoPositionType {
+    FIRST = "first",
+    SECOND = "second"
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPositionType = exports.TabContentType = void 0;
+var TabContentType;
+(function (TabContentType) {
+    TabContentType["STUDENTS"] = "students";
+    TabContentType["COMMENTS"] = "comments";
+})(TabContentType = exports.TabContentType || (exports.TabContentType = {}));
+var InfoPositionType;
+(function (InfoPositionType) {
+    InfoPositionType["FIRST"] = "first";
+    InfoPositionType["SECOND"] = "second";
+})(InfoPositionType = exports.InfoPositionType || (exports.InfoPositionType = {}));

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

@@ -0,0 +1,79 @@
+import { BoxProps } from '@mui/material';
+import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseFormStepType } from '../../constants/Course';
+export interface CourseFormProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCCourseType) => void;
+    /**
+     * step name
+     * @default `SCCourseFormStepType.GENERAL`
+     */
+    step?: SCCourseFormStepType;
+    /**
+     * On step change callback function
+     * @default null
+     */
+    onStepChange?: (step: SCCourseFormStepType, type: SCCourseType) => void;
+    /**
+     * On error callback function
+     * @default null
+     */
+    onError?: (error: any) => void;
+    /**
+     * Hide paywalls configuration
+     * @default false
+     */
+    hidePaywalls?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS  Course Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ | root                  | .SCCourseForm-root            | Styles applied to the root element.            |
+ | actions               | .SCCourseForm-actions         | Styles applied to the actions element.         |
+ | card                  | .SCCourseForm-card            | Styles applied to the card element.            |
+ | content               | .SCCourseForm-content         | Styles applied to the content element.         |
+ | cover                 | .SCCourseForm-cover           | Styles applied to the cover element.           |
+ | description           | .SCCourseForm-description     | Styles applied to the description element.     |
+ | error                 | .SCCourseForm-error           | Styles applied to the error element.           |
+ | form                  | .SCCourseForm-form            | Styles applied to the form element.            |
+ | frequency             | .SCCourseForm-frequency       | Styles applied to the frequency element.       |
+ | name                  | .SCCourseForm-name            | Styles applied to the name element.            |
+ | privacySection        | .SCCourseForm-privacy-section | Styles applied to the privacy section.         |
+ | privacySectionInfo    | .SCCourseForm-privacy-section-info | Styles applied to the privacy section info. |
+ | selected              | .SCCourseForm-selected        | Styles applied to the selected element.        |
+ | stepOne               | .SCCourseForm-step-one        | Styles applied to the step-one element.        |
+ | stepTwo               | .SCCourseForm-step-two        | Styles applied to the step-two element.        |
+ | title                 | .SCCourseForm-title           | Styles applied to the title element.           |
+
+ * @param inProps
+ */
+export default function CourseForm(inProps: CourseFormProps): JSX.Element;

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

@@ -0,0 +1,303 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const Errors_1 = require("../../constants/Errors");
+const PubSub_1 = require("../../constants/PubSub");
+const constants_1 = require("./constants");
+const UploadCourseCover_1 = tslib_1.__importDefault(require("./UploadCourseCover"));
+const Course_1 = require("../../constants/Course");
+const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
+const Edit_1 = tslib_1.__importDefault(require("./Edit"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const PaywallsConfigurator_1 = tslib_1.__importDefault(require("../PaywallsConfigurator"));
+const constants_2 = require("../PaywallsConfigurator/constants");
+const messages = (0, react_intl_1.defineMessages)({
+    name: {
+        id: 'ui.courseForm.name.placeholder',
+        defaultMessage: 'ui.courseForm.name.placeholder'
+    },
+    description: {
+        id: 'ui.courseForm.description.placeholder',
+        defaultMessage: 'ui.courseForm.description.placeholder'
+    },
+    categoryEmpty: {
+        id: 'ui.courseForm.category.placeholder.empty',
+        defaultMessage: 'ui.courseForm.category.placeholder.empty'
+    },
+    category: {
+        id: 'ui.courseForm.category.placeholder',
+        defaultMessage: 'ui.courseForm.category.placeholder'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    actions: `${constants_1.PREFIX}-actions`,
+    card: `${constants_1.PREFIX}-card`,
+    content: `${constants_1.PREFIX}-content`,
+    cover: `${constants_1.PREFIX}-cover`,
+    description: `${constants_1.PREFIX}-description`,
+    error: `${constants_1.PREFIX}-error`,
+    form: `${constants_1.PREFIX}-form`,
+    frequency: `${constants_1.PREFIX}-frequency`,
+    name: `${constants_1.PREFIX}-name`,
+    privacySection: `${constants_1.PREFIX}-privacy-section`,
+    privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
+    selected: `${constants_1.PREFIX}-selected`,
+    disabled: `${constants_1.PREFIX}-disabled`,
+    stepOne: `${constants_1.PREFIX}-step-one`,
+    stepTwo: `${constants_1.PREFIX}-step-two`,
+    stepCustomization: `${constants_1.PREFIX}-step-customization`,
+    cardTitle: `${constants_1.PREFIX}-card-title`,
+    title: `${constants_1.PREFIX}-title`,
+    contrastColor: `${constants_1.PREFIX}-contrast-color`,
+    paywallsConfiguratorWrap: `${constants_1.PREFIX}-paywalls-configurator-wrap`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS  Course Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ | root                  | .SCCourseForm-root            | Styles applied to the root element.            |
+ | actions               | .SCCourseForm-actions         | Styles applied to the actions element.         |
+ | card                  | .SCCourseForm-card            | Styles applied to the card element.            |
+ | content               | .SCCourseForm-content         | Styles applied to the content element.         |
+ | cover                 | .SCCourseForm-cover           | Styles applied to the cover element.           |
+ | description           | .SCCourseForm-description     | Styles applied to the description element.     |
+ | error                 | .SCCourseForm-error           | Styles applied to the error element.           |
+ | form                  | .SCCourseForm-form            | Styles applied to the form element.            |
+ | frequency             | .SCCourseForm-frequency       | Styles applied to the frequency element.       |
+ | name                  | .SCCourseForm-name            | Styles applied to the name element.            |
+ | privacySection        | .SCCourseForm-privacy-section | Styles applied to the privacy section.         |
+ | privacySectionInfo    | .SCCourseForm-privacy-section-info | Styles applied to the privacy section info. |
+ | selected              | .SCCourseForm-selected        | Styles applied to the selected element.        |
+ | stepOne               | .SCCourseForm-step-one        | Styles applied to the step-one element.        |
+ | stepTwo               | .SCCourseForm-step-two        | Styles applied to the step-two element.        |
+ | title                 | .SCCourseForm-title           | Styles applied to the title element.           |
+
+ * @param inProps
+ */
+function CourseForm(inProps) {
+    var _a, _b, _c, _d, _e;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, onSuccess, onError, course = null, step = Course_1.SCCourseFormStepType.GENERAL, hidePaywalls = false, onStepChange } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step", "hidePaywalls", "onStepChange"]);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    const initialFieldState = {
+        imageOriginal: (course === null || course === void 0 ? void 0 : course.image_bigger) || '',
+        imageOriginalFile: '',
+        name: (course === null || course === void 0 ? void 0 : course.name) || '',
+        type: (course === null || course === void 0 ? void 0 : course.type) || '',
+        description: course ? course.description : '',
+        categories: course ? course.categories : [],
+        privacy: course ? course.privacy : '',
+        products: ((_a = course === null || course === void 0 ? void 0 : course.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || [],
+        contentAccessType: ((_b = course === null || course === void 0 ? void 0 : course.paywalls) === null || _b === void 0 ? void 0 : _b.length) ? constants_2.ContentAccessType.PAID : constants_2.ContentAccessType.FREE,
+        isSubmitting: false
+    };
+    // STATE
+    const [field, setField] = (0, react_1.useState)(initialFieldState);
+    const [_step, setStep] = (0, react_1.useState)(step);
+    const [error, setError] = (0, react_1.useState)({});
+    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // PREFERENCES
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isStaff = (0, react_1.useMemo)(() => scUserContext.user && react_core_1.UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
+    const courseAdvancedEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
+    const _backgroundCover = Object.assign({}, (field.imageOriginal
+        ? { background: `url('${field.imageOriginal}') center / cover` }
+        : { background: `url('${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    const handleChangeCover = (0, react_1.useCallback)((cover) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginal']: reader.result })));
+        };
+        reader.readAsDataURL(cover);
+        if (error.imageOriginalError) {
+            delete error.imageOriginalError;
+            setError(error);
+        }
+    }, [error]);
+    /**
+     * Handles step change
+     * @param newStep
+     */
+    const handleChangeStep = (newStep) => {
+        setStep(newStep);
+        onStepChange(newStep, field.type);
+    };
+    /**
+     * Formats categories object to a specific format needed in the form body
+     * @param data
+     */
+    function convertToCategoriesObject(data) {
+        const categories = {};
+        data.forEach((category, index) => {
+            categories[`categories[${index}]`] = category.id;
+        });
+        return categories;
+    }
+    /**
+     * Handle change category
+     * @param categories
+     */
+    const handleOnChangeCategory = (categories) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['categories']: convertToCategoriesObject(categories) })));
+    };
+    /**
+     * Notify when a group info changed
+     * @param data
+     */
+    const notifyChanges = (0, react_1.useCallback)((data) => {
+        if (course) {
+            // Edit group
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.EDIT}`, data);
+        }
+        else {
+            // Create group
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.CREATE}`, data);
+        }
+    }, [course]);
+    /**
+     * Handles the form submission for create/update action
+     */
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        var _a;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
+        const formData = new FormData();
+        if (field.imageOriginalFile) {
+            formData.append('image_original', field.imageOriginalFile);
+        }
+        formData.append('name', field.name);
+        formData.append('description', field.description);
+        formData.append('type', field.type);
+        if (field.privacy) {
+            formData.append('privacy', field.privacy);
+        }
+        if (field.categories) {
+            for (const key in field.categories) {
+                formData.append(key, field.categories[key]);
+            }
+        }
+        if (field.products.length && field.contentAccessType === constants_2.ContentAccessType.PAID && (isStaff || (course && ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length)))) {
+            formData.append(`products`, JSON.stringify(field.products));
+        }
+        else {
+            formData.append(`products`, '[]');
+        }
+        let courseService;
+        if (course) {
+            courseService = api_services_1.CourseService.patchCourse(course.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        else {
+            courseService = api_services_1.CourseService.createCourse(formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        courseService
+            .then((data) => {
+            notifyChanges(data);
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        })
+            .catch((e) => {
+            const _error = (0, api_services_1.formatHttpErrorCode)(e);
+            if (Object.values(_error)[0]['error'] === 'unique') {
+                setError(Object.assign(Object.assign({}, error), { nameError: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
+            }
+            else {
+                setError(Object.assign(Object.assign({}, error), _error));
+            }
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        });
+    }, [course, field, onSuccess, onError, notifyChanges]);
+    /**
+     * Handles course fields change
+     */
+    const handleChange = (0, react_1.useCallback)((course) => {
+        const { name, value } = course.target;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        if (error[`${name}Error`]) {
+            delete error[`${name}Error`];
+            setError(error);
+        }
+    }, [setField, error]);
+    /**
+     * Handle change content access tyoe
+     * @param type
+     */
+    const handleChangeContentAccessType = (type) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { contentAccessType: type })));
+    };
+    /**
+     * Handle change payment products
+     * @param products
+     */
+    const handleChangePaymentsProducts = (products) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { products: products.map((product) => product.id) })));
+    };
+    /**
+     * Handles for closing confirm dialog
+     */
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpenDialog(false);
+    }, [setOpenDialog]);
+    /**
+     * 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 === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(react_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 }, { [classes.disabled]: !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF }) }, { 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.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", color: "warning", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), (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 === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { 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.jsxs)(material_1.FormGroup, Object.assign({ className: (0, classnames_1.default)(classes.form, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [(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, { isUploading: field.isSubmitting, 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((!!course && !field.name) || field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: !!course && !field.name ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : 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: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.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" }))) }), (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 }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (course && { contentId: course.id }), { contentType: types_1.SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
+                                    ? !field.type || Object.keys(error).length !== 0
+                                    : _step === Course_1.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 ||
+                                            (!!field.privacy && (!field.description || course.num_sections === 0 || course.num_lessons === 0))), variant: "contained", onClick: _step === Course_1.SCCourseFormStepType.GENERAL
+                                    ? () => handleChangeStep(Course_1.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 === Course_1.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/CourseForm/Dialog.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CoursePublicationDialogProps {
+    onSubmit: () => void;
+    onClose: () => void;
+}
+declare function CoursePublicationDialog(props: CoursePublicationDialogProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CoursePublicationDialog>;
+export default _default;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const react_1 = require("react");
+function CoursePublicationDialog(props) {
+    // PROPS
+    const { onSubmit, onClose } = props;
+    // HANDLERS
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        onSubmit();
+        onClose();
+    }, [onSubmit, onClose]);
+    return ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ open: true, DialogContentProps: { dividers: false }, onClose: onClose, title: (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.dialog.title", defaultMessage: "ui.courseForm.edit.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleSubmit }, { 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.courseForm.edit.dialog.btn", defaultMessage: "ui.courseForm.edit.dialog.btn" }) })) })) }, { 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.courseForm.edit.dialog.description", defaultMessage: "ui.courseForm.edit.dialog.description" }) })) })));
+}
+exports.default = (0, react_1.memo)(CoursePublicationDialog);

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

@@ -0,0 +1,24 @@
+import { BoxProps } from '@mui/material';
+import { SCCoursePrivacyType, SCCourseType } from '@selfcommunity/types';
+export interface CourseEditProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course: SCCourseType;
+    /**
+     * On privacy change callback function
+     * @default null
+     */
+    onPrivacyChange?: (privacy: SCCoursePrivacyType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function CourseEdit(inProps: CourseEditProps): JSX.Element;