@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.81

package/lib/cjs/components/Checkout/Checkout.js

@@ -0,0 +1,131 @@
+"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 material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const stripe_js_1 = require("@stripe/stripe-js");
+const api_services_1 = require("@selfcommunity/api-services");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const constants_1 = require("./constants");
+const types_1 = require("@selfcommunity/types");
+const react_intl_1 = require("react-intl");
+const payment_1 = require("../../utils/payment");
+const react_core_1 = require("@selfcommunity/react-core");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const Category_1 = tslib_1.__importDefault(require("../Category"));
+const Course_1 = tslib_1.__importDefault(require("../Course"));
+const Group_1 = tslib_1.__importDefault(require("../Group"));
+const event_1 = require("../../types/event");
+const course_1 = require("../../types/course");
+const PaymentOrder_1 = tslib_1.__importDefault(require("../PaymentOrder"));
+const CheckoutHeaderInfoWidget_1 = tslib_1.__importDefault(require("./CheckoutHeaderInfoWidget"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    content: `${constants_1.PREFIX}-content`,
+    contentObject: `${constants_1.PREFIX}-content-object`,
+    contentDesc: `${constants_1.PREFIX}-content-desc`,
+    contentCoverage: `${constants_1.PREFIX}-content-coverage`,
+    checkout: `${constants_1.PREFIX}-checkout`,
+    object: `${constants_1.PREFIX}-object`,
+    paymentOrder: `${constants_1.PREFIX}-payment-order`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(() => ({}));
+function Checkout(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, clientSecret, contentType, contentId, content, priceId, returnUrl, successUrl, uiMode, onComplete } = props, rest = tslib_1.__rest(props, ["className", "clientSecret", "contentType", "contentId", "content", "priceId", "returnUrl", "successUrl", "uiMode", "onComplete"]);
+    // STATE
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [initialized, setInitialized] = (0, react_1.useState)(false);
+    const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
+    const appUrl = (0, react_1.useMemo)(() => scPreferencesContext.preferences && scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    const intl = (0, react_intl_1.useIntl)();
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_1.useSCPaymentsEnabled)();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && stripe_js_1.loadStripe
+        ? (0, stripe_js_1.loadStripe)(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: (0, payment_1.getDefaultLocale)(intl).locale })
+        : null;
+    // STATE
+    const [clientSecretKey, setClientSecretKey] = (0, react_1.useState)(clientSecret);
+    // CONST
+    const isContentObject = (0, react_1.useMemo)(() => contentType && contentId !== undefined, [contentType, contentId]);
+    const fetchClientSecret = (0, react_1.useCallback)(() => {
+        // Create a Checkout Session
+        if (!loading) {
+            setInitialized(true);
+            setLoading(true);
+            api_services_1.PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
+                .then((data) => {
+                if (!data.payment_order) {
+                    api_services_1.PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode }))).then((r) => {
+                        setClientSecretKey(r.client_secret);
+                        setLoading(false);
+                    });
+                }
+                else {
+                    setPaymentOrder(data.payment_order);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                console.error('Error fetching session client secret:', error);
+            });
+        }
+    }, [contentType, contentId, content, priceId, loading]);
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        let _t;
+        if (scUserContext.user && contentType && (contentId || content) && priceId && !clientSecretKey && Boolean(stripePromise) && !initialized) {
+            _t = setTimeout(fetchClientSecret);
+            return () => {
+                _t && clearTimeout(_t);
+            };
+        }
+    }, [scUserContext.user, clientSecretKey, stripePromise, contentType, contentId, content, priceId, loading, initialized]);
+    // Payment provider options
+    const providerOptions = (0, react_1.useMemo)(() => (Object.assign({ clientSecret: clientSecretKey }, (onComplete && { onComplete })
+    // ...(onShippingDetailsChange && {onShippingDetailsChange})
+    )), [clientSecretKey, onComplete]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    if (!stripePromise || (!clientSecretKey && !paymentOrder) || !scUserContext.user) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    const renderContentObject = () => {
+        let _c = null;
+        if (isContentObject) {
+            switch (contentType) {
+                case types_1.SCContentType.EVENT:
+                    _c = ((0, jsx_runtime_1.jsx)(Event_1.default, { eventId: contentId, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case types_1.SCContentType.CATEGORY:
+                    _c = (0, jsx_runtime_1.jsx)(Category_1.default, { categoryId: contentId, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object });
+                    break;
+                case types_1.SCContentType.COURSE:
+                    _c = ((0, jsx_runtime_1.jsx)(Course_1.default, { courseId: contentId, template: course_1.SCCourseTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case types_1.SCContentType.GROUP:
+                    _c = (0, jsx_runtime_1.jsx)(Group_1.default, { groupId: contentId, variant: "outlined", hideActions: true, hideEventParticipants: true, hideEventPlanner: true, className: classes.object });
+                    break;
+            }
+        }
+        return _c;
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [isContentObject && contentType !== types_1.SCContentType.COMMUNITY && clientSecret && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.contentCoverage }), renderContentObject()] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentDesc }, { children: (0, jsx_runtime_1.jsx)(CheckoutHeaderInfoWidget_1.default, { content: content, contentType: contentType }) }))] }))), clientSecret && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))), !clientSecret && paymentOrder && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.paymentOrder }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", color: "primary", href: `${appUrl}`, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: [' ', "Back to home"] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h2", color: "textSecondary", mb: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.paymentOrder", defaultMessage: "ui.checkout.paymentOrder" }) }) })), (0, jsx_runtime_1.jsx)(PaymentOrder_1.default, { paymentOrderId: paymentOrder.id, hidePaymentOrderPdfButton: contentType !== types_1.SCContentType.EVENT })] })))] })));
+}
+exports.default = Checkout;

