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

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

@@ -0,0 +1,73 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+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`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function PaymentProducts(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    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);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const isMountedRef = useIsComponentMountedRef();
+    /**
+     * Fetches products list
+     */
+    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
+     */
+    useDeepCompareEffect(() => {
+        if (prefetchedProducts.length) {
+            setProducts(prefetchedProducts);
+            setLoading(false);
+        }
+        else if (contentId !== undefined && contentType) {
+            fetchProducts()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setProducts(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+        else if (content && contentType) {
+            setProducts(content.paywalls || []);
+            setLoading(false);
+        }
+    }, [prefetchedProductsIds, contentId, contentType]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsx(_Fragment, { children: products.map((p, i) => (_jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder })), i))) })) })));
+}

package/lib/esm/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/esm/components/PaymentProducts/Skeleton.js

@@ -0,0 +1,43 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Grid, useMediaQuery, useTheme, styled } from '@mui/material';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    products: `${PREFIX}-products`
+};
+const Root = styled(Box, {
+    name: 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.|
+ *
+ */
+export default function PaymentProductsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import PaymentProducts from './PaymentProducts';
+export default PaymentProducts;

package/lib/esm/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/esm/components/Paywalls/Paywalls.js

@@ -0,0 +1,91 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Alert, Box, Typography, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { PaymentApiClient } from '@selfcommunity/api-services';
+import { useIsComponentMountedRef, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { PREFIX } from './constants';
+import PaymentProductsSkeleton from './Skeleton';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import PaymentProducts from '../PaymentProducts';
+import { FormattedMessage, useIntl } from 'react-intl';
+import PaymentProduct from '../PaymentProduct';
+import { getConvertedAmount } from '../../utils/payment';
+const classes = {
+    root: `${PREFIX}-root`,
+    error: `${PREFIX}-error`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function Paywalls(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentId, contentType, content, prefetchedPaymentContentStatus, onUpdatePaymentOrder } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "prefetchedPaymentContentStatus", "onUpdatePaymentOrder"]);
+    // STATE
+    const [products, setProducts] = useState([]);
+    const [paymentOrder, setPaymentOrder] = useState(null);
+    const [loading, setLoading] = useState(true);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const isMountedRef = useIsComponentMountedRef();
+    const intl = useIntl();
+    // Check if the payment price of the purchase is in the current list
+    const isPricePurchasedIncluded = 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
+     */
+    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) {
+            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) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [prefetchedPaymentContentStatus, contentId, contentType]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsx(PaymentProducts, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(Typography, Object.assign({ component: "p", variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })), _jsx(Typography, Object.assign({ component: "p", variant: "body2" }, { children: _jsx(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: getConvertedAmount(paymentOrder.payment_price)
+                                } }) })), _jsx(PaymentProduct, Object.assign({ paymentProduct: paymentOrder.payment_price.payment_product, contentType: contentType }, (content ? { content } : { contentId })))] })))] })) })));
+}

package/lib/esm/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/esm/components/Paywalls/Skeleton.js

@@ -0,0 +1,43 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Grid, useMediaQuery, useTheme, styled } from '@mui/material';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    products: `${PREFIX}-products`
+};
+const Root = styled(Box, {
+    name: 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.|
+ *
+ */
+export default function PaywallsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import Paywalls from './Paywalls';
+export default Paywalls;

package/lib/esm/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;

package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -0,0 +1,249 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Avatar, Box, Button, Icon, InputBase, ListItem, ListItemAvatar, ListItemText, Radio, Stack, Typography, Zoom, styled, CircularProgress } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { ContentAccessType, PREFIX } from './constants';
+import PaywallsConfiguratorSkeleton from './Skeleton';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { getConvertedAmount } from '../../utils/payment';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import List from '@mui/material/List';
+import CreatePaymentProductForm from '../CreatePaymentProductForm';
+const classes = {
+    root: `${PREFIX}-root`,
+    paymentProductsAutocompletePopperRoot: `${PREFIX}-payment-products-autocomplete-popper-root`,
+    paymentProductsPopperRoot: `${PREFIX}-payment-products-popper-root`,
+    filterInputRoot: `${PREFIX}-filter-input-root`,
+    contentAccessType: `${PREFIX}-content-access-type`,
+    newProduct: `${PREFIX}-new-product`,
+    noProducts: `${PREFIX}-no-products`,
+    error: `${PREFIX}-error`,
+    selectedPaymentProductsList: `${PREFIX}-selected-payment-products-list`,
+    autoCompleteProductsLoading: `${PREFIX}-autocomplete-products-loading`,
+    autoCompleteFooter: `${PREFIX}-autocomplete-footer`,
+    btnAddPaymentProduct: `${PREFIX}-add-payment-product`,
+    paymentProductsPopperTitle: `${PREFIX}-payment-products-popper-title`,
+    paymentProductsPopperFooter: `${PREFIX}-payment-products-popper-footer`,
+    productItemCheckIcon: `${PREFIX}-product-check-icon`,
+    productItemCardIcon: `${PREFIX}-product-card-icon`,
+    productItemContent: `${PREFIX}-product-content`,
+    productItemRemoveIcon: `${PREFIX}-product-remove-icon`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+const PaymentProductsAutocompletePopper = styled(Box, {
+    name: PREFIX,
+    slot: 'PaymentProductsAutocompletePopperRoot',
+    overridesResolver: (_props, styles) => styles.paymentProductsAutocompletePopperRoot
+})(() => ({}));
+const PaymentProductsPopper = styled(Popper, {
+    name: PREFIX,
+    slot: 'PaymentProductsPopperRoot',
+    overridesResolver: (_props, styles) => styles.paymentProductsPopperRoot
+})(() => ({}));
+const FilterInputRoot = styled(InputBase, {
+    name: PREFIX,
+    slot: 'FilterInputRoot',
+    overridesResolver: (_props, styles) => styles.filterInputRoot
+})(() => ({}));
+function PopperComponent(props) {
+    const { disablePortal, anchorEl, open } = props, other = __rest(props, ["disablePortal", "anchorEl", "open"]);
+    return _jsx(PaymentProductsAutocompletePopper, Object.assign({}, other));
+}
+export default function PaywallsConfigurator(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentId, contentType, content, prefetchedProducts, selectedProducts = [], onChangeContentAccessType, onChangePaymentProducts, disabled = false } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "prefetchedProducts", "selectedProducts", "onChangeContentAccessType", "onChangePaymentProducts", "disabled"]);
+    // STATE
+    const [products, setProducts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadingProducts, setLoadingProducts] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [value, setValue] = React.useState(selectedProducts);
+    const [pendingValue, setPendingValue] = React.useState([]);
+    const [expanded, setExpanded] = React.useState(value.length ? ContentAccessType.PAID : ContentAccessType.FREE);
+    const [createPrice, setCreatePrice] = useState(false);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    // CONST
+    const open = Boolean(anchorEl);
+    /**
+     * Handle change content type access
+     * @param panel
+     */
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(panel);
+        onChangeContentAccessType(panel);
+    };
+    const handleOpenPricesList = (event) => {
+        performFetchPaymentProducts();
+        setPendingValue(value);
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setValue(pendingValue);
+        onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(pendingValue);
+        if (anchorEl) {
+            anchorEl.focus();
+        }
+        setAnchorEl(null);
+    };
+    /**
+     * Handlers for manage create payment product form
+     */
+    const handleToggleCreatePaymentPrice = () => {
+        setCreatePrice((prev) => !prev);
+    };
+    const handleCreatePaymentPrice = (product) => {
+        const products = [product, ...value];
+        setValue([product, ...value]);
+        onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
+        handleToggleCreatePaymentPrice();
+    };
+    const handleDeleteProduct = (p, i) => {
+        const products = [...value.slice(0, i), ...value.slice(i + 1)];
+        setValue(products);
+        onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
+    };
+    /**
+     * Get the list of option
+     * Display the selected first.
+     */
+    const getOptions = useMemo(() => {
+        return [...products].sort((a, b) => {
+            let ai = value.indexOf(a);
+            ai = ai === -1 ? value.length + products.indexOf(a) : ai;
+            let bi = value.indexOf(b);
+            bi = bi === -1 ? value.length + products.indexOf(b) : bi;
+            return ai - bi;
+        });
+    }, [products.length, value.length]);
+    /**
+     * Render single option
+     * @param props
+     * @param option
+     * @param selected
+     */
+    const renderOption = (props, option, { selected }) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const { key } = props, optionProps = __rest(props, ["key"]);
+        return (_jsxs("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [_jsx(Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: _jsx(Icon, { children: "card_giftcard" }) })), _jsxs(Box, Object.assign({ className: classes.productItemContent }, { children: [option.name, _jsx("br", {}), option.payment_prices && option.payment_prices[0] && (_jsxs(_Fragment, { children: [_jsx("span", { children: getConvertedAmount(option.payment_prices[0]) }), ' ', option.payment_prices.length > 1 && _jsxs(_Fragment, { children: ["+", option.payment_prices.length - 1] })] }))] })), _jsx(Box, Object.assign({ className: classes.productItemRemoveIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: _jsx(Icon, { children: "arrow" }) }))] }), option.id));
+    };
+    /**
+     * Fetch events
+     */
+    const fetchPaymentProducts = (next = `${Endpoints.GetPaymentProducts.url({})}?content_id=${content ? content.id : contentId}&content_type=${contentType}`) => __awaiter(this, void 0, void 0, function* () {
+        const response = yield http.request({
+            url: next,
+            method: Endpoints.GetPaymentProducts.method
+        });
+        const data = response.data;
+        if (data.next) {
+            return data.results.concat(yield fetchPaymentProducts(data.next));
+        }
+        return data.results;
+    });
+    /**
+     * Fetch paywalls
+     */
+    const fetchPaywalls = (next = `${Endpoints.GetPaywalls.url({})}?content_id=${content ? content.id : contentId}&content_type=${contentType}&active=1&payment_product__active=1`) => __awaiter(this, void 0, void 0, function* () {
+        const response = yield http.request({
+            url: next,
+            method: Endpoints.GetPaywalls.method
+        });
+        const data = response.data;
+        if (data.next) {
+            return data.results.concat(yield fetchPaywalls(data.next));
+        }
+        return data.results;
+    });
+    const initSelectProducts = () => {
+        if ((content || contentId !== undefined) && contentType) {
+            fetchPaywalls()
+                .then((paywalls) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const products = paywalls.map((p) => p.payment_product);
+                setValue(products);
+                setPendingValue(products);
+                setExpanded(products.length ? ContentAccessType.PAID : ContentAccessType.FREE);
+                setLoading(false);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+        else {
+            setExpanded(ContentAccessType.FREE);
+            setLoading(false);
+        }
+    };
+    const performFetchPaymentProducts = () => {
+        setLoadingProducts(true);
+        fetchPaymentProducts()
+            .then((data) => {
+            setProducts(data);
+            setLoadingProducts(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetch payment content status
+     */
+    useEffect(() => {
+        if (prefetchedProducts) {
+            setProducts(prefetchedProducts);
+        }
+        initSelectProducts();
+    }, [prefetchedProducts, contentId, content, contentType]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaywallsConfiguratorSkeleton, {})) : (_jsxs("div", Object.assign({ className: classes.contentAccessType }, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), _jsxs(Accordion, Object.assign({ expanded: expanded === ContentAccessType.FREE, onChange: handleChange(ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Radio, { checked: expanded === ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: _jsxs(Typography, { children: [_jsx("b", { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), _jsx(AccordionDetails, { children: _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), _jsxs(Accordion, Object.assign({ expanded: expanded === ContentAccessType.PAID, onChange: handleChange(ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Radio, { checked: expanded === ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: _jsxs(Typography, { children: [_jsx("b", { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), _jsxs(AccordionDetails, { children: [_jsx(Typography, Object.assign({ mb: 2 }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [_jsx(Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), _jsx(Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: _jsx(Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? (_jsx(PaywallsConfiguratorSkeleton, {})) : (_jsxs(Box, { children: [createPrice && (_jsx(Zoom, Object.assign({ in: createPrice }, { children: _jsx(Box, { children: _jsx(CreatePaymentProductForm, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), _jsxs(List, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && (_jsx(ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: _jsx(ListItemText, { primary: intl.formatMessage({
+                                                            id: 'ui.paywallsConfigurator.connected.noProducts',
+                                                            defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
+                                                        }) }) }), -1)), value.map((p, i) => {
+                                                    var _a, _b, _c;
+                                                    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: _jsx(Icon, { children: "delete" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { children: _jsx(Icon, { children: "card_giftcard" }) }) }), _jsx(ListItemText, { primary: p.name, secondary: `Prices: ${((_a = p.payment_prices) === null || _a === void 0 ? void 0 : _a.length)
+                                                                    ? p.payment_prices
+                                                                        .slice(0, 3)
+                                                                        .map((price) => getConvertedAmount(price))
+                                                                        .join(' - ')
+                                                                    : '-'} ${((_b = p.payment_prices) === null || _b === void 0 ? void 0 : _b.length) > 3
+                                                                    ? intl.formatMessage({
+                                                                        id: 'ui.paywallsConfigurator.connected.products.others',
+                                                                        defaultMessage: 'ui.paywallsConfigurator.connected.products.others'
+                                                                    }, { count: ((_c = p.payment_prices) === null || _c === void 0 ? void 0 : _c.length) - 3 })
+                                                                    : ''}` })] }), i));
+                                                })] })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: _jsx(Icon, { children: "list" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && (_jsx(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Box, { children: [_jsx(Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), _jsx(Autocomplete, { loading: loadingProducts, loadingText: _jsx(Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: _jsx(CircularProgress, {}) })), id: "payment-products-autocomplete", className: classes.paymentProductsAutocompletePopperRoot, open: true, multiple: true, onClose: (event, reason) => {
+                                                        if (reason === 'escape') {
+                                                            handleClose();
+                                                        }
+                                                    }, value: pendingValue, onChange: (event, newValue, reason) => {
+                                                        if (event.type === 'keydown' &&
+                                                            (event.key === 'Backspace' || event.key === 'Delete') &&
+                                                            reason === 'removeOption') {
+                                                            return;
+                                                        }
+                                                        setPendingValue(newValue);
+                                                    }, disableCloseOnSelect: true, PopperComponent: PopperComponent, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
+                                                            id: 'ui.paywallsConfigurator.filterByName',
+                                                            defaultMessage: 'ui.paywallsConfigurator.filterByName'
+                                                        }) })) }), _jsx(Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: _jsx(Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: _jsx(Icon, { children: "check" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));
+}

package/lib/esm/components/PaywallsConfigurator/Skeleton.d.ts

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