@selfcommunity/react-ui 0.8.0-embeds.16 → 0.8.0-live.40

package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js

@@ -7,7 +7,7 @@ import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { Preferences } from '@selfcommunity/react-core';
 import { PREFIX } from '../../constants';
-import { Button, Drawer, IconButton, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { Button, CircularProgress, Drawer, IconButton, Tab, Tabs, TextField, Typography } from '@mui/material';
 import { MuiColorInput } from 'mui-color-input';
 import { actionTypes } from './reducer';
 import { getInitialState, reducer } from './reducer';
@@ -33,7 +33,9 @@ const classes = {
     root: `${PREFIX}-appearance-root`,
     title: `${PREFIX}-appearance-title`,
     summary: `${PREFIX}-appearance-summary`,
+    colorContainer: `${PREFIX}-appearance-color-container`,
     color: `${PREFIX}-appearance-color`,
+    colorProgress: `${PREFIX}-appearance-color-progress`,
     logoContainer: `${PREFIX}-appearance-logo-container`,
     logo: `${PREFIX}-appearance-logo`,
     uploadButton: `${PREFIX}-appearance-upload-button`,
@@ -61,11 +63,12 @@ export default function Appearance(inProps) {
     const { className, onCompleteAction } = props;
     // STATE
     const [state, dispatch] = useReducer(reducer, getInitialState(null));
-    let fileInput = useRef(null);
-    const [loadingLogo, setLoadingLogo] = useState(false);
+    const [loadingLogo, setLoadingLogo] = useState('');
     const [anchorEl, setAnchorEl] = useState(null);
     const [tab, setTab] = useState(0);
     const [updating, setUpdating] = useState(false);
+    const [updatingColor, setUpdatingColor] = useState('');
+    const colorRef = useRef(null);
     // INTL
     const intl = useIntl();
     // HANDLERS
@@ -138,6 +141,7 @@ export default function Appearance(inProps) {
         }
         finally {
             setUpdating(false);
+            setUpdatingColor('');
             onCompleteAction();
         }
     });
@@ -155,15 +159,13 @@ export default function Appearance(inProps) {
             setUpdating(false);
         }
     });
