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

package/lib/cjs/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_2 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const constants_1 = require("./constants");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const types_1 = require("@selfcommunity/types");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const react_core_1 = require("@selfcommunity/react-core");
+const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
+const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
+const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const course_1 = require("../../utils/course");
+const hooks_1 = require("../EditCourse/hooks");
+const messages = (0, react_intl_1.defineMessages)({
+    pickerPlaceholder: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.placeholder',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.placeholder'
+    },
+    pickerCancelMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.cancel',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.cancel'
+    },
+    pickerClearMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.clear',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.clear'
+    },
+    pickerOkMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.ok',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.ok'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    label: `${constants_1.PREFIX}-label`,
+    picker: `${constants_1.PREFIX}-picker`,
+    popoverRoot: `${constants_1.PREFIX}-popover-root`,
+    popoverContent: `${constants_1.PREFIX}-popover-content`,
+    popoverSelection: `${constants_1.PREFIX}-popover-selection`,
+    popoverAction: `${constants_1.PREFIX}-popover-action`
+};
+const Root = (0, material_1.styled)(material_2.FormControl, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => [styles.root]
+})(() => ({}));
+const PopoverRoot = (0, material_1.styled)(material_2.Popover, {
+    name: constants_1.PREFIX,
+    slot: 'PopoverRoot',
+    overridesResolver: (_props, styles) => styles.popoverRoot
+})(() => ({}));
+function LessonReleaseMenu(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, course, section, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "course", "section", "onSuccess"]);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    // STATE
+    const [drippedAt, setDrippedAt] = (0, react_1.useState)(null);
+    const { delay, _unit } = (0, course_1.getDripDelayAndUnit)((section === null || section === void 0 ? void 0 : section.drip_delay) || 0);
+    const [dripDelay, setDripDelay] = (0, react_1.useState)(delay);
+    const [unit, setUnit] = (0, react_1.useState)(_unit);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // HOOKS
+    const { isDisabled } = (0, hooks_1.useIsDisabled)();
+    //INTL
+    const intl = (0, react_intl_1.useIntl)();
+    const handleUnitChange = (e) => {
+        setUnit(e.target.value);
+    };
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        if (section && section.dripped_at) {
+            setDrippedAt(new Date(section.dripped_at));
+        }
+        else {
+            setDrippedAt(null);
+        }
+    }, [section, setDrippedAt]);
+    (0, react_1.useEffect)(() => {
+        if (section) {
+            setDripDelay(delay);
+        }
+    }, [section, setDripDelay]);
+    // HANDLERS
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleValueChange = (e) => {
+        setDripDelay(e.target.value);
+    };
+    const handleSave = () => {
+        const _delay = unit === constants_1.unitType.DAYS ? dripDelay : dripDelay * 7;
+        api_services_1.CourseService.patchCourseSection(course.id, section.id, { drip_delay: _delay })
+            .then((data) => {
+            setOpen(false);
+            onSuccess(data);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const handleUpdate = (value) => {
+        api_services_1.CourseService.patchCourseSection(course.id, section.id, { dripped_at: value ? value.toISOString() : null })
+            .then((data) => {
+            setOpen(false);
+            onSuccess(data);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const placeholderStructured = dripDelay > 0
+        ? intl.formatMessage({
+            id: `ui.lessonReleaseMenu.structured.label.${unit}`,
+            defaultMessage: `ui.lessonReleaseMenu.structured.label.${unit}`
+        }, { total: dripDelay })
+        : intl.formatMessage({
+            id: 'ui.lessonReleaseMenu.now.label',
+            defaultMessage: 'ui.lessonReleaseMenu.now.label'
+        });
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course && course.type === types_1.SCCourseTypologyType.SCHEDULED ? ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
+                okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
+                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
+                clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
+            } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, slots: {
+                    //actionBar: PickerActionBar,
+                    tabs: (props) => (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePickerTabs, Object.assign({}, props)),
+                    textField: (params) => ((0, jsx_runtime_1.jsx)(material_2.TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_2.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })) }))) }) })))
+                }, slotProps: {
+                    tabs: {
+                        hidden: false
+                    },
+                    toolbar: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        toolbarTitle: ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
+                    },
+                    actionBar: {
+                        actions: ['cancel', 'clear', 'accept']
+                    }
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, InputProps: {
+                        endAdornment: ((0, jsx_runtime_1.jsx)(material_2.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_2.IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_2.Icon, { children: "expand_more" }) })) })))
+                    }, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left'
+                    }, transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left'
+                    } }, { children: [(0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), (0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverContent }, { children: [(0, jsx_runtime_1.jsxs)(material_2.Box, Object.assign({ className: classes.popoverSelection }, { children: [(0, jsx_runtime_1.jsx)(material_2.TextField, { type: "number", value: dripDelay, onChange: handleValueChange, InputProps: {
+                                                inputProps: {
+                                                    min: 0
+                                                }
+                                            } }), (0, jsx_runtime_1.jsx)(material_2.FormControl, { children: (0, jsx_runtime_1.jsxs)(material_2.RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [(0, jsx_runtime_1.jsx)(material_2.FormControlLabel, { value: constants_1.unitType.DAYS, control: (0, jsx_runtime_1.jsx)(material_2.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), (0, jsx_runtime_1.jsx)(material_2.FormControlLabel, { value: constants_1.unitType.WEEKS, control: (0, jsx_runtime_1.jsx)(material_2.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), (0, jsx_runtime_1.jsx)(material_2.Typography, Object.assign({ variant: "body1" }, { children: dripDelay > 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), (0, jsx_runtime_1.jsx)(material_2.Button, Object.assign({ className: classes.popoverAction, variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
+}
+exports.default = LessonReleaseMenu;

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

@@ -0,0 +1,5 @@
+export declare const PREFIX = "SCLessonReleaseMenu";
+export declare enum unitType {
+    DAYS = "days",
+    WEEKS = "weeks"
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unitType = exports.PREFIX = void 0;
+exports.PREFIX = 'SCLessonReleaseMenu';
+var unitType;
+(function (unitType) {
+    unitType["DAYS"] = "days";
+    unitType["WEEKS"] = "weeks";
+})(unitType = exports.unitType || (exports.unitType = {}));

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

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

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

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

package/lib/cjs/components/LiveStream/LiveStream.js

@@ -3,7 +3,6 @@ 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -46,22 +45,22 @@ const classes = {
     snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
     snippetActions: `${constants_1.PREFIX}-snippet-actions`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-const DetailRoot = (0, styles_1.styled)(material_1.Box, {
+const DetailRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DetailRoot',
     overridesResolver: (props, styles) => styles.detailRoot
 })(() => ({}));
-const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
+const PreviewRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot',
     overridesResolver: (props, styles) => styles.previewRoot
 })(() => ({}));
-const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+const SnippetRoot = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SnippetRoot',
     overridesResolver: (props, styles) => styles.snippetRoot

package/lib/cjs/components/LiveStream/Skeleton.js

@@ -3,8 +3,6 @@ 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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
@@ -28,19 +26,19 @@ const classes = {
     skeletonSnippetImage: `${constants_1.PREFIX}-skeleton-snippet-image`,
     skeletonSnippetAction: `${constants_1.PREFIX}-skeleton-snippet-action`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
-const SkeletonDetailRoot = (0, styles_1.styled)(material_1.Box, {
+const SkeletonDetailRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonDetailRoot'
 })(() => ({}));
-const SkeletonPreviewRoot = (0, styles_1.styled)(material_1.Box, {
+const SkeletonPreviewRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonPreviewRoot'
 })(() => ({}));
-const SkeletonSnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+const SkeletonSnippetRoot = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonSnippetRoot'
 })(() => ({}));
@@ -79,13 +77,13 @@ function LiveStreamSkeleton(inProps) {
      */
     let contentObj;
     if (template === liveStream_1.SCLiveStreamTemplateType.DETAIL) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "36%", height: "40px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: "1px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "75px", height: "15px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailFirstDivider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "68px", height: "20px" }), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailSecondDivider })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: "1px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailFirstDivider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailSecondDivider })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else if (template === liveStream_1.SCLiveStreamTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
 }

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

@@ -4,8 +4,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
@@ -17,8 +17,12 @@ const api_services_1 = require("@selfcommunity/api-services");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const deafultCover_1 = tslib_1.__importDefault(require("../../assets/deafultCover"));
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_2 = require("../PlatformWidget/constants");
+const constants_3 = require("../LiveStreamRoom/constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
+    warning: `${constants_1.PREFIX}-warning`,
     form: `${constants_1.PREFIX}-form`,
     title: `${constants_1.PREFIX}-title`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -29,7 +33,7 @@ const classes = {
     error: `${constants_1.PREFIX}-error`,
     genericError: `${constants_1.PREFIX}-generic-error`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(({ theme }) => ({}));
@@ -74,14 +78,30 @@ const messages = (0, react_intl_1.defineMessages)({
  * @param inProps
  */
 function LiveStreamForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
     const { className, onSuccess, onError, liveStream = null } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "liveStream"]);
-    // INTL
+    // HOOKS
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
+    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_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_1.SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
+    const 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 intl = (0, react_intl_1.useIntl)();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -98,6 +118,7 @@ function LiveStreamForm(inProps) {
     const [field, setField] = (0, react_1.useState)(initialFieldState);
     const [error, setError] = (0, react_1.useState)({});
     const [genericError, setGenericError] = (0, react_1.useState)(null);
+    const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(null);
     const _backgroundCover = Object.assign({}, (field.cover ? { background: `url('${field.cover}') center / cover` } : { background: `url('${deafultCover_1.default}') no-repeat 0 0 / 100% 100%` }));
     const handleChangeCover = (0, react_1.useCallback)((cover) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['coverFile']: cover })));
@@ -175,18 +196,55 @@ function LiveStreamForm(inProps) {
     const handleChangeSettings = (0, react_1.useCallback)((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { settings: data })));
     }, [setField]);
+    const warning = (0, react_1.useMemo)(() => {
+        let _message;
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
+            _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
+                } }));
+        }
+        else if (timeRemaining !== null && timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON) {
+            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_3.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;
+    }, [isFreeTrialTier, isCommunityOwner, timeRemaining]);
+    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();
+    }, []);
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [warning, (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
                         }, error: Boolean(field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
                         }, error: Boolean(field.slug.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LiveStream_1.LIVE_STREAM_SLUG_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, rows: 4, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: field.settings, onChange: handleChangeSettings }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
                                 field.isSubmitting ||
                                 field.title.length > LiveStream_1.LIVE_STREAM_TITLE_MAX_LENGTH ||
-                                field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));
+                                field.description.length > LiveStream_1.LIVE_STREAM_DESCRIPTION_MAX_LENGTH ||
+                                isFreeTrialTier ||
+                                timeRemaining <= constants_3.WARNING_THRESHOLD_EXPIRING_SOON ||
+                                !canCreateLiveStream, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: liveStream ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.edit", defaultMessage: "ui.liveStreamForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.button.create", defaultMessage: "ui.liveStreamForm.button.create" })) })) }))] }))] })));
 }
 exports.default = LiveStreamForm;

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

@@ -4,7 +4,6 @@ exports.PREFIX = void 0;
 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 types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -21,10 +20,10 @@ const classes = {
     accessView: `${exports.PREFIX}-access-view`,
     accessViewIcon: `${exports.PREFIX}-access-view-icon`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: exports.PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  *> API documentation for the Community-JS LiveStreamSettingsForm component. Learn about the available props and the CSS API.
  *
@@ -63,6 +62,11 @@ function LiveStreamSettingsForm(inProps) {
         features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
         react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const liveStreamVideoConferenceEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_VIDEO_CONFERENCE_ENABLED].value, [preferences, features]);
     const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
     const isCommunityOwner = (0, react_1.useMemo)(() => authUserId === 1, [authUserId]);
     const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
@@ -73,8 +77,8 @@ function LiveStreamSettingsForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), isEnterpriseFeaturesVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier || !liveStreamEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['muteParticipants']: !(settings === null || settings === void 0 ? void 0 : settings.muteParticipants) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.muteParticipants", defaultMessage: "ui.liveStreamForm.muteParticipants" }) }))] })), liveStreamEnabled && (isEnterpriseFeaturesVisible || liveStreamVideoConferenceEnabled) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableVideo']: !(settings === null || settings === void 0 ? void 0 : settings.disableVideo) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableVideo", defaultMessage: "ui.liveStreamForm.disableVideo" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen), disabled: !isEnterpriseTier && !liveStreamVideoConferenceEnabled, onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableShareScreen']: !(settings === null || settings === void 0 ? void 0 : settings.disableShareScreen) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableShareScreen", defaultMessage: "ui.liveStreamForm.disableShareScreen" }) })), !liveStreamVideoConferenceEnabled && (0, jsx_runtime_1.jsx)(UpScalingTierBadge_1.default, { desiredTier: types_1.SCCommunitySubscriptionTier.ENTERPRISE })] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: !(settings === null || settings === void 0 ? void 0 : settings.disableChat), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['disableChat']: !(settings === null || settings === void 0 ? void 0 : settings.disableChat) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.disableChat", defaultMessage: "ui.liveStreamForm.disableChat" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['hideParticipantsList']: !(settings === null || settings === void 0 ? void 0 : settings.hideParticipantsList) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.hideParticipantsList", defaultMessage: "ui.liveStreamForm.hideParticipantsList" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['automaticallyNotifyFollowers']: !(settings === null || settings === void 0 ? void 0 : settings.automaticallyNotifyFollowers) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.automaticallyNotifyFollowers", defaultMessage: "ui.liveStreamForm.automaticallyNotifyFollowers" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, disabled: !liveStreamEnabled, checked: Boolean(settings === null || settings === void 0 ? void 0 : settings.showInProfile), onChange: () => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['showInProfile']: !(settings === null || settings === void 0 ? void 0 : settings.showInProfile) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.switchLabel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.showInProfile", defaultMessage: "ui.liveStreamForm.showInProfile" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.accessView }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "viewLabel" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "view", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.view.label", defaultMessage: "ui.liveStreamForm.view.label" }), labelId: "viewLabel", disabled: !liveStreamEnabled, fullWidth: true, value: (_a = settings === null || settings === void 0 ? void 0 : settings.view) !== null && _a !== void 0 ? _a : types_1.SCLiveStreamViewType.SPEAKER, onChange: (e) => onChange(Object.assign(Object.assign(Object.assign({}, constants_1.LIVESTREAM_DEFAULT_SETTINGS), settings), { ['view']: e.target.value })), displayEmpty: true, renderValue: (selected) => {
                             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: selected === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${selected}`, defaultMessage: `ui.liveStreamForm.view.${selected}` })] }));
-                        } }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) })] }) }), f))) }))] }))] })));
+                        } }, { children: Object.values(types_1.SCLiveStreamViewType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.accessViewIcon }, { children: f === types_1.SCLiveStreamViewType.SPEAKER ? 'upload' : 'category' })), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}`, defaultMessage: `ui.liveStreamForm.view.${f}` })] }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { textWrap: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.liveStreamForm.view.${f}.description`, defaultMessage: `ui.liveStreamForm.view.${f}.description` }) }))] }) }), f))) }))] }))] })));
 }
 exports.default = LiveStreamSettingsForm;

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

@@ -1,4 +1,4 @@
-export type InitialFieldState = {
+export declare type InitialFieldState = {
     title: string;
     description: string;
     slug?: string;
@@ -7,5 +7,5 @@ export type InitialFieldState = {
     coverFile?: string | Blob;
     isSubmitting: boolean;
 };
-export type FieldStateKeys = keyof InitialFieldState;
-export type FieldStateValues = InitialFieldState[FieldStateKeys];
+export declare type FieldStateKeys = keyof InitialFieldState;
+export declare type FieldStateValues = InitialFieldState[FieldStateKeys];