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

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

@@ -73,6 +73,7 @@ function BuyButton(inProps) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // CONST
     const [purchased, setPurchased] = (0, react_1.useState)(null);
+    const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
     const [btnLabel, setBtnLabel] = (0, react_1.useState)((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${(0, utils_1.capitalize)(contentType)}` }));
     // HANDLERS
     const handleClose = (0, react_1.useCallback)(() => {
@@ -88,6 +89,13 @@ function BuyButton(inProps) {
             }
         }
     }, [scUserContext.user, open, scContext.settings]);
+    /**
+     * Handle update order
+     * Price param is the new price selected
+     */
+    const handleUpdatePaymentOrder = (0, react_1.useCallback)((price) => {
+        // TODO: update order/subscription when will be recurring payment
+    }, [paymentOrder, purchased]);
     /**
      * Get current status
      */
@@ -101,6 +109,9 @@ function BuyButton(inProps) {
                         if (data.subscription_status === types_1.SCEventSubscriptionStatusType.GOING) {
                             setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.buyButton.purchased", id: "ui.buyButton.purchased" }));
                         }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
                         setPurchased(data.subscription_status === types_1.SCEventSubscriptionStatusType.GOING);
                     }
                 });
@@ -111,6 +122,9 @@ function BuyButton(inProps) {
                     if (data.followed) {
                         setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.buyButton.subscribed", id: "ui.buyButton.subscribed" }));
                     }
+                    if (data.payment_order) {
+                        setPaymentOrder(data.payment_order);
+                    }
                     setPurchased(data.followed);
                 });
                 break;
@@ -122,22 +136,43 @@ function BuyButton(inProps) {
                         if (data.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED) {
                             setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.buyButton.subscribed", id: "ui.buyButton.subscribed" }));
                         }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
                         setPurchased(data.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED);
                     }
                 });
                 break;
+            case types_1.SCContentType.COURSE:
+                // Get status course joined
+                api_services_1.CourseApiClient.getCourseStatus(contentId ? contentId : content.id).then((data) => {
+                    var _a;
+                    if (scUserContext.user && ((_a = data === null || data === void 0 ? void 0 : data.managed_by) === null || _a === void 0 ? void 0 : _a.id) !== scUserContext.user.id) {
+                        if (data.subscription_status === types_1.SCCourseJoinStatusType.JOINED) {
+                            setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.buyButton.subscribed", id: "ui.buyButton.subscribed" }));
+                        }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
+                        setPurchased(data.subscription_status === types_1.SCCourseJoinStatusType.JOINED);
+                    }
+                });
+                break;
             default:
                 break;
         }
     };
     (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;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: purchased ? ((0, jsx_runtime_1.jsx)(PaymentDetailDialog_1.default, { open: true, disableInitialTransition: true, onClose: handleClose })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" }) }) })), (0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId })))] })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: purchased ? ((0, jsx_runtime_1.jsx)(PaymentDetailDialog_1.default, { open: true, onClose: handleClose })) : ((0, jsx_runtime_1.jsx)(PaymentProductsDialog_1.default, { open: true, onClose: handleClose, PaymentProductsComponentProps: Object.assign({ contentType }, (content ? { content } : { contentId })) })) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: purchased ? ((0, jsx_runtime_1.jsx)(PaymentDetailDialog_1.default, { open: true, disableInitialTransition: true, onClose: handleClose })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" }) }) })), (0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })))] })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: purchased ? ((0, jsx_runtime_1.jsx)(PaymentDetailDialog_1.default, { open: true, onClose: handleClose })) : ((0, jsx_runtime_1.jsx)(PaymentProductsDialog_1.default, { open: true, onClose: handleClose, PaymentProductsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })) })) })) }))] }));
 }
 exports.default = BuyButton;

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

@@ -22,6 +22,7 @@ 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 react_core_2 = require("@selfcommunity/react-core");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -33,48 +34,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)({
@@ -82,18 +42,14 @@ function Checkout(inProps) {
         name: constants_1.PREFIX
     });
     const { className, contentType, contentId, content, priceId } = props, rest = tslib_1.__rest(props, ["className", "contentType", "contentId", "content", "priceId"]);
-    const { preferences } = (0, react_core_1.useSCPreferences)();
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [initialized, setInitialized] = (0, react_1.useState)(false);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const intl = (0, react_intl_1.useIntl)();
-    // MEMO
-    const stripePublicKey = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_STRIPE_PUBLIC_KEY in preferences && preferences[react_core_1.SCPreferences.STATIC_STRIPE_PUBLIC_KEY].value, [preferences]);
-    const stripeConnectedAccountId = (0, react_1.useMemo)(() => preferences &&
-        react_core_1.SCPreferences.CONFIGURATIONS_STRIPE_CONNECTED_ACCOUNT_ID in preferences &&
-        preferences[react_core_1.SCPreferences.CONFIGURATIONS_STRIPE_CONNECTED_ACCOUNT_ID].value, [preferences]);
-    const stripePromise = stripePublicKey && stripeConnectedAccountId && stripe_js_1.loadStripe
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_2.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
@@ -101,7 +57,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);
@@ -131,6 +86,9 @@ function Checkout(inProps) {
             };
         }
     }, [scUserContext.user, clientSecret, stripePromise, contentType, contentId, content, priceId, loading, initialized]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     if (!stripePromise || !clientSecret || !scUserContext.user) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -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

@@ -11,6 +11,7 @@ const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
 const clapping_1 = require("../../assets/courses/clapping");
 const react_core_1 = require("@selfcommunity/react-core");
+const react_core_2 = require("@selfcommunity/react-core");
 const Event_1 = tslib_1.__importDefault(require("../Event"));
 const event_1 = require("../../types/event");
 const course_1 = require("../../types/course");
@@ -20,10 +21,12 @@ 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 Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
+const PREFIX = 'SCCheckoutReturnDialog';
 const classes = {
     root: `${PREFIX}-root`,
     img: `${PREFIX}-img`,
+    contentObject: `${PREFIX}-content-object`,
     object: `${PREFIX}-object`,
     btn: `${PREFIX}-btn`
 };
@@ -48,9 +51,10 @@ function CheckoutReturnDialog(inProps) {
     const [contentType, setContentType] = (0, react_1.useState)(null);
     const [contentId, setContentId] = (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 scRoutingContext = (0, react_core_2.useSCRouting)();
     (0, react_1.useEffect)(() => {
         api_services_1.PaymentApiClient.getCheckoutSession({ session_id: checkoutSessionId })
             .then((r) => {
@@ -70,24 +74,30 @@ function CheckoutReturnDialog(inProps) {
         });
     }, []);
     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.checkoutSuccessDialog.title", defaultMessage: "ui.checkoutSuccessDialog.title" }) });
+        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 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_2.SCRoutes.EVENT_ROUTE_NAME, { id: contentId }), component: react_core_2.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) {
-            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_2.SCRoutes.CATEGORY_ROUTE_NAME, { id: contentId }), component: react_core_2.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) {
-            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_2.SCRoutes.COURSE_ROUTE_NAME, { id: contentId }), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.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" }))] }))] })));
+        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_2.SCRoutes.GROUP_ROUTE_NAME, { id: contentId }), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.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)(Grow_1.default, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, className: classes.img, alt: intl.formatMessage({
+                            id: 'ui.checkoutReturnDialog.buy',
+                            defaultMessage: 'ui.checkoutReturnDialog.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.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), 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/GroupHeader/GroupHeader.js

@@ -22,6 +22,7 @@ const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButto
 const PubSub_1 = require("../../constants/PubSub");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const GroupActionsMenu_1 = tslib_1.__importDefault(require("../GroupActionsMenu"));
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -89,6 +90,7 @@ function GroupHeader(inProps) {
     const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
@@ -153,6 +155,6 @@ function GroupHeader(inProps) {
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && !isMobile && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [privateEnabled && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), scGroup.visible ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
                             scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
-                            isGroupAdmin) && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.members }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), (0, jsx_runtime_1.jsx)(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id }), isMobile && (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
+                            isGroupAdmin) && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.members }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), (0, jsx_runtime_1.jsx)(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id }), isMobile && (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : isPaymentsEnabled ? ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.GROUP, content: scGroup })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }
 exports.default = GroupHeader;

package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -92,6 +92,7 @@ function NavigationSettingsIconButton(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -161,6 +162,12 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) })) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) })) }), "paymentsHistoryOrder")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) })) }), "logout")
             ];
@@ -192,6 +199,12 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) }), "historyOrders")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }), "logout")
             ];

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -7,6 +7,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const react_intl_1 = require("react-intl");
 const PREFIX = 'SCPaymentProductsDialog';
@@ -30,6 +31,11 @@ function PaymentDetailDialog(inProps) {
         name: PREFIX
     });
     const { className, disableInitialTransition = false } = props, rest = tslib_1.__rest(props, ["className", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), 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)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
 }
 exports.default = PaymentDetailDialog;

package/lib/cjs/components/PaymentOrders/PaymentOrders.d.ts

@@ -0,0 +1,4 @@
+export interface PaymentOrdersProps {
+    className?: string;
+}
+export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;

package/lib/cjs/components/PaymentOrders/PaymentOrders.js

@@ -0,0 +1,121 @@
+"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 styles_1 = require("@mui/material/styles");
+const react_intl_1 = require("react-intl");
+const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const api_services_1 = require("@selfcommunity/api-services");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const PREFIX = 'SCPaymentOrders';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    headline: `${PREFIX}-headline`,
+    btnSave: `${PREFIX}-btn-save`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({
+    [`& .${classes.content}`]: {
+        position: 'relative',
+        padding: '30px 10px'
+    },
+    [`& .${classes.headline}`]: {
+        margin: '40px 0',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between'
+    },
+    [`& .${classes.btnSave}`]: {
+        margin: '30px 0'
+    }
+}));
+function PaymentOrders(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    // STATE
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [orders, setInvoices] = (0, react_1.useState)([]);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [isLoadingPage, setIsLoadingPage] = (0, react_1.useState)(false);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
+    const intl = (0, react_intl_1.useIntl)();
+    /**
+     * Infinite load more orders
+     */
+    const loadMore = (0, react_1.useCallback)(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const loadItems = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            try {
+                const res = yield api_services_1.PaymentService.getPaymentsOrder({ offset: orders.length });
+                if (res) {
+                    setHasMore(res.next !== null);
+                    setNext(res.next);
+                    setInvoices(orders.concat(res.results));
+                    setIsLoadingPage(false);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        });
+        if (hasMore && !isLoadingPage) {
+            setIsLoadingPage(true);
+            yield loadItems();
+        }
+    }), [orders, isLoadingPage, isLoading, hasMore, next]);
+    /**
+     * Load more orders
+     */
+    (0, react_1.useEffect)(() => {
+        if (inView) {
+            loadMore();
+        }
+    }, [inView]);
+    /**
+     * Initial load
+     */
+    (0, react_1.useEffect)(() => {
+        loadMore();
+    }, []);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    /**
+     * Render skeleton
+     */
+    const skeleton = () => {
+        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 110 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 60 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 130 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 150 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
+    };
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: material_1.Paper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "20%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "15%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "15%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.content_type })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.content_name })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.payment_price })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                                intl.formatDate(new Date(order.created_at), {
+                                                    year: 'numeric',
+                                                    month: 'numeric',
+                                                    day: 'numeric',
+                                                    hour: 'numeric',
+                                                    minute: 'numeric'
+                                                }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.expired_at
+                                                ? intl.formatDate(new Date(order.expired_at), {
+                                                    year: 'numeric',
+                                                    month: 'numeric',
+                                                    day: 'numeric',
+                                                    hour: 'numeric',
+                                                    minute: 'numeric'
+                                                })
+                                                : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: 'outlined', label: "Pagata", color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) }))) })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) })) })));
+}
+exports.default = PaymentOrders;

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

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

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

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

package/lib/cjs/components/PaymentProduct/PaymentProduct.d.ts

@@ -1,4 +1,4 @@
-import { SCPaymentProduct, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
+import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice } from '@selfcommunity/types';
 export interface PaymentProductProps {
     className?: string;
     id?: number | string;
@@ -6,5 +6,7 @@ export interface PaymentProductProps {
     contentType?: SCContentType;
     contentId?: number | string;
     content?: SCPurchasableContent;
+    paymentOrder?: SCPaymentOrder;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
 }
 export default function PaymentProduct(inProps: PaymentProductProps): JSX.Element;

package/lib/cjs/components/PaymentProduct/PaymentProduct.js

@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Accordion_1 = tslib_1.__importDefault(require("@mui/material/Accordion"));
@@ -23,10 +24,15 @@ function PaymentProduct(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, id, product, contentType, contentId, content } = props, rest = tslib_1.__rest(props, ["className", "id", "product", "contentType", "contentId", "content"]);
+    const { className, id, product, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "id", "product", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
     if (!product) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ defaultExpanded: true, square: true, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: product.name }) })), product.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: product.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: product.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price, contentType: contentType }, (content ? { content } : { contentId })), index))) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ defaultExpanded: true, square: true, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: product.name }) })), product.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: product.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: product.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
 }
 exports.default = PaymentProduct;

package/lib/cjs/components/PaymentProductPrice/PaymentProductPrice.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SCContentType, SCPaymentPrice, SCPurchasableContent } from '@selfcommunity/types';
+import { SCContentType, SCPaymentOrder, SCPaymentPrice, SCPurchasableContent } from '@selfcommunity/types';
 export interface PaymentProductPriceProps {
     className?: string;
     id?: number | string;
@@ -8,6 +8,7 @@ export interface PaymentProductPriceProps {
     contentId?: number | string;
     content?: SCPurchasableContent;
     actions?: React.ReactNode;
+    paymentOrder?: SCPaymentOrder;
     onHandleActionBuy?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
 }
 export default function PaymentProductPrice(inProps: PaymentProductPriceProps): JSX.Element;