@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

package/lib/esm/components/PaymentOrders/PaymentOrders.js

@@ -0,0 +1,261 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Box, Chip, Paper, Table, TableBody, Skeleton, TableCell, TableContainer, TableHead, TableRow, Typography, Stack, CircularProgress, styled, Grid, TextField, InputAdornment, IconButton, Icon, Button, useTheme, useMediaQuery, MenuItem } from '@mui/material';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { useInView } from 'react-intersection-observer';
+import { PaymentService } from '@selfcommunity/api-services';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCContext, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { getConvertedAmount } from '../../utils/payment';
+import Event from '../Event';
+import { SCContentType } from '@selfcommunity/types';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import { SCCourseTemplateType, SCEventTemplateType } from '../../types';
+import Course from '../Course';
+import Group from '../Group';
+import PaymentProduct from '../PaymentProduct';
+import PaymentOrderPdfButton from '../PaymentOrderPdfButton';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+import Category from '../Category';
+const PREFIX = 'SCPaymentOrders';
+const messages = defineMessages({
+    dateFrom: {
+        id: 'ui.paymentOrders.dateFrom',
+        defaultMessage: 'ui.paymentOrders.dateFrom'
+    },
+    dateTo: {
+        id: 'ui.paymentOrders.dateTo',
+        defaultMessage: 'ui.paymentOrders.dateTo'
+    },
+    pickerCancelAction: {
+        id: 'ui.paymentOrders.picker.cancel',
+        defaultMessage: 'ui.paymentOrders.picker.cancel'
+    },
+    pickerClearAction: {
+        id: 'ui.paymentOrders.picker.clear',
+        defaultMessage: 'ui.paymentOrders.picker.clear'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    filters: `${PREFIX}-filters`,
+    search: `${PREFIX}-search`,
+    picker: `${PREFIX}-picker`
+};
+const options = [
+    {
+        value: SCContentType.ALL,
+        label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType.all", defaultMessage: "ui.paymentOrders.contentType.all" })
+    },
+    {
+        value: SCContentType.COMMUNITY,
+        label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType.community", defaultMessage: "ui.paymentOrders.contentType.community" })
+    },
+    {
+        value: SCContentType.COURSE,
+        label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType.course", defaultMessage: "ui.paymentOrders.contentType.course" })
+    },
+    {
+        value: SCContentType.EVENT,
+        label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType.event", defaultMessage: "ui.paymentOrders.contentType.event" })
+    },
+    {
+        value: SCContentType.GROUP,
+        label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType.group", defaultMessage: "ui.paymentOrders.contentType.group" })
+    }
+];
+const Root = styled(Paper, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+export default function PaymentOrders(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentName = '', contentType = SCContentType.ALL } = props, rest = __rest(props, ["className", "contentName", "contentType"]);
+    // STATE
+    const [isLoading, setIsLoading] = useState(true);
+    const [orders, setInvoices] = useState([]);
+    const [hasMore, setHasMore] = useState(true);
+    const [isLoadingPage, setIsLoadingPage] = useState(false);
+    const [query, setQuery] = useState(contentName);
+    const [contentTypeFilter, setContentTypeFilter] = useState(contentType);
+    const [startDate, setStartDate] = useState(null);
+    const [endDate, setEndDate] = useState(null);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const { ref, inView } = useInView({ triggerOnce: false });
+    const intl = useIntl();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONTEXT
+    const scContext = useSCContext();
+    //HANDLERS
+    const formatDate = (date) => {
+        return date.toISOString().split('T')[0];
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleChange = (event) => {
+        setQuery(event.target.value);
+    };
+    /**
+     * Handle content type change
+     * @param event
+     */
+    const handleContentTypeChange = (event) => {
+        setContentTypeFilter(event.target.value);
+    };
+    /**
+     * Initial Invoices fetch
+     */
+    const fetchInvoices = (searchValue = query) => __awaiter(this, void 0, void 0, function* () {
+        setIsLoading(true);
+        setHasMore(true);
+        setInvoices([]);
+        try {
+            const res = yield PaymentService.getPaymentsOrder(Object.assign(Object.assign(Object.assign(Object.assign({ offset: 0, ordering: '-created_at' }, (searchValue && { search: searchValue })), (contentTypeFilter && contentTypeFilter !== SCContentType.ALL && { content_type: contentTypeFilter })), (startDate && { created_at__gte: formatDate(startDate) })), (endDate && { created_at__lt: formatDate(endDate) })));
+            if (res) {
+                setInvoices(res.results);
+                setHasMore(res.next !== null);
+            }
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    /**
+     * Infinite load more orders
+     */
+    const loadMore = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!hasMore || isLoadingPage || isLoading)
+            return;
+        setIsLoadingPage(true);
+        try {
+            const res = yield PaymentService.getPaymentsOrder(Object.assign(Object.assign(Object.assign(Object.assign({ offset: orders.length, ordering: '-created_at' }, (query && { search: query })), (contentTypeFilter && contentTypeFilter !== SCContentType.ALL && { content_type: contentTypeFilter })), (startDate && { created_at__gte: formatDate(startDate) })), (endDate && { created_at__lt: formatDate(endDate) })));
+            if (res) {
+                setInvoices((prev) => prev.concat(res.results));
+                setHasMore(res.next !== null);
+            }
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+        }
+        finally {
+            setIsLoadingPage(false);
+        }
+    }), [orders.length, query, hasMore, isLoadingPage, isLoading, contentTypeFilter, startDate, endDate]);
+    const renderContent = (order) => {
+        var _a;
+        const contentType = order.content_type;
+        const content = order[order.content_type];
+        if (contentType === SCContentType.EVENT) {
+            return (_jsx(Event, { event: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCEventTemplateType.SNIPPET, actions: _jsx(_Fragment, {}), variant: "outlined" }));
+        }
+        else if (contentType === SCContentType.CATEGORY) {
+            return _jsx(Category, { category: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, actions: _jsx(_Fragment, {}), variant: "outlined" });
+        }
+        else if (contentType === SCContentType.COURSE) {
+            return (_jsx(Course, { course: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCCourseTemplateType.SNIPPET, variant: "outlined", actions: _jsx(_Fragment, {}) }));
+        }
+        else if (contentType === SCContentType.GROUP) {
+            return _jsx(Group, { group: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined" });
+        }
+        else if (contentType === SCContentType.COMMUNITY) {
+            if ((_a = order === null || order === void 0 ? void 0 : order.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) {
+                return _jsx(PaymentProduct, { hidePaymentProductPrices: true, paymentProduct: order.payment_price.payment_product });
+            }
+            return null;
+        }
+    };
+    /**
+     * Load more orders
+     */
+    useEffect(() => {
+        if (inView) {
+            loadMore();
+        }
+    }, [inView, loadMore]);
+    /**
+     * Initial load
+     */
+    useEffect(() => {
+        fetchInvoices();
+    }, [contentTypeFilter, endDate]);
+    if (!isPaymentsEnabled) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    /**
+     * Render skeleton
+     */
+    const skeleton = () => {
+        return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 20 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 30 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 80, width: 250 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
+    };
+    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+                                e.preventDefault();
+                                if (e.key === 'Enter') {
+                                    fetchInvoices();
+                                }
+                            }, InputProps: {
+                                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                                setQuery('');
+                                                fetchInvoices('');
+                                            }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
+                            } }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
+                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
+                            } }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
+                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                            }, slotProps: {
+                                                actionBar: {
+                                                    actions: ['cancel', 'clear', 'accept']
+                                                },
+                                                toolbar: {
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                                    // @ts-ignore
+                                                    toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                }
+                                            }, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
+                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                            }, slotProps: {
+                                                actionBar: {
+                                                    actions: ['cancel', 'clear', 'accept']
+                                                },
+                                                toolbar: {
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                                    // @ts-ignore
+                                                    toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                }
+                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                                    intl.formatDate(new Date(order.created_at), {
+                                                        year: 'numeric',
+                                                        month: 'numeric',
+                                                        day: 'numeric',
+                                                        hour: 'numeric',
+                                                        minute: 'numeric'
+                                                    }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.expired_at
+                                                    ? intl.formatDate(new Date(order.expired_at), {
+                                                        year: 'numeric',
+                                                        month: 'numeric',
+                                                        day: 'numeric',
+                                                        hour: 'numeric',
+                                                        minute: 'numeric'
+                                                    })
+                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice, SCPaymentProductTemplateType } from '@selfcommunity/types';
+import { PaymentProductPriceProps } from '../PaymentProductPrice';
+import { WidgetProps } from '../Widget';
+export interface PaymentProductProps extends WidgetProps {
+    className?: string;
+    paymentProductId?: number;
+    paymentProduct?: SCPaymentProduct;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    paymentOrder?: SCPaymentOrder;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+    template?: SCPaymentProductTemplateType;
+    hideDescription?: boolean;
+    hidePaymentProductPrices?: boolean;
+    PaymentProductPriceComponentProps?: PaymentProductPriceProps;
+}
+export default function PaymentProduct(inProps: PaymentProductProps): JSX.Element;

package/lib/esm/components/PaymentProduct/PaymentProduct.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Typography, styled, CardContent } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCFetchPaymentProduct, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { PREFIX } from './constants';
+import PaymentProductSkeleton from './Skeleton';
+import PaymentProductPrice from '../PaymentProductPrice';
+import Widget from '../Widget';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Widget, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function PaymentProduct(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, paymentProductId, paymentProduct, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder, hideDescription = false, hidePaymentProductPrices = false, PaymentProductPriceComponentProps = {} } = props, rest = __rest(props, ["className", "paymentProductId", "paymentProduct", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder", "hideDescription", "hidePaymentProductPrices", "PaymentProductPriceComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const { scPaymentProduct } = useSCFetchPaymentProduct({ id: paymentProductId, paymentProduct });
+    // CONST
+    const productPaymentPriceIds = useMemo(() => {
+        if (scPaymentProduct && scPaymentProduct.payment_prices) {
+            return scPaymentProduct.payment_prices.map((p) => p.id);
+        }
+        return [];
+    }, [scPaymentProduct]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (!scPaymentProduct) {
+        return _jsx(PaymentProductSkeleton, {});
+    }
+    return (_jsx(Root, Object.assign({ disabled: !productPaymentPriceIds.length, className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div" }, { children: _jsx("b", { children: scPaymentProduct.name && scPaymentProduct.name }) })), scPaymentProduct.description && !hideDescription && (_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description }))), !hidePaymentProductPrices &&
+                    scPaymentProduct.payment_prices &&
+                    scPaymentProduct.payment_prices.map((price, index) => (_jsx(PaymentProductPrice, Object.assign({ price: price }, PaymentProductPriceComponentProps, (contentType && { contentType }), (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index)))] }) })));
+}

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

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

package/lib/esm/components/PaymentProduct/Skeleton.js

@@ -0,0 +1,52 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMediaQuery, useTheme, styled, Skeleton, CardContent } from '@mui/material';
+import BaseItem from '../../shared/BaseItem';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import PaymentProductPriceSkeleton from '../PaymentProductPrice/Skeleton';
+import { useThemeProps } from '@mui/system';
+import Widget from '../Widget';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    primary: `${PREFIX}-primary`,
+    secondary: `${PREFIX}-secondary`,
+    button: `${PREFIX}-button`,
+    action: `${PREFIX}-action`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentProductSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaymentProductSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: `${PREFIX}Skeleton`
+    });
+    const { className } = props, rest = __rest(props, ["className"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root) }, rest, { children: _jsxs(CardContent, { children: [_jsx(BaseItem, { elevation: 0, primary: _jsx(Skeleton, { animation: "wave", height: 10, width: isMobile ? 40 : 70, className: classes.primary }), secondary: _jsx(Skeleton, { animation: "wave", height: 10, width: isMobile ? 70 : 120, className: classes.secondary }) }), _jsx(PaymentProductPriceSkeleton, {}), _jsx(PaymentProductPriceSkeleton, {}), _jsx(PaymentProductPriceSkeleton, {})] }) })));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SCContentType, SCPaymentOrder, SCPaymentPrice, SCPurchasableContent } from '@selfcommunity/types';
+export interface PaymentProductPriceProps {
+    className?: string;
+    id?: number | string;
+    price?: SCPaymentPrice;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    actions?: React.ReactNode;
+    paymentOrder?: SCPaymentOrder;
+    onHandleActionBuy?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+    returnUrlParams?: Record<string, string>;
+}
+export default function PaymentProductPrice(inProps: PaymentProductPriceProps): JSX.Element;

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

