@selfcommunity/react-ui 0.11.0-alpha.6 → 0.11.0-alpha.61

package/lib/esm/components/CreateCourseButton/CreateCourseButton.js

@@ -0,0 +1,78 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
+import { SCFeatureName } from '@selfcommunity/types';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import CourseFormDialog from '../CourseFormDialog';
+const PREFIX = 'SCCreateCourseButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateCourseButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateCourseButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateCourseButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateCourseButton(inProps) {
+    var _a;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CourseFormDialogComponentProps = {}, children } = props, rest = __rest(props, ["className", "CourseFormDialogComponentProps", "children"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // STATE
+    const [open, setOpen] = React.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = useSCPreferences();
+    const coursesEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
+    const onlyStaffEnabled = useMemo(() => { var _a; return (_a = preferences[SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
+    const canCreateCourse = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    /**
+     * Handle click on button
+     */
+    const handleClick = () => {
+        setOpen((o) => !o);
+    };
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!coursesEnabled || (!canCreateCourse && onlyStaffEnabled) || !authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", color: "primary", startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createCourseButton", defaultMessage: "ui.createCourseButton" }) })), open && _jsx(CourseFormDialog, Object.assign({}, CourseFormDialogComponentProps, { open: true, onClose: handleClick }))] }));
+}

package/lib/esm/components/CreateCourseButton/index.d.ts

@@ -0,0 +1,3 @@
+import CreateCourseButton, { CreateCourseButtonProps } from './CreateCourseButton';
+export default CreateCourseButton;
+export { CreateCourseButtonProps };

package/lib/esm/components/CreateCourseButton/index.js

@@ -0,0 +1,2 @@
+import CreateCourseButton from './CreateCourseButton';
+export default CreateCourseButton;

package/lib/esm/components/CreateEventButton/CreateEventButton.d.ts

@@ -7,7 +7,7 @@ export interface CreateEventButtonProps extends ButtonProps {
      */
     className?: string;
     /**
-     * Props to spread to CreateGroup component
+     * Props to spread to CreateEvent component
      * @default empty object
      */
     EventFormDialogComponentProps?: EventFormDialogProps;

package/lib/esm/components/CreateEventButton/CreateEventButton.js

@@ -16,7 +16,7 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.

package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.d.ts

@@ -1,5 +1,4 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
 export interface CreateLiveStreamButtonProps extends ButtonProps {
     /**
@@ -12,11 +11,6 @@ export interface CreateLiveStreamButtonProps extends ButtonProps {
      * @default empty object
      */
     CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
-    /**
-     * On success callback function
-     * @default null
-     */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
     /**
      * Any other properties
      */

package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -43,7 +43,7 @@ export default function CreateLiveStreamButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CreateLiveStreamDialogComponentProps = {}, onSuccess, children } = props, rest = __rest(props, ["className", "CreateLiveStreamDialogComponentProps", "onSuccess", "children"]);
+    const { className, CreateLiveStreamDialogComponentProps = {}, children } = props, rest = __rest(props, ["className", "CreateLiveStreamDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const { preferences, features } = useSCPreferences();
@@ -69,13 +69,6 @@ export default function CreateLiveStreamButton(inProps) {
     const handleClose = () => {
         setOpen((o) => !o);
     };
-    /**
-     * Handle close
-     */
-    const handleSuccess = (data) => {
-        onSuccess && onSuccess(data);
-        setOpen((o) => !o);
-    };
     /**
      * If there's no authUserId, component is hidden.
      */
@@ -85,5 +78,5 @@ export default function CreateLiveStreamButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "movie" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose }, CreateLiveStreamDialogComponentProps))] }));
 }

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts

@@ -1,5 +1,6 @@
-import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
+import { EventFormProps } from '../EventForm';
+import { LiveStreamFormProps } from '../LiveStreamForm';
 export interface CreateLiveStreamDialogProps extends BaseDialogProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -17,10 +18,15 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
      */
     onClose?: () => void;
     /**
-     * On success callback function
-     * @default null
+     * Props to spread to EventForm component
+     * @default {}
+     */
+    EventFormComponentProps?: EventFormProps;
+    /**
+     * Props to spread to LiveStreamForm component
+     * @default {}
      */