-    const updateLogoPreference = (name) => __awaiter(this, void 0, void 0, function* () {
-        setLoadingLogo(true);
+    const updateLogoPreference = (name, file) => __awaiter(this, void 0, void 0, function* () {
+        setLoadingLogo(name);
         const formData = new FormData();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        formData.append(name, fileInput);
+        formData.append(name, file);
         yield PreferenceService.updatePreferences(formData)
             .then((preference) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             dispatch({
                 type: actionTypes.SET_LOGOS,
                 payload: { logos: state.logos.map((l) => (l.name === name ? Object.assign(Object.assign({}, l), { value: preference[name].value }) : l)) }
@@ -171,7 +173,7 @@ export default function Appearance(inProps) {
             onCompleteAction();
         })
             .catch((e) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             Logger.error(SCOPE_SC_UI, e);
         });
     });
@@ -181,9 +183,9 @@ export default function Appearance(inProps) {
      * @param name
      */
     const handleUpload = (event, name) => {
-        fileInput = event.target.files[0];
-        if (fileInput) {
-            updateLogoPreference(name);
+        const file = event.target.files[0];
+        if (file) {
+            updateLogoPreference(name, file);
         }
     };
     useEffect(() => {
@@ -193,15 +195,15 @@ export default function Appearance(inProps) {
     }, []);
     // HANDLERS
     const handleColorChange = (color, name) => {
+        setUpdatingColor(name);
         const currentColor = state.colors.find((col) => col.name === name);
         if (currentColor && currentColor.value !== color) {
+            setUpdating(true);
             dispatch({
                 type: actionTypes.SET_COLORS,
                 payload: { colors: state.colors.map((col) => (col.name === name ? Object.assign(Object.assign({}, col), { value: color }) : col)) }
             });
-            setTimeout(() => {
-                updatePreference({ [`${name}`]: color });
-            }, 2000);
+            updatePreference({ [`${name}`]: color });
         }
     };
     const handleChange = (event) => {
@@ -211,13 +213,18 @@ export default function Appearance(inProps) {
             payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
         });
     };
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(MuiColorInput, { className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name) })] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, 
+    const handleClosePopover = () => {
+        if (colorRef.current) {
+            colorRef.current.blur();
+        }
+    };
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(Typography, { variant: "h4", className: classes.title, alignSelf: "self-start", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) }), _jsx(Typography, { className: classes.summary, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) }), _jsx(Button, { variant: "outlined", size: "small", color: "primary", onClick: handleOpen, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) }), _jsxs(DrawerRoot, { className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(Box, { className: classes.drawerHeader, children: [_jsx(Typography, { variant: "h4", color: "primary", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) }), _jsx(IconButton, { className: classes.drawerHeaderAction, onClick: handleClose, children: _jsx(Icon, { children: "close" }) })] }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs", children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] }), _jsx(ScrollContainer, { children: _jsxs(Box, { className: classes.drawerContent, children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, { variant: "h6", children: formatColorLabel(color) }), _jsxs(Box, { className: classes.colorContainer, children: [_jsx(MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }), updatingColor && updatingColor === color.name && (_jsx(CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] })] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, { variant: "h6", children: formatLogoLabel(logo.name) }), _jsxs(Box, { className: classes.logoContainer, children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(LoadingButton, { className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo), children: _jsx(Icon, { children: "upload" }) })] })] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, 
                                             //className={classes.field}
                                             label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: (_a = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _a === void 0 ? void 0 : _a.value, name: "application_slogan1", onChange: handleChange, InputProps: {
-                                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 }))
+                                                endAdornment: _jsx(Typography, { variant: "body2", children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 })
                                             }, error: Boolean(((_e = (_d = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.length) > 50) }), _jsx(TextField, { multiline: true, fullWidth: true, 
                                             //className={classes.field}
                                             label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: (_f = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _f === void 0 ? void 0 : _f.value, name: "application_slogan2", onChange: handleChange, InputProps: {
-                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_g = state.slogans[1].value) === null || _g === void 0 ? void 0 : _g.length) ? 150 - ((_h = state.slogans[1].value) === null || _h === void 0 ? void 0 : _h.length) : 150 })))
-                                            }, error: Boolean(((_k = (_j = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.length) > 150) }), _jsx(LoadingButton, Object.assign({ loading: updating, disabled: updating, variant: "outlined", size: "small", color: "primary", onClick: updateSlogans }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
+                                                endAdornment: (_jsx(Typography, { variant: "body2", children: ((_g = state.slogans[1].value) === null || _g === void 0 ? void 0 : _g.length) ? 150 - ((_h = state.slogans[1].value) === null || _h === void 0 ? void 0 : _h.length) : 150 }))
+                                            }, error: Boolean(((_k = (_j = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.length) > 150) }), _jsx(LoadingButton, { loading: updating, disabled: updating, variant: "outlined", size: "small", color: "primary", onClick: updateSlogans, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) })] }))] }) })] })] }));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Category/Category.js

@@ -25,7 +25,7 @@ const classes = {
     animationProgress: `${PREFIX}-category-animation-progress`
 };
 function CircledLetter({ letter, statement }) {
-    return (_jsxs(Box, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [_jsx(Box, Object.assign({ component: "span", sx: {
+    return (_jsxs(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }, children: [_jsx(Box, { component: "span", sx: {
                     width: 22,
                     height: 22,
                     borderRadius: '50%',
@@ -33,11 +33,11 @@ function CircledLetter({ letter, statement }) {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center'
-                } }, { children: _jsx(Typography, Object.assign({ component: "span", sx: {
+                }, children: _jsx(Typography, { component: "span", sx: {
                         color: 'white',
                         textTransform: 'uppercase',
                         fontWeight: 'bold'
-                    } }, { children: letter })) })), statement] })));
+                    }, children: letter }) }), statement] }));
 }
 const Root = styled(Box, {
     name: PREFIX,
@@ -88,7 +88,7 @@ export default function Category(inProps) {
         }
         return message;
     }, [progress]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(Typography, { variant: "h4", className: classes.title, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) }), _jsx(Typography, { className: classes.summary, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) }), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 iconA: (...chunks) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
