@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
78 lines (77 loc) • 5.86 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Chip, Stack, Typography, styled } from '@mui/material';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { useSCFetchPaymentOrder, useSCPaymentsEnabled } from '@selfcommunity/react-core';
import { SCContentType } from '@selfcommunity/types';
import { PREFIX } from './constants';
import { FormattedMessage, useIntl } from 'react-intl';
import Event from '../Event';
import { CacheStrategies } from '@selfcommunity/utils';
import Category from '../Category';
import Course from '../Course';
import Group from '../Group';
import PaymentProduct from '../PaymentProduct';
import PaymentOrderSkeleton from './Skeleton';
import PaymentOrderPdfButton from '../PaymentOrderPdfButton';
import { getConvertedAmount } from '../../utils/payment';
import { SCCourseTemplateType } from '../../types/course';
import { SCEventTemplateType } from '../../types/event';
const classes = {
root: `${PREFIX}-root`,
img: `${PREFIX}-img`,
contentObject: `${PREFIX}-content-object`,
object: `${PREFIX}-object`,
status: `${PREFIX}-status`,
details: `${PREFIX}-details`
};
const Root = styled(Box, {
slot: 'Root',
name: PREFIX
})(({ theme }) => ({}));
export default function PaymentOrder(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = __rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
// HOOKS
const { isPaymentsEnabled } = useSCPaymentsEnabled();
const { scPaymentOrder } = useSCFetchPaymentOrder({ id: paymentOrderId, paymentOrder });
const intl = useIntl();
if (!isPaymentsEnabled || !scPaymentOrder) {
return _jsx(PaymentOrderSkeleton, {});
}
const renderContent = () => {
var _a, _b;
let header;
const content = scPaymentOrder[scPaymentOrder.content_type];
if (scPaymentOrder.content_type === SCContentType.EVENT) {
header = (_jsx(Event, { event: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }));
}
else if (scPaymentOrder.content_type === SCContentType.CATEGORY) {
header = (_jsx(Category, { category: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }));
}
else if (scPaymentOrder.content_type === SCContentType.COURSE) {
header = (_jsx(Course, { course: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
}
else if (scPaymentOrder.content_type === SCContentType.GROUP) {
header = (_jsx(Group, { group: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }));
}
else if (scPaymentOrder.content_type === SCContentType.COMMUNITY) {
header = (_jsx(_Fragment, { children: ((_a = scPaymentOrder.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) && (_jsx(PaymentProduct, { hidePaymentProductPrices: true, paymentProduct: (_b = scPaymentOrder.payment_price) === null || _b === void 0 ? void 0 : _b.payment_product })) }));
}
return (_jsx(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "flex-start" }, { children: _jsx(Box, Object.assign({ className: classes.contentObject }, { children: header })) })));
};
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [renderContent(), _jsxs(Box, Object.assign({ className: classes.details }, { children: [_jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(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'
})
} }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
}