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

package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(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 react_intl_1 = require("react-intl");
+const payment_1 = require("../../utils/payment");
+const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
+const Popper_1 = tslib_1.__importDefault(require("@mui/material/Popper"));
+const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
+const CreatePaymentProductForm_1 = tslib_1.__importDefault(require("../CreatePaymentProductForm"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    paymentProductsAutocompletePopperRoot: `${constants_1.PREFIX}-payment-products-autocomplete-popper-root`,
+    paymentProductsPopperRoot: `${constants_1.PREFIX}-payment-products-popper-root`,
+    filterInputRoot: `${constants_1.PREFIX}-filter-input-root`,
+    contentAccessType: `${constants_1.PREFIX}-content-access-type`,
+    newProduct: `${constants_1.PREFIX}-new-product`,
+    noProducts: `${constants_1.PREFIX}-no-products`,
+    error: `${constants_1.PREFIX}-error`,
+    selectedPaymentProductsList: `${constants_1.PREFIX}-selected-payment-products-list`,
+    autoCompleteProductsLoading: `${constants_1.PREFIX}-autocomplete-products-loading`,
+    autoCompleteFooter: `${constants_1.PREFIX}-autocomplete-footer`,
+    btnAddPaymentProduct: `${constants_1.PREFIX}-add-payment-product`,
+    paymentProductsPopperTitle: `${constants_1.PREFIX}-payment-products-popper-title`,
+    paymentProductsPopperFooter: `${constants_1.PREFIX}-payment-products-popper-footer`,
+    productItemCheckIcon: `${constants_1.PREFIX}-product-check-icon`,
+    productItemCardIcon: `${constants_1.PREFIX}-product-card-icon`,
+    productItemContent: `${constants_1.PREFIX}-product-content`,
+    productItemRemoveIcon: `${constants_1.PREFIX}-product-remove-icon`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(() => ({}));
+const PaymentProductsAutocompletePopper = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'PaymentProductsAutocompletePopperRoot',
+    overridesResolver: (_props, styles) => styles.paymentProductsAutocompletePopperRoot
+})(() => ({}));
+const PaymentProductsPopper = (0, material_1.styled)(Popper_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'PaymentProductsPopperRoot',
+    overridesResolver: (_props, styles) => styles.paymentProductsPopperRoot
+})(() => ({}));
+const FilterInputRoot = (0, material_1.styled)(material_1.InputBase, {
+    name: constants_1.PREFIX,
+    slot: 'FilterInputRoot',
+    overridesResolver: (_props, styles) => styles.filterInputRoot
+})(() => ({}));
+function PopperComponent(props) {
+    const { disablePortal, anchorEl, open } = props, other = tslib_1.__rest(props, ["disablePortal", "anchorEl", "open"]);
+    return (0, jsx_runtime_1.jsx)(PaymentProductsAutocompletePopper, Object.assign({}, other));
+}
+function PaywallsConfigurator(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, contentId, contentType, content, prefetchedProducts, selectedProducts = [], onChangeContentAccessType, onChangePaymentProducts, disabled = false } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "prefetchedProducts", "selectedProducts", "onChangeContentAccessType", "onChangePaymentProducts", "disabled"]);
+    // STATE
+    const [products, setProducts] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [loadingProducts, setLoadingProducts] = (0, react_1.useState)(false);
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const [value, setValue] = react_1.default.useState(selectedProducts);
+    const [pendingValue, setPendingValue] = react_1.default.useState([]);
+    const [expanded, setExpanded] = react_1.default.useState(value.length ? constants_1.ContentAccessType.PAID : constants_1.ContentAccessType.FREE);
+    const [createPrice, setCreatePrice] = (0, react_1.useState)(false);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const intl = (0, react_intl_1.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 = (0, react_1.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 = tslib_1.__rest(props, ["key"]);
+        return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.productItemContent }, { children: [option.name, (0, jsx_runtime_1.jsx)("br", {}), option.payment_prices && option.payment_prices[0] && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, payment_1.getConvertedAmount)(option.payment_prices[0]) }), ' ', option.payment_prices.length > 1 && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["+", option.payment_prices.length - 1] })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.productItemRemoveIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow" }) }))] }), option.id));
+    };
+    /**
+     * Fetch events
+     */
+    const fetchPaymentProducts = (next = `${api_services_1.Endpoints.GetPaymentProducts.url({})}?content_id=${content ? content.id : contentId}&content_type=${contentType}`) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const response = yield api_services_1.http.request({
+            url: next,
+            method: api_services_1.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 = `${api_services_1.Endpoints.GetPaywalls.url({})}?content_id=${content ? content.id : contentId}&content_type=${contentType}&active=1&payment_product__active=1`) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const response = yield api_services_1.http.request({
+            url: next,
+            method: api_services_1.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 ? constants_1.ContentAccessType.PAID : constants_1.ContentAccessType.FREE);
+                setLoading(false);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+        else {
+            setExpanded(constants_1.ContentAccessType.FREE);
+            setLoading(false);
+        }
+    };
+    const performFetchPaymentProducts = () => {
+        setLoadingProducts(true);
+        fetchPaymentProducts()
+            .then((data) => {
+            setProducts(data);
+            setLoadingProducts(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetch payment content status
+     */
+    (0, react_1.useEffect)(() => {
+        if (prefetchedProducts) {
+            setProducts(prefetchedProducts);
+        }
+        initSelectProducts();
+    }, [prefetchedProducts, contentId, content, 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)("div", Object.assign({ className: classes.contentAccessType }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.FREE, onChange: handleChange(constants_1.ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.PAID, onChange: handleChange(constants_1.ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [createPrice && ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: createPrice }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(CreatePaymentProductForm_1.default, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), (0, jsx_runtime_1.jsxs)(List_1.default, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: intl.formatMessage({
+                                                            id: 'ui.paywallsConfigurator.connected.noProducts',
+                                                            defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
+                                                        }) }) }), -1)), value.map((p, i) => {
+                                                    var _a, _b, _c;
+                                                    return ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) }) }), (0, jsx_runtime_1.jsx)(material_1.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) => (0, payment_1.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));
+                                                })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "list" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && ((0, jsx_runtime_1.jsx)(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loadingProducts, loadingText: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.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'
+                                                        }) })) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));
+}
+exports.default = PaywallsConfigurator;

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