package/lib/cjs/components/Checkout/CheckoutHeaderInfoWidget.d.ts

@@ -0,0 +1,8 @@
+import { SCContentType } from '@selfcommunity/types';
+interface CheckoutHeaderProps {
+    className?: string;
+    contentType: SCContentType;
+    content: any;
+}
+export default function CheckoutHeaderInfoWidget(inProps: CheckoutHeaderProps): JSX.Element;
+export {};

package/lib/cjs/components/Checkout/CheckoutHeaderInfoWidget.js

@@ -0,0 +1,34 @@
+"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 react_intl_1 = require("react-intl");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const types_1 = require("@selfcommunity/types");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const general_1 = tslib_1.__importDefault(require("../../assets/checkout/general"));
+const PREFIX = 'SCCheckoutHeaderInfoWidget';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    content: `${PREFIX}-content`
+};
+const Root = (0, material_1.styled)(Widget_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+function CheckoutHeaderInfoWidget(inProps) {
+    var _a, _b, _c, _d;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentType, content } = props;
+    // STATE
+    const isRecurring = (_d = (_c = (_b = (_a = content === null || content === void 0 ? void 0 : content.paywalls) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.payment_prices) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.recurring_interval;
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), variant: "outlined" }, { children: [(0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: general_1.default, alt: "icon decoration" }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: contentType === types_1.SCContentType.EVENT ? 'ticket' : contentType === types_1.SCContentType.GROUP ? 'groups' : 'courses' }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: isRecurring ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}.recurring`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}.recurring` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}` })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.checkout.contentDesc.subTitle.${contentType}`, defaultMessage: `ui.checkout.contentDesc.subTitle.${contentType}` }) }))] }))] })));
+}
+exports.default = CheckoutHeaderInfoWidget;

package/lib/cjs/components/Checkout/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > 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: any): JSX.Element;

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

@@ -0,0 +1,87 @@
+"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 classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    container: `${constants_1.PREFIX}-container`,
+    paper: `${constants_1.PREFIX}-paper`,
+    left: `${constants_1.PREFIX}-left`,
+    right: `${constants_1.PREFIX}-right`,
+    header: `${constants_1.PREFIX}-header`,
+    content: `${constants_1.PREFIX}-content`
+};
+const Root = (0, material_1.styled)(material_1.Grid, {
+    name: constants_1.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.|
+ *
+ */
+function CheckoutSkeleton(inProps) {
+    const { className = {} } = inProps, rest = tslib_1.__rest(inProps, ["className"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6, className: (0, classnames_1.default)(classes.left, classes.paper, classes.header) }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 150, width: '100%' }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6, className: (0, classnames_1.default)(classes.right, classes.header) }, { children: (0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ mdDown: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, pt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 20, width: 190 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 90, width: '100%' })] })) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6, className: (0, classnames_1.default)(classes.left, classes.paper) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, width: 140 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 110 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 150 }), (0, jsx_runtime_1.jsxs)(material_1.Hidden, Object.assign({ mdDown: true }, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 200 })] }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6, className: classes.right }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 110 }), (0, jsx_runtime_1.jsxs)(material_1.Hidden, Object.assign({ mdDown: true }, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 70 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
+}
+exports.default = CheckoutSkeleton;

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Checkout_1 = tslib_1.__importDefault(require("./Checkout"));
+exports.default = Checkout_1.default;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CheckoutReturnDialog_1 = tslib_1.__importDefault(require("./CheckoutReturnDialog"));
+exports.default = CheckoutReturnDialog_1.default;

package/lib/cjs/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/cjs/components/CommentObject/CommentObject.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 = tslib_1.__importStar(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");
@@ -48,7 +47,7 @@ const classes = {
     collapsed: `${constants_1.PREFIX}-collapsed`,
     flagChip: `${constants_1.PREFIX}-flag-chip`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -97,7 +96,7 @@ function CommentObject(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.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 = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = tslib_1.__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 = types_1.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 = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {}, showActions = true } = props, rest = tslib_1.__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 = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -304,7 +303,7 @@ 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 = (0, contribution_1.getCommentContributionHtml)(commentHtml, scRoutingContext.url);
-        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [collapsed ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.flagChip, color: "error", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [collapsed ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.flagChip, color: "error", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), showActions && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] })))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, 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/cjs/components/CommentObject/Skeleton.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const constants_1 = require("./constants");
@@ -13,7 +11,7 @@ const classes = {
     avatar: `${constants_1.PREFIX}-avatar`,
     primaryContent: `${constants_1.PREFIX}-primary-content`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +38,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
 function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = tslib_1.__rest(props, ["WidgetProps"]);
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({}, WidgetProps, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" })] }) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({}, WidgetProps, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "40%" })] }) })) }) })));
 }
 exports.default = CommentObjectSkeleton;