@@ -98,5 +98,5 @@ export default function Category(inProps) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
-                            } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+                            } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, { component: "span", className: classes.action, children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, { severity: "success", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) })) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, { className: classes.progress, children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, { variant: "h4", children: getLoadingMessage }) })] })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) })) })] }));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Content/Content.js

@@ -68,5 +68,5 @@ export default function Content(inProps) {
         }
         return message;
     }, [progress]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(Typography, { variant: "h4", className: classes.title, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) }), _jsx(Typography, { className: classes.summary, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) }), _jsx(Box, { component: "span", className: classes.action, children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, { severity: "success", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) })) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, { className: classes.progress, children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, { variant: "h4", children: getLoadingMessage }) })] })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) })) })] }));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.js

@@ -1,5 +1,6 @@
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { useThemeProps } from '@mui/system';
@@ -7,9 +8,12 @@ import classNames from 'classnames';
 import { PREFIX } from '../../constants';
 import { Button, Icon, IconButton, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { Link, SCPreferences, SCPreferencesContext, useSCContext } from '@selfcommunity/react-core';
+import { SCPreferences, SCPreferencesContext } from '@selfcommunity/react-core';
 import { FACEBOOK_SHARE, LINKEDIN_SHARE, X_SHARE } from '../../../../constants/SocialShare';
-import { MAKE_MARKETING_PROD, MAKE_MARKETING_STAGE } from '../../../PlatformWidget/constants';
+import { Endpoints, http, PreferenceService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../../../constants/Errors';
+import { SCPreferenceName } from '@selfcommunity/types';
 const classes = {
     root: `${PREFIX}-invite-root`,
     title: `${PREFIX}-invite-title`,
@@ -23,6 +27,7 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'InviteRoot'
 })(() => ({}));
+const META_ROBOTS_ENABLE_DEFAULT = 'index,follow';
 export default function Invite(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -30,21 +35,61 @@ export default function Invite(inProps) {
         name: PREFIX
     });
     const { className, onCompleteAction = null } = props;
+    // STATUS
+    const [isMetaRobotsUpdating, setMetaRobotsUpdating] = useState(false);
     // CONTEXT
-    const scContext = useSCContext();
     const scPreferencesContext = useContext(SCPreferencesContext);
-    const facebookShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
-        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
-    const xShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
-        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
-    const linkedinShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
-        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED].value;
-    const url = scContext.settings.portal;
-    const isStage = scContext.settings.portal.includes('stage');
+    const metaRobots = useMemo(() => {
+        return scPreferencesContext.preferences && SCPreferences.WEBMASTER_META_ROBOTS in scPreferencesContext.preferences
+            ? scPreferencesContext.preferences[SCPreferences.WEBMASTER_META_ROBOTS].value
+            : null;
+    }, [scPreferencesContext.preferences]);
+    const url = useMemo(() => scPreferencesContext.preferences &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
     // HANDLERS
-    const handleShare = (shareUrl, shareType) => {
+    const handleShare = (shareUrl, shareType) => __awaiter(this, void 0, void 0, function* () {
+        if (metaRobots.toLowerCase().replace(/\s+/g, '') !== META_ROBOTS_ENABLE_DEFAULT) {
+            yield enableSeo();
+        }
         window.open(shareUrl, `${shareType}-share-dialog`, 'width=626,height=436');
         onCompleteAction();
+    });
+    const enableSeo = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setMetaRobotsUpdating(true);
+            yield PreferenceService.updatePreferences({ [SCPreferenceName.META_ROBOTS]: 'index, follow' });
+        }
+        catch (e) {
+            Logger.error(SCOPE_SC_UI, e);
+        }
+        finally {
+            setMetaRobotsUpdating(false);
+        }
+    });
+    /**
+     * Fetches platform url
+     */
+    function fetchPlatform(query) {
+        http
+            .request({
+            url: Endpoints.Platform.url(),
+            method: Endpoints.Platform.method,
+            params: {
+                next: query
+            }
+        })
+            .then((res) => {
+            const platformUrl = res.data.platform_url;
+            window.open(platformUrl, '_blank').focus();
+        })
+            .catch((error) => {
+            console.log(error);
+        });
+    }
+    const handleCompleteAction = () => {
+        onCompleteAction();
+        fetchPlatform('/marketing/invitation');
     };
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), _jsxs(Box, Object.assign({ className: classes.social }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.iconContainer }, { children: [facebookShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) }))), xShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(X_SHARE + url, 'x') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) }))), linkedinShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) })))] }))] })), _jsxs(Box, Object.assign({ className: classes.email }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? MAKE_MARKETING_STAGE : MAKE_MARKETING_PROD, target: "_blank", onClick: onCompleteAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(Typography, { variant: "h4", className: classes.title, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) }), _jsxs(Box, { className: classes.social, children: [_jsx(Typography, { className: classes.title, variant: "h4", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) }), _jsx(Typography, { variant: "subtitle1", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) }), _jsxs(Box, { className: classes.iconContainer, children: [_jsx(IconButton, { onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating, children: _jsx(Icon, { classes: { root: classes.icon }, children: "facebook" }) }), _jsx(IconButton, { onClick: () => handleShare(X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating, children: _jsx(Icon, { classes: { root: classes.icon }, children: "twitter" }) }), _jsx(IconButton, { onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating, children: _jsx(Icon, { classes: { root: classes.icon }, children: "linkedin" }) })] })] }), _jsxs(Box, { className: classes.email, children: [_jsx(Typography, { className: classes.title, variant: "h4", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) }), _jsx(Typography, { variant: "subtitle1", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) })] }), _jsx(Box, { component: "span", className: classes.action, children: _jsx(Button, { variant: "outlined", size: "small", onClick: handleCompleteAction, children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) }) })] }));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.js