package/lib/cjs/components/PaywallsConfigurator/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 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.|
+ *
+ */
+function PaywallsConfiguratorSkeleton(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 = PaywallsConfiguratorSkeleton;

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

@@ -0,0 +1,5 @@
+export declare const PREFIX = "SCPaywallsConfigurator";
+export declare enum ContentAccessType {
+    FREE = "free",
+    PAID = "paid"
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentAccessType = exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaywallsConfigurator';
+var ContentAccessType;
+(function (ContentAccessType) {
+    ContentAccessType["FREE"] = "free";
+    ContentAccessType["PAID"] = "paid";
+})(ContentAccessType = exports.ContentAccessType || (exports.ContentAccessType = {}));

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

@@ -0,0 +1,4 @@
+import PaywallsConfigurator, { PaywallsConfiguratorProps } from './PaywallsConfigurator';
+import PaywallsConfiguratorSkeleton from './Skeleton';
+export default PaywallsConfigurator;
+export { PaywallsConfiguratorProps, PaywallsConfiguratorSkeleton };

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaywallsConfiguratorSkeleton = void 0;
+const tslib_1 = require("tslib");
+const PaywallsConfigurator_1 = tslib_1.__importDefault(require("./PaywallsConfigurator"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.PaywallsConfiguratorSkeleton = Skeleton_1.default;
+exports.default = PaywallsConfigurator_1.default;

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

@@ -0,0 +1,8 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaywallsProps } from '../Paywalls/Paywalls';
+export interface PaywallsDialogProps extends BaseDialogProps {
+    className?: string;
+    PaywallsComponentProps: PaywallsProps;
+    disableInitialTransition?: boolean;
+}
+export default function PaywallsDialog(inProps: PaywallsDialogProps): JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const Paywalls_1 = tslib_1.__importDefault(require("../Paywalls"));
+const PREFIX = 'SCPaywallsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+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,
+        name: PREFIX
+    });
+    const { className, PaywallsComponentProps, disableInitialTransition = false } = props, rest = tslib_1.__rest(props, ["className", "PaywallsComponentProps", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (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, DialogContentProps: { dividers: false } }, rest, { children: (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
+}
+exports.default = PaywallsDialog;

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export declare const PdfMaxWidth = 1280;
+export interface PdfPreviewProps {
+    className?: string;
+    pdfUrl?: string;
+    maxWidth?: number;
+}
+export default function PdfPreview(inProps: PdfPreviewProps): ReactElement | null;

package/lib/cjs/components/PdfPreview/PdfPreview.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PdfMaxWidth = void 0;
+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 react_pdf_1 = require("react-pdf");
+const utils_1 = require("@selfcommunity/utils");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const Errors_1 = require("../../constants/Errors");
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+const PREFIX = 'SCPdfPreview';
+const classes = {
+    root: `${PREFIX}-root`,
+    documentPdfWrapper: `${PREFIX}-document-pdf-wrapper`,
+    documentPdfLink: `${PREFIX}-document-pdf-link`,
+    documentPdf: `${PREFIX}-document-pdf`,
+    documentPdfPage: `${PREFIX}-document-pdf-page`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+// Default options conf PDFViewer
+const options = {
+    cMapUrl: '/cmaps/',
+    standardFontDataUrl: '/standard_fonts/',
+    externalLinkTarget: '_blank',
+    loading: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})
+};
+exports.PdfMaxWidth = 1280;
+const resizeObserverOptions = {};
+function PdfPreview(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, pdfUrl, maxWidth = exports.PdfMaxWidth } = props, rest = tslib_1.__rest(props, ["className", "pdfUrl", "maxWidth"]);
+    // STATE
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [url, setUrl] = (0, react_1.useState)(null);
+    const [numPages, setNumPages] = (0, react_1.useState)();
+    const [containerRef, setContainerRef] = (0, react_1.useState)(null);
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(maxWidth);
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const onResize = (0, react_1.useCallback)((entries) => {
+        const [entry] = entries;
+        if (entry) {
+            setContainerWidth(entry.contentRect.width);
+        }
+    }, []);
+    (0, react_core_1.useResizeObserver)(containerRef, resizeObserverOptions, onResize);
+    function onDocumentLoadSuccess({ numPages: nextNumPages }) {
+        setNumPages(nextNumPages);
+        setIsLoading(false);
+    }
+    const fetchBlob = (0, react_1.useCallback)((url) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const response = yield api_services_1.http.request({ url, responseType: 'blob' });
+        return response.data;
+    }), [scUserContext.user, scUserContext.session]);
+    (0, react_1.useEffect)(() => {
+        if (pdfUrl) {
+            fetchBlob(pdfUrl)
+                .then((res) => {
+                const blob = new Blob([res], { type: 'application/pdf' });
+                const _url = URL.createObjectURL(blob);
+                setUrl(_url);
+                setIsLoading(false);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [scUserContext.user, scUserContext.session]);
+    function renderDocument() {
+        return ((0, jsx_runtime_1.jsx)(react_pdf_1.Document, Object.assign({ onLoadSuccess: onDocumentLoadSuccess, loading: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), file: url, className: classes.documentPdf, options: options }, { children: Array.from({ length: numPages }, (_el, index) => {
+                return ((0, jsx_runtime_1.jsx)(react_pdf_1.Page, { className: classes.documentPdfPage, pageNumber: index + 1, width: containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth, renderTextLayer: false, scale: !isMobile ? 0.7 : undefined }, `page_${index + 1}`));
+            }) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.documentPdfWrapper, ref: setContainerRef }, { children: isLoading || !pdfUrl ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.documentPdfPage }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { maxWidth: maxWidth }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderDocument() })) })) })));
+}
+exports.default = PdfPreview;

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

