@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
+const types_2 = require("./types");
+const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
+const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
+const material_1 = require("@mui/material");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    content: `${constants_1.PREFIX}-content`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({
+    paddingBottom: '0px !important',
+    [`& .${classes.title}`]: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    [`& .${classes.content}`]: {
+        paddingBottom: 0
+    }
+}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+});
+/**
+ *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+ |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
+
+ * @param inProps
+ */
+function CreateLiveStreamDialog(inProps) {
+    var _a, _b;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const canCreateLiveStream = (0, react_1.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 = (0, react_1.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]);
+    // STATE
+    const [step, setStep] = (0, react_1.useState)(canCreateEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
+    const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
+    const canShowBackButton = (0, react_1.useMemo)(() => step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateEvent, [step, canCreateEvent]);
+    // HANDLER
+    const handleLiveTypeSelected = (0, react_1.useCallback)((l) => {
+        setLiveType(l);
+    }, []);
+    const handleLiveTypeSelectedNext = (0, react_1.useCallback)((l) => {
+        setLiveType(l);
+        setStep(types_2.CreateLiveStreamStep.CREATE_LIVE);
+    }, []);
+    const handleBack = (0, react_1.useCallback)(() => {
+        setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
+    }, []);
+    const handleSubmit = (0, react_1.useCallback)((e) => {
+        onSuccess && onSuccess(e);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canCreateEvent) {
+            setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
+        }
+    }, [canCreateEvent]);
+    // user must be logged
+    if (!scUserContext.user || !canCreateLiveStream) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit })) }))] })) })));
+}
+exports.default = CreateLiveStreamDialog;

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.d.ts

@@ -0,0 +1,47 @@
+import { LiveStreamType } from '../types';
+export declare const PREFIX = "SCLiveStreamSelector";
+export interface LiveStreamSelectorProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Option selected
+     */
+    liveSelected?: LiveStreamType;
+    /**
+     * Callback on selected option
+     * @param LiveStreamType
+     */
+    onLiveSelected?: (live: LiveStreamType) => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onNext?: (live: LiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamSelector(inProps: LiveStreamSelectorProps): JSX.Element;

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

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const types_1 = require("../types");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const event_1 = tslib_1.__importDefault(require("../../../assets/liveStream/event"));
+const live_1 = tslib_1.__importDefault(require("../../../assets/liveStream/live"));
+const api_services_1 = require("@selfcommunity/api-services");
+const constants_1 = require("../../LiveStreamRoom/constants");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_2 = require("@selfcommunity/types");
+const constants_2 = require("../../PlatformWidget/constants");
+exports.PREFIX = 'SCLiveStreamSelector';
+const classes = {
+    root: `${exports.PREFIX}-root`,
+    warning: `${exports.PREFIX}-warning`,
+    options: `${exports.PREFIX}-options`,
+    actions: `${exports.PREFIX}-actions`
+};
+const Root = (0, styles_1.styled)(material_1.Container, {
+    name: exports.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+// Styled components
+const OptionCard = (0, styles_1.styled)(material_1.Paper, {
+    name: exports.PREFIX,
+    slot: 'optionCardRoot',
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    '& h6': {
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+    }
+}));
+const FeatureItem = (0, styles_1.styled)(material_1.Box, {
+    name: exports.PREFIX,
+    slot: 'featureItemRoot'
+})(({ theme }) => ({}));
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function LiveStreamSelector(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: exports.PREFIX
+    });
+    const { className, liveSelected, onLiveSelected, onNext } = props;
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // STATE
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(liveSelected);
+    const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(null);
+    // HOOKS
+    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]);
+    const isFreeTrialTier = (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.FREE_TRIAL, [preferences]);
+    const intl = (0, react_intl_1.useIntl)();
+    const options = [
+        {
+            title: intl.formatMessage({ id: 'ui.liveStreamForm.selector.scheduleLiveEvent', defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEvent' }),
+            image: event_1.default,
+            type: types_1.LiveStreamType.EVENT_LIVE,
+            features: [
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem1',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem1'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem2',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem2'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem3',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem3'
+                })
+            ]
+        },
+        {
+            title: intl.formatMessage({
+                id: 'ui.liveStreamForm.selector.scheduleLiveStream',
+                defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStream'
+            }),
+            image: live_1.default,
+            type: types_1.LiveStreamType.DIRECT_LIVE,
+            features: [
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3'
+                })
+            ]
+        }
+    ];
+    const handleOptionSelect = (type) => {
+        setSelectedOption(type);
+        onLiveSelected(type);
+    };
+    const handleNext = () => {
+        if (!selectedOption) {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            onNext && onNext(selectedOption);
+        }
+    };
+    const fetchLivestreamStatus = () => {
+        api_services_1.LiveStreamApiClient.getMonthlyDuration()
+            .then((r) => {
+            setTimeRemaining(r.remaining_minutes);
+        })
+            .catch((error) => {
+            console.error('Error fetching live status:', error);
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        fetchLivestreamStatus();
+    }, []);
+    const warning = (0, react_1.useMemo)(() => {
+        let _message;
+        if (isFreeTrialTier && isCommunityOwner) {
+            _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 }))
+                } }));
+        }
+        else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
+            if (timeRemaining <= 1) {
+                _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamForm.selector.warningMinutesExausted" }));
+            }
+            else if (timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
+                _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamForm.selector.warningRemainingMinutes", values: { minutes: timeRemaining } }));
+            }
+        }
+        if (_message) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.warning }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: _message })) })));
+        }
+        return null;
+    }, [timeRemaining, isFreeTrialTier]);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.title", defaultMessage: "ui.liveStreamForm.selector.title" }) })), warning, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            handleOptionSelect(index);
+                            e.preventDefault();
+                        }
+                    } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: option.title })), (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: selectedOption === option.type })] }), (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: "option-image" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
+                                return ((0, jsx_runtime_1.jsx)(FeatureItem, Object.assign({ component: "li" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
+                            }) }))] }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
+}
+exports.default = LiveStreamSelector;

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("./CreateLiveStreamDialog"));
+exports.default = CreateLiveStreamDialog_1.default;

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

