@selfcommunity/react-ui 0.10.5-payments.209 → 0.10.5-payments.213
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/BuyButton/BuyButton.d.ts +6 -0
- package/lib/cjs/components/BuyButton/BuyButton.js +2 -2
- package/lib/cjs/components/EventHeader/EventHeader.js +10 -1
- package/lib/cjs/components/PaymentOrders/PaymentOrders.js +11 -1
- package/lib/esm/components/BuyButton/BuyButton.d.ts +6 -0
- package/lib/esm/components/BuyButton/BuyButton.js +2 -2
- package/lib/esm/components/EventHeader/EventHeader.js +12 -3
- package/lib/esm/components/PaymentOrders/PaymentOrders.js +11 -1
- package/lib/umd/{c473ce30406a3dad83e1.eot → 30b299174b4fa1fb9ce8.eot} +0 -0
- package/lib/umd/{b6dbec3d5816ff8baef1.woff → 3b49304a98beb1239bc7.ttf} +0 -0
- package/lib/umd/ab247f43e550f5f6d0f8.woff2 +0 -0
- package/lib/umd/assets/icons.svg +75 -69
- package/lib/umd/{ba74e493633796d551d1.ttf → ce10db0c87e7112cb315.woff} +0 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
- package/lib/umd/60a7fdeaadfe844bc015.woff2 +0 -0
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SCContentType, SCPaymentProduct, SCPurchasableContent } from '@selfcommunity/types';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
|
|
3
4
|
export interface BuyButtonProps {
|
|
4
5
|
/**
|
|
@@ -37,6 +38,11 @@ export interface BuyButtonProps {
|
|
|
37
38
|
* @default {}
|
|
38
39
|
*/
|
|
39
40
|
PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
|
|
41
|
+
/**
|
|
42
|
+
* Overrides the button label.
|
|
43
|
+
* @default null
|
|
44
|
+
*/
|
|
45
|
+
label?: React.ReactNode;
|
|
40
46
|
/**
|
|
41
47
|
* Others properties
|
|
42
48
|
*/
|
|
@@ -62,7 +62,7 @@ function BuyButton(inProps) {
|
|
|
62
62
|
props: inProps,
|
|
63
63
|
name: PREFIX
|
|
64
64
|
});
|
|
65
|
-
const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps"]);
|
|
65
|
+
const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {}, label } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps", "label"]);
|
|
66
66
|
// STATE
|
|
67
67
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
68
68
|
// CONTEXT
|
|
@@ -74,7 +74,7 @@ function BuyButton(inProps) {
|
|
|
74
74
|
const [purchased, setPurchased] = (0, react_1.useState)(null);
|
|
75
75
|
const [products, setProducts] = (0, react_1.useState)([]);
|
|
76
76
|
const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
|
|
77
|
-
const [btnLabel, setBtnLabel] = (0, react_1.useState)((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${(0, utils_1.capitalize)(contentType)}` }));
|
|
77
|
+
const [btnLabel, setBtnLabel] = (0, react_1.useState)(label !== null && label !== void 0 ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${(0, utils_1.capitalize)(contentType)}` }));
|
|
78
78
|
// HANDLERS
|
|
79
79
|
const handleClose = (0, react_1.useCallback)(() => {
|
|
80
80
|
setOpen(false);
|
|
@@ -20,6 +20,7 @@ const User_1 = tslib_1.__importDefault(require("../User"));
|
|
|
20
20
|
const constants_1 = require("./constants");
|
|
21
21
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
22
22
|
const utils_1 = require("@selfcommunity/utils");
|
|
23
|
+
const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
|
|
23
24
|
const classes = {
|
|
24
25
|
root: `${constants_1.PREFIX}-root`,
|
|
25
26
|
cover: `${constants_1.PREFIX}-cover`,
|
|
@@ -74,6 +75,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
|
|
|
74
75
|
* @param inProps
|
|
75
76
|
*/
|
|
76
77
|
function EventHeader(inProps) {
|
|
78
|
+
var _a;
|
|
77
79
|
// PROPS
|
|
78
80
|
const props = (0, system_1.useThemeProps)({
|
|
79
81
|
props: inProps,
|
|
@@ -88,6 +90,8 @@ function EventHeader(inProps) {
|
|
|
88
90
|
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY });
|
|
89
91
|
const theme = (0, material_1.useTheme)();
|
|
90
92
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
93
|
+
// PAYMENTS
|
|
94
|
+
const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
|
|
91
95
|
// INTL
|
|
92
96
|
const intl = (0, react_intl_1.useIntl)();
|
|
93
97
|
// CONST
|
|
@@ -141,6 +145,11 @@ function EventHeader(inProps) {
|
|
|
141
145
|
month: 'long'
|
|
142
146
|
}),
|
|
143
147
|
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
144
|
-
} })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))
|
|
148
|
+
} })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) })), isPaymentsEnabled &&
|
|
149
|
+
((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
150
|
+
(scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ||
|
|
151
|
+
(scEvent.privacy === types_1.SCEventPrivacyType.PRIVATE &&
|
|
152
|
+
scEvent.subscription_status &&
|
|
153
|
+
scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.REQUESTED)) && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { size: "md", variant: "text", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "ticket" }), contentType: types_1.SCContentType.EVENT, content: scEvent, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.paid", defaultMessage: "ui.eventHeader.paid" }) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
|
|
145
154
|
}
|
|
146
155
|
exports.default = EventHeader;
|
|
@@ -227,14 +227,24 @@ function PaymentOrders(inProps) {
|
|
|
227
227
|
}, slotProps: {
|
|
228
228
|
actionBar: {
|
|
229
229
|
actions: ['cancel', 'clear', 'accept']
|
|
230
|
+
},
|
|
231
|
+
toolbar: {
|
|
232
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
|
|
233
|
+
// @ts-ignore
|
|
234
|
+
toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
|
|
230
235
|
}
|
|
231
236
|
}, 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: {
|
|
232
237
|
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" }) }) }))) }) })))
|
|
233
238
|
}, slotProps: {
|
|
234
239
|
actionBar: {
|
|
235
240
|
actions: ['cancel', 'clear', 'accept']
|
|
241
|
+
},
|
|
242
|
+
toolbar: {
|
|
243
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
|
|
244
|
+
// @ts-ignore
|
|
245
|
+
toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
|
|
236
246
|
}
|
|
237
|
-
}, 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: 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 &&
|
|
247
|
+
}, 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 &&
|
|
238
248
|
intl.formatDate(new Date(order.created_at), {
|
|
239
249
|
year: 'numeric',
|
|
240
250
|
month: 'numeric',
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SCContentType, SCPaymentProduct, SCPurchasableContent } from '@selfcommunity/types';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
|
|
3
4
|
export interface BuyButtonProps {
|
|
4
5
|
/**
|
|
@@ -37,6 +38,11 @@ export interface BuyButtonProps {
|
|
|
37
38
|
* @default {}
|
|
38
39
|
*/
|
|
39
40
|
PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
|
|
41
|
+
/**
|
|
42
|
+
* Overrides the button label.
|
|
43
|
+
* @default null
|
|
44
|
+
*/
|
|
45
|
+
label?: React.ReactNode;
|
|
40
46
|
/**
|
|
41
47
|
* Others properties
|
|
42
48
|
*/
|
|
@@ -60,7 +60,7 @@ export default function BuyButton(inProps) {
|
|
|
60
60
|
props: inProps,
|
|
61
61
|
name: PREFIX
|
|
62
62
|
});
|
|
63
|
-
const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps"]);
|
|
63
|
+
const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {}, label } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps", "label"]);
|
|
64
64
|
// STATE
|
|
65
65
|
const [open, setOpen] = useState(false);
|
|
66
66
|
// CONTEXT
|
|
@@ -72,7 +72,7 @@ export default function BuyButton(inProps) {
|
|
|
72
72
|
const [purchased, setPurchased] = useState(null);
|
|
73
73
|
const [products, setProducts] = useState([]);
|
|
74
74
|
const [paymentOrder, setPaymentOrder] = useState(null);
|
|
75
|
-
const [btnLabel, setBtnLabel] = useState(_jsx(FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${capitalize(contentType)}` }));
|
|
75
|
+
const [btnLabel, setBtnLabel] = useState(label !== null && label !== void 0 ? label : _jsx(FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${capitalize(contentType)}` }));
|
|
76
76
|
// HANDLERS
|
|
77
77
|
const handleClose = useCallback(() => {
|
|
78
78
|
setOpen(false);
|
|
@@ -2,8 +2,8 @@ import { __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Box, Chip, Icon, Paper, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
|
|
4
4
|
import { useThemeProps } from '@mui/system';
|
|
5
|
-
import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
|
|
6
|
-
import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
|
|
5
|
+
import { SCPreferences, useSCFetchEvent, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
|
|
6
|
+
import { SCContentType, SCEventLocationType, SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
|
|
7
7
|
import classNames from 'classnames';
|
|
8
8
|
import { useMemo } from 'react';
|
|
9
9
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
@@ -18,6 +18,7 @@ import User from '../User';
|
|
|
18
18
|
import { PREFIX } from './constants';
|
|
19
19
|
import EventHeaderSkeleton from './Skeleton';
|
|
20
20
|
import { CacheStrategies } from '@selfcommunity/utils';
|
|
21
|
+
import BuyButton from '../BuyButton';
|
|
21
22
|
const classes = {
|
|
22
23
|
root: `${PREFIX}-root`,
|
|
23
24
|
cover: `${PREFIX}-cover`,
|
|
@@ -72,6 +73,7 @@ const Root = styled(Box, {
|
|
|
72
73
|
* @param inProps
|
|
73
74
|
*/
|
|
74
75
|
export default function EventHeader(inProps) {
|
|
76
|
+
var _a;
|
|
75
77
|
// PROPS
|
|
76
78
|
const props = useThemeProps({
|
|
77
79
|
props: inProps,
|
|
@@ -86,6 +88,8 @@ export default function EventHeader(inProps) {
|
|
|
86
88
|
const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event, cacheStrategy: CacheStrategies.NETWORK_ONLY });
|
|
87
89
|
const theme = useTheme();
|
|
88
90
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
91
|
+
// PAYMENTS
|
|
92
|
+
const { isPaymentsEnabled } = useSCPaymentsEnabled();
|
|
89
93
|
// INTL
|
|
90
94
|
const intl = useIntl();
|
|
91
95
|
// CONST
|
|
@@ -139,5 +143,10 @@ export default function EventHeader(inProps) {
|
|
|
139
143
|
month: 'long'
|
|
140
144
|
}),
|
|
141
145
|
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
|
|
142
|
-
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))
|
|
146
|
+
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) })), isPaymentsEnabled &&
|
|
147
|
+
((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
148
|
+
(scEvent.privacy === SCEventPrivacyType.PUBLIC ||
|
|
149
|
+
(scEvent.privacy === SCEventPrivacyType.PRIVATE &&
|
|
150
|
+
scEvent.subscription_status &&
|
|
151
|
+
scEvent.subscription_status !== SCEventSubscriptionStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "ticket" }), contentType: SCContentType.EVENT, content: scEvent, label: _jsx(FormattedMessage, { id: "ui.eventHeader.paid", defaultMessage: "ui.eventHeader.paid" }) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
|
|
143
152
|
}
|
|
@@ -225,14 +225,24 @@ export default function PaymentOrders(inProps) {
|
|
|
225
225
|
}, slotProps: {
|
|
226
226
|
actionBar: {
|
|
227
227
|
actions: ['cancel', 'clear', 'accept']
|
|
228
|
+
},
|
|
229
|
+
toolbar: {
|
|
230
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
|
|
231
|
+
// @ts-ignore
|
|
232
|
+
toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
|
|
228
233
|
}
|
|
229
234
|
}, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
|
|
230
235
|
textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
|
|
231
236
|
}, slotProps: {
|
|
232
237
|
actionBar: {
|
|
233
238
|
actions: ['cancel', 'clear', 'accept']
|
|
239
|
+
},
|
|
240
|
+
toolbar: {
|
|
241
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
|
|
242
|
+
// @ts-ignore
|
|
243
|
+
toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
|
|
234
244
|
}
|
|
235
|
-
}, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.content_type })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
|
|
245
|
+
}, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
|
|
236
246
|
intl.formatDate(new Date(order.created_at), {
|
|
237
247
|
year: 'numeric',
|
|
238
248
|
month: 'numeric',
|
|
Binary file
|
|
Binary file
|
|
Binary file
|