@selfcommunity/react-ui 0.11.0-alpha.7 → 0.11.0-alpha.70

package/lib/esm/components/CommunityPaywalls/CommunityPaywalls.js

@@ -0,0 +1,66 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { CommunityApiClient } from '@selfcommunity/api-services';
+import { SCContentType } from '@selfcommunity/types';
+import { useIsComponentMountedRef, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { PREFIX } from './constants';
+import CommunityPaywallSkeleton from './Skeleton';
+import PaymentProduct from '../PaymentProduct';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Grid, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function CommunityPaywalls(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, community, onUpdatePaymentOrder, callbackUrl } = props, rest = __rest(props, ["className", "community", "onUpdatePaymentOrder", "callbackUrl"]);
+    // STATE
+    const [scCommunity, setSCCommunity] = useState(null);
+    const [loading, setLoading] = useState(true);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const isMountedRef = useIsComponentMountedRef();
+    /**
+     * On mount, fetches community products
+     */
+    useEffect(() => {
+        if (community) {
+            setSCCommunity(community);
+            setLoading(false);
+        }
+        else {
+            CommunityApiClient.getCommunities()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    if (data.count && data.results.length) {
+                        setSCCommunity(data.results[0]);
+                    }
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [community]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (loading) {
+        return _jsx(CommunityPaywallSkeleton, {});
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ xs: 12, sm: 12, md: 4 }, { children: _jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
+}

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

@@ -0,0 +1,27 @@
+import { PaymentProductSkeletonProps } from '../PaymentProduct/Skeleton';
+import { Grid2Props } from '@mui/material/Unstable_Grid2';
+export interface CommunityPaywallsSkeletonProps extends Grid2Props {
+    className?: string;
+    PaymentProductSkeletonComponentProps?: PaymentProductSkeletonProps;
+}
+/**
+ * > API documentation for the Community-JS CommunityPaywall Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CommunityPaywallSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCommunityPaywallSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCommunityPaywallSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function CommunityPaywallsSkeleton(inProps: any): JSX.Element;

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

@@ -0,0 +1,50 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery, useTheme, styled } from '@mui/material';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
+import Grid from '@mui/material/Unstable_Grid2';
+import { useThemeProps } from '@mui/system';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    products: `${PREFIX}-products`
+};
+const Root = styled(Grid, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS CommunityPaywall Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CommunityPaywallSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCommunityPaywallSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCommunityPaywallSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function CommunityPaywallsSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: `${PREFIX}Skeleton`
+    });
+    const { className, PaymentProductSkeletonComponentProps } = props, rest = __rest(props, ["className", "PaymentProductSkeletonComponentProps"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: [...Array(isMobile ? 2 : 3)].map((product, index) => (_jsx(Grid, Object.assign({ xs: 4 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ variant: 'outlined' }, PaymentProductSkeletonComponentProps)) }), index))) })));
+}

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

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

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCCommunityPaywalls';

package/lib/esm/components/CommunityPaywalls/index.d.ts

@@ -0,0 +1,4 @@
+import CommunityPaywalls, { CommunityPaywallsProps } from './CommunityPaywalls';
+import CommunityPaywallsSkeleton from './Skeleton';
+export default CommunityPaywalls;
+export { CommunityPaywallsProps, CommunityPaywallsSkeleton };

package/lib/esm/components/CommunityPaywalls/index.js

@@ -0,0 +1,4 @@
+import CommunityPaywalls from './CommunityPaywalls';
+import CommunityPaywallsSkeleton from './Skeleton';
+export default CommunityPaywalls;
+export { CommunityPaywallsSkeleton };

package/lib/esm/components/Composer/Attributes/Attributes.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { Box, Chip } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
+import { Box, Chip, styled, Icon } from '@mui/material';
 import classNames from 'classnames';
 import TagChip from '../../../shared/TagChip';
 import { PREFIX } from '../constants';

package/lib/esm/components/Composer/Composer.d.ts

@@ -34,6 +34,7 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
         medias?: SCMediaType[];
         poll?: SCPollType;
         location?: string;
+        scheduled_at?: string;
     };
     /**
      * Media objects available

package/lib/esm/components/Composer/Composer.js

@@ -5,9 +5,7 @@ import { SCContributionType, SCFeatureName, SCFeedTypologyType } from '@selfcomm
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import Icon from '@mui/material/Icon';
-import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery } from '@mui/material';
-import { styled, useTheme } from '@mui/material/styles';
+import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, Icon, styled, useTheme } from '@mui/material';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POLL } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
 import LoadingButton from '@mui/lab/LoadingButton';
@@ -30,6 +28,7 @@ import ComposerSkeleton from './Skeleton';
 import CloseLayer from './Layer/CloseLayer';
 import BackdropScrollDisabled from '../../shared/BackdropScrollDisabled';
 import { clearAllBodyScrollLocks } from 'body-scroll-lock';
+import ScheduledLayer from './Layer/ScheduledLayer';
 const DialogTransition = forwardRef(function Transition(props, ref) {
     return _jsx(Fade, Object.assign({ ref: ref }, props));
 });
@@ -60,15 +59,16 @@ const COMPOSER_INITIAL_STATE = {
     html: '',
     htmlError: null,
     categories: [],
+    categoriesError: null,
     group: null,
     event: null,
-    categoriesError: null,
     groupsError: null,
     addressing: null,
     addressingError: null,
     medias: [],
     poll: null,
     location: null,
+    scheduled_at: null,
     error: null
 };
 const reducer = (state, action) => {
@@ -143,7 +143,17 @@ export default function Composer(inProps) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [layer, setLayer] = useState();
     const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: random() }));
-    const { key, id, type, title, titleError, html, categories, event, group, addressing, audience, medias, poll, pollError, location, error } = state;
+    const { key, id, type, title, titleError, html, categories, categoriesError, event, group, addressing, addressingError, audience, medias, poll, pollError, location, scheduled_at, error } = state;
+    //MEMO
+    const scheduledPostsEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value, [preferences]);
+    const addressingRequiredEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_POST_ADDRESSING_REQUIRED_ENABLED].value, [preferences]);
+    const categoryRequiredEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_POST_CATEGORY_REQUIRED_ENABLED].value, [preferences]);
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -168,7 +178,8 @@ export default function Composer(inProps) {
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
-                    location: _feedObject.location
+                    location: _feedObject.location,
+                    scheduled_at: _feedObject.scheduled_at
                 }
             });
             setIsLoading(false);
@@ -196,8 +207,10 @@ export default function Composer(inProps) {
         return (!isLoading &&
             ((type === SCContributionType.DISCUSSION && title.length > 0 && title.length < COMPOSER_TITLE_MAX_LENGTH) ||
                 (type === SCContributionType.POST && (stripHtml(html).length > 0 || medias.length > 0 || hasPoll)) ||
-                (type === COMPOSER_TYPE_POLL && hasPoll)));
-    }, [isLoading, type, title, html, medias, hasPoll]);
+                (type === COMPOSER_TYPE_POLL && hasPoll)) &&
+            (!addressingRequiredEnabled || (addressing && addressing.length > 0)) &&
+            (!categoryRequiredEnabled || (categories && categories.length > 0)));
+    }, [isLoading, type, title, html, medias, hasPoll, addressing, addressingRequiredEnabled, categories, categoryRequiredEnabled]);
     const isIOS = useMemo(() => iOS(), []);
     // Load feed object
     useEffect(() => {
@@ -305,23 +318,29 @@ export default function Composer(inProps) {
             type: 'multiple',
             value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
                     ? { titleError: _jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
-                    : null })
+                    : null, addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null })
         });
     }, []);
     const handleChangeDiscussion = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null, addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangePost = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign({}, content)
+            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleChangeCategories = useCallback((value) => {
-        dispatch({ type: 'categories', value });
+        dispatch({
+            type: 'multiple',
+            value: {
+                categories: value,
+                categoriesError: categoryRequiredEnabled && (!value || value.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null
+            }
+        });
         setLayer(null);
     }, []);
     const handleAddCategoryLayer = useCallback(() => handleAddLayer({
@@ -341,7 +360,13 @@ export default function Composer(inProps) {
             dispatch({ type: 'event', value });
         }
         else {
-            dispatch({ type: 'addressing', value });
+            dispatch({
+                type: 'multiple',
+                value: {
+                    addressing: value,
+                    addressingError: addressingRequiredEnabled && !value ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null
+                }
+            });
         }
         setLayer(null);
     }, [group]);
@@ -371,6 +396,19 @@ export default function Composer(inProps) {
             defaultValue: location
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeLocation, location]);
+    const handleChangeScheduled = useCallback((value) => {
+        dispatch({ type: 'scheduled_at', value });
+        setLayer(null);
+    }, []);
+    const handleAddScheduledLayer = useCallback(() => handleAddLayer({
+        name: 'scheduled_at',
+        Component: ScheduledLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeScheduled,
+            defaultValue: scheduled_at
+        }
+    }), [handleAddLayer, handleRemoveLayer, handleChangeScheduled, scheduled_at]);
     const handleChangeMedias = useCallback((value) => {
         const _medias = [...value];
         dispatch({
@@ -404,7 +442,7 @@ export default function Composer(inProps) {
     const handleChangeAttributes = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign({}, content)
+            value: Object.assign(Object.assign({}, content), { addressingError: addressingRequiredEnabled && (!content.addressing || content.addressing.length === 0) ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null, categoriesError: categoryRequiredEnabled && content.categories.length === 0 ? (_jsx(FormattedMessage, { id: "ui.composer.categories.error.missing", defaultMessage: "ui.composer.categories.error.missing" })) : null })
         });
     }, []);
     const handleClickAttributes = useCallback((attr) => {
@@ -418,8 +456,11 @@ export default function Composer(inProps) {
             case 'location':
                 handleAddLocationLayer();
                 break;
+            case 'scheduled_at':
+                handleAddScheduledLayer();
+                break;
         }
-    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer, handleAddScheduledLayer]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -445,6 +486,9 @@ export default function Composer(inProps) {
         if (preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && location) {
             data.location = location;
         }
+        if (preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value && scheduled_at) {
+            data.scheduled_at = scheduled_at;
+        }
         if (features.includes(SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
@@ -493,7 +537,24 @@ export default function Composer(inProps) {
             dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
-    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, event, group, addressing, audience, medias, poll, location, hasPoll]);
+    }, [
+        scUserContext.user,
+        feedObjectType,
+        id,
+        type,
+        title,
+        html,
+        categories,
+        event,
+        group,
+        addressing,
+        audience,
+        medias,
+        poll,
+        location,
+        scheduled_at,
+        hasPoll
+    ]);
     //edited here
     const handleClose = useCallback((e, reason) => {
         if (unloadRef.current) {
@@ -558,11 +619,11 @@ export default function Composer(inProps) {
         }
         switch (type) {
             case COMPOSER_TYPE_POLL:
-                return (_jsx(ContentPoll, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }, key));
+                return (_jsx(ContentPoll, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location, scheduled_at }, error: { pollError, categoriesError, addressingError }, disabled: isSubmitting }, key));
             case SCContributionType.DISCUSSION:
-                return (_jsx(ContentDiscussion, { value: { title, html, categories, event, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, isContentSwitchButtonVisible: !canSubmit && !editMode, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
+                return (_jsx(ContentDiscussion, { value: { title, html, categories, event, group, addressing, medias, poll, location, scheduled_at }, error: { titleError, categoriesError, addressingError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, isContentSwitchButtonVisible: !canSubmit && !editMode, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
             default:
-                return (_jsx(ContentPost, { value: { html, categories, event, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
+                return (_jsx(ContentPost, { value: { html, categories, event, group, addressing, medias, poll, location, scheduled_at }, error: { error, categoriesError, addressingError }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
     }, [
         key,
@@ -577,6 +638,7 @@ export default function Composer(inProps) {
         poll,
         pollError,
         location,
+        scheduled_at,
         error,
         handleChangePoll,
         handleChangePost,
@@ -587,7 +649,7 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+    return (_jsxs(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? (_jsx(FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : (_jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
                                     if (mediaObjectType.previewComponent) {
                                         return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
                                     }
@@ -599,5 +661,5 @@ export default function Composer(inProps) {
                                 .map((mediaObjectType) => {
                                 const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
                                 return (_jsx(mediaObjectType.triggerButton, Object.assign({ disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props), mediaObjectType.name));
-                            }), _jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer }, { children: _jsx(Icon, { children: "category" }) })), _jsx(IconButton, Object.assign({ disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.event), onClick: handleAddAudienceLayer }, { children: (!group && addressing === null) || (!event && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? (_jsx(Icon, { children: "public" })) : group ? (_jsx(Icon, { children: "groups" })) : event ? (_jsx(Icon, { children: "CalendarIcon" })) : (_jsx(Icon, { children: "label" })) })), preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (_jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "add_location_alt" }) })))] }))] })), layer && (_jsx(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: _jsx(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
+                            }), _jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer }, { children: _jsx(Icon, { children: "category" }) })), _jsx(IconButton, Object.assign({ disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.event), onClick: handleAddAudienceLayer }, { children: addressing === null || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? (addressingRequiredEnabled ? (_jsx(Icon, { children: "label" })) : (_jsx(Icon, { children: "public" }))) : group ? (_jsx(Icon, { children: "groups" })) : event ? (_jsx(Icon, { children: "CalendarIcon" })) : (_jsx(Icon, { children: "label" })) })), preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (_jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "add_location_alt" }) }))), preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value && (_jsx(IconButton, Object.assign({ disabled: isSubmitting || (Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.scheduled_at) && Boolean(!(feedObject === null || feedObject === void 0 ? void 0 : feedObject.draft))), onClick: handleAddScheduledLayer, color: scheduled_at !== null ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "access_time" }) })))] }))] })), layer && (_jsx(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: _jsx(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
 }

package/lib/esm/components/Composer/Content/ContentDiscussion/ContentDiscussion.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, TextField, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import classNames from 'classnames';
 import Editor from '../../../Editor';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -35,7 +34,7 @@ const DEFAULT_DISCUSSION = {
 export default (props) => {
     // PROPS
     const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), defaultInitialMaxHeightContentEditor = DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, defaultExtraSpaceContentEditor = DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, isContentSwitchButtonVisible = true, error = {}, disabled = false, onChange, EditorProps = {} } = props;
-    const { titleError = null, error: generalError = null } = Object.assign({}, error);
+    const { titleError = null, categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     const titleRef = useRef(null);
     const [editorMaxHeight, setEditorMaxHeight] = useState(defaultInitialMaxHeightContentEditor + (isContentSwitchButtonVisible ? 0 : DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE));
     // HOOKS
@@ -81,5 +80,5 @@ export default (props) => {
                     defaultMessage: 'ui.composer.content.discussion.title.label'
                 }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {
                     endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
-                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), _jsx(Box, Object.assign({ sx: { [`& .${SCEDITOR_PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
+                }, error: Boolean(titleError) || Boolean(categoriesError) || Boolean(addressingError), helperText: titleError || categoriesError || addressingError, disabled: disabled }), _jsx(Box, Object.assign({ sx: { [`& .${SCEDITOR_PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
 };

package/lib/esm/components/Composer/Content/ContentLesson/ContentLesson.d.ts

@@ -0,0 +1,38 @@
+import { BoxProps } from '@mui/material';
+import { EditorProps } from '../../../Editor';
+import { SCMediaType } from '@selfcommunity/types';
+export interface ContentLessonProps extends Omit<BoxProps, 'value' | 'onChange'> {
+    /**
+     * Value of the component
+     */
+    value?: any;
+    /**
+     * Widgets to insert into the feed
+     * @default empty array
+     */
+    error?: any;
+    /**
+     * All the inputs should be disabled?
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback for change html
+     * @param value
+     * @default empty object
+     */
+    onChange: (html: string) => void;
+    /**
+     * Callback for media change
+     * @param media
+     * @default null
+     */
+    onMediaChange: (medias: SCMediaType[]) => void;
+    /**
+     * Props to spread into the editor object
+     * @default empty object
+     */
+    EditorProps?: EditorProps;
+}
+declare const _default: (props: ContentLessonProps) => JSX.Element;
+export default _default;

package/lib/esm/components/Composer/Content/ContentLesson/ContentLesson.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Icon, IconButton, InputAdornment, Typography, styled } from '@mui/material';
+import classNames from 'classnames';
+import Editor from '../../../Editor';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../../constants';
+import { File, Link } from '../../../../shared/Media';
+import UrlTextField from '../../../../shared/Media/Link/UrlTextField';
+const classes = {
+    root: `${PREFIX}-content-lesson-root`,
+    generalError: `${PREFIX}-general-error`,
+    title: `${PREFIX}-content-lesson-title`,
+    medias: `${PREFIX}-content-lesson-medias`,
+    editor: `${PREFIX}-content-lesson-editor`,
+    link: `${PREFIX}-content-lesson-link`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'ContentLessonRoot'
+})(({ theme }) => ({}));
+export default (props) => {
+    // PROPS
+    const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
+    const { error: generalError = null } = Object.assign({}, error);
+    const mediaObjectTypes = [File, Link];
+    const [medias, setMedias] = useState((value === null || value === void 0 ? void 0 : value.medias) || []);
+    const [openLink, setOpenLink] = useState();
+    const linkInputRef = useRef(null);
+    // HANDLERS
+    const handleChangeHtml = useCallback((html) => {
+        onChange(html);
+    }, [value]);
+    const handleChangeMedias = useCallback((value) => {
+        setMedias([...value]);
+        onMediaChange([...value]);
+    }, []);
+    const handleChangeMedia = (value) => {
+        setMedias((prev) => [...prev, value]);
+        onMediaChange([...medias, value]);
+    };
+    const handleLinkAdd = useCallback((media) => {
+        setMedias([...medias, media]);
+        setOpenLink(false);
+    }, [medias]);
+    useEffect(() => {
+        if (openLink && linkInputRef.current) {
+            linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [openLink]);
+    // RENDER
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
+                    customLink: _jsx(Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Link.name),
+                    uploadImage: false,
+                    uploadFile: true
+                } })), openLink && (_jsx(UrlTextField, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleLinkAdd, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: _jsx(Icon, { children: "close" }) })) })))
+                } })), medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                    }
+                }) })))] })));
+};

