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

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefetchedCourses = void 0;
+exports.prefetchedCourses = [
+    {
+        id: 1,
+        name: 'Distributed multi-state capability',
+        slug: 'distributed-multi-state-capability',
+        type: 'structured',
+        privacy: 'open',
+        image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/bigger/distributed-multi-state-capability_3372.jpg',
+        image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/big/distributed-multi-state-capability_0486.jpg',
+        image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/medium/distributed-multi-state-capability_5903.jpg',
+        image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/small/distributed-multi-state-capability_6812.jpg',
+        join_status: 'manager',
+        created_at: '2025-01-16T14:52:24.400913+01:00',
+        created_by: {
+            id: 9,
+            username: 'team',
+            real_name: '',
+            avatar: 'https://static-cache.quentrix.com/wioggmfc/upfiles/svg/T9.svg',
+            ext_id: null,
+            deleted: false,
+            followings_counter: 0,
+            followers_counter: 5,
+            posts_counter: 12,
+            discussions_counter: 4,
+            polls_counter: 4,
+            categories_counter: 2,
+            date_joined: '2024-04-10T14:37:48.153981+02:00',
+            bio: '',
+            location: '',
+            location_lat_lng: null,
+            position_lat_lng: null,
+            date_of_birth: null,
+            description: '',
+            gender: 'Unspecified',
+            website: '',
+            cover: null,
+            tags: [],
+            reputation: 159,
+            language: 'it',
+            community_badge: true,
+            reg_approved: true,
+            job: 'Barbiere',
+            store: 'Brescia',
+            brand: 'Prima Classe',
+            race: null
+        },
+        categories: [
+            {
+                id: 1,
+                tags: [],
+                followed: true,
+                order: 14,
+                name: 'Band preferite',
+                name_synonyms: '',
+                slug: 'band-preferite',
+                slogan: "Note che si trasformano in emozioni: condividi la tua passione musicale, esplorando insieme le band preferite che ti fanno vibrare l'anima.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'none',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/band-preferite_4420.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/band-preferite_8770.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/band-preferite_7524.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/band-preferite_8937.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/band-preferite_3325.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/band-preferite_4837.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 315
+            }
+        ]
+    },
+    {
+        id: 2,
+        name: 'Pre-emptive fresh-thinking frame',
+        slug: 'pre-emptive-fresh-thinking-frame',
+        type: 'scheduled',
+        privacy: 'open',
+        image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/bigger/pre-emptive-fresh-thinking-frame_1155.jpg',
+        image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/big/pre-emptive-fresh-thinking-frame_2446.jpg',
+        image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/medium/pre-emptive-fresh-thinking-frame_3088.jpg',
+        image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/small/pre-emptive-fresh-thinking-frame_3209.jpg',
+        join_status: 'joined',
+        created_at: '2025-01-20T12:38:43.200219+01:00',
+        created_by: {
+            id: 1,
+            username: 'admin',
+            real_name: 'Amministratore',
+            avatar: 'https://static-cache.quentrix.com/wioggmfc/upfiles/avatars/1/resized/209/209/28b02add2c23b3a71801734eba773592.png',
+            ext_id: null,
+            deleted: false,
+            followings_counter: 1,
+            followers_counter: 4,
+            posts_counter: 614,
+            discussions_counter: 551,
+            polls_counter: 84,
+            categories_counter: 5,
+            date_joined: '2024-04-10T13:23:59.754335+02:00',
+            bio: 'Vidi, feci, raccontai e poi me ne andai',
+            location: 'Milano',
+            location_lat_lng: null,
+            position_lat_lng: null,
+            date_of_birth: '1973-07-09',
+            description: 'Avvocato Civilista',
+            gender: 'Unspecified',
+            website: 'https://selfcommunity.com/',
+            cover: 'https://static-cache.quentrix.com/wioggmfc/upfiles/user_media/admin/cover/55655364-f786-4ead-a97f-56b1770ad951.jpg',
+            tags: [
+                {
+                    id: 93,
+                    type: 'user',
+                    name: 'PINO',
+                    description: '',
+                    color: '#e57373',
+                    visible: true,
+                    visibility_boost: false,
+                    active: true,
+                    deleted: false,
+                    created_at: '2024-05-31T16:15:43.986224+02:00'
+                }
+            ],
+            reputation: 2748,
+            language: 'it',
+            community_badge: false,
+            reg_approved: true,
+            job: 'JR Clinic Manager',
+            store: 'Erbusco',
+            brand: 'Il Barbiere',
+            race: 'Umano'
+        },
+        categories: [
+            {
+                id: 1,
+                tags: [],
+                followed: true,
+                order: 14,
+                name: 'Band preferite',
+                name_synonyms: '',
+                slug: 'band-preferite',
+                slogan: "Note che si trasformano in emozioni: condividi la tua passione musicale, esplorando insieme le band preferite che ti fanno vibrare l'anima.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'none',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/band-preferite_4420.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/band-preferite_8770.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/band-preferite_7524.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/band-preferite_8937.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/band-preferite_3325.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/band-preferite_4837.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 315
+            },
+            {
+                id: 2,
+                tags: [],
+                followed: true,
+                order: 13,
+                name: 'Nuovi generi musicali alternativi',
+                name_synonyms: '#alternative',
+                slug: 'nuovi-generi-musicali',
+                slogan: "Esplora l'innovazione sonora e scopri nuovi ritmi inaspettati. Abbraccia l'originalità dei nuovi generi musicali alternativi e lasciati trasportare dalle vibrazioni uniche.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'forced',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/nuovi-generi-musicali_5714.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/nuovi-generi-musicali_8854.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/nuovi-generi-musicali_0593.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/nuovi-generi-musicali_0368.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/nuovi-generi-musicali_7491.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/nuovi-generi-musicali_7739.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 345
+            }
+        ]
+    }
+];

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