@@ -84,5 +84,5 @@ export default function Profile(inProps) {
         setSCUser(Object.assign({}, scUser, { cover: cover }));
         onCompleteAction();
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), _jsx(Typography, Object.assign({ alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), _jsxs(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsx(IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, { onChange: handleChangeCover }) }))] })] })), _jsx(Box, Object.assign({ className: classes.publicInfo }, { children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, { variant: "h4", className: classes.title, alignSelf: "self-start", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) }), _jsx(Typography, { alignSelf: "self-start", children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) }), _jsx(Button, { variant: "outlined", size: "small", color: "primary", onClick: handleOpen, children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) }), _jsxs(DrawerRoot, { anchor: "right", open: Boolean(anchorEl), onClose: handleClose, children: [_jsx(IconButton, { className: classes.icon, onClick: handleClose, children: _jsx(Icon, { children: "close" }) }), _jsxs(Paper, { style: _backgroundCover, classes: { root: classes.cover }, children: [_jsx(Box, { className: classes.avatar, children: _jsx(UserAvatar, { hide: !hasBadge, children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) }) }), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", { className: classes.changeCover, children: _jsx(ChangeCover, { onChange: handleChangeCover }) })] })] }), _jsx(Box, { className: classes.publicInfo, children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) })] })] })));
 }

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -196,7 +196,7 @@ export default function PlatformWidget(inProps) {
         ...((isAdmin || isEditor) && !hideConsoleAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
+                    render: (_jsx(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform(''), children: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) })),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
                 }
@@ -205,7 +205,7 @@ export default function PlatformWidget(inProps) {
         ...((isAdmin || isModerator) && !hideModerationAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
+                    render: (_jsx(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/'), children: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) })),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
                 }
@@ -214,7 +214,7 @@ export default function PlatformWidget(inProps) {
         ...(isAdmin && isCommunityOwner && !hideHubAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
+                    render: (_jsx(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank", children: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) })),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
                 }
@@ -223,7 +223,7 @@ export default function PlatformWidget(inProps) {
         ...(isCommunityOwner && !hideContactUsAction
             ? [
                 {
-                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
+                    render: (_jsx(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank", children: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) })),
                     title: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
                     content: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
                 }
@@ -294,13 +294,13 @@ export default function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ item: true, xs: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = (_jsxs(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial, children: [!isTutorialOpen && (_jsx(Grid, { item: true, xs: "auto", alignItems: "center", justifyContent: "center", children: _jsx(IconButton, { size: "medium", onClick: handleOpenTutorial, children: _jsx(Icon, { children: "info" }) }) })), _jsx(Collapse, { in: isTutorialOpen, className: classes.tutorialContent, children: isTutorialOpen && (_jsxs(Grid, { item: true, xs: "auto", children: [_jsxs(Typography, { variant: 'body2', className: classes.tutorialTitle, component: 'div', children: [_jsx(Grow, { in: true, timeout: 1000, children: _jsx("span", { children: actions[tutorialIndex].title }) }), _jsx(IconButton, { size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial, children: _jsx(Icon, { children: "close" }) })] }), _jsx(Grow, { in: true, timeout: 1200, children: _jsx(Typography, { variant: 'body2', className: classes.tutorialDesc, children: actions[tutorialIndex].content }) }), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls, children: [_jsx(Button, { variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep), children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) }), _jsxs(Typography, { component: 'div', children: [tutorialIndex + 1, "/", actions.length] }), _jsx(Button, { variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep), children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) })] })] })) })] }));
     /**
      * Renders platform card
      */
-    const content = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
-                        return (_jsx(Grid, Object.assign({ item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
-                    }), _jsx(Grid, { item: true, xs: 1, className: classes.action })] }))] })));
+    const content = (_jsxs(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content, children: [_jsx(Grid, { item: true, xs: 12, children: title ? (title) : (_jsx(Box, { className: classes.title, children: _jsx(Tooltip, { title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top", children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) }) })) }), _jsxs(Grid, { item: true, xs: 12, className: classes.actions, children: [_jsx(Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
+                        return (_jsx(Grid, { item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }), children: a.render }, i));
+                    }), _jsx(Grid, { item: true, xs: 1, className: classes.action })] })] }));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */

package/lib/esm/components/PlatformWidget/Skeleton.js

@@ -36,5 +36,5 @@ const Root = styled(Widget, {
  *
  */
 export default function PlatformWidgetSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] })), _jsx(Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, { container: true, justifyContent: "center", className: classes.content, children: [_jsx(Grid, { item: true, xs: 12, className: classes.title, children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) }), _jsxs(Grid, { item: true, xs: 12, className: classes.actions, children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] }), _jsx(Grid, { item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial, children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) })] }) })));
 }

package/lib/esm/components/PlatformWidget/constants.d.ts

@@ -3,7 +3,3 @@ export declare const HUB_STAGE = "https://hub.stage.quentrix.com/";
 export declare const HUB_PROD = "https://hub.selfcommunity.com/";
 export declare const CONTACT_STAGE = "https://hub.stage.quentrix.com/dashboard/account/contact-us";
 export declare const CONTACT_PROD = "https://hub.selfcommunity.com/dashboard/account/contact-us";
-export declare const MAKE_MARKETING_STAGE = "https://make.selfcommunity.io/marketing/invitation";
-export declare const MAKE_MARKETING_PROD = "https://make.stage.quentrix.com/marketing/invitation";
-export declare const CONSOLE_STAGE = "https://make.selfcommunity.io/contents/interests";
-export declare const CONSOLE_PROD = "https://make.stage.quentrix.com/contents/interests";

package/lib/esm/components/PlatformWidget/constants.js

@@ -3,7 +3,3 @@ export const HUB_STAGE = 'https://hub.stage.quentrix.com/';
 export const HUB_PROD = 'https://hub.selfcommunity.com/';
 export const CONTACT_STAGE = 'https://hub.stage.quentrix.com/dashboard/account/contact-us';
 export const CONTACT_PROD = 'https://hub.selfcommunity.com/dashboard/account/contact-us';
-export const MAKE_MARKETING_STAGE = 'https://make.selfcommunity.io/marketing/invitation';
-export const MAKE_MARKETING_PROD = 'https://make.stage.quentrix.com/marketing/invitation';
-export const CONSOLE_STAGE = 'https://make.selfcommunity.io/contents/interests';
-export const CONSOLE_PROD = 'https://make.stage.quentrix.com/contents/interests';

