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

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

@@ -0,0 +1,84 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Grid, Hidden, Stack, useTheme, Skeleton, styled } from '@mui/material';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    container: `${PREFIX}-container`,
+    paper: `${PREFIX}-paper`,
+    left: `${PREFIX}-left`,
+    right: `${PREFIX}-right`,
+    header: `${PREFIX}-header`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(Grid, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(({ theme }) => ({
+    height: '100%',
+    [`& .${classes.paper}`]: {
+        filter: 'drop-shadow(0 0 20px #00000040)'
+    },
+    [`& .${classes.left}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexGrow: 1,
+        [theme.breakpoints.up('md')]: {
+            justifyContent: 'right'
+        },
+        padding: theme.spacing(1, 5)
+    },
+    [`& .${classes.header}`]: {
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'center',
+        paddingTop: theme.spacing(2),
+        '& span.MuiSkeleton-root': {
+            maxWidth: 450
+        }
+    },
+    [`& .${classes.right}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexGrow: 1,
+        [theme.breakpoints.up('md')]: {
+            justifyContent: 'left'
+        },
+        padding: theme.spacing(1, 5)
+    },
+    [`& .${classes.content}`]: {
+        position: 'relative',
+        [theme.breakpoints.up('md')]: {
+            paddingTop: 50
+        },
+        maxWidth: 450,
+        flexGrow: 1
+    }
+}));
+/**
+ * > API documentation for the Community-JS CheckoutSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CheckoutSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCheckout-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCheckout-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function CheckoutSkeleton(inProps) {
+    const { className = {} } = inProps, rest = __rest(inProps, ["className"]);
+    // HOOKS
+    const theme = useTheme();
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true }, rest, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: '100%' }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.right, classes.header) }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsxs(Stack, Object.assign({ direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: '100%' })] })) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { DialogProps } from '@mui/material';
+import { SCContentType } from '@selfcommunity/types';
+export interface CheckoutReturnDialogProps extends DialogProps {
+    className?: string;
+    checkoutSessionId: string;
+    disableInitialTransition?: boolean;
+    onHandleViewContentPurchased?: (redirectUrl: string, contentType: SCContentType) => void;
+    returnUrl?: string;
+}
+export default function CheckoutReturnDialog(inProps: CheckoutReturnDialogProps): JSX.Element;

package/lib/esm/components/CheckoutReturnDialog/CheckoutReturnDialog.js

@@ -0,0 +1,168 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Button, CircularProgress, Dialog, DialogContent, DialogTitle, Slide, Stack, styled, Typography } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { SCCheckoutSessionStatus, SCContentType } from '@selfcommunity/types';
+import SuccessPlaceholder from '../../assets/checkout/success';
+import { Link, SCPreferences, SCPreferencesContext, SCRoutes, useSCContext, useSCPaymentsEnabled, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { PaymentApiClient } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import Grow from '@mui/material/Grow';
+import { getPaymentRecurringLabel } from '../../utils/checkout';
+const PREFIX = 'SCCheckoutReturnDialog';
+const classes = {
+    root: `${PREFIX}-root`,
+    img: `${PREFIX}-img`,
+    object: `${PREFIX}-object`,
+    btn: `${PREFIX}-btn`
+};
+const Root = styled(Dialog, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
+});
+export default function CheckoutReturnDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, checkoutSessionId, disableInitialTransition = false, onHandleViewContentPurchased, returnUrl } = props, rest = __rest(props, ["className", "checkoutSessionId", "disableInitialTransition", "onHandleViewContentPurchased", "returnUrl"]);
+    // STATE
+    const [loading, setLoading] = useState(true);
+    const [contentType, setContentType] = useState(null);
+    const [contentId, setContentId] = useState(null);
+    const [content, setContent] = useState(null);
+    const [paymentPrice, setPaymentPrice] = useState(null);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const scUserContext = useSCUser();
+    const scContext = useSCContext();
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const appUrl = useMemo(() => scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    /**
+     * Handle view new object purchased
+     */
+    const handleViewPurchasedObject = useCallback(() => {
+        let _redirectUrl;
+        switch (contentType) {
+            case SCContentType.GROUP:
+                _redirectUrl = scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, content);
+                break;
+            case SCContentType.EVENT:
+                _redirectUrl = scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, content);
+                break;
+            case SCContentType.CATEGORY:
+                _redirectUrl = scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, content);
+                break;
+            case SCContentType.COURSE:
+                _redirectUrl = scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, content);
+                break;
+            case SCContentType.COMMUNITY:
+                _redirectUrl = appUrl;
+                break;
+            default:
+                break;
+        }
+        if (onHandleViewContentPurchased) {
+            onHandleViewContentPurchased(returnUrl ? returnUrl : _redirectUrl, contentType);
+        }
+        else if (_redirectUrl) {
+            window.location.href = returnUrl ? returnUrl : _redirectUrl;
+        }
+    }, [scRoutingContext, onHandleViewContentPurchased, content, contentType]);
+    /**
+     * Handle refresh content status
+     */
+    const refreshContentStatus = useCallback(() => {
+        switch (contentType) {
+            case SCContentType.GROUP:
+                scUserContext.managers.groups.refresh();
+                break;
+            case SCContentType.EVENT:
+                scUserContext.managers.events.refresh();
+                break;
+            case SCContentType.CATEGORY:
+                scUserContext.managers.categories.refresh();
+                break;
+            case SCContentType.COURSE:
+                scUserContext.managers.courses.refresh();
+                break;
+            default:
+                break;
+        }
+    }, [scUserContext, content, contentType]);
+    useEffect(() => {
+        PaymentApiClient.getCheckoutSession({ session_id: checkoutSessionId })
+            .then((r) => {
+            if (r.status === SCCheckoutSessionStatus.COMPLETE) {
+                PaymentApiClient.checkoutCompleteSession({ session_id: checkoutSessionId }).then((r) => {
+                    setContentType(r.content_type);
+                    setContentId(r.content_id);
+                    setContent(r[r.content_type]);
+                    if (r.payment_price) {
+                        setPaymentPrice(r.payment_price);
+                    }
+                    // Refresh subscription status
+                    refreshContentStatus();
+                    setLoading(false);
+                });
+            }
+            else if (r.status === SCCheckoutSessionStatus.OPEN) {
+                Logger.info(SCOPE_SC_UI, 'Status session: open. Payment is in status pending!');
+            }
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    }, []);
+    const renderTitle = () => {
+        return _jsx(_Fragment, { children: !loading && _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.title", defaultMessage: "ui.checkoutReturnDialog.title" }) });
+    };
+    const renderContent = () => {
+        let footer;
+        if (contentType === SCContentType.EVENT) {
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.event", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.event", values: {
+                                frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.event", defaultMessage: "ui.checkoutReturnDialog.buy.event" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
+        }
+        else if (contentType === SCContentType.CATEGORY) {
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
+        }
+        else if (contentType === SCContentType.COURSE) {
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.course", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.course", values: {
+                                frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.course", defaultMessage: "ui.checkoutReturnDialog.buy.course" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
+        }
+        else if (contentType === SCContentType.GROUP) {
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.group", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.group", values: {
+                                frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.group", defaultMessage: "ui.checkoutReturnDialog.buy.group" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.group.button", defaultMessage: "ui.checkoutReturnDialog.group.button" }) }))] }));
+        }
+        else if (contentType === SCContentType.COMMUNITY) {
+            footer = (_jsxs(_Fragment, { children: [paymentPrice && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.community", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.community", values: {
+                                        frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
+                                    } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.community", defaultMessage: "ui.checkoutReturnDialog.buy.community" })) }))] })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.community.button", defaultMessage: "ui.checkoutReturnDialog.community.button" }) }))] }));
+        }
+        return (_jsxs(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [_jsx(Grow, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: _jsx("img", { src: SuccessPlaceholder, className: classes.img, alt: intl.formatMessage({
+                            id: 'ui.checkoutReturnDialog.buy',
+                            defaultMessage: 'ui.checkoutReturnDialog.buy'
+                        }), width: 100, height: 100 }) })), footer] })));
+    };
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsxs(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: [_jsx(DialogTitle, { children: renderTitle() }), _jsx(DialogContent, { children: loading ? _jsx(CircularProgress, {}) : renderContent() })] })));
+}

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

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

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

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

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