package/lib/esm/components/Composer/Content/ContentLesson/index.d.ts

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

package/lib/esm/components/Composer/Content/ContentLesson/index.js

@@ -0,0 +1,2 @@
+import ContentLesson from './ContentLesson';
+export default ContentLesson;

package/lib/esm/components/Composer/Content/ContentPoll/ContentPoll.js

@@ -1,15 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from 'react';
-import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography, } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography, styled, Icon, InputAdornment } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import Icon from '@mui/material/Icon';
 import { ReactSortable } from 'react-sortablejs';
-import InputAdornment from '@mui/material/InputAdornment';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH, } from '../../../../constants/Composer';
+import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH } from '../../../../constants/Composer';
 import itLocale from 'date-fns/locale/it';
 import enLocale from 'date-fns/locale/en-US';
 import classNames from 'classnames';
@@ -59,9 +56,9 @@ export default (inProps) => {
         name: PREFIX
     });
     const { className = null, value = { poll: Object.assign({}, DEFAULT_POLL) }, error = {}, disabled, onChange } = props;
-    const { titleError = null, error: generalError = null } = Object.assign({}, error);
+    const { titleError = null, categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     // MEMO
-    const poll = useMemo(() => value.poll ? value.poll : Object.assign({}, DEFAULT_POLL), [value, DEFAULT_POLL]);
+    const poll = useMemo(() => (value.poll ? value.poll : Object.assign({}, DEFAULT_POLL)), [value, DEFAULT_POLL]);
     // INTL
     const intl = useIntl();
     // HANDLERS
@@ -100,7 +97,7 @@ export default (inProps) => {
         minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && _jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && (_jsxs(Typography, Object.assign({ className: classes.generalError }, { children: [generalError && (_jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })), categoriesError && categoriesError, _jsx("br", {}), addressingError && addressingError] }))), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
                         endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
                     } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
                             startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),