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

package/lib/cjs/components/PaymentOrders/PaymentOrders.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const api_services_1 = require("@selfcommunity/api-services");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const payment_1 = require("../../utils/payment");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
+const types_2 = require("../../types");
+const Course_1 = tslib_1.__importDefault(require("../Course"));
+const Group_1 = tslib_1.__importDefault(require("../Group"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../PaymentOrderPdfButton"));
+const Errors_1 = require("../../constants/Errors");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
+const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
+const Category_1 = tslib_1.__importDefault(require("../Category"));
+const PREFIX = 'SCPaymentOrders';
+const messages = (0, react_intl_1.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: types_1.SCContentType.ALL,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.all", defaultMessage: "ui.paymentOrders.contentType.all" })
+    },
+    {
+        value: types_1.SCContentType.COMMUNITY,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.community", defaultMessage: "ui.paymentOrders.contentType.community" })
+    },
+    {
+        value: types_1.SCContentType.COURSE,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.course", defaultMessage: "ui.paymentOrders.contentType.course" })
+    },
+    {
+        value: types_1.SCContentType.EVENT,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.event", defaultMessage: "ui.paymentOrders.contentType.event" })
+    },
+    {
+        value: types_1.SCContentType.GROUP,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.group", defaultMessage: "ui.paymentOrders.contentType.group" })
+    }
+];
+const Root = (0, material_1.styled)(material_1.Paper, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+function PaymentOrders(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentName = '', contentType = types_1.SCContentType.ALL } = props, rest = tslib_1.__rest(props, ["className", "contentName", "contentType"]);
+    // STATE
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [orders, setInvoices] = (0, react_1.useState)([]);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const [isLoadingPage, setIsLoadingPage] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)(contentName);
+    const [contentTypeFilter, setContentTypeFilter] = (0, react_1.useState)(contentType);
+    const [startDate, setStartDate] = (0, react_1.useState)(null);
+    const [endDate, setEndDate] = (0, react_1.useState)(null);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
+    const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // CONTEXT
+    const scContext = (0, react_core_1.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) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        setIsLoading(true);
+        setHasMore(true);
+        setInvoices([]);
+        try {
+            const res = yield api_services_1.PaymentService.getPaymentsOrder(Object.assign(Object.assign(Object.assign(Object.assign({ offset: 0, ordering: '-created_at' }, (searchValue && { search: searchValue })), (contentTypeFilter && contentTypeFilter !== types_1.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) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    /**
+     * Infinite load more orders
+     */
+    const loadMore = (0, react_1.useCallback)(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (!hasMore || isLoadingPage || isLoading)
+            return;
+        setIsLoadingPage(true);
+        try {
+            const res = yield api_services_1.PaymentService.getPaymentsOrder(Object.assign(Object.assign(Object.assign(Object.assign({ offset: orders.length, ordering: '-created_at' }, (query && { search: query })), (contentTypeFilter && contentTypeFilter !== types_1.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) {
+            utils_1.Logger.error(Errors_1.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 === types_1.SCContentType.EVENT) {
+            return ((0, jsx_runtime_1.jsx)(Event_1.default, { event: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: types_2.SCEventTemplateType.SNIPPET, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined" }));
+        }
+        else if (contentType === types_1.SCContentType.CATEGORY) {
+            return (0, jsx_runtime_1.jsx)(Category_1.default, { category: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined" });
+        }
+        else if (contentType === types_1.SCContentType.COURSE) {
+            return ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: types_2.SCCourseTemplateType.SNIPPET, variant: "outlined", actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }));
+        }
+        else if (contentType === types_1.SCContentType.GROUP) {
+            return (0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined" });
+        }
+        else if (contentType === types_1.SCContentType.COMMUNITY) {
+            if ((_a = order === null || order === void 0 ? void 0 : order.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) {
+                return (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, { hidePaymentProductPrices: true, paymentProduct: order.payment_price.payment_product });
+            }
+            return null;
+        }
+    };
+    /**
+     * Load more orders
+     */
+    (0, react_1.useEffect)(() => {
+        if (inView) {
+            loadMore();
+        }
+    }, [inView, loadMore]);
+    /**
+     * Initial load
+     */
+    (0, react_1.useEffect)(() => {
+        fetchInvoices();
+    }, [contentTypeFilter, endDate]);
+    if (!isPaymentsEnabled) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    /**
+     * Render skeleton
+     */
+    const skeleton = () => {
+        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 20 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 30 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 80, width: 250 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
+                                                setQuery('');
+                                                fetchInvoices('');
+                                            }, disabled: isLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: isLoading }))] })))
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
+                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
+                            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                }
+                                            }, onChange: (newValue) => setStartDate(newValue) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                }
+                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "7%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "38%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "12%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "13%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, payment_1.getConvertedAmount)(order.payment_price) })), (0, jsx_runtime_1.jsx)(material_1.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'
+                                                    }) })), (0, jsx_runtime_1.jsx)(material_1.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'
+                                                    })
+                                                    : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === types_1.SCContentType.EVENT && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }))] })));
+}
+exports.default = PaymentOrders;

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

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

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

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