@@ -0,0 +1,38 @@
+import { ButtonProps } from '@mui/material';
+import { CourseFormDialogProps } from '../CourseFormDialog';
+export interface CreateCourseButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CourseFormDialogComponentProps?: CourseFormDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> 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: CreateCourseButtonProps): JSX.Element;

package/lib/cjs/components/CreateCourseButton/CreateCourseButton.js

@@ -0,0 +1,81 @@
+"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 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_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const CourseFormDialog_1 = tslib_1.__importDefault(require("../CourseFormDialog"));
+const PREFIX = 'SCCreateCourseButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.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
+ */
+function CreateCourseButton(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CourseFormDialogComponentProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "CourseFormDialogComponentProps", "children"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // STATE
+    const [open, setOpen] = react_1.default.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const coursesEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
+    const onlyStaffEnabled = (0, react_1.useMemo)(() => { var _a; return (_a = preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
+    const canCreateCourse = (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_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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createCourseButton", defaultMessage: "ui.createCourseButton" }) })), open && (0, jsx_runtime_1.jsx)(CourseFormDialog_1.default, Object.assign({}, CourseFormDialogComponentProps, { open: true, onClose: handleClick }))] }));
+}
+exports.default = CreateCourseButton;

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

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

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

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

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

@@ -0,0 +1,31 @@
+"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 react_1 = require("react");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const Course_1 = require("../../constants/Course");
+function Customize(props) {
+    // PROPS
+    const { course, setCourse } = props;
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    const handleSuccess = (0, react_1.useCallback)((data) => {
+        setCourse(Object.assign(Object.assign({}, course), 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
+        });
+    }, [course]);
+    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
+        });
+    }, []);
+    return (0, jsx_runtime_1.jsx)(CourseForm_1.default, { course: course, step: Course_1.SCCourseFormStepType.CUSTOMIZATION, onSuccess: handleSuccess, onError: handleError });
+}
+exports.default = (0, react_1.memo)(Customize);

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

@@ -0,0 +1,110 @@
+"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 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 course_1 = require("../../types/course");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+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`,
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.editCourse.tab.lessons',
+        value: course_1.SCCourseEditTabType.LESSONS
+    },
+    {
+        label: 'ui.editCourse.tab.customize',
+        value: course_1.SCCourseEditTabType.CUSTOMIZE
+    },
+    {
+        label: 'ui.editCourse.tab.users',
+        value: course_1.SCCourseEditTabType.USERS
+    },
+    {
+        label: 'ui.editCourse.tab.requests',
+        value: course_1.SCCourseEditTabType.REQUESTS
+    },
+    {
+        label: 'ui.editCourse.tab.options',
+        value: course_1.SCCourseEditTabType.OPTIONS
+    }
+];
+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, tab = course_1.SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = (0, react_1.useState)(tab);
+    // 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)((_e, newTabValue) => {
+        if (onTabSelect) {
+            onTabSelect(newTabValue);
+        }
+        else {
+            setTabValue(newTabValue);
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
+        }
+    }, [setTabValue, onTabChange, onTabSelect]);
+    // MEMOS
+    const panelData = (0, react_1.useMemo)(() => {
+        return [
+            {
+                value: course_1.SCCourseEditTabType.LESSONS,
+                children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.CUSTOMIZE,
+                children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: scCourse, setCourse: setSCCourse })
+            },
+            {
+                value: course_1.SCCourseEditTabType.USERS,
+                children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.REQUESTS,
+                children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.OPTIONS,
+                children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: scCourse, setCourse: setSCCourse })
+            }
+        ];
+    }, [scCourse, handleTabChange]);
+    if (!scCourse) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
+    }
+    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, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (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: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.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,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/cjs/components/EditCourse/Lessons/ChangeLessonStatus.js

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

package/lib/cjs/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;