@selfcommunity/react-ui 0.10.5-payments.152 → 0.10.5-payments.155

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

@@ -11,10 +11,10 @@ const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const PaymentProductsDialog_1 = tslib_1.__importDefault(require("../PaymentProductsDialog"));
-const PaymentProducts_1 = tslib_1.__importDefault(require("../PaymentProducts"));
+const PaywallsDialog_1 = tslib_1.__importDefault(require("../PaywallsDialog"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
+const Paywalls_1 = tslib_1.__importDefault(require("../Paywalls"));
 const PREFIX = 'SCBuyButton';
 const classes = {
     requestRoot: `${PREFIX}-request-root`,
@@ -72,6 +72,7 @@ function BuyButton(inProps) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // CONST
     const [purchased, setPurchased] = (0, react_1.useState)(null);
+    const [products, setProducts] = (0, react_1.useState)([]);
     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
@@ -108,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.paywalls) {
+                            setProducts(data.paywalls);
+                        }
                         if (data.payment_order) {
                             setPaymentOrder(data.payment_order);
                         }
@@ -121,6 +125,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.paywalls) {
+                        setProducts(data.paywalls);
+                    }
                     if (data.payment_order) {
                         setPaymentOrder(data.payment_order);
                     }
@@ -135,6 +142,9 @@ 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.paywalls) {
+                            setProducts(data.paywalls);
+                        }
                         if (data.payment_order) {
                             setPaymentOrder(data.payment_order);
                         }
@@ -150,6 +160,9 @@ function BuyButton(inProps) {
                         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.paywalls) {
+                            setProducts(data.paywalls);
+                        }
                         if (data.payment_order) {
                             setPaymentOrder(data.payment_order);
                         }
@@ -172,6 +185,12 @@ function BuyButton(inProps) {
     if (!contentId && !content) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled == true ? '' : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) }, { 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: (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: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : ((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: (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 })) }) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled == true ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { 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: (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: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallssDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallssDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
+                                    paywalls: products,
+                                    payment_order: paymentOrder
+                                }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PaywallsDialog_1.default, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {
+                                paywalls: products,
+                                payment_order: paymentOrder
+                            }, onUpdatePaymentOrder: handleUpdatePaymentOrder }) }) })) }))] }));
 }
 exports.default = BuyButton;

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

