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

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const payment_1 = require("../../utils/payment");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    primary: `${constants_1.PREFIX}-primary`,
+    secondary: `${constants_1.PREFIX}-secondary`,
+    purchasedAt: `${constants_1.PREFIX}-purchased-at`,
+    button: `${constants_1.PREFIX}-button`,
+    buttonPurchased: `${constants_1.PREFIX}-button-purchased`,
+    action: `${constants_1.PREFIX}-action`
+};
+const Root = (0, material_1.styled)(BaseItem_1.default, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentProductPrice(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    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
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const intl = (0, react_intl_1.useIntl)();
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const handleActionBuy = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onHandleActionBuy && onHandleActionBuy(price, contentType, contentId);
+    }, [onHandleActionBuy, price, contentType, contentId]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (!price) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.primary }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, payment_1.getRecurringConvertedAmount)(price, intl) }) })), 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' : 'primary', 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: "dredit-card" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
+                        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)(jsx_runtime_1.Fragment, { children: paymentOrder.payment_price.recurring_interval ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribed", id: "ui.paymentProduct.action.subscribed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: price.recurring_interval ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribe", id: "ui.paymentProduct.action.subscribe" })) : ((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/PaymentProductPrice/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS PaymentProductPriceSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductPriceSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductPriceSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductPriceSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaymentProductPriceSkeleton(props: any): JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    primary: `${constants_1.PREFIX}-primary`,
+    secondary: `${constants_1.PREFIX}-secondary`,
+    button: `${constants_1.PREFIX}-button`,
+    action: `${constants_1.PREFIX}-action`
+};
+const Root = (0, material_1.styled)(BaseItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentProductPriceSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductPriceSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductPriceSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductPriceSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function PaymentProductPriceSkeleton(props) {
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    return ((0, jsx_runtime_1.jsx)(Root, { className: (0, classnames_1.default)(classes.root), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: isMobile ? 70 : 85, className: classes.primary }), actions: props.actions !== undefined ? (props.actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: isMobile ? 30 : 40, className: classes.action }) }))) }));
+}
+exports.default = PaymentProductPriceSkeleton;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaymentProductPrice";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaymentProductPrice';

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice } from '@selfcommunity/types';
+export interface PaymentProductsProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedProducts?: SCPaymentProduct[];
+    paymentOrder?: SCPaymentOrder;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+}
+export default function PaymentProducts(inProps: PaymentProductsProps): JSX.Element;

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const use_deep_compare_effect_1 = tslib_1.__importDefault(require("use-deep-compare-effect"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentProducts(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    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);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    /**
+     * Fetches products list
+     */
+    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, use_deep_compare_effect_1.default)(() => {
+        if (prefetchedProducts.length) {
+            setProducts(prefetchedProducts);
+            setLoading(false);
+        }
+        else if (contentId !== undefined && contentType) {
+            fetchProducts()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setProducts(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+        else if (content && contentType) {
+            setProducts(content.paywalls || []);
+            setLoading(false);
+        }
+    }, [prefetchedProductsIds, contentId, contentType]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: products.map((p, i) => ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder })), i))) })) })));
+}
+exports.default = PaymentProducts;

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

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS PaymentProductsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaymentProductsSkeleton(inProps: any): JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProduct/Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    products: `${constants_1.PREFIX}-products`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS PaymentProductsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function PaymentProductsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}
+exports.default = PaymentProductsSkeleton;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaymentProducts";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaymentProducts';

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

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

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

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

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;

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const PaymentProducts_1 = tslib_1.__importDefault(require("../PaymentProducts"));
+const react_intl_1 = require("react-intl");
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const payment_1 = require("../../utils/payment");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    error: `${constants_1.PREFIX}-error`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function Paywalls(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, contentId, contentType, content, prefetchedPaymentContentStatus, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "prefetchedPaymentContentStatus", "onUpdatePaymentOrder"]);
+    // STATE
+    const [products, setProducts] = (0, react_1.useState)([]);
+    const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    const intl = (0, react_intl_1.useIntl)();
+    // Check if the payment price of the purchase is in the current list
+    const isPricePurchasedIncluded = (0, react_1.useMemo)(() => {
+        let _included = false;
+        if (!products.length || !paymentOrder) {
+            return true;
+        }
+        products.map((p) => {
+            if (p.payment_prices) {
+                const _ids = p.payment_prices.map((price) => price.id);
+                if (_ids.indexOf(paymentOrder.payment_price.id) > -1) {
+                    _included = _included || true;
+                }
+            }
+        });
+        return _included;
+    }, [products, paymentOrder]);
+    /**
+     * On mount, fetch payment content status
+     */
+    (0, react_1.useEffect)(() => {
+        if (prefetchedPaymentContentStatus) {
+            setProducts(prefetchedPaymentContentStatus.paywalls);
+            setPaymentOrder(prefetchedPaymentContentStatus.payment_order);
+            setLoading(false);
+        }
+        else if (content && contentType) {
+            setProducts(content.paywalls || []);
+            setPaymentOrder(content.payment_order || null);
+            setLoading(false);
+        }
+        else if (contentId !== undefined && contentType) {
+            api_services_1.PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setProducts(data.paywalls.map((p) => p.payment_product));
+                    setPaymentOrder(data.payment_order);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [prefetchedPaymentContentStatus, contentId, contentType]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paywalls.contentPurchasedAt", id: "ui.paywalls.contentPurchasedAt", values: {
+                                    purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' }),
+                                    price: (0, payment_1.getConvertedAmount)(paymentOrder.payment_price)
+                                } }) })), (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: paymentOrder.payment_price.payment_product, contentType: contentType }, (content ? { content } : { contentId })))] })))] })) })));
+}
+exports.default = Paywalls;

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

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS PaywallsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaywallsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaywallsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaywallsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaywallsSkeleton(inProps: any): JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProduct/Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    products: `${constants_1.PREFIX}-products`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS PaywallsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaywallsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaywallsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaywallsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function PaywallsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}
+exports.default = PaywallsSkeleton;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaywalls";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaywalls';

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { SCPaymentProduct, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
+export interface PaywallsConfiguratorProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedProducts?: SCPaymentProduct[];
+    selectedProducts?: SCPaymentProduct[];
+    onChangePaymentProducts?: (products: SCPaymentProduct[]) => void;
+    onChangeContentAccessType?: (type: string) => void;
+    disabled?: boolean;
+}
+export default function PaywallsConfigurator(inProps: PaywallsConfiguratorProps): JSX.Element;