package/lib/esm/components/PollSuggestionWidget/PollSnippet/PollSnippet.js

@@ -56,7 +56,7 @@ export default function PollSnippet(props) {
     const [openAlert, setOpenAlert] = useState(false);
     // RENDER
     if (!autoHide) {
-        return (_jsxs(_Fragment, { children: [_jsx(Root, { elevation: 0, className: classNames(classes.root, className), image: _jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !feedObj.author.community_badge }, { children: _jsx(Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: feedObj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.title }, { children: feedObj.poll.title }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: feedObj.added_at }) })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }) }))] })) }), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Root, { elevation: 0, className: classNames(classes.root, className), image: _jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null, children: _jsx(UserAvatar, { hide: !feedObj.author.community_badge, children: _jsx(Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }) }) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null, children: feedObj.author.username })), _jsx(Typography, { variant: "body2", className: classes.title, children: feedObj.poll.title })] }), disableTypography: true, secondary: _jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center", children: [_jsx(Link, { to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), className: classes.activityAt, children: _jsx(DateTimeAgo, { component: "span", date: feedObj.added_at }) }), _jsx(Button, { component: Link, to: scRoutingContext.url(getContributionRouteName(feedObj), getRouteData(feedObj)), variant: "text", color: "secondary", size: "small", children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }) })] }) }), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
     }
     return null;
 }

package/lib/esm/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -162,6 +162,6 @@ export default function PollSuggestionWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((obj) => (_jsx(ListItem, { children: _jsx(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((obj) => (_jsx(ListItem, { children: _jsx(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, { className: classes.title, variant: "h5", children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) }), !state.count ? (_jsx(Typography, { className: classes.noResults, variant: "body2", children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) })) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((obj) => (_jsx(ListItem, { children: _jsx(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && (_jsx(Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }) }))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) }), children: _jsx(List, { children: state.results.map((obj) => (_jsx(ListItem, { children: _jsx(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) }) })))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

package/lib/esm/components/PollSuggestionWidget/Skeleton.js

@@ -35,5 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function PollSuggestionWidgetSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: 120 }), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => (_jsx(ListItem, { children: _jsx(PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: 120 }), _jsx(List, { className: classes.list, children: [...Array(4)].map((user, index) => (_jsx(ListItem, { children: _jsx(PollSnippetSkeleton, { elevation: 0 }) }, index))) })] }) })));
 }

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -151,17 +151,17 @@ export default function PrivateMessageComponent(inProps) {
      * Renders snippets section
      */
     function renderSnippets() {
-        return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
+        return (_jsx(Grid, { item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }), children: _jsx(PrivateMessageSnippets, { snippetActions: {
                     onSnippetClick: handleThreadOpening,
                     onNewMessageClick: handleOpenNewMessage,
                     onDeleteConfirm: handleDeleteThread
-                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
+                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) }));
     }
     /**
      * Renders thread section
      */
     function renderThread() {
-        return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
+        return (_jsx(Grid, { item: true, xs: 12, md: 7, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }), children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) }));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
@@ -169,5 +169,5 @@ export default function PrivateMessageComponent(inProps) {
     if (!authUserId || !privateMessagingEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
+    return (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className), children: [renderSnippets(), renderThread()] })));
 }

package/lib/esm/components/PrivateMessageComponent/Skeleton.d.ts

@@ -6,7 +6,7 @@ interface PrivateMessageComponentSkeletonMap {
      */
     className?: string;
 }
-export declare type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
+export type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
 

package/lib/esm/components/PrivateMessageComponent/Skeleton.js

