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

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

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

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

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

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

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