@selfcommunity/react-ui 0.11.0-alpha.66 → 0.11.0-alpha.68

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

@@ -0,0 +1,128 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Icon, styled, Typography } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { PaymentApiClient } from '@selfcommunity/api-services';
+import CheckoutSkeleton from './Skeleton';
+import { PREFIX } from './constants';
+import { SCContentType } from '@selfcommunity/types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { getDefaultLocale } from '../../utils/payment';
+import { SCPreferences, SCPreferencesContext, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import Event from '../Event';
+import Category from '../Category';
+import Course from '../Course';
+import Group from '../Group';
+import { SCEventTemplateType } from '../../types/event';
+import { SCCourseTemplateType } from '../../types/course';
+import PaymentOrder from '../PaymentOrder';
+import CheckoutHeaderInfoWidget from './CheckoutHeaderInfoWidget';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    contentObject: `${PREFIX}-content-object`,
+    contentDesc: `${PREFIX}-content-desc`,
+    contentCoverage: `${PREFIX}-content-coverage`,
+    checkout: `${PREFIX}-checkout`,
+    object: `${PREFIX}-object`,
+    paymentOrder: `${PREFIX}-payment-order`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+export default function Checkout(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, clientSecret, contentType, contentId, content, priceId, returnUrl, successUrl, uiMode, onComplete } = props, rest = __rest(props, ["className", "clientSecret", "contentType", "contentId", "content", "priceId", "returnUrl", "successUrl", "uiMode", "onComplete"]);
+    // STATE
+    const [loading, setLoading] = useState(false);
+    const [initialized, setInitialized] = useState(false);
+    const [paymentOrder, setPaymentOrder] = useState(null);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const appUrl = useMemo(() => scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    const intl = useIntl();
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && loadStripe
+        ? loadStripe(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: getDefaultLocale(intl).locale })
+        : null;
+    // STATE
+    const [clientSecretKey, setClientSecretKey] = useState(clientSecret);
+    // CONST
+    const isContentObject = useMemo(() => contentType && contentId !== undefined, [contentType, contentId]);
+    const fetchClientSecret = useCallback(() => {
+        // Create a Checkout Session
+        if (!loading) {
+            setInitialized(true);
+            setLoading(true);
+            PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
+                .then((data) => {
+                if (!data.payment_order) {
+                    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
+    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 = 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 _jsx(CheckoutSkeleton, {});
+    }
+    const renderContentObject = () => {
+        let _c = null;
+        if (isContentObject) {
+            switch (contentType) {
+                case SCContentType.EVENT:
+                    _c = (_jsx(Event, { eventId: contentId, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case SCContentType.CATEGORY:
+                    _c = _jsx(Category, { categoryId: contentId, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object });
+                    break;
+                case SCContentType.COURSE:
+                    _c = (_jsx(Course, { courseId: contentId, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case SCContentType.GROUP:
+                    _c = _jsx(Group, { groupId: contentId, variant: "outlined", hideActions: true, hideEventParticipants: true, hideEventPlanner: true, className: classes.object });
+                    break;
+            }
+        }
+        return _c;
+    };
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && contentType !== SCContentType.COMMUNITY && clientSecret && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.contentObject }, { children: [_jsx(Box, { className: classes.contentCoverage }), renderContentObject()] })), _jsx(Box, Object.assign({ className: classes.contentDesc }, { children: _jsx(CheckoutHeaderInfoWidget, { content: content, contentType: contentType }) }))] }))), clientSecret && (_jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: _jsx(EmbeddedCheckout, {}) })) }))), !clientSecret && paymentOrder && (_jsxs(Box, Object.assign({ className: classes.paymentOrder }, { children: [_jsxs(Button, Object.assign({ variant: "text", color: "primary", href: `${appUrl}`, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: [' ', "Back to home"] })), _jsx(Typography, Object.assign({ variant: "h2", color: "textSecondary", mb: 2 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.paymentOrder", defaultMessage: "ui.checkout.paymentOrder" }) }) })), _jsx(PaymentOrder, { paymentOrderId: paymentOrder.id, hidePaymentOrderPdfButton: contentType !== SCContentType.EVENT })] })))] })));
+}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Icon, styled, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import Widget from '../Widget';
+import { SCContentType } from '@selfcommunity/types';
+import { Box, useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import Placeholder from '../../assets/checkout/general';
+const PREFIX = 'SCCheckoutHeaderInfoWidget';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(Widget, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+export default function CheckoutHeaderInfoWidget(inProps) {
+    var _a, _b, _c, _d;
+    // PROPS
+    const props = 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 (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), variant: "outlined" }, { children: [_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: Placeholder, alt: "icon decoration" }), _jsx(Icon, Object.assign({ fontSize: "large" }, { children: contentType === SCContentType.EVENT ? 'ticket' : contentType === SCContentType.GROUP ? 'groups' : 'courses' }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: isRecurring ? (_jsx(FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}.recurring`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}.recurring` })) : (_jsx(FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}` })) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: `ui.checkout.contentDesc.subTitle.${contentType}`, defaultMessage: `ui.checkout.contentDesc.subTitle.${contentType}` }) }))] }))] })));
+}

package/lib/esm/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/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/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/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/CommunityPaywalls/CommunityPaywalls.d.ts

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

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

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

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

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