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

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.d.ts

@@ -1,4 +1,6 @@
 import { WidgetProps } from '../Widget';
+import { EditorProps } from '../Editor';
+import { SCMediaType } from '@selfcommunity/types';
 export interface CommentObjectReplyProps extends WidgetProps {
     /**
      * Bind focus on mount
@@ -9,12 +11,12 @@ export interface CommentObjectReplyProps extends WidgetProps {
      * Callback invoked after reply
      * @param comment
      */
-    onReply?: (comment: any) => void;
+    onReply?: (comment: any, medias?: any) => void;
     /**
      * Callback invoked after save/edit
      * @param comment
      */
-    onSave?: (comment: any) => void;
+    onSave?: (comment: any, medias?: any) => void;
     /**
      * Callback invoked after disccard save/edit
      * @param comment
@@ -30,11 +32,31 @@ export interface CommentObjectReplyProps extends WidgetProps {
      * @default ''
      */
     text?: string;
+    /**
+     * Initial media content
+     * @default ''
+     */
+    medias?: SCMediaType[];
     /**
      * Initial content
      * @default {variant: 'outlined'}
      */
     WidgetProps?: WidgetProps;
+    /**
+     * Initial content
+     * @default {}
+     */
+    EditorProps?: EditorProps;
+    /**
+     * Prop to show user avatar
+     * @default true
+     */
+    showAvatar?: boolean;
+    /**
+     * Prop to show a reply icon instead of the button
+     * @default false
+     */
+    replyIcon?: boolean;
     /**
      * Other props
      */

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
@@ -14,18 +13,21 @@ const lab_1 = require("@mui/lab");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const system_1 = require("@mui/system");
+const PreviewComponent_1 = tslib_1.__importDefault(require("../../shared/Media/File/PreviewComponent"));
 const PREFIX = 'SCCommentObjectReply';
 const classes = {
     root: `${PREFIX}-root`,
     comment: `${PREFIX}-comment`,
+    media: `${PREFIX}-media`,
     hasValue: `${PREFIX}-has-value`,
     avatar: `${PREFIX}-avatar`,
     actions: `${PREFIX}-actions`,
     buttonReply: `${PREFIX}-button-reply`,
+    iconReply: `${PREFIX}-icon-reply`,
     buttonSave: `${PREFIX}-button-save`,
     buttonCancel: `${PREFIX}-button-cancel`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -64,11 +66,13 @@ function CommentObjectReply(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
+    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', medias = [], WidgetProps = { variant: 'outlined' }, EditorProps = {}, showAvatar = true, replyIcon = false } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "medias", "WidgetProps", "EditorProps", "showAvatar", "replyIcon"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // RETRIEVE OBJECTS
     const [html, setHtml] = (0, react_1.useState)(text);
+    const [media, setMedia] = (0, react_1.useState)(medias !== null && medias !== void 0 ? medias : []);
+    const [uploadingMedia, setUploadingMedia] = (0, react_1.useState)(false);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -93,13 +97,13 @@ function CommentObjectReply(inProps) {
      * Handle Replay
      */
     const handleReply = () => {
-        onReply && onReply(html);
+        onReply && onReply(html, media && media.length > 0 ? media : null);
     };
     /**
      * Handle Save
      */
     const handleSave = () => {
-        onSave && onSave(html);
+        onSave && onSave(html, media && media.length > 0 ? media : null);
     };
     /**
      * Handle cancel save
@@ -113,6 +117,12 @@ function CommentObjectReply(inProps) {
     const handleChangeText = (value) => {
         setHtml(value);
     };
+    const handleChangeMedia = (value) => {
+        setMedia((prev) => [...prev, value]);
+    };
+    const handleChangeMedias = (value) => {
+        setMedia([...value]);
+    };
     /**
      * Check if editor is empty
      */
@@ -121,6 +131,8 @@ function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: showAvatar &&
+            (!scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && (0, jsx_runtime_1.jsx)(PreviewComponent_1.default, { value: media, onChange: handleChangeMedias, className: classes.media }), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
+                        onReply && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }
 exports.default = CommentObjectReply;

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.d.ts

@@ -5,7 +5,7 @@ import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommun
 export interface CommentsFeedObjectProps {
     /**
      * Id of the CommentsObject
-     * @default `comments_object_<feedObjectType>_<feedObjectId | feedObject.id>`
+     * @default `comments_object_feedObjectType_feedObjectId`
      */
     id?: string;
     /**

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.js

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const CommentObject_1 = tslib_1.__importDefault(require("../CommentObject"));
-const material_1 = require("@mui/material");
 const comments_1 = require("../../types/comments");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const CommentsObject_1 = tslib_1.__importDefault(require("../CommentsObject"));
 const Errors_1 = require("../../constants/Errors");
-const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
 const contribution_1 = require("../../utils/contribution");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -25,7 +23,7 @@ const classes = {
     noComments: `${constants_1.PREFIX}-no-comments`,
     commentNotFound: `${constants_1.PREFIX}-comment-not-found`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -92,7 +90,7 @@ function CommentsFeedObject(inProps) {
      */
     const renderTitle = (0, react_1.useMemo)(() => () => {
         if (showTitle) {
-            return ((0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
         }
         return null;
     }, [total, isLoading]);

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CommentsObject_1 = require("../CommentsObject");
 const constants_1 = require("./constants");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(CommentsObject_1.CommentsObjectSkeleton, {
+const Root = (0, material_1.styled)(CommentsObject_1.CommentsObjectSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/CommentsObject/CommentsObject.d.ts

@@ -4,7 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 export interface CommentsObjectProps {
     /**
      * Id of the CommentsObject
-     * @default `comments_object_<feedObjectType>_<feedObjectId | feedObject.id>`
+     * @default `comments_object_feedObjectType_feedObjectId`
      */
     id?: string;
     /**

package/lib/cjs/components/CommentsObject/CommentsObject.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
 const CommentObject_1 = tslib_1.__importStar(require("../CommentObject"));
-const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const CustomAdv_1 = tslib_1.__importDefault(require("../CustomAdv"));
@@ -29,7 +27,7 @@ const classes = {
     commentNotFound: `${constants_1.PREFIX}-comment-not-found`,
     noOtherComments: `${constants_1.PREFIX}-no-other-comment`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -149,7 +147,7 @@ function CommentsObject(inProps) {
                                                 { [paginationLinksPageQueryParam]: nextPage }
                                             ])}`
                                             : `${scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject))}`
-                                    }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" }) })), showCommentsCounter() && ((0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ variant: "body1", classes: { root: classes.commentsCounter } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }) })))] })) })), !disablePaginationLinks && nextPage && next && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: `${(0, utils_1.appendURLSearchParams)(scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject)), [
+                                    }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" }) })), showCommentsCounter() && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", classes: { root: classes.commentsCounter } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }) })))] })) })), !disablePaginationLinks && nextPage && next && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: `${(0, utils_1.appendURLSearchParams)(scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject)), [
                             { [paginationLinksPageQueryParam]: nextPage }
                         ])}`, className: (0, classnames_1.default)({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.nextComments", defaultMessage: "ui.commentsObject.nextComments" }) })))] })) })));
     }

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

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const CommentObject_1 = require("../CommentObject");
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/CommunityPaywalls/CommunityPaywalls.d.ts

@@ -0,0 +1,8 @@
+import { SCCommunityType, SCContentType, SCPaymentPrice } from '@selfcommunity/types';
+export interface CommunityPaywallsProps {
+    className?: string;
+    community?: SCCommunityType;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+    callbackUrl?: string;
+}
+export default function CommunityPaywalls(inProps: CommunityPaywallsProps): JSX.Element;

package/lib/cjs/components/CommunityPaywalls/CommunityPaywalls.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Unstable_Grid2_1 = tslib_1.__importDefault(require("@mui/material/Unstable_Grid2"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const api_services_1 = require("@selfcommunity/api-services");
+const types_1 = require("@selfcommunity/types");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(Unstable_Grid2_1.default, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function CommunityPaywalls(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, community, onUpdatePaymentOrder, callbackUrl } = props, rest = tslib_1.__rest(props, ["className", "community", "onUpdatePaymentOrder", "callbackUrl"]);
+    // STATE
+    const [scCommunity, setSCCommunity] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    /**
+     * On mount, fetches community products
+     */
+    (0, react_1.useEffect)(() => {
+        if (community) {
+            setSCCommunity(community);
+            setLoading(false);
+        }
+        else {
+            api_services_1.CommunityApiClient.getCommunities()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    if (data.count && data.results.length) {
+                        setSCCommunity(data.results[0]);
+                    }
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [community]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 12, sm: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: p, contentType: types_1.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))) })));
+}
+exports.default = CommunityPaywalls;

package/lib/cjs/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/cjs/components/CommunityPaywalls/Skeleton.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProduct/Skeleton"));
+const Unstable_Grid2_1 = tslib_1.__importDefault(require("@mui/material/Unstable_Grid2"));
+const system_1 = require("@mui/system");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    products: `${constants_1.PREFIX}-products`
+};
+const Root = (0, material_1.styled)(Unstable_Grid2_1.default, {
+    name: constants_1.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.|
+ *
+ */
+function CommunityPaywallsSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: `${constants_1.PREFIX}Skeleton`
+    });
+    const { className, PaymentProductSkeletonComponentProps } = props, rest = tslib_1.__rest(props, ["className", "PaymentProductSkeletonComponentProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 4 }, rest, { children: [...Array(isMobile ? 2 : 3)].map((product, index) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 4 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ variant: 'outlined' }, PaymentProductSkeletonComponentProps)) }), index))) })));
+}
+exports.default = CommunityPaywallsSkeleton;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCommunityPaywalls';

package/lib/cjs/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/cjs/components/CommunityPaywalls/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommunityPaywallsSkeleton = void 0;
+const tslib_1 = require("tslib");
+const CommunityPaywalls_1 = tslib_1.__importDefault(require("./CommunityPaywalls"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.CommunityPaywallsSkeleton = Skeleton_1.default;
+exports.default = CommunityPaywalls_1.default;

package/lib/cjs/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/cjs/components/Composer/Attributes/Attributes.js

@@ -4,20 +4,18 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const TagChip_1 = tslib_1.__importDefault(require("../../../shared/TagChip"));
 const constants_1 = require("../constants");
 const classes = {
     root: `${constants_1.PREFIX}-attributes-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'AttributesRoot'
 })(() => ({}));
 exports.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
@@ -51,7 +49,16 @@ exports.default = (props) => {
     const handleClickLocation = (0, react_1.useCallback)(() => {
         onClick && onClick('location');
     }, [onClick]);
+    const handleDeleteRecipient = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        onClick && onClick('recipients');
+    }, [onClick]);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(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) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { 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) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { 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) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, onDelete: handleDeleteTag(t.id), icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { 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.categories.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: (0, jsx_runtime_1.jsx)(material_1.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) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: (0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, onDelete: handleDeleteTag(t.id), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_e = value === null || value === void 0 ? void 0 : value.recipients) === null || _e === void 0 ? void 0 : _e.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value.recipients.slice(0, 3).map((r) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: typeof r === 'object' ? r.username : r, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), onClick: handleClickRecipient, onDelete: handleDeleteRecipient(typeof r === 'object' ? r.id : r) }, typeof r === 'object' ? r.id : r))), value.recipients.length > 3 && (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `+${value.recipients.length - 3}`, onClick: handleClickRecipient })] })) }), (value === null || value === void 0 ? void 0 : value.location) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
 };

package/lib/cjs/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