@@ -1,4 +1,5 @@
 import { SCCategoryType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
 import { CategoryFollowButtonProps } from '../CategoryFollowButton';
 import { WidgetProps } from '../Widget';
 export interface CategoryProps extends WidgetProps {
@@ -32,6 +33,10 @@ export interface CategoryProps extends WidgetProps {
      * @default false
      */
     showTooltip?: boolean;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Category/Category.js

@@ -69,11 +69,11 @@ function Category(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps"]);
+    const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null, cacheStrategy } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps", "cacheStrategy"]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
-    const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
+    const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)(Object.assign({ id: categoryId, category }, (cacheStrategy && { cacheStrategy })));
     // MEMO
     const _ButtonBaseProps = (0, react_1.useMemo)(() => (ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS

package/lib/cjs/components/CategoryFollowButton/CategoryFollowButton.js

@@ -105,7 +105,11 @@ function CategoryFollowButton(inProps) {
     /**
      * if the category is a paid content and it isn't followed show the Buy button
      */
-    if (scCategory && scUserContext.user && isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && !followed) {
+    if (scCategory &&
+        scUserContext.user &&
+        isPaymentsEnabled &&
+        ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+        (!followed || scCategoriesManager.isLoading(scCategory))) {
         return (0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory, disabled: disableBuyContentIfPaidContent });
     }
     return ((0, jsx_runtime_1.jsx)(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: (0, classnames_1.default)(classes.root, className), disabled: isActionFollowDisabled }, rest, { children: followed && scUserContext.user ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));

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

@@ -1,5 +1,5 @@
-import { SCCheckoutSessionUIMode, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
 import * as stripeJs from '@stripe/stripe-js';
+import { SCCheckoutSessionUIMode, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
 export interface CheckoutProps {
     className?: string;
     clientSecret?: string;

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

@@ -22,7 +22,6 @@ 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`,
@@ -48,7 +47,7 @@ function Checkout(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     const intl = (0, react_intl_1.useIntl)();
     // HOOKS
-    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_2.useSCPaymentsEnabled)();
+    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;
@@ -109,6 +108,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.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: providerOptions }, { 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 && contentType !== types_1.SCContentType.COMMUNITY && ((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: providerOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.EmbeddedCheckout, {}) })) }))] })));
 }
 exports.default = Checkout;

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

@@ -33,6 +33,15 @@ const Root = (0, styles_1.styled)(material_1.Grid, {
         },
         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',
@@ -42,15 +51,6 @@ const Root = (0, styles_1.styled)(material_1.Grid, {
         },
         padding: theme.spacing(1, 5)
     },
-    [`& .${classes.header}`]: {
-        display: 'flex',
-        flexGrow: 1,
-        justifyContent: 'center',
-        paddingTop: theme.spacing(2),
-        '& div': {
-            maxWidth: 515
-        }
-    },
     [`& .${classes.content}`]: {
         position: 'relative',
         [theme.breakpoints.up('md')]: {
@@ -84,6 +84,6 @@ 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.jsxs)(material_1.Grid, Object.assign({ container: true, xs: 12, className: classes.header }, { 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) }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 150, width: '100%' }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6, className: classes.right }, { 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)(Skeleton_1.default, { variant: "rounded", height: 20, width: 190 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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)(Skeleton_1.default, { variant: "rounded", height: 30, width: 140 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 110 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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)(Skeleton_1.default, { 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)(Skeleton_1.default, { 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)(Skeleton_1.default, { variant: "rounded", height: 70 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 340 })] }))] })) }))] })));
+    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)(Skeleton_1.default, { 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)(Skeleton_1.default, { variant: "rounded", height: 20, width: 190 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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)(Skeleton_1.default, { variant: "rounded", height: 30, width: 140 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 110 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { 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)(Skeleton_1.default, { 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)(Skeleton_1.default, { 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)(Skeleton_1.default, { variant: "rounded", height: 70 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 340 })] }))] })) }))] })));
 }
 exports.default = CheckoutSkeleton;

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

@@ -11,7 +11,6 @@ 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");
@@ -22,6 +21,7 @@ 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 Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
 const PREFIX = 'SCCheckoutReturnDialog';
 const classes = {
     root: `${PREFIX}-root`,
@@ -47,15 +47,18 @@ function CheckoutReturnDialog(inProps) {
         name: PREFIX
     });
     const { className, checkoutSessionId, disableInitialTransition = false, onHandleViewContentPurchased } = props, rest = tslib_1.__rest(props, ["className", "checkoutSessionId", "disableInitialTransition", "onHandleViewContentPurchased"]);
+    // 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 [paymentProduct, setPaymentProduct] = (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_2.useSCRouting)();
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
     /**
      * Handle view new object purchased
      */
@@ -63,16 +66,16 @@ function CheckoutReturnDialog(inProps) {
         let _redirectUrl;
         switch (contentType) {
             case types_1.SCContentType.GROUP:
-                _redirectUrl = scRoutingContext.url(react_core_2.SCRoutes.GROUP_ROUTE_NAME, content);
+                _redirectUrl = scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, content);
                 break;
             case types_1.SCContentType.EVENT:
-                _redirectUrl = scRoutingContext.url(react_core_2.SCRoutes.EVENT_ROUTE_NAME, content);
+                _redirectUrl = scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, content);
                 break;
             case types_1.SCContentType.CATEGORY:
-                _redirectUrl = scRoutingContext.url(react_core_2.SCRoutes.CATEGORY_ROUTE_NAME, content);
+                _redirectUrl = scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, content);
                 break;
             case types_1.SCContentType.COURSE:
-                _redirectUrl = scRoutingContext.url(react_core_2.SCRoutes.COURSE_ROUTE_NAME, content);
+                _redirectUrl = scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, content);
                 break;
             default:
                 break;
@@ -84,6 +87,27 @@ function CheckoutReturnDialog(inProps) {
             window.location.href = _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) => {
@@ -92,6 +116,11 @@ function CheckoutReturnDialog(inProps) {
                     setContentType(r.content_type);
                     setContentId(r.content_id);
                     setContent(r[r.content_type]);
+                    if (r.payment_price.payment_product) {
+                        setPaymentProduct(r.payment_price.payment_product);
+                    }
+                    // Refresh subscription status
+                    refreshContentStatus();
                     setLoading(false);
                 });
             }
@@ -109,21 +138,24 @@ function CheckoutReturnDialog(inProps) {
     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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: content, 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', onClick: handleViewPurchasedObject, 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" }) }))] }));
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, 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', 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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Category_1.default, { category: content, 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', onClick: handleViewPurchasedObject, 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" }) }))] }));
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Category_1.default, { category: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, 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', 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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Course_1.default, { course: content, 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', onClick: handleViewPurchasedObject, 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" }) }))] }));
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, 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', 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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, { group: content, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, 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" }) }))] }));
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }) })), (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.COMMUNITY) {
+            footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [paymentProduct && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, { hidePaymentProductPrices: true, paymentProduct: paymentProduct }) }))] })), (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: 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] })));
+                        }), width: 100, height: 100 }) })), footer] })));
     };
     if (!isPaymentsEnabled) {
         return null;

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

@@ -4,5 +4,6 @@ export interface CommunityPaywallProps {
     prefetchedProducts?: SCPaymentProduct[];
     paymentOrder?: SCPaymentOrder;
     onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+    callBackUrl?: string;
 }
 export default function CommunityPaywall(inProps: CommunityPaywallProps): JSX.Element;

package/lib/cjs/components/CommunityPaywall/CommunityPaywall.js

@@ -28,7 +28,7 @@ function CommunityPaywall(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, prefetchedProducts = [], paymentOrder = null, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    const { className, prefetchedProducts = [], paymentOrder = null, onUpdatePaymentOrder, callBackUrl } = props, rest = tslib_1.__rest(props, ["className", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder", "callBackUrl"]);
     // STATE
     const [products, setProducts] = (0, react_1.useState)([]);
     const [payment, setPayment] = (0, react_1.useState)(null);
@@ -46,11 +46,13 @@ function CommunityPaywall(inProps) {
             setLoading(false);
         }
         else {
-            api_services_1.PaymentApiClient.getCommunityPaymentProducts()
+            api_services_1.CommunityApiClient.getCommunities()
                 .then((data) => {
                 if (isMountedRef.current) {
-                    setProducts(data.paywalls);
-                    setPayment(data.payment_order);
+                    if (data.count && data.results.length) {
+                        setProducts(data.results[0].paywalls);
+                        setPayment(data.results[0].payment_order);
+                    }
                     setLoading(false);
                 }
             })
@@ -65,6 +67,6 @@ function CommunityPaywall(inProps) {
     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: products.map((p, i) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 4 }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ expanded: true, paymentProduct: p, contentType: types_1.SCContentType.COMMUNITY, contentId: p.id }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))) }), i))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 4 }, rest, { children: products.map((p, i) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 4 }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ expanded: true, paymentProduct: p, contentType: types_1.SCContentType.COMMUNITY, contentId: p.id }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder }), (callBackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callBackUrl } } }))) }), i))) })));
 }
 exports.default = CommunityPaywall;

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

@@ -4,6 +4,7 @@ import { SCCourseTemplateType } from '../../types/course';
 import { CourseParticipantsButtonProps } from '../CourseParticipantsButton';
 import { WidgetProps } from '../Widget';
 import { CourseSkeletonProps } from './Skeleton';
+import { CacheStrategies } from '@selfcommunity/utils/src/utils/cache';
 export interface CourseProps extends WidgetProps {
     /**
      * Course Object
@@ -35,6 +36,10 @@ export interface CourseProps extends WidgetProps {
      * @default {}
      */
     CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Course/Course.js

@@ -111,9 +111,9 @@ function Course(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "cacheStrategy"]);
     // STATE
-    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)(Object.assign({ id: courseId, course }, (cacheStrategy && { cacheStrategy })));
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER), [scCourse]);

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

@@ -1,4 +1,5 @@
 import { SCEventType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
 import React from 'react';
 import { SCEventTemplateType } from '../../types/event';
 import { EventParticipantsButtonProps } from '../EventParticipantsButton';
@@ -50,6 +51,10 @@ export interface EventProps extends WidgetProps {
      * @default {}
      */
     EventSkeletonComponentProps?: EventSkeletonProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Event/Event.js

@@ -106,9 +106,9 @@ function Event(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
+    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps", "cacheStrategy"]);
     // STATE
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)(Object.assign({ id: eventId, event, autoSubscribe: false }, (cacheStrategy && { cacheStrategy })));
     const inProgress = (0, react_1.useMemo)(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();

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

@@ -1,5 +1,6 @@
 import { ButtonBaseProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils/src/utils/cache';
 import { WidgetProps } from '../Widget';
 import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
 export interface GroupProps extends WidgetProps {
@@ -37,6 +38,10 @@ export interface GroupProps extends WidgetProps {
      * @default {}
      */
     buttonProps?: ButtonBaseProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Group/Group.js

@@ -72,9 +72,9 @@ function Group(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, groupSubscribeButtonProps = {} } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "groupSubscribeButtonProps"]);
+    const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, groupSubscribeButtonProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "groupSubscribeButtonProps", "cacheStrategy"]);
     // STATE
-    const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const { scGroup } = (0, react_core_1.useSCFetchGroup)(Object.assign({ id: groupId, group }, (cacheStrategy && { cacheStrategy })));
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const scUserContext = (0, react_core_1.useSCUser)();

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

@@ -1,5 +1,6 @@
 import { AccordionProps } from '@mui/material';
 import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice, SCPaymentProductTemplateType } from '@selfcommunity/types';
+import { PaymentProductPriceProps } from '../PaymentProductPrice';
 export interface PaymentProductProps extends Pick<AccordionProps, Exclude<keyof AccordionProps, 'children' | 'expanded'>> {
     className?: string;
     paymentProductId?: number;
@@ -11,5 +12,7 @@ export interface PaymentProductProps extends Pick<AccordionProps, Exclude<keyof
     onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
     template?: SCPaymentProductTemplateType;
     expanded?: boolean;
+    hidePaymentProductPrices?: boolean;
+    PaymentProductPriceComponentProps?: PaymentProductPriceProps;
 }
 export default function PaymentProduct(inProps: PaymentProductProps): JSX.Element;

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

@@ -26,7 +26,7 @@ function PaymentProduct(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, paymentProductId, paymentProduct, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder, template = types_1.SCPaymentProductTemplateType.DETAIL, expanded } = props, rest = tslib_1.__rest(props, ["className", "paymentProductId", "paymentProduct", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder", "template", "expanded"]);
+    const { className, paymentProductId, paymentProduct, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder, template = types_1.SCPaymentProductTemplateType.DETAIL, expanded, hidePaymentProductPrices = false, PaymentProductPriceComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentProductId", "paymentProduct", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder", "template", "expanded", "hidePaymentProductPrices", "PaymentProductPriceComponentProps"]);
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     const { scPaymentProduct } = (0, react_core_1.useSCFetchPaymentProduct)({ id: paymentProductId, paymentProduct });
@@ -44,6 +44,7 @@ function PaymentProduct(inProps) {
     if (!scPaymentProduct) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: (0, classnames_1.default)(classes.root, className) }, (expanded && { expanded }), 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: scPaymentProduct.name }) })), scPaymentProduct.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: scPaymentProduct.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))) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: (0, classnames_1.default)(classes.root, className) }, (expanded && { expanded }), 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: scPaymentProduct.name && scPaymentProduct.name }) })), scPaymentProduct.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: !hidePaymentProductPrices &&
+                    scPaymentProduct.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price }, PaymentProductPriceComponentProps, (contentType && { contentType }), (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
 }
 exports.default = PaymentProduct;

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

@@ -10,5 +10,6 @@ export interface PaymentProductPriceProps {
     actions?: React.ReactNode;
     paymentOrder?: SCPaymentOrder;
     onHandleActionBuy?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+    returnUrlParams?: Record<string, string>;
 }
 export default function PaymentProductPrice(inProps: PaymentProductPriceProps): JSX.Element;

package/lib/cjs/components/PaymentProductPrice/PaymentProductPrice.js

@@ -33,7 +33,7 @@ function PaymentProductPrice(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, id, price, contentType, contentId, content, actions, onHandleActionBuy, paymentOrder } = props, rest = tslib_1.__rest(props, ["className", "id", "price", "contentType", "contentId", "content", "actions", "onHandleActionBuy", "paymentOrder"]);
+    const { className, id, price, contentType, contentId, content, actions, onHandleActionBuy, paymentOrder, returnUrlParams } = props, rest = tslib_1.__rest(props, ["className", "id", "price", "contentType", "contentId", "content", "actions", "onHandleActionBuy", "paymentOrder", "returnUrlParams"]);
     // ROUTING
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
@@ -57,10 +57,10 @@ function PaymentProductPrice(inProps) {
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, image: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })) })), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: (0, classnames_1.default)(classes.secondary, classes.purchasedAt) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
                                 purchasedAt: intl.formatDate(new Date(), { day: 'numeric', year: 'numeric', month: 'long' })
-                            } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: (0, classnames_1.default)(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: react_core_1.Link, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
+                            } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: (0, classnames_1.default)(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: react_core_1.Link, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
                         content_type: contentType.toLowerCase(),
                         content_id: content ? content.id : contentId,
                         price_id: price.id
-                    }) }, { children: paymentOrder && paymentOrder.payment_price.id === price.id ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.buy", id: "ui.paymentProduct.action.buy" })) })) })) }))) }, rest)));
+                    })}?${returnUrlParams ? new URLSearchParams(returnUrlParams) : ''}` }, { children: paymentOrder && paymentOrder.payment_price.id === price.id ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.buy", id: "ui.paymentProduct.action.buy" })) })) })) }))) }, rest)));
 }
 exports.default = PaymentProductPrice;

package/lib/cjs/components/PaymentProducts/PaymentProducts.js

@@ -37,7 +37,7 @@ function PaymentProducts(inProps) {
     /**
      * Fetches products list
      */
-    const fetchProducts = (next = api_services_1.Endpoints.GetContentProducts.url({})) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+    const fetchProducts = (next = api_services_1.Endpoints.GetPaymentProducts.url({})) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         const data = yield api_services_1.PaymentApiClient.getPaymentProducts(id !== undefined ? { id } : { content_id: contentId, content_type: contentType }, {
             url: next
         });

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

@@ -0,0 +1,10 @@
+import { SCContentType, SCPurchasableContent, SCPaymentPrice } from '@selfcommunity/types';
+export interface PaywallsProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedPaymentContentStatus?: SCPurchasableContent;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+}
+export default function Paywalls(inProps: PaywallsProps): JSX.Element;