@@ -0,0 +1,8 @@
+export declare enum CreateLiveStreamStep {
+    SELECT_TYPE = "_select_type",
+    CREATE_LIVE = "_create_live"
+}
+export declare enum LiveStreamType {
+    EVENT_LIVE = "_event_live",
+    DIRECT_LIVE = "_direct_live"
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveStreamType = exports.CreateLiveStreamStep = void 0;
+var CreateLiveStreamStep;
+(function (CreateLiveStreamStep) {
+    CreateLiveStreamStep["SELECT_TYPE"] = "_select_type";
+    CreateLiveStreamStep["CREATE_LIVE"] = "_create_live";
+})(CreateLiveStreamStep = exports.CreateLiveStreamStep || (exports.CreateLiveStreamStep = {}));
+var LiveStreamType;
+(function (LiveStreamType) {
+    LiveStreamType["EVENT_LIVE"] = "_event_live";
+    LiveStreamType["DIRECT_LIVE"] = "_direct_live";
+})(LiveStreamType = exports.LiveStreamType || (exports.LiveStreamType = {}));

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CourseForm_1 = tslib_1.__importDefault(require("../CourseForm"));
+const CourseForm_2 = require("../CourseForm/CourseForm");
+const react_1 = require("react");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const Skeleton_1 = tslib_1.__importDefault(require("../CourseForm/Skeleton"));
+function Customize(props) {
+    // PROPS
+    const { course, setSCCourse } = props;
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    const handleSuccess = (0, react_1.useCallback)((data) => {
+        setSCCourse(data);
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.customize.snackbar.save", defaultMessage: "ui.editCourse.tab.customize.snackbar.save" }), {
+            variant: 'success',
+            autoHideDuration: 3000
+        });
+    }, [setSCCourse]);
+    const handleError = (0, react_1.useCallback)(() => {
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    }, []);
+    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 });
+}
+exports.default = (0, react_1.memo)(Customize);

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

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

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