@@ -0,0 +1,58 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Box, Button, Icon, Typography, useMediaQuery, useTheme, Zoom, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import PaymentProductPriceSkeleton from './Skeleton';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link, SCRoutes, useSCPaymentsEnabled, useSCRouting } from '@selfcommunity/react-core';
+import BaseItem from '../../shared/BaseItem';
+import classNames from 'classnames';
+import { getRecurringConvertedAmount } from '../../utils/payment';
+const classes = {
+    root: `${PREFIX}-root`,
+    primary: `${PREFIX}-primary`,
+    secondary: `${PREFIX}-secondary`,
+    purchasedAt: `${PREFIX}-purchased-at`,
+    button: `${PREFIX}-button`,
+    buttonPurchased: `${PREFIX}-button-purchased`,
+    action: `${PREFIX}-action`
+};
+const Root = styled(BaseItem, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function PaymentProductPrice(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, id, price, contentType, contentId, content, actions, onHandleActionBuy, paymentOrder, returnUrlParams } = props, rest = __rest(props, ["className", "id", "price", "contentType", "contentId", "content", "actions", "onHandleActionBuy", "paymentOrder", "returnUrlParams"]);
+    // ROUTING
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const intl = useIntl();
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const handleActionBuy = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onHandleActionBuy && onHandleActionBuy(price, contentType, contentId);
+    }, [onHandleActionBuy, price, contentType, contentId]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (!price) {
+        return _jsx(PaymentProductPriceSkeleton, {});
+    }
+    return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, primary: _jsx(Typography, Object.assign({ variant: "body1", className: classes.primary }, { children: _jsx("b", { children: getRecurringConvertedAmount(price, intl) }) })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classNames(classes.secondary, classes.purchasedAt) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
+                                purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' })
+                            } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: _jsx(Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'primary', className: classNames(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: Link, startIcon: _jsx(Icon, { children: "dredit-card" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(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 ? (_jsx(_Fragment, { children: paymentOrder.payment_price.recurring_interval ? (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribed", id: "ui.paymentProduct.action.subscribed" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) })) : (_jsx(_Fragment, { children: price.recurring_interval ? (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribe", id: "ui.paymentProduct.action.subscribe" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.buy", id: "ui.paymentProduct.action.buy" })) })) })) })) }))) }, rest)));
+}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, useMediaQuery, useTheme, Skeleton, styled } from '@mui/material';
+import BaseItem from '../../shared/BaseItem';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    primary: `${PREFIX}-primary`,
+    secondary: `${PREFIX}-secondary`,
+    button: `${PREFIX}-button`,
+    action: `${PREFIX}-action`
+};
+const Root = styled(BaseItem, {
+    name: 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.|
+ *
+ */
+export default function PaymentProductPriceSkeleton(props) {
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, { className: classNames(classes.root), primary: _jsx(Skeleton, { animation: "wave", height: 10, width: isMobile ? 70 : 85, className: classes.primary }), actions: props.actions !== undefined ? (props.actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: isMobile ? 30 : 40, className: classes.action }) }))) }));
+}

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

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

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

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

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

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

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

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

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