-    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    LiveStreamFormComponentProps?: LiveStreamFormProps;
     /**
      * Any other properties
      */

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -23,10 +23,11 @@ const classes = {
 const Root = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({
+})(() => ({
     paddingBottom: '0px !important',
     [`& .${classes.title}`]: {
-        display: 'flex'
+        display: 'flex',
+        alignItems: 'center'
     },
     [`& .${classes.content}`]: {
         paddingBottom: 0
@@ -56,20 +57,21 @@ const Transition = React.forwardRef(function Transition(props, ref) {
  * @param inProps
  */
 export default function CreateLiveStreamDialog(inProps) {
-    var _a, _b;
+    var _a;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
+    const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
-    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    // PERMISSION
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     // STATE
     const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
     const [liveType, setLiveType] = useState(canCreateEvent ? null : LiveStreamType.DIRECT_LIVE);
+    const canShowBackButton = useMemo(() => step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent, [step, canCreateEvent]);
     // HANDLER
     const handleLiveTypeSelected = useCallback((l) => {
         setLiveType(l);
@@ -78,23 +80,27 @@ export default function CreateLiveStreamDialog(inProps) {
         setLiveType(l);
         setStep(CreateLiveStreamStep.CREATE_LIVE);
     }, []);
-    const handleBack = useCallback((l) => {
+    const handleBack = useCallback(() => {
         setStep(CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = useCallback((e) => {
-        onSuccess && onSuccess(e);
-    }, []);
+        var _a, _b;
+        liveType === LiveStreamType.EVENT_LIVE
+            ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
+            : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
     useEffect(() => {
         if (!canCreateEvent) {
             setLiveType(LiveStreamType.DIRECT_LIVE);
         }
     }, [canCreateEvent]);
     // user must be logged
-    if (!scUserContext.user || !canCreateLiveStream) {
+    if (!scUserContext.user) {
         return null;
     }
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : (_jsx(LiveStreamForm, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }

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

@@ -12,8 +12,8 @@ import LiveImage from '../../../assets/liveStream/live';
 import { LiveStreamApiClient } from '@selfcommunity/api-services';
 import { WARNING_THRESHOLD_EXPIRING_SOON } from '../../LiveStreamRoom/constants';
 import { Link, SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
-import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
-import { SELFCOMMUNITY_PRICING } from '../../PlatformWidget/constants';
+import { SCCommunityEnvironment, SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import { HUB_PROD, HUB_STAGE } from '../../PlatformWidget/constants';
 export const PREFIX = 'SCLiveStreamSelector';
 const classes = {
     root: `${PREFIX}-root`,
@@ -80,6 +80,14 @@ export default function LiveStreamSelector(inProps) {
         SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
         preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = useMemo(() => preferences &&
+        SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[SCPreferences.STATIC_ENVIRONMENT].value === SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = useMemo(() => preferences && SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[SCPreferences.STATIC_STACKID].value, [preferences]);
     const intl = useIntl();
     const options = [
         {
@@ -153,11 +161,11 @@ export default function LiveStreamSelector(inProps) {
     }, []);
     const warning = useMemo(() => {
         let _message;
-        if (isFreeTrialTier && isCommunityOwner) {
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = (_jsx(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) => _jsx(Link, Object.assign({ to: SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                    link: (...chunks) => (_jsx(Link, Object.assign({ target: "_blank", to: `${isStage ? HUB_STAGE : HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {

package/lib/esm/components/EditCourse/Customize.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SCCourseType } from '@selfcommunity/types';
+interface CustomizeProps {
+    course: SCCourseType;
+    setCourse: (course: SCCourseType) => void;
+}
+declare function Customize(props: CustomizeProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Customize>;
+export default _default;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CourseForm from '../CourseForm';
+import { memo, useCallback } from 'react';
+import { useSnackbar } from 'notistack';
+import { FormattedMessage } from 'react-intl';
+import { SCCourseFormStepType } from '../../constants/Course';
+function Customize(props) {
+    // PROPS
+    const { course, setCourse } = props;
+    // HOOKS
+    const { enqueueSnackbar } = useSnackbar();
+    // HANDLERS
+    const handleSuccess = useCallback((data) => {
+        setCourse(Object.assign(Object.assign({}, course), data));
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.customize.snackbar.save", defaultMessage: "ui.editCourse.tab.customize.snackbar.save" }), {
+            variant: 'success',
+            autoHideDuration: 3000
+        });
+    }, [course]);
+    const handleError = useCallback(() => {
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    }, []);
+    return _jsx(CourseForm, { course: course, step: SCCourseFormStepType.CUSTOMIZATION, onSuccess: handleSuccess, onError: handleError });
+}
+export default memo(Customize);

package/lib/esm/components/EditCourse/EditCourse.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseEditTabType } from '../../types/course';
+export interface EditCourseProps {
+    courseId?: number;
+    course?: SCCourseType;
+    tab?: SCCourseEditTabType;
+    onTabChange?: (tab: SCCourseEditTabType) => void;
+    onTabSelect?: (tab: SCCourseEditTabType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    [p: string]: any;
+}
+export default function EditCourse(inProps: EditCourseProps): JSX.Element;

package/lib/esm/components/EditCourse/EditCourse.js

@@ -0,0 +1,107 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, IconButton, Stack, styled, Tab, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
+import { PREFIX } from './constants';
+import { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { FormattedMessage } from 'react-intl';
+import Lessons from './Lessons';
+import Customize from './Customize';
+import Users from './Users';
+import Options from './Options';
+import { SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
+import { CourseInfoViewType } from '@selfcommunity/api-services';
+import Requests from './Requests';
+import { SCCourseEditTabType } from '../../types/course';
+import EditCourseSkeleton from './Skeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    tabList: `${PREFIX}-tab-list`,
+    tab: `${PREFIX}-tab`,
+    tabPanel: `${PREFIX}-tab-panel`,
+    contrastColor: `${PREFIX}-contrast-color`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.editCourse.tab.lessons',
+        value: SCCourseEditTabType.LESSONS
+    },
+    {
+        label: 'ui.editCourse.tab.customize',
+        value: SCCourseEditTabType.CUSTOMIZE
+    },
+    {
+        label: 'ui.editCourse.tab.users',
+        value: SCCourseEditTabType.USERS
+    },
+    {
+        label: 'ui.editCourse.tab.requests',
+        value: SCCourseEditTabType.REQUESTS
+    },
+    {
+        label: 'ui.editCourse.tab.options',
+        value: SCCourseEditTabType.OPTIONS
+    }
+];
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+export default function EditCourse(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { courseId, course, tab = SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = __rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = useState(tab);
+    // CONTEXTS
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.EDIT } });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleTabChange = useCallback((_e, newTabValue) => {
+        if (onTabSelect) {
+            onTabSelect(newTabValue);
+        }
+        else {
+            setTabValue(newTabValue);
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
+        }
+    }, [setTabValue, onTabChange, onTabSelect]);
+    // MEMOS
+    const panelData = useMemo(() => {
+        return [
+            {
+                value: SCCourseEditTabType.LESSONS,
+                children: _jsx(Lessons, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.CUSTOMIZE,
+                children: _jsx(Customize, { course: scCourse, setCourse: setSCCourse })
+            },
+            {
+                value: SCCourseEditTabType.USERS,
+                children: _jsx(Users, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.REQUESTS,
+                children: _jsx(Requests, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: SCCourseEditTabType.OPTIONS,
+                children: _jsx(Options, { course: scCourse, setCourse: setSCCourse })
+            }
+        ];
+    }, [scCourse, handleTabChange]);
+    if (!scCourse) {
+        return _jsx(EditCourseSkeleton, { tab: tab });
+    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { 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: classNames(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+}

package/lib/esm/components/EditCourse/Lessons/AddButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material';
+interface AddButtonProps extends ButtonProps {
+    label: string;
+    handleAddRow: () => void;
+}
+declare function AddButton(props: AddButtonProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AddButton>;
+export default _default;

package/lib/esm/components/EditCourse/Lessons/AddButton.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../constants';
+import classNames from 'classnames';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../../constants/PubSub';
+import { Fragment, memo, useCallback } from 'react';
+const classes = {
+    sectionButton: `${PREFIX}-section-button`,
+    sectionButtonTypography: `${PREFIX}-section-button-typography`
+};
+function AddButton(props) {
+    // PROPS
+    const { label, handleAddRow, className } = props, rest = __rest(props, ["label", "handleAddRow", "className"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleClick = useCallback(() => {
+        handleAddRow();
+        PubSub.publish(`${SCTopicType.COURSE}.${SCGroupEventType.UPDATE}`, true);
+    }, [handleAddRow]);
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: handleClick }, { children: _jsx(Icon, { children: "add_circle_outline" }) }))) : (_jsx(Button, Object.assign({ className: classNames(classes.sectionButton, className), size: "small", startIcon: _jsx(Icon, { children: "add_circle_outline" }), onClick: handleClick }, rest, { children: _jsx(Typography, Object.assign({ className: classes.sectionButtonTypography, variant: "body1" }, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })) }))) }));
+}
+export default memo(AddButton);

package/lib/esm/components/EditCourse/Lessons/ChangeLessonStatus.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
+import { ActionLessonType } from '../types';
+interface ChangeLessonStatusProps {
+    course: SCCourseType;
+    section: SCCourseSectionType;
+    lesson: SCCourseLessonType;
+    onChange: (lesson: SCCourseLessonType, type: ActionLessonType) => void;
+    disabled?: boolean;
+}
+declare function ChangeLessonStatus(props: ChangeLessonStatusProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ChangeLessonStatus>;
+export default _default;

package/lib/esm/components/EditCourse/Lessons/ChangeLessonStatus.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../constants';
+import MenuRow from '../MenuRow';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
+import { useSnackbar } from 'notistack';
+import { SCCourseLessonStatusType } from '@selfcommunity/types';
+import { CourseService } from '@selfcommunity/api-services';
+import { ActionLessonType } from '../types';
+const OPTIONS = [
+    {
+        id: 'ui.editCourse.tab.lessons.table.select.draft',
+        value: 'ui.editCourse.tab.lessons.table.select.draft'
+    },
+    {
+        id: 'ui.editCourse.tab.lessons.table.select.published',
+        value: 'ui.editCourse.tab.lessons.table.select.published'
+    }
+];
+const classes = {
+    changeLessonStatusPublishedWrapper: `${PREFIX}-change-lesson-status-published-wrapper`,
+    changeLessonStatusIconDraft: `${PREFIX}-change-lesson-status-icon-draft`
+};
+function ChangeLessonStatus(props) {
+    // PROPS
+    const { course, section, lesson, onChange, disabled } = props;
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { enqueueSnackbar } = useSnackbar();
+    // STATES
+    const [value, setValue] = useState('');
+    const [loading, setLoading] = useState(false);
+    // EFFECTS
+    useEffect(() => {
+        setValue(`ui.editCourse.tab.lessons.table.select.${lesson.status || 'draft'}`);
+    }, [lesson, setValue]);
+    // MEMOS
+    const hasPublished = useMemo(() => value === 'ui.editCourse.tab.lessons.table.select.published', [value]);
+    const icon = useMemo(() => value === 'ui.editCourse.tab.lessons.table.select.draft' ? (_jsx(Box, { className: classes.changeLessonStatusIconDraft })) : (_jsx(Icon, { children: "circle_checked" })), [value]);
+    // HANDLERS
+    const handleAction = useCallback((newValue) => {
+        setLoading(true);
+        const newStatus = newValue.endsWith(SCCourseLessonStatusType.DRAFT) ? SCCourseLessonStatusType.DRAFT : SCCourseLessonStatusType.PUBLISHED;
+        const data = {
+            status: newStatus
+        };
+        CourseService.patchCourseLesson(course.id, section.id, lesson.id, data)
+            .then(() => {
+            setValue(newValue);
+            setLoading(false);
+            onChange(Object.assign(Object.assign({}, lesson), { status: newStatus }), ActionLessonType.UPDATE);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.save", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.save" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, section, lesson, setLoading, setValue]);
+    const handleChange = useCallback((e) => handleAction(e.target.value), [handleAction]);
+    const handleClick = useCallback((e) => {
+        const newValue = e.currentTarget.getAttribute('data-value');
+        if (newValue !== value) {
+            handleAction(newValue);
+        }
+    }, [handleAction, value]);
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
+                        padding: 0,
+                        ':hover': {
+                            backgroundColor: 'unset'
+                        }
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                        padding: 0,
+                        ':hover': {
+                            backgroundColor: 'unset'
+                        }
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
+}
+export default memo(ChangeLessonStatus);

package/lib/esm/components/EditCourse/Lessons/FieldName.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SCCourseSectionType } from '@selfcommunity/types';
+import { EndpointType } from '@selfcommunity/api-services';
+import { ActionLessonType } from '../types';
+interface FieldNameProps<T> {
+    endpoint: EndpointType;
+    row: T;
+    isNewRow: boolean;
+    handleManageRow: (section: SCCourseSectionType, type: ActionLessonType, newRow?: boolean) => void;
+    editMode: boolean;
+    handleDisableEditMode: () => void;
+}
+declare function FieldName<T extends SCCourseSectionType>(props: FieldNameProps<T>): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FieldName>;
+export default _default;