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

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.d.ts

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'event' | 'group' | 'addressing' | 'location') => void;
+    onClick?: (attribute: 'categories' | 'event' | 'group' | 'addressing' | 'location' | 'recipients') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

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

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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';
@@ -14,7 +12,7 @@ const Root = styled(Box, {
     slot: 'AttributesRoot'
 })(() => ({}));
 export default (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     // PROPS
     const { className = null, value = null, onChange = null, onClick = null } = props;
     // HANDLERS
@@ -48,7 +46,16 @@ export default (props) => {
     const handleClickLocation = useCallback(() => {
         onClick && onClick('location');
     }, [onClick]);
+    const handleDeleteRecipient = useCallback((identifier) => () => {
+        if (!(value === null || value === void 0 ? void 0 : value.recipients))
+            return;
+        onChange &&
+            onChange(Object.assign(Object.assign({}, value), { recipients: value.recipients.filter((r) => typeof r === 'object' ? r.id !== identifier : r !== identifier) }));
+    }, [value, onChange]);
+    const handleClickRecipient = useCallback(() => {
+        onClick && onClick('recipients');
+    }, [onClick]);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                 (value === null || value === void 0 ? void 0 : value.categories.map((c) => (_jsx(Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: _jsx(Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: _jsx(Icon, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: _jsx(Icon, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
+                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), _jsx(_Fragment, { children: ((_e = value === null || value === void 0 ? void 0 : value.recipients) === null || _e === void 0 ? void 0 : _e.length) > 0 && (_jsxs(_Fragment, { children: [value.recipients.slice(0, 3).map((r) => (_jsx(Chip, { label: typeof r === 'object' ? r.username : r, icon: _jsx(Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(typeof r === 'object' ? r.id : r) }, typeof r === 'object' ? r.id : r))), value.recipients.length > 3 && _jsx(Chip, { label: `+${value.recipients.length - 3}`, onClick: handleClickRecipient })] })) }), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
 };

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

@@ -31,9 +31,11 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
         group?: SCGroupType;
         audience?: string;
         addressing?: SCTagType[];
+        recipients?: any;
         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));
 });
@@ -42,6 +41,8 @@ const classes = {
     attributes: `${PREFIX}-attributes`,
     medias: `${PREFIX}-medias`,
     actions: `${PREFIX}-actions`,
+    selectedAction: `${PREFIX}-selected-action`,
+    actionSelectedIcon: `${PREFIX}-action-selected-icon`,
     layerTransitionRoot: `${PREFIX}-layer-transition-root`
 };
 const Root = styled(Dialog, {
@@ -51,7 +52,7 @@ const Root = styled(Dialog, {
 const LayerTransitionRoot = styled(Slide, {
     name: PREFIX,
     slot: 'LayerTransitionRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 const COMPOSER_INITIAL_STATE = {
     id: null,
     type: null,
@@ -60,15 +61,17 @@ const COMPOSER_INITIAL_STATE = {
     html: '',
     htmlError: null,
     categories: [],
+    categoriesError: null,
     group: null,
     event: null,
-    categoriesError: null,
     groupsError: null,
     addressing: null,
     addressingError: null,
+    recipients: [],
     medias: [],
     poll: null,
     location: null,
+    scheduled_at: null,
     error: null
 };
 const reducer = (state, action) => {
@@ -143,7 +146,22 @@ 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, recipients, 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 usersTaggingEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_POST_USER_ADDRESSING_ENABLED].value, [preferences, features]);
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -166,9 +184,11 @@ export default function Composer(inProps) {
                     event: _feedObject.event,
                     group: _feedObject.group,
                     addressing: _feedObject.addressing,
+                    recipients: _feedObject.recipients,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
-                    location: _feedObject.location
+                    location: _feedObject.location,
+                    scheduled_at: _feedObject.scheduled_at
                 }
             });
             setIsLoading(false);
@@ -196,8 +216,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) || (recipients && recipients.length > 0)) &&
+            (!categoryRequiredEnabled || (categories && categories.length > 0)));
+    }, [isLoading, type, title, html, medias, hasPoll, addressing, recipients, addressingRequiredEnabled, categories, categoryRequiredEnabled]);
     const isIOS = useMemo(() => iOS(), []);
     // Load feed object
     useEffect(() => {
@@ -300,28 +322,41 @@ export default function Composer(inProps) {
     const handleChangeType = useCallback((value) => {
         dispatch({ type: 'type', value });
     }, []);
+    const getAddressingError = (content) => {
+        var _a, _b;
+        const isMissing = addressingRequiredEnabled && !((_a = content.addressing) === null || _a === void 0 ? void 0 : _a.length) && !((_b = content.recipients) === null || _b === void 0 ? void 0 : _b.length);
+        if (!isMissing)
+            return null;
+        return usersTaggingEnabled ? (_jsx(FormattedMessage, { id: "ui.composer.addressingRecipients.error.missing", defaultMessage: "ui.composer.addressingRecipients.error.missing" })) : (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" }));
+    };
     const handleChangePoll = useCallback((content) => {
         dispatch({
             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: getAddressingError(content) })
         });
     }, []);
     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: getAddressingError(content), 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: getAddressingError(content), 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({
@@ -340,24 +375,45 @@ export default function Composer(inProps) {
         else if (event || (value && Object.prototype.hasOwnProperty.call(value, 'recurring'))) {
             dispatch({ type: 'event', value });
         }
+        else if ((Array.isArray(value) &&
+            value.some((item) => (typeof item === 'object' && item !== null && !('color' in item)) || typeof item === 'string')) ||
+            (Array.isArray(recipients) && recipients.length > 0)) {
+            dispatch({
+                type: 'multiple',
+                value: {
+                    recipients: value,
+                    addressingError: addressingRequiredEnabled && !value ? (_jsx(FormattedMessage, { id: "ui.composer.addressing.error.missing", defaultMessage: "ui.composer.addressing.error.missing" })) : null
+                }
+            });
+        }
         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]);
-    const handleAddAudienceLayer = useCallback(() => handleAddLayer({
-        name: 'audience',
-        Component: AudienceLayer,
-        ComponentProps: {
-            onClose: handleRemoveLayer,
-            onSave: handleChangeAudience,
-            defaultValue: group || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'emotional_image_position'))
-                ? group
-                : event || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'recurring'))
-                    ? event
-                    : addressing
-        }
-    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, event, group]);
+    }, [group, event, recipients]);
+    const handleAddAudienceLayer = useCallback(() => {
+        handleAddLayer({
+            name: 'audience',
+            Component: AudienceLayer,
+            ComponentProps: {
+                onClose: handleRemoveLayer,
+                onSave: handleChangeAudience,
+                defaultValue: group || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'emotional_image_position'))
+                    ? group
+                    : event || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'recurring'))
+                        ? event
+                        : (recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 || ((recipients === null || recipients === void 0 ? void 0 : recipients.length) !== 0 && !recipients.some((r) => 'color' in r))
+                            ? recipients
+                            : addressing
+            }
+        });
+    }, [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, event, group, recipients]);
     const handleChangeLocation = useCallback((value) => {
         dispatch({ type: 'location', value });
         setLayer(null);
@@ -371,6 +427,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 +473,7 @@ export default function Composer(inProps) {
     const handleChangeAttributes = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign({}, content)
+            value: Object.assign(Object.assign({}, content), { addressingError: getAddressingError(content), 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) => {
@@ -415,11 +484,17 @@ export default function Composer(inProps) {
             case 'addressing':
                 handleAddAudienceLayer();
                 break;
+            case 'recipients':
+                handleAddAudienceLayer();
+                break;
             case 'location':
                 handleAddLocationLayer();
                 break;
+            case 'scheduled_at':
+                handleAddScheduledLayer();
+                break;
         }
-    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer, handleAddScheduledLayer]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -439,15 +514,24 @@ export default function Composer(inProps) {
             medias: medias.map((m) => m.id),
             categories: _categories.filter((item, index) => _categories.indexOf(item) === index)
         };
-        if ((preferences[SCPreferences.ADDONS_POLLS_ENABLED].value || UserUtils.isStaff(scUserContext.user)) && hasPoll) {
+        if ((preferences[SCPreferences.ADDONS_POLLS_ENABLED].value ||
+            UserUtils.isStaff(scUserContext.user) ||
+            UserUtils.isPublisher(scUserContext.user)) &&
+            hasPoll) {
             data.poll = poll;
         }
         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);
         }
+        if (features.includes(SCFeatureName.TAGGING) && recipients !== null) {
+            data.recipients = recipients.map((r) => (typeof r === 'string' ? r : r.username));
+        }
         if (features.includes(SCFeatureName.TAGGING) &&
             features.includes(SCFeatureName.GROUPING) &&
             preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value &&
@@ -493,7 +577,25 @@ 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,
+        recipients,
+        audience,
+        medias,
+        poll,
+        location,
+        scheduled_at,
+        hasPoll
+    ]);
     //edited here
     const handleClose = useCallback((e, reason) => {
         if (unloadRef.current) {
@@ -558,11 +660,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, recipients, 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, recipients, 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, recipients, medias, poll, location, scheduled_at }, error: { error, categoriesError, addressingError }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
     }, [
         key,
@@ -573,10 +675,12 @@ export default function Composer(inProps) {
         event,
         group,
         addressing,
+        recipients,
         medias,
         poll,
         pollError,
         location,
+        scheduled_at,
         error,
         handleChangePoll,
         handleChangePost,
@@ -587,7 +691,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, recipients, 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 +703,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, color: (categories === null || categories === void 0 ? void 0 : categories.length) !== 0 ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "category" }) })), _jsx(IconButton, Object.assign({ color: group || event || (addressing !== null && (addressing === null || addressing === void 0 ? void 0 : addressing.length) > 0) ? 'primary' : 'default', 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 ? (_jsx(Icon, { children: "groups" })) : event ? (_jsx(Icon, { children: "CalendarIcon" })) : addressing === null || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? (addressingRequiredEnabled ? (_jsx(Icon, { children: "label" })) : (_jsx(Icon, { children: "public" }))) : (_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: _jsxs(Box, Object.assign({ className: classes.selectedAction }, { children: [_jsx(Icon, { children: "access_time" }), scheduled_at !== null && (_jsx(Icon, Object.assign({ color: "primary", className: classes.actionSelectedIcon }, { children: "fiber_manual_record" })))] })) })))] }))] })), 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';
@@ -30,12 +29,13 @@ const DEFAULT_DISCUSSION = {
     event: null,
     medias: [],
     html: '',
-    addressing: []
+    addressing: [],
+    recipients: []
 };
 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
@@ -76,7 +76,7 @@ export default (props) => {
         computeEditorContentHeight();
     }, [value, isContentSwitchButtonVisible, computeEditorContentHeight, isMobile]);
     // 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(TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
+    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.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }), categoriesError && categoriesError, _jsx("br", {}), addressingError && addressingError] }))), _jsx(TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
                     id: 'ui.composer.content.discussion.title.label',
                     defaultMessage: 'ui.composer.content.discussion.title.label'
                 }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {