@selfcommunity/react-ui 0.10.5-payments.143 → 0.10.5-payments.144

package/lib/cjs/components/BuyButton/BuyButton.js

@@ -131,10 +131,13 @@ function BuyButton(inProps) {
         }
     };
     (0, react_1.useEffect)(() => {
-        if ((contentId || content) && contentType) {
+        if ((contentId || content) && contentType && scUserContext.user) {
             getStatus();
         }
-    }, [contentId, content, contentType]);
+        else if (scUserContext.user === null) {
+            setPurchased(false);
+        }
+    }, [contentId, content, contentType, scUserContext.user]);
     if (!contentId && !content) {
         return null;
     }

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

@@ -33,48 +33,7 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Box, {
     slot: 'Root',
     name: constants_1.PREFIX
-})(({ theme }) => ({
-    position: 'relative',
-    backgroundColor: theme.palette.background.paper,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    [`& .${classes.content}`]: {
-        width: '100%',
-        maxWidth: 860,
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        gap: 0,
-        [theme.breakpoints.down(1034)]: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-        },
-        [`& .${classes.contentObject}`]: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'flex-start'
-        },
-        [`& .${classes.contentDesc}`]: {
-            [theme.breakpoints.down(1034)]: {
-                display: 'none'
-            },
-            maxWidth: 600,
-            padding: theme.spacing(4)
-        }
-    },
-    [`& .${classes.checkout}`]: {
-        width: '100%',
-        bottom: theme.spacing(2)
-    },
-    [`& .${classes.object}`]: {
-        marginTop: theme.spacing(2),
-        minWidth: 395
-    }
-}));
+})(({ theme }) => ({}));
 function Checkout(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -101,7 +60,6 @@ function Checkout(inProps) {
     const isContentObject = (0, react_1.useMemo)(() => contentType && contentId !== undefined, [contentType, contentId]);
     const fetchClientSecret = (0, react_1.useCallback)(() => {
         // Create a Checkout Session
-        // TODO: During session create check customer_email or customer to force email prefilled and disabled changes
         if (!loading) {
             console.log('fetching client secret...');
             setInitialized(true);
@@ -155,6 +113,6 @@ function Checkout(inProps) {
         }
         return _c;
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [isContentObject && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: renderContentObject() })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentDesc }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: "A Gold Ticket for event access is a premium pass that offers exclusive benefits beyond standard entry. It typically includes priority admission, access to VIP areas, reserved seating, and additional perks such as meet-and-greet opportunities, complimentary refreshments, or exclusive merchandise." })) }))] }))), (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: { clientSecret } }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [isContentObject && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: renderContentObject() })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contentDesc }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", mb: 1 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), (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", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), (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: { clientSecret } }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))] })));
 }
 exports.default = Checkout;

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

@@ -20,10 +20,11 @@ const Errors_1 = require("../../constants/Errors");
 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 PREFIX = 'SCCheckoutSuccessDialog';
+const PREFIX = 'SCCheckoutReturnDialog';
 const classes = {
     root: `${PREFIX}-root`,
     img: `${PREFIX}-img`,
+    contentObject: `${PREFIX}-content-object`,
     object: `${PREFIX}-object`,
     btn: `${PREFIX}-btn`
 };
@@ -73,20 +74,23 @@ function CheckoutReturnDialog(inProps) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !loading && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.title", defaultMessage: "ui.checkoutSuccessDialog.title" }) });
     };
     const renderContent = () => {
-        let route = react_core_1.SCRoutes.GROUP_ROUTE_NAME;
+        let footer;
         if (contentType === types_1.SCContentType.EVENT) {
-            route = react_core_1.SCRoutes.EVENT_ROUTE_NAME;
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (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, {}), variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, { id: contentId }), component: react_core_1.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.event.button", defaultMessage: "ui.checkoutSuccessDialog.event.button" }) }))] }));
         }
         else if (contentType === types_1.SCContentType.CATEGORY) {
-            route = react_core_1.SCRoutes.CATEGORY_ROUTE_NAME;
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (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 }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, { id: contentId }), component: react_core_1.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" }) }))] }));
         }
         else if (contentType === types_1.SCContentType.COURSE) {
-            route = react_core_1.SCRoutes.COURSE_ROUTE_NAME;
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (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 }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, { id: contentId }), component: react_core_1.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.course.button", defaultMessage: "ui.checkoutSuccessDialog.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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, { courseId: contentId, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, { id: contentId }), component: react_core_1.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" }) }))] }));
         }
         return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, className: classes.img, alt: intl.formatMessage({
                         id: 'ui.checkoutSuccessDialog.buy',
                         defaultMessage: 'ui.checkoutSuccessDialog.buy'
-                    }), width: 100, height: 100 }), (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.checkoutSuccessDialog.buy", defaultMessage: "ui.checkoutSuccessDialog.buy" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ style: { width: '100%' } }, { children: [contentType === types_1.SCContentType.EVENT && ((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, {}), variant: "outlined", className: classes.object })), contentType === types_1.SCContentType.CATEGORY && ((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 })), contentType === types_1.SCContentType.COURSE && ((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 })), contentType === types_1.SCContentType.GROUP && ((0, jsx_runtime_1.jsx)(Group_1.default, { courseId: contentId, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }))] })), (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(route, { id: contentId }), component: react_core_1.Link, className: classes.btn }, { children: [contentType === types_1.SCContentType.EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.event.button", defaultMessage: "ui.checkoutSuccessDialog.event.button" })), contentType === types_1.SCContentType.GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.group.button", defaultMessage: "ui.checkoutSuccessDialog.group.button" })), contentType === types_1.SCContentType.CATEGORY && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" })), contentType === types_1.SCContentType.COURSE && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutSuccessDialog.course.button", defaultMessage: "ui.checkoutSuccessDialog.course.button" }))] }))] })));
+                    }), width: 100, height: 100 }), (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.checkoutSuccessDialog.buy", defaultMessage: "ui.checkoutSuccessDialog.buy" }) })), footer] })));
     };
     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() })] })));
 }

package/lib/esm/components/BuyButton/BuyButton.js

@@ -129,10 +129,13 @@ export default function BuyButton(inProps) {
         }
     };
     useEffect(() => {
-        if ((contentId || content) && contentType) {
+        if ((contentId || content) && contentType && scUserContext.user) {
             getStatus();
         }
-    }, [contentId, content, contentType]);
+        else if (scUserContext.user === null) {
+            setPurchased(false);
+        }
+    }, [contentId, content, contentType, scUserContext.user]);
     if (!contentId && !content) {
         return null;
     }

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

@@ -11,7 +11,7 @@ import { PaymentApiClient } from '@selfcommunity/api-services';
 import CheckoutSkeleton from './Skeleton';
 import { PREFIX } from './constants';
 import { SCContentType } from '@selfcommunity/types';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getDefaultLocale } from '../../utils/payment';
 import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Event from '../Event';
@@ -31,48 +31,7 @@ const classes = {
 const Root = styled(Box, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({
-    position: 'relative',
-    backgroundColor: theme.palette.background.paper,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    [`& .${classes.content}`]: {
-        width: '100%',
-        maxWidth: 860,
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        gap: 0,
-        [theme.breakpoints.down(1034)]: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-        },
-        [`& .${classes.contentObject}`]: {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'flex-start'
-        },
-        [`& .${classes.contentDesc}`]: {
-            [theme.breakpoints.down(1034)]: {
-                display: 'none'
-            },
-            maxWidth: 600,
-            padding: theme.spacing(4)
-        }
-    },
-    [`& .${classes.checkout}`]: {
-        width: '100%',
-        bottom: theme.spacing(2)
-    },
-    [`& .${classes.object}`]: {
-        marginTop: theme.spacing(2),
-        minWidth: 395
-    }
-}));
+})(({ theme }) => ({}));
 export default function Checkout(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -99,7 +58,6 @@ export default function Checkout(inProps) {
     const isContentObject = useMemo(() => contentType && contentId !== undefined, [contentType, contentId]);
     const fetchClientSecret = useCallback(() => {
         // Create a Checkout Session
-        // TODO: During session create check customer_email or customer to force email prefilled and disabled changes
         if (!loading) {
             console.log('fetching client secret...');
             setInitialized(true);
@@ -153,5 +111,5 @@ export default function Checkout(inProps) {
         }
         return _c;
     };
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: renderContentObject() })), _jsx(Box, Object.assign({ className: classes.contentDesc }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: "A Gold Ticket for event access is a premium pass that offers exclusive benefits beyond standard entry. It typically includes priority admission, access to VIP areas, reserved seating, and additional perks such as meet-and-greet opportunities, complimentary refreshments, or exclusive merchandise." })) }))] }))), _jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: { clientSecret } }, { children: _jsx(EmbeddedCheckout, {}) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: renderContentObject() })), _jsxs(Box, Object.assign({ className: classes.contentDesc }, { children: [_jsx(Typography, Object.assign({ variant: "h5", mb: 1 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.title", defaultMessage: "ui.checkout.contentDesc.title" }) }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkout.contentDesc.subTitle", defaultMessage: "ui.checkout.contentDesc.subTitle" }) }))] }))] }))), _jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: { clientSecret } }, { children: _jsx(EmbeddedCheckout, {}) })) }))] })));
 }

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

@@ -18,10 +18,11 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import Category from '../Category';
 import Course from '../Course';
 import Group from '../Group';
-const PREFIX = 'SCCheckoutSuccessDialog';
+const PREFIX = 'SCCheckoutReturnDialog';
 const classes = {
     root: `${PREFIX}-root`,
     img: `${PREFIX}-img`,
+    contentObject: `${PREFIX}-content-object`,
     object: `${PREFIX}-object`,
     btn: `${PREFIX}-btn`
 };
@@ -71,20 +72,23 @@ export default function CheckoutReturnDialog(inProps) {
         return _jsx(_Fragment, { children: !loading && _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.title", defaultMessage: "ui.checkoutSuccessDialog.title" }) });
     };
     const renderContent = () => {
-        let route = SCRoutes.GROUP_ROUTE_NAME;
+        let footer;
         if (contentType === SCContentType.EVENT) {
-            route = SCRoutes.EVENT_ROUTE_NAME;
+            footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Event, { eventId: contentId, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, { id: contentId }), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.event.button", defaultMessage: "ui.checkoutSuccessDialog.event.button" }) }))] }));
         }
         else if (contentType === SCContentType.CATEGORY) {
-            route = SCRoutes.CATEGORY_ROUTE_NAME;
+            footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Category, { categoryId: contentId, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, { id: contentId }), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" }) }))] }));
         }
         else if (contentType === SCContentType.COURSE) {
-            route = SCRoutes.COURSE_ROUTE_NAME;
+            footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Course, { courseId: contentId, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, { id: contentId }), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.course.button", defaultMessage: "ui.checkoutSuccessDialog.course.button" }) }))] }));
+        }
+        else if (contentType === SCContentType.GROUP) {
+            footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Group, { courseId: contentId, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, { id: contentId }), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" }) }))] }));
         }
         return (_jsxs(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [_jsx("img", { src: CLAPPING, className: classes.img, alt: intl.formatMessage({
                         id: 'ui.checkoutSuccessDialog.buy',
                         defaultMessage: 'ui.checkoutSuccessDialog.buy'
-                    }), width: 100, height: 100 }), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.buy", defaultMessage: "ui.checkoutSuccessDialog.buy" }) })), _jsxs(Box, Object.assign({ style: { width: '100%' } }, { children: [contentType === SCContentType.EVENT && (_jsx(Event, { eventId: contentId, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object })), contentType === SCContentType.CATEGORY && (_jsx(Category, { categoryId: contentId, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object })), contentType === SCContentType.COURSE && (_jsx(Course, { courseId: contentId, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object })), contentType === SCContentType.GROUP && (_jsx(Group, { courseId: contentId, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }))] })), _jsxs(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(route, { id: contentId }), component: Link, className: classes.btn }, { children: [contentType === SCContentType.EVENT && (_jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.event.button", defaultMessage: "ui.checkoutSuccessDialog.event.button" })), contentType === SCContentType.GROUP && (_jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.group.button", defaultMessage: "ui.checkoutSuccessDialog.group.button" })), contentType === SCContentType.CATEGORY && (_jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.category.button", defaultMessage: "ui.checkoutSuccessDialog.category.button" })), contentType === SCContentType.COURSE && (_jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.course.button", defaultMessage: "ui.checkoutSuccessDialog.course.button" }))] }))] })));
+                    }), width: 100, height: 100 }), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutSuccessDialog.buy", defaultMessage: "ui.checkoutSuccessDialog.buy" }) })), footer] })));
     };
     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() })] })));
 }