@@ -0,0 +1,99 @@
+"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 react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const lab_1 = require("@mui/lab");
+const react_intl_1 = require("react-intl");
+const types_1 = require("./types");
+const Lessons_1 = tslib_1.__importDefault(require("./Lessons"));
+const Customize_1 = tslib_1.__importDefault(require("./Customize"));
+const Users_1 = tslib_1.__importDefault(require("./Users"));
+const Options_1 = tslib_1.__importDefault(require("./Options"));
+const react_core_1 = require("@selfcommunity/react-core");
+const api_services_1 = require("@selfcommunity/api-services");
+const Requests_1 = tslib_1.__importDefault(require("./Requests"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    header: `${constants_1.PREFIX}-header`,
+    tabList: `${constants_1.PREFIX}-tab-list`,
+    tab: `${constants_1.PREFIX}-tab`,
+    tabPanel: `${constants_1.PREFIX}-tab-panel`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.editCourse.tab.lessons',
+        value: types_1.TabContentEnum.LESSONS
+    },
+    {
+        label: 'ui.editCourse.tab.customize',
+        value: types_1.TabContentEnum.CUSTOMIZE
+    },
+    {
+        label: 'ui.editCourse.tab.users',
+        value: types_1.TabContentEnum.USERS
+    },
+    {
+        label: 'ui.editCourse.tab.requests',
+        value: types_1.TabContentEnum.REQUESTS
+    },
+    {
+        label: 'ui.editCourse.tab.options',
+        value: types_1.TabContentEnum.OPTIONS
+    }
+];
+function getPanelData(course, setSCCourse) {
+    return [
+        {
+            value: types_1.TabContentEnum.LESSONS,
+            children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: course, setSCCourse: setSCCourse })
+        },
+        {
+            value: types_1.TabContentEnum.CUSTOMIZE,
+            children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: course, setSCCourse: setSCCourse })
+        },
+        {
+            value: types_1.TabContentEnum.USERS,
+            children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: course })
+        },
+        {
+            value: types_1.TabContentEnum.REQUESTS,
+            children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: course })
+        },
+        {
+            value: types_1.TabContentEnum.OPTIONS,
+            children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: course, setSCCourse: setSCCourse })
+        }
+    ];
+}
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function EditCourse(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { courseId, course, page, onTabChange, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "page", "onTabChange", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = (0, react_1.useState)(types_1.TabContentEnum[`${page.toUpperCase()}`]);
+    // CONTEXTS
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // HOOKS
+    const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.EDIT } });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // 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.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), scCourse ? (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scCourse.name })) : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "125px", height: "21px" })] })), (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: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { 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))) })), getPanelData(scCourse, setSCCourse).map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+}
+exports.default = EditCourse;

package/lib/cjs/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/cjs/components/EditCourse/Lessons/AddButton.js

@@ -0,0 +1,29 @@
+"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 react_intl_1 = require("react-intl");
+const constants_1 = require("../constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../../constants/PubSub");
+const react_1 = require("react");
+const classes = {
+    sectionButton: `${constants_1.PREFIX}-section-button`,
+    sectionButtonTypography: `${constants_1.PREFIX}-section-button-typography`
+};
+function AddButton(props) {
+    // PROPS
+    const { label, handleAddRow, className } = props, rest = tslib_1.__rest(props, ["label", "handleAddRow", "className"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleClick = (0, react_1.useCallback)(() => {
+        handleAddRow();
+        pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.UPDATE}`, true);
+    }, [handleAddRow]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: (0, classnames_1.default)(classes.sectionButton, className), size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }), onClick: handleClick }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionButtonTypography, variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })) }))) }));
+}
+exports.default = (0, react_1.memo)(AddButton);

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

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