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

package/lib/cjs/components/PaymentOrder/PaymentOrder.js

@@ -0,0 +1,80 @@
+"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const utils_1 = require("@selfcommunity/utils");
+const Category_1 = tslib_1.__importDefault(require("../Category"));
+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 Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../PaymentOrderPdfButton"));
+const payment_1 = require("../../utils/payment");
+const course_1 = require("../../types/course");
+const event_1 = require("../../types/event");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    img: `${constants_1.PREFIX}-img`,
+    contentObject: `${constants_1.PREFIX}-content-object`,
+    object: `${constants_1.PREFIX}-object`,
+    status: `${constants_1.PREFIX}-status`,
+    details: `${constants_1.PREFIX}-details`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentOrder(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
+    const intl = (0, react_intl_1.useIntl)();
+    if (!isPaymentsEnabled || !scPaymentOrder) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    const renderContent = () => {
+        var _a, _b;
+        let header;
+        const content = scPaymentOrder[scPaymentOrder.content_type];
+        if (scPaymentOrder.content_type === types_1.SCContentType.EVENT) {
+            header = ((0, jsx_runtime_1.jsx)(Event_1.default, { event: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.CATEGORY) {
+            header = ((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", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COURSE) {
+            header = ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: course_1.SCCourseTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.GROUP) {
+            header = ((0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COMMUNITY) {
+            header = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_a = scPaymentOrder.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) && ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, { hidePaymentProductPrices: true, paymentProduct: (_b = scPaymentOrder.payment_price) === null || _b === void 0 ? void 0 : _b.payment_product })) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "flex-start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: header })) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [renderContent(), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.details }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.date", defaultMessage: "ui.paymentOrder.date", values: {
+                                date: intl.formatDate(new Date(scPaymentOrder.created_at), {
+                                    year: 'numeric',
+                                    month: 'numeric',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric'
+                                })
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+}
+exports.default = PaymentOrder;

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

@@ -0,0 +1,30 @@
+import { BoxProps } from '@mui/material';
+export interface PaymentOrderSkeletonProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+export default function PaymentOrderSkeleton(inProps: PaymentOrderSkeletonProps): JSX.Element;

package/lib/cjs/components/PaymentOrder/Skeleton.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 material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
+    skeletonPreviewContent: `${constants_1.PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${constants_1.PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${constants_1.PREFIX}-skeleton-preview-actions`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = (0, material_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+function PaymentOrderSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    const theme = (0, material_1.useTheme)();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [contentObj, (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", alignItems: "flex-start", gap: "8px", marginTop: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "35%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "20%", height: "18px" })] }))] })));
+}
+exports.default = PaymentOrderSkeleton;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SCPaymentOrder } from '@selfcommunity/types';
+export interface PaymentOrderPdfButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Content id
+     */
+    paymentOrderId?: number | string;
+    /**
+     * Payment Order
+     */
+    paymentOrder?: SCPaymentOrder;
+    /**
+     * Handle click
+     */
+    handleClick?: () => void;
+    /**
+     * Override button label
+     */
+    label?: React.ReactNode;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function PaymentOrderPdfButton(inProps: PaymentOrderPdfButtonProps): JSX.Element;

package/lib/cjs/components/PaymentOrderPdfButton/PaymentOrderPdfButton.js

@@ -0,0 +1,74 @@
+"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const react_intl_1 = require("react-intl");
+const PdfPreviewDialog_1 = tslib_1.__importDefault(require("../PdfPreviewDialog"));
+const api_services_1 = require("@selfcommunity/api-services");
+const PREFIX = 'SCPaymentOrderPdfButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function PaymentOrderPdfButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, handleClick, PdfPreviewDialogComponentProps = {}, label } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "handleClick", "PdfPreviewDialogComponentProps", "label"]);
+    // STATE
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
+    // HANDLERS
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [open]);
+    const handlePaymentOrderPdf = (0, react_1.useCallback)((e) => {
+        if (handleClick) {
+            handleClick();
+        }
+        else if (!open) {
+            setOpen(true);
+        }
+    }, [open, handleClick]);
+    if (!scUserContext.user || !isPaymentsEnabled || !scPaymentOrder) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: !scPaymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrderPdfButton.disabled", defaultMessage: "ui.paymentOrderPdfButton.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" })) }, { children: (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), variant: "contained", onClick: handlePaymentOrderPdf }, rest, { children: label ? label : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "picture_as_pdf" }) })) })), open && ((0, jsx_runtime_1.jsx)(PdfPreviewDialog_1.default, Object.assign({ open: true, onClose: handleClose }, PdfPreviewDialogComponentProps, { pdfUrl: `${new URL(scContext.settings.portal)}${api_services_1.Endpoints.GetPaymentOrderPdf.url({ id: scPaymentOrder.id })}` })))] }));
+}
+exports.default = PaymentOrderPdfButton;

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { SCContentType } from '@selfcommunity/types';
+export interface PaymentOrdersProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The content name used to prefilter the results shown
+     */
+    contentName?: string;
+    /**
+     * The content type used to prefilter the results shown
+     */
+    contentType?: SCContentType;
+}
+export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;

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 };