@selfcommunity/react-ui 0.10.5-payments.179 → 0.10.5-payments.181

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

@@ -64,6 +64,6 @@ function CommunityPaywalls(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: scCommunity.paywalls.map((p, i) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ expanded: true, paymentProduct: p, contentType: types_1.SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => ((0, jsx_runtime_1.jsx)(Unstable_Grid2_1.default, Object.assign({ xs: 12, sm: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ expanded: true, paymentProduct: p, contentType: types_1.SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
 }
 exports.default = CommunityPaywalls;

package/lib/cjs/components/CourseDashboard/Student.js

@@ -19,6 +19,7 @@ const Errors_1 = require("../../constants/Errors");
 const notistack_1 = require("notistack");
 const Skeleton_1 = tslib_1.__importDefault(require("./Student/Skeleton"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const BUTTON_MESSAGES = {
     dashboard: 'ui.course.dashboard.student.button.dashboard',
     request: 'ui.course.dashboard.student.button.request',
@@ -167,7 +168,7 @@ function Student(inProps) {
     }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = (0, react_1.useMemo)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!scCourse) {
             return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "130px", height: "20px" });
         }
@@ -180,7 +181,7 @@ function Student(inProps) {
                             ? BUTTON_MESSAGES.start
                             : scCourse.user_completion_rate === 100
                                 ? BUTTON_MESSAGES.review
-                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), isPaymentsEnabled && ((_c = scCourse.paywalls) === null || _c === void 0 ? void 0 : _c.length) > 0 && !scCourse.join_status && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.COURSE, content: scCourse })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/cjs/components/EventHeader/EventHeader.js

@@ -111,7 +111,6 @@ function EventHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scEvent.image_bigger
         ? { background: `url('${scEvent.image_bigger}') center / cover` }
         : { background: `url('${preferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    console.log('*** event *** ', scEvent);
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -147,6 +146,10 @@ function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.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.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.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.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPaymentsEnabled && ((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.REQUESTED ? ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.EVENT, content: scEvent })) : ((0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished }))), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.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.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.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.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPaymentsEnabled &&
+                                        ((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                        (scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ||
+                                            (scEvent.privacy === types_1.SCEventPrivacyType.PRIVATE &&
+                                                (!scEvent.subscription_status || scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.REQUESTED))) ? ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.EVENT, content: scEvent })) : ((0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished }))), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
 }
 exports.default = EventHeader;

package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
@@ -47,7 +48,7 @@ function EventInfoWidget(inProps) {
     const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
     const [loading, setLoading] = (0, react_1.useState)(true);
     // HOOKS
-    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY });
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -69,9 +70,24 @@ function EventInfoWidget(inProps) {
         setExpanded(!expanded);
     }, [expanded]);
     const hasGeolocationOrLink = (0, react_1.useMemo)(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
-    const showInfo = (0, react_1.useMemo)(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
-        ([types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
-            hasGeolocationOrLink), [scEvent]);
+    const showInfo = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        return hasGeolocationOrLink &&
+            (((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC &&
+                (!((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) ||
+                    (((_b = scEvent.paywalls) === null || _b === void 0 ? void 0 : _b.length) &&
+                        ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) === types_1.SCEventLocationType.PERSON || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === types_1.SCEventSubscriptionStatusType.GOING)))) ||
+                ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PRIVATE &&
+                    ((!((_c = scEvent.paywalls) === null || _c === void 0 ? void 0 : _c.length) &&
+                        [
+                            types_1.SCEventSubscriptionStatusType.INVITED,
+                            types_1.SCEventSubscriptionStatusType.SUBSCRIBED,
+                            types_1.SCEventSubscriptionStatusType.GOING,
+                            types_1.SCEventSubscriptionStatusType.NOT_GOING
+                        ].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1) ||
+                        (((_d = scEvent.paywalls) === null || _d === void 0 ? void 0 : _d.length) &&
+                            ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) === types_1.SCEventLocationType.PERSON || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === types_1.SCEventSubscriptionStatusType.GOING)))));
+    }, [scEvent]);
     const description = (0, react_1.useMemo)(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
     /**
      * Subscriber for pubsub callback

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

@@ -55,7 +55,7 @@ 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: (0, jsx_runtime_1.jsx)("b", { children: (0, payment_1.getConvertedAmount)(price) }) })), 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(paymentOrder.created_at), { 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, {
-                        content_type: contentType.toLowerCase(),
+                        content_type: contentType === null || contentType === void 0 ? void 0 : contentType.toLowerCase(),
                         content_id: content ? content.id : contentId,
                         price_id: price.id
                     })}?${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)));

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

@@ -1,7 +1,6 @@
 import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice } from '@selfcommunity/types';
 export interface PaymentProductsProps {
     className?: string;
-    id?: number | string;
     contentType?: SCContentType;
     contentId?: number | string;
     content?: SCPurchasableContent;

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

@@ -14,6 +14,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
 const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
+const use_deep_compare_effect_1 = tslib_1.__importDefault(require("use-deep-compare-effect"));
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
@@ -27,7 +28,9 @@ function PaymentProducts(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, id, contentId, contentType, content, prefetchedProducts = [], paymentOrder, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "id", "contentId", "contentType", "content", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    const { className, contentId, contentType, content, prefetchedProducts = [], paymentOrder, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    // CONST
+    const prefetchedProductsIds = prefetchedProducts.map((product) => product.id);
     // STATE
     const [products, setProducts] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -37,21 +40,19 @@ function PaymentProducts(inProps) {
     /**
      * Fetches products list
      */
-    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
-        });
+    const fetchProducts = (next) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const data = yield api_services_1.PaymentService.getPaymentProducts({ content_id: contentId, content_type: contentType }, Object.assign({}, (next && { url: next })));
         return data.next ? data.results.concat(yield fetchProducts(data.next)) : data.results;
     });
     /**
      * On mount, fetches products/prices list
      */
-    (0, react_1.useEffect)(() => {
+    (0, use_deep_compare_effect_1.default)(() => {
         if (prefetchedProducts.length) {
             setProducts(prefetchedProducts);
             setLoading(false);
         }
-        else if (id !== undefined || (contentId !== undefined && contentType)) {
+        else if (contentId !== undefined && contentType) {
             fetchProducts()
                 .then((data) => {
                 if (isMountedRef.current) {
@@ -67,7 +68,7 @@ function PaymentProducts(inProps) {
             setProducts(content.paywalls || []);
             setLoading(false);
         }
-    }, [prefetchedProducts.length]);
+    }, [prefetchedProductsIds, contentId, contentType]);
     if (!isPaymentsEnabled) {
         return null;
     }

package/lib/cjs/components/Paywalls/Paywalls.js

@@ -74,7 +74,7 @@ function Paywalls(inProps) {
             api_services_1.PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
                 .then((data) => {
                 if (isMountedRef.current) {
-                    setProducts(data.paywalls);
+                    setProducts(data.paywalls.map((p) => p.payment_product));
                     setPaymentOrder(data.payment_order);
                     setLoading(false);
                 }
@@ -83,7 +83,7 @@ function Paywalls(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [prefetchedPaymentContentStatus]);
+    }, [prefetchedPaymentContentStatus, contentId, contentType]);
     if (!isPaymentsEnabled) {
         return null;
     }

package/lib/cjs/components/PaywallsDialog/PaywallsDialog.js

@@ -26,6 +26,7 @@ const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref
     return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
 });
 function PaywallsDialog(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -37,7 +38,7 @@ function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && PaywallsComponentProps.prefetchedPaymentContentStatus.payment_order) ||
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
             (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.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)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
 }
 exports.default = PaywallsDialog;

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

@@ -62,5 +62,5 @@ export default function CommunityPaywalls(inProps) {
     if (loading) {
         return _jsx(CommunityPaywallSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ xs: 12, sm: 6, md: 4 }, { children: _jsx(PaymentProduct, Object.assign({ expanded: true, paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ xs: 12, sm: 12, md: 4 }, { children: _jsx(PaymentProduct, Object.assign({ expanded: true, paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
 }

package/lib/esm/components/CourseDashboard/Student.js

@@ -5,7 +5,7 @@ import { PREFIX } from './constants';
 import { Avatar, Box, Divider, LinearProgress, Skeleton, Stack, styled, Typography, useThemeProps } from '@mui/material';
 import classNames from 'classnames';
 import HeaderCourseDashboard from './Header';
-import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
+import { SCContentType, SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import ActionButton from './Student/ActionButton';
 import { CLAPPING } from '../../assets/courses/clapping';
@@ -17,6 +17,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
 import StudentSkeleton from './Student/Skeleton';
 import UserAvatar from '../../shared/UserAvatar';
+import BuyButton from '../BuyButton';
 const BUTTON_MESSAGES = {
     dashboard: 'ui.course.dashboard.student.button.dashboard',
     request: 'ui.course.dashboard.student.button.request',
@@ -165,7 +166,7 @@ function Student(inProps) {
     }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!scCourse) {
             return _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "130px", height: "20px" });
         }
@@ -178,7 +179,7 @@ function Student(inProps) {
                             ? BUTTON_MESSAGES.start
                             : scCourse.user_completion_rate === 100
                                 ? BUTTON_MESSAGES.review
-                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), isPaymentsEnabled && ((_c = scCourse.paywalls) === null || _c === void 0 ? void 0 : _c.length) > 0 && !scCourse.join_status && (_jsx(BuyButton, { contentType: SCContentType.COURSE, content: scCourse })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || scCourse.join_status === SCCourseJoinStatusType.REQUESTED) && (_jsx(ActionButton, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/esm/components/EventHeader/EventHeader.js

@@ -109,7 +109,6 @@ export default function EventHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scEvent.image_bigger
         ? { background: `url('${scEvent.image_bigger}') center / cover` }
         : { background: `url('${preferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    console.log('*** event *** ', scEvent);
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -145,5 +144,9 @@ export default function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [isPaymentsEnabled && ((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scEvent.subscription_status !== SCEventSubscriptionStatusType.REQUESTED ? (_jsx(BuyButton, { contentType: SCContentType.EVENT, content: scEvent })) : (_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished }))), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [isPaymentsEnabled &&
+                                        ((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                        (scEvent.privacy === SCEventPrivacyType.PUBLIC ||
+                                            (scEvent.privacy === SCEventPrivacyType.PRIVATE &&
+                                                (!scEvent.subscription_status || scEvent.subscription_status !== SCEventSubscriptionStatusType.REQUESTED))) ? (_jsx(BuyButton, { contentType: SCContentType.EVENT, content: scEvent })) : (_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished }))), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
 }

package/lib/esm/components/EventInfoWidget/EventInfoWidget.js

@@ -2,7 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, CardContent, Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
 import { useSCFetchEvent } from '@selfcommunity/react-core';
-import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
 import PubSub from 'pubsub-js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -45,7 +46,7 @@ export default function EventInfoWidget(inProps) {
     const [showButton, setShowButton] = useState(!summaryExpanded);
     const [loading, setLoading] = useState(true);
     // HOOKS
-    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event, cacheStrategy: CacheStrategies.NETWORK_ONLY });
     // REFS
     const updatesSubscription = useRef(null);
     useEffect(() => {
@@ -67,9 +68,24 @@ export default function EventInfoWidget(inProps) {
         setExpanded(!expanded);
     }, [expanded]);
     const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
-    const showInfo = useMemo(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
-        ([SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
-            hasGeolocationOrLink), [scEvent]);
+    const showInfo = useMemo(() => {
+        var _a, _b, _c, _d;
+        return hasGeolocationOrLink &&
+            (((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC &&
+                (!((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) ||
+                    (((_b = scEvent.paywalls) === null || _b === void 0 ? void 0 : _b.length) &&
+                        ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) === SCEventLocationType.PERSON || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.GOING)))) ||
+                ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE &&
+                    ((!((_c = scEvent.paywalls) === null || _c === void 0 ? void 0 : _c.length) &&
+                        [
+                            SCEventSubscriptionStatusType.INVITED,
+                            SCEventSubscriptionStatusType.SUBSCRIBED,
+                            SCEventSubscriptionStatusType.GOING,
+                            SCEventSubscriptionStatusType.NOT_GOING
+                        ].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1) ||
+                        (((_d = scEvent.paywalls) === null || _d === void 0 ? void 0 : _d.length) &&
+                            ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) === SCEventLocationType.PERSON || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.GOING)))));
+    }, [scEvent]);
     const description = useMemo(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
     /**
      * Subscriber for pubsub callback

package/lib/esm/components/PaymentProductPrice/PaymentProductPrice.js

@@ -53,7 +53,7 @@ export default function PaymentProductPrice(inProps) {
     return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, image: _jsx(Box, Object.assign({ className: classes.image }, { children: _jsx(Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: _jsx(Icon, { children: "card_giftcard" }) })) })), primary: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx("b", { children: getConvertedAmount(price) }) })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classNames(classes.secondary, classes.purchasedAt) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
                                 purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' })
                             } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: _jsx(Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: classNames(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: Link, startIcon: _jsx(Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(SCRoutes.CHECKOUT_PAYMENT, {
-                        content_type: contentType.toLowerCase(),
+                        content_type: contentType === null || contentType === void 0 ? void 0 : contentType.toLowerCase(),
                         content_id: content ? content.id : contentId,
                         price_id: price.id
                     })}?${returnUrlParams ? new URLSearchParams(returnUrlParams) : ''}` }, { children: paymentOrder && paymentOrder.payment_price.id === price.id ? (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.buy", id: "ui.paymentProduct.action.buy" })) })) })) }))) }, rest)));

package/lib/esm/components/PaymentProducts/PaymentProducts.d.ts

@@ -1,7 +1,6 @@
 import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice } from '@selfcommunity/types';
 export interface PaymentProductsProps {
     className?: string;
-    id?: number | string;
     contentType?: SCContentType;
     contentId?: number | string;
     content?: SCPurchasableContent;

package/lib/esm/components/PaymentProducts/PaymentProducts.js

@@ -1,17 +1,18 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { Endpoints, PaymentApiClient } from '@selfcommunity/api-services';
+import { PaymentService } from '@selfcommunity/api-services';
 import { useIsComponentMountedRef, useSCPaymentsEnabled } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
 import PaymentProductsSkeleton from './Skeleton';
 import PaymentProduct from '../PaymentProduct';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 const classes = {
     root: `${PREFIX}-root`
 };
@@ -25,7 +26,9 @@ export default function PaymentProducts(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, id, contentId, contentType, content, prefetchedProducts = [], paymentOrder, onUpdatePaymentOrder } = props, rest = __rest(props, ["className", "id", "contentId", "contentType", "content", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    const { className, contentId, contentType, content, prefetchedProducts = [], paymentOrder, onUpdatePaymentOrder } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    // CONST
+    const prefetchedProductsIds = prefetchedProducts.map((product) => product.id);
     // STATE
     const [products, setProducts] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -35,21 +38,19 @@ export default function PaymentProducts(inProps) {
     /**
      * Fetches products list
      */
-    const fetchProducts = (next = Endpoints.GetPaymentProducts.url({})) => __awaiter(this, void 0, void 0, function* () {
-        const data = yield PaymentApiClient.getPaymentProducts(id !== undefined ? { id } : { content_id: contentId, content_type: contentType }, {
-            url: next
-        });
+    const fetchProducts = (next) => __awaiter(this, void 0, void 0, function* () {
+        const data = yield PaymentService.getPaymentProducts({ content_id: contentId, content_type: contentType }, Object.assign({}, (next && { url: next })));
         return data.next ? data.results.concat(yield fetchProducts(data.next)) : data.results;
     });
     /**
      * On mount, fetches products/prices list
      */
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         if (prefetchedProducts.length) {
             setProducts(prefetchedProducts);
             setLoading(false);
         }
-        else if (id !== undefined || (contentId !== undefined && contentType)) {
+        else if (contentId !== undefined && contentType) {
             fetchProducts()
                 .then((data) => {
                 if (isMountedRef.current) {
@@ -65,7 +66,7 @@ export default function PaymentProducts(inProps) {
             setProducts(content.paywalls || []);
             setLoading(false);
         }
-    }, [prefetchedProducts.length]);
+    }, [prefetchedProductsIds, contentId, contentType]);
     if (!isPaymentsEnabled) {
         return null;
     }

package/lib/esm/components/Paywalls/Paywalls.js

@@ -72,7 +72,7 @@ export default function Paywalls(inProps) {
             PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
                 .then((data) => {
                 if (isMountedRef.current) {
-                    setProducts(data.paywalls);
+                    setProducts(data.paywalls.map((p) => p.payment_product));
                     setPaymentOrder(data.payment_order);
                     setLoading(false);
                 }
@@ -81,7 +81,7 @@ export default function Paywalls(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [prefetchedPaymentContentStatus]);
+    }, [prefetchedPaymentContentStatus, contentId, contentType]);
     if (!isPaymentsEnabled) {
         return null;
     }

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -24,6 +24,7 @@ const NoTransition = React.forwardRef(function NoTransition(props, ref) {
     return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
 });
 export default function PaywallsDialog(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -35,6 +36,6 @@ export default function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && PaywallsComponentProps.prefetchedPaymentContentStatus.payment_order) ||
+    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
             (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
 }