@@ -105,6 +105,11 @@ export interface CommentObjectProps {
      * @default CacheStrategies.CACHE_FIRST
      */
     cacheStrategy?: CacheStrategies;
+    /**
+     * Prop to show comment actions section (below text)
+     * @default true
+     */
+    showActions?: boolean;
     /**
      * Other props
      */

package/lib/esm/components/CommentObject/CommentObject.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, Box, Button, CardContent, Chip, Icon, IconButton, Typography } from '@mui/material';
+import { Avatar, Box, Button, CardContent, Chip, Icon, IconButton, Typography, styled } from '@mui/material';
 import Bullet from '../../shared/Bullet';
 import classNames from 'classnames';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -95,7 +94,7 @@ export default function CommentObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {}, showActions = true } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps", "showActions"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
@@ -302,7 +301,7 @@ export default function CommentObject(inProps) {
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
         const summaryHtml = getCommentContributionHtml(commentHtml, scRoutingContext.url);
-        return (_jsxs(React.Fragment, { children: [collapsed ? (_jsx(BaseItem, { elevation: 0, className: classes.comment, disableTypography: true, primary: _jsxs(Widget, Object.assign({ className: classNames(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [_jsx(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), _jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: _jsx(Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsxs(_Fragment, { children: [_jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && (_jsx(Chip, { className: classes.flagChip, color: "error", size: "small", label: _jsx(FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), _jsxs(Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), _jsx(Bullet, {}), _jsx(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), _jsx(Bullet, {}), renderActionReply(comment), _jsx(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && _jsx(Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (_jsx(Box, Object.assign({ className: classes.nestedComments }, { children: _jsx(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
+        return (_jsxs(React.Fragment, { children: [collapsed ? (_jsx(BaseItem, { elevation: 0, className: classes.comment, disableTypography: true, primary: _jsxs(Widget, Object.assign({ className: classNames(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [_jsx(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), _jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: _jsx(Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsxs(_Fragment, { children: [_jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && (_jsx(Chip, { className: classes.flagChip, color: "error", size: "small", label: _jsx(FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), showActions && (_jsxs(Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), _jsx(Bullet, {}), _jsx(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), _jsx(Bullet, {}), renderActionReply(comment), _jsx(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment })] })))] }) })), comment.comment_count > 0 && _jsx(Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (_jsx(Box, Object.assign({ className: classes.nestedComments }, { children: _jsx(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**
      * Render Latest Comment

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

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Widget from '../Widget';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import { CardContent, useTheme } from '@mui/material';
+import { CardContent, useTheme, styled, Skeleton } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/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/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, Stack, useMediaQuery, useTheme } from '@mui/material';
+import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled } from '@mui/material';
 import { useSCUser } from '@selfcommunity/react-core';
 import Editor from '../Editor';
 import classNames from 'classnames';
@@ -12,14 +11,17 @@ import { LoadingButton } from '@mui/lab';
 import BaseItem from '../../shared/BaseItem';
 import UserAvatar from '../../shared/UserAvatar';
 import { useThemeProps } from '@mui/system';
+import PreviewComponent from '../../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`
 };
@@ -62,11 +64,13 @@ export default 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 = __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 = __rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "medias", "WidgetProps", "EditorProps", "showAvatar", "replyIcon"]);
     // CONTEXT
     const scUserContext = useSCUser();
     // RETRIEVE OBJECTS
     const [html, setHtml] = useState(text);
+    const [media, setMedia] = useState(medias !== null && medias !== void 0 ? medias : []);
+    const [uploadingMedia, setUploadingMedia] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -91,13 +95,13 @@ export default 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
@@ -111,6 +115,12 @@ export default 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
      */
@@ -119,5 +129,7 @@ export default function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [_jsx(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+    return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: showAvatar &&
+            (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && _jsx(PreviewComponent, { value: media, onChange: handleChangeMedias, className: classes.media }), _jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
+                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

package/lib/esm/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/esm/components/CommentsFeedObject/CommentsFeedObject.js

@@ -1,16 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, Box, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import CommentObject from '../CommentObject';
-import { Box } from '@mui/material';
 import { SCCommentsOrderBy } from '../../types/comments';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import CommentsObject from '../CommentsObject';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import Typography from '@mui/material/Typography';
 import { getContribution } from '../../utils/contribution';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CommentsObjectSkeleton } from '../CommentsObject';
 import { PREFIX } from './constants';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 const classes = {
     root: `${PREFIX}-skeleton-root`
 };

package/lib/esm/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/esm/components/CommentsObject/CommentsObject.js

@@ -1,11 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import CommentObject, { CommentObjectSkeleton } from '../CommentObject';
-import Typography from '@mui/material/Typography';
-import { Box, Button, Stack } from '@mui/material';
+import { Box, Button, Stack, styled, Typography } from '@mui/material';
 import classNames from 'classnames';
 import CustomAdv from '../CustomAdv';
 import { useThemeProps } from '@mui/system';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { CommentObjectSkeleton } from '../CommentObject';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

package/lib/esm/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;