@@ -40,5 +40,5 @@ export default function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(Root, Object.assign({ container: true, className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
+    return (_jsxs(Root, { container: true, className: classNames(classes.root, className), children: [!isMobile && (_jsx(Grid, { item: true, xs: 12, md: 5, className: classes.snippetsSection, children: _jsx(PrivateMessageSnippetsSkeleton, {}) })), _jsx(Grid, { item: true, xs: 12, md: 7, className: classes.threadSection, children: _jsx(PrivateMessageThreadSkeleton, {}) })] }));
 }

package/lib/esm/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -17,7 +17,7 @@ import classNames from 'classnames';
 import { bytesToSize } from '../../../utils/sizeCoverter';
 import { PREFIX } from '../constants';
 const MAX_FILE_SIZE = 10485760;
-const UploadButton = asUploadButton(forwardRef((props, ref) => (_jsx(IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }, { children: _jsx(Icon, { children: "upload" }) })))));
+const UploadButton = asUploadButton(forwardRef((props, ref) => (_jsx(IconButton, Object.assign({}, props, { ref: ref, color: "inherit", children: _jsx(Icon, { children: "upload" }) })))));
 const classes = {
     root: `${PREFIX}-message-media-uploader-root`,
     uploadSection: `${PREFIX}-upload-section`,
@@ -104,11 +104,11 @@ export default function MessageMediaUploader(props) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(CardHeader, { action: _jsx(Icon, Object.assign({ onClick: onClose, className: classes.closeButton }, { children: "close" })) }), Object.keys(errors).map((id) => (_jsx(Fade, Object.assign({ in: true }, { children: _jsxs(Alert, Object.assign({ severity: "error", onClose: handleRemoveErrors(id) }, { children: [_jsx(AlertTitle, { children: errors[id].name }), errors[id].error] })) }), id))), _jsx(CardContent, { children: _jsxs(ChunkedUploady, Object.assign({ destination: {
+    return (_jsxs(Root, { className: classNames(classes.root, className), children: [_jsx(CardHeader, { action: _jsx(Icon, { onClick: onClose, className: classes.closeButton, children: "close" }) }), Object.keys(errors).map((id) => (_jsx(Fade, { in: true, children: _jsxs(Alert, { severity: "error", onClose: handleRemoveErrors(id), children: [_jsx(AlertTitle, { children: errors[id].name }), errors[id].error] }) }, id))), _jsx(CardContent, { children: _jsxs(ChunkedUploady, { destination: {
                         url: `${scContext.settings.portal}${Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
                         headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                         method: Endpoints.PrivateMessageUploadMediaInChunks.method
-                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, Object.assign({ className: classes.uploadSection }, { children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'medium' }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), _jsxs(List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
+                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType, children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, { className: classes.uploadSection, children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, { textAlign: 'center', fontWeight: 'medium', children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) })] })), _jsxs(List, { className: classes.previewContent, children: [previews.length !== 0 &&
                                     previews.map((item, index) => {
                                         var _a;
                                         return (_jsx(React.Fragment, { children: 'file' in item && (_jsxs(ListItem, Object.assign({ className: classes.previewItem }, getMouseEvents(() => handleMouseEnter(item.file_uuid), () => handleMouseLeave(item.file_uuid)), { children: ['video_url' in item ? (_jsx("video", { src: item.video_url })) : (_jsx("img", { src: item.file.type.startsWith(SCMessageFileType.PDF) && !item.file_url
@@ -116,6 +116,6 @@ export default function MessageMediaUploader(props) {
                                                             : !item.file_url
                                                                 ? documentPlaceholder
                                                                 : item.file_url })), _jsx(ImageListItemBar, { className: classNames(classes.previewActions, { [classes.progress]: item.completed }), title: typeof item.completed !== 'undefined' &&
-                                                            item.completed !== 0 && _jsx(Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && (_jsxs(Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [_jsx(Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: bytesToSize(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
-                                    }), previews.length !== 0 && action] }))] })) })] })));
+                                                            item.completed !== 0 && _jsx(Typography, { textAlign: "center", children: `${Math.round(item.completed)}%` }), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, { onClick: () => handleClear(item.file_uuid), size: "small", children: _jsx(Icon, { children: "delete" }) })) }) }), isHovered[item.file_uuid] && (_jsxs(Box, { component: 'span', className: classes.previewInfo, children: [_jsx(Typography, { noWrap: true, textAlign: 'center', children: item.file.name }), _jsx(Typography, { textAlign: 'center', fontWeight: 'light', children: bytesToSize(item.file.size) })] }))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
+                                    }), previews.length !== 0 && action] })] }) })] }));
 }