@selfcommunity/react-ui 0.9.0-alpha.2 → 0.9.0-alpha.21

package/lib/esm/components/OnBoardingWidget/ActionsButton.js

@@ -0,0 +1,81 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { FormattedMessage } from 'react-intl';
+import { PreferenceService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { SCPreferenceName } from '@selfcommunity/types';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-actions-button-root`,
+    drawerRoot: `${PREFIX}-actions-drawer-root`,
+    menuRoot: `${PREFIX}-actions-menu-root`,
+    paper: `${PREFIX}-actions-paper`,
+    item: `${PREFIX}-actions-item`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.drawerRoot
+})(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.menuRoot
+})(() => ({}));
+export default function OnBoardingActionsButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, isExpanded, onExpandChange, onHideOnBoarding } = props, rest = __rest(props, ["className", "isExpanded", "onExpandChange", "onHideOnBoarding"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    /**
+     * Updates onBoarding dynamic preference
+     */
+    const hideOnBoarding = () => {
+        PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: true })
+            .then(() => {
+            onHideOnBoarding();
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const renderList = () => {
+        if (isMobile) {
+            return [
+                isExpanded ? (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_less" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] })) }), "expand_less")) : (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_more" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] })) }), "expand_more")),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: hideOnBoarding }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] })) }), "close")
+            ];
+        }
+        else {
+            return [
+                isExpanded ? (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_less" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] }), "expand_less")) : (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_more" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] }), "expand_more")),
+                _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: hideOnBoarding }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] }), "close")
+            ];
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
+}

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

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import Category from './Steps/Category';
 import { PREFIX } from './constants';
-import { getTheme, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
+import { getTheme, SCPreferences, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
 import Appearance from './Steps/Appearance';
 import Profile from './Steps/Profile';
 import Invite from './Steps/Invite';
@@ -19,13 +19,14 @@ import Content from './Steps/Content';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Endpoints, http, OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
-import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity/types';
+import { SCOnBoardingStepStatusType, SCOnBoardingStepType, SCOnBoardingStepIdType } from '@selfcommunity/types';
 import OnBoardingWidgetSkeleton from './Skeleton';
 import { closeSnackbar, useSnackbar } from 'notistack';
 import HeaderPlaceholder from '../../assets/onBoarding/header';
 import BaseDialog from '../../shared/BaseDialog';
 import PubSub from 'pubsub-js';
 import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
+import OnBoardingActionsButton from './ActionsButton';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -34,7 +35,9 @@ const classes = {
     intro: `${PREFIX}-intro`,
     steps: `${PREFIX}-steps`,
     stepsMobile: `${PREFIX}-steps-mobile`,
-    stepContent: `${PREFIX}-step-content`
+    stepContent: `${PREFIX}-step-content`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    dialogContent: `${PREFIX}-dialog-content`
 };
 const Root = styled(Widget, {
     name: PREFIX,
@@ -46,6 +49,11 @@ const AccordionRoot = styled(Accordion, {
     slot: 'AccordionRoot',
     overridesResolver: (props, styles) => styles.accordionRoot
 })(() => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
 const OnBoardingWidget = (inProps) => {
     // PROPS
     const props = useThemeProps({
@@ -70,7 +78,9 @@ const OnBoardingWidget = (inProps) => {
     const prevContentsStep = usePreviousValue(currentContentsStep);
     const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CATEGORIES);
     const prevCategoriesStep = usePreviousValue(currentCategoriesStep);
-    const [showCategoriesModal, setShowCategoriesModal] = useState(false);
+    const [showNoCategoriesModal, setShowNoCategoriesModal] = useState(false);
+    const [showCategoriesWarningModal, setShowWarningCategoriesModal] = useState(false);
+    const [isGenerating, setIsGenerating] = useState(false);
     // CONTEXT
     const scUserContext = useSCUser();
     const isAdmin = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -78,7 +88,11 @@ const OnBoardingWidget = (inProps) => {
     const scPreferencesContext = useSCPreferences();
     const scThemeContext = useSCTheme();
     const { enqueueSnackbar } = useSnackbar();
-    const [isGenerating, setIsGenerating] = useState(false);
+    const showOnBoarding = useMemo(() => scPreferencesContext.preferences &&
+        SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED in scPreferencesContext.preferences &&
+        SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED].value &&
+        !scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN].value, [scPreferencesContext.preferences]);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -164,22 +178,29 @@ const OnBoardingWidget = (inProps) => {
     };
     const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!isLoading && !categories.length) {
-            setShowCategoriesModal(true);
+            setShowNoCategoriesModal(true);
+        }
+        else if (stepId === SCOnBoardingStepIdType.CATEGORIES) {
+            setShowWarningCategoriesModal(true);
         }
         else {
-            yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
-                .then(() => {
-                setIsGenerating(true);
-            })
-                .catch((error) => {
-                Logger.error(SCOPE_SC_UI, error);
-                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
-                    variant: 'error',
-                    autoHideDuration: 3000
-                });
-            });
+            yield startStep(stepId);
         }
     });
+    const startStep = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
+        showCategoriesWarningModal && setShowWarningCategoriesModal(false);
+        yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
+            .then(() => {
+            setIsGenerating(true);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    });
     const handlePreferencesUpdate = () => {
         PreferenceService.getAllPreferences().then((preferences) => {
             const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
@@ -189,7 +210,7 @@ const OnBoardingWidget = (inProps) => {
     };
     const handleCategoriesClick = () => {
         fetchPlatform('/contents/interests/');
-        setShowCategoriesModal(false);
+        setShowNoCategoriesModal(false);
     };
     /**
      * Notify when a category info changes
@@ -279,10 +300,10 @@ const OnBoardingWidget = (inProps) => {
         }
         return content;
     };
-    if (!isAdmin) {
+    if (!isAdmin || !showOnBoarding) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(OnBoardingActionsButton, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
@@ -301,6 +322,10 @@ const OnBoardingWidget = (inProps) => {
                                     // @ts-ignore
                                     // eslint-disable-next-line prettier/prettier
                                     icon: (...chunks) => _jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
-                                } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
+                                } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showNoCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), _jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(SCOnBoardingStepIdType.CATEGORIES), endIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: _jsxs(Typography, Object.assign({ className: classes.dialogContent }, { children: [_jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
+                                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                            // @ts-ignore
+                                                            b: (chunks) => _jsx("b", { children: chunks })
+                                                        } })] })) })))] }))] })) })) })] })) })));
 };
 export default OnBoardingWidget;

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

@@ -18,6 +18,7 @@ const classes = {
     summary: `${PREFIX}-app-summary`,
     step: `${PREFIX}-app-step`,
     image: `${PREFIX}-app-image`,
+    imageAndroid: `${PREFIX}-app-image-android`,
     action: `${PREFIX}-app-action`,
     button: `${PREFIX}-app-button`
 };
@@ -53,7 +54,7 @@ export default function App(inProps) {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (...chunks) => _jsx("strong", { children: chunks })
-                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
+                                    } }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),

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

@@ -63,8 +63,7 @@ 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);
@@ -160,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)) }
@@ -176,7 +173,7 @@ export default function Appearance(inProps) {
             onCompleteAction();
         })
             .catch((e) => {
-            setLoadingLogo(false);
+            setLoadingLogo('');
             Logger.error(SCOPE_SC_UI, e);
         });
     });
@@ -186,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(() => {
@@ -221,7 +218,7 @@ export default function Appearance(inProps) {
             colorRef.current.blur();
         }
     };
-    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) })), _jsxs(Box, Object.assign({ 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, 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, 
+    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) })), _jsxs(Box, Object.assign({ 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, 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), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(LoadingButton, Object.assign({ 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 }))

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js

@@ -152,6 +152,7 @@ export default function PublicInfo(props) {
             }
         };
         let content = null;
+        console.log(metadataDefinitions);
         switch (field) {
             case SCUserProfileFields.USERNAME:
                 component.element = UsernameTextField;
@@ -220,7 +221,7 @@ export default function PublicInfo(props) {
                 return null;
             default:
                 if (metadataDefinitions && metadataDefinitions[field]) {
-                    return (_jsx(MetadataField, Object.assign({ id: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props), field));
+                    return (_jsx(MetadataField, Object.assign({ id: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving || (user[field] && 'editable' in metadataDefinitions[field] && !metadataDefinitions[field].editable), error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props), field));
                 }
                 break;
         }

package/lib/esm/shared/EventActionsMenu/index.d.ts

@@ -9,7 +9,7 @@ export interface EventActionsMenuProps extends IconButtonProps {
     /**
      * The event
      */
-    event: SCEventType;
+    event?: SCEventType;
     /**
      * The event id
      */

package/lib/esm/shared/EventActionsMenu/index.js

@@ -1,21 +1,22 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import { EventService } from '@selfcommunity/api-services';
-import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
+import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { copyTextToClipboard } from '@selfcommunity/utils';
+import classNames from 'classnames';
 import { enqueueSnackbar } from 'notistack';
 import PubSub from 'pubsub-js';
-import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import { useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import EventForm from '../../components/EventForm';
+import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { checkEventFinished } from '../../utils/events';
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -82,12 +83,7 @@ export default function EventActionsMenu(inProps) {
     const scUserContext = useSCUser();
     const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
     const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
-    const isEventFinished = useMemo(() => {
-        if (scEvent && !scEvent.running) {
-            return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
-        }
-        return false;
-    }, [scEvent]);
+    const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -153,7 +149,7 @@ export default function EventActionsMenu(inProps) {
     const renderList = () => {
         return [
             _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GET_EVENT_LINK) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
-            _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
+            !isEventFinished && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar")),
             isEventAdmin &&
                 !isEventFinished && [
                 _jsx(Divider, {}, "divider"),

package/lib/esm/utils/events.d.ts

@@ -0,0 +1,2 @@
+import { SCEventType } from '@selfcommunity/types';
+export declare function checkEventFinished(event: SCEventType | null): boolean;

package/lib/esm/utils/events.js

@@ -0,0 +1,6 @@
+export function checkEventFinished(event) {
+    if (event && !event.running) {
+        return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
+    }
+    return false;
+}

package/lib/esm/utils/widget.js

@@ -55,7 +55,17 @@ export function dataWidgetReducer(state, action) {
             _state = { isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false };
             break;
         case actionWidgetTypes.INITIALIZE:
-            _state = Object.assign({ isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false }, action.payload);
+            _state = {
+                cacheKey: action.payload.cacheKey ? action.payload.cacheKey : null,
+                count: action.payload.count ? action.payload.count : 0,
+                results: action.payload.results ? action.payload.results : [],
+                next: action.payload.next ? action.payload.next : null,
+                previous: action.payload.previous ? action.payload.previous : null,
+                isLoadingNext: action.payload.isLoadingNext ? action.payload.isLoadingNext : false,
+                isLoadingPrevious: action.payload.isLoadingPrevious ? action.payload.isLoadingPrevious : false,
+                visibleItems: action.payload.visibleItems ? action.payload.visibleItems : null,
+                initialized: false
+            };
             break;
     }
     LRUCache.set(_state.cacheKey, _state);