@@ -0,0 +1,5 @@
+export interface InvoicePdfViewSkeletonProps {
+    className?: string;
+    maxWidth?: number;
+}
+export default function PdfPreviewSkeleton(inProps: InvoicePdfViewSkeletonProps): JSX.Element | null;

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

@@ -0,0 +1,38 @@
+"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 system_1 = require("@mui/system");
+const PdfPreview_1 = require("./PdfPreview");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const PREFIX = 'PdfPreviewSkeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    circularProgress: `${PREFIX}-circular-progress`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    minHeight: 400,
+    [`& .${classes.circularProgress}`]: {
+        position: 'absolute'
+    }
+}));
+function PdfPreviewSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, maxWidth = PdfPreview_1.PdfMaxWidth } = props, rest = tslib_1.__rest(props, ["className", "maxWidth"]);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), sx: { width: maxWidth } }, rest, { children: [maxWidth < 1024 && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", sx: { height: (maxWidth * 3.508) / 2.48, width: maxWidth } }), (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", className: classes.circularProgress })] })));
+}
+exports.default = PdfPreviewSkeleton;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PdfPreviewProps } from '../PdfPreview';
+export interface PdfPreviewDialogProps extends BaseDialogProps {
+    className?: string;
+    title: string | React.ReactElement;
+    PdfPreviewComponentProps: PdfPreviewProps;
+    pdfUrl: string;
+    disableInitialTransition?: boolean;
+}
+export default function PdfPreviewDialog(inProps: PdfPreviewDialogProps): JSX.Element;