package/lib/cjs/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/cjs/components/PaymentProduct/PaymentProduct.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentProductPrice_1 = tslib_1.__importDefault(require("../PaymentProductPrice"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(Widget_1.default, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentProduct(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, paymentProductId, paymentProduct, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder, hideDescription = false, hidePaymentProductPrices = false, PaymentProductPriceComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentProductId", "paymentProduct", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder", "hideDescription", "hidePaymentProductPrices", "PaymentProductPriceComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentProduct } = (0, react_core_1.useSCFetchPaymentProduct)({ id: paymentProductId, paymentProduct });
+    // CONST
+    const productPaymentPriceIds = (0, react_1.useMemo)(() => {
+        if (scPaymentProduct && scPaymentProduct.payment_prices) {
+            return scPaymentProduct.payment_prices.map((p) => p.id);
+        }
+        return [];
+    }, [scPaymentProduct]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (!scPaymentProduct) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disabled: !productPaymentPriceIds.length, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: scPaymentProduct.name && scPaymentProduct.name }) })), scPaymentProduct.description && !hideDescription && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: scPaymentProduct.description }))), !hidePaymentProductPrices &&
+                    scPaymentProduct.payment_prices &&
+                    scPaymentProduct.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price }, PaymentProductPriceComponentProps, (contentType && { contentType }), (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index)))] }) })));
+}
+exports.default = PaymentProduct;

package/lib/cjs/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/cjs/components/PaymentProduct/Skeleton.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProductPrice/Skeleton"));
+const system_1 = require("@mui/system");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    primary: `${constants_1.PREFIX}-primary`,
+    secondary: `${constants_1.PREFIX}-secondary`,
+    button: `${constants_1.PREFIX}-button`,
+    action: `${constants_1.PREFIX}-action`
+};
+const Root = (0, material_1.styled)(Widget_1.default, {
+    name: constants_1.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.|
+ *
+ */
+function PaymentProductSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: `${constants_1.PREFIX}Skeleton`
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    // 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) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: isMobile ? 40 : 70, className: classes.primary }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: isMobile ? 70 : 120, className: classes.secondary }) }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] }) })));
+}
+exports.default = PaymentProductSkeleton;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const payment_1 = require("../../utils/payment");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    primary: `${constants_1.PREFIX}-primary`,
+    secondary: `${constants_1.PREFIX}-secondary`,
+    purchasedAt: `${constants_1.PREFIX}-purchased-at`,
+    button: `${constants_1.PREFIX}-button`,
+    buttonPurchased: `${constants_1.PREFIX}-button-purchased`,
+    action: `${constants_1.PREFIX}-action`
+};
+const Root = (0, material_1.styled)(BaseItem_1.default, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentProductPrice(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, id, price, contentType, contentId, content, actions, onHandleActionBuy, paymentOrder, returnUrlParams } = props, rest = tslib_1.__rest(props, ["className", "id", "price", "contentType", "contentId", "content", "actions", "onHandleActionBuy", "paymentOrder", "returnUrlParams"]);
+    // ROUTING
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const intl = (0, react_intl_1.useIntl)();
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const handleActionBuy = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onHandleActionBuy && onHandleActionBuy(price, contentType, contentId);
+    }, [onHandleActionBuy, price, contentType, contentId]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    if (!price) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.primary }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, payment_1.getRecurringConvertedAmount)(price, intl) }) })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile && paymentOrder && paymentOrder.payment_price.id === price.id && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: (0, classnames_1.default)(classes.secondary, classes.purchasedAt) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
+                                purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' })
+                            } }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'primary', className: (0, classnames_1.default)(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: react_core_1.Link, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: `${scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
+                        content_type: contentType === null || contentType === void 0 ? void 0 : contentType.toLowerCase(),
+                        content_id: content ? content.id : contentId,
+                        price_id: price.id
+                    })}?${returnUrlParams ? new URLSearchParams(returnUrlParams) : ''}` }, { children: paymentOrder && paymentOrder.payment_price.id === price.id ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paymentOrder.payment_price.recurring_interval ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribed", id: "ui.paymentProduct.action.subscribed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchased", id: "ui.paymentProduct.action.purchased" })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: price.recurring_interval ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.subscribe", id: "ui.paymentProduct.action.subscribe" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.buy", id: "ui.paymentProduct.action.buy" })) })) })) })) }))) }, rest)));
+}
+exports.default = PaymentProductPrice;

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

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

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

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

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

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

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

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

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

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

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

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