@selfcommunity/react-ui 0.10.5-payments.203 → 0.10.5-payments.205
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/Course/Course.js +1 -1
- package/lib/cjs/components/PaymentOrders/PaymentOrders.d.ts +13 -0
- package/lib/cjs/components/PaymentOrders/PaymentOrders.js +160 -70
- package/lib/esm/components/Course/Course.js +1 -1
- package/lib/esm/components/PaymentOrders/PaymentOrders.d.ts +13 -0
- package/lib/esm/components/PaymentOrders/PaymentOrders.js +165 -75
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -165,7 +165,7 @@ function Course(inProps) {
|
|
|
165
165
|
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))), scCourse.categories.length > MAX_VISIBLE_CATEGORIES && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: cat.name }, cat.id))) }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
166
166
|
}
|
|
167
167
|
else {
|
|
168
|
-
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, {
|
|
168
|
+
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
169
169
|
(isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
170
170
|
? 'primary'
|
|
171
171
|
: isCourseAdmin && !scCourse.privacy
|
|
@@ -1,4 +1,17 @@
|
|
|
1
|
+
import { SCContentType } from '@selfcommunity/types';
|
|
1
2
|
export interface PaymentOrdersProps {
|
|
3
|
+
/**
|
|
4
|
+
* Overrides or extends the styles applied to the component.
|
|
5
|
+
* @default null
|
|
6
|
+
*/
|
|
2
7
|
className?: string;
|
|
8
|
+
/**
|
|
9
|
+
* The content name used to prefilter the results shown
|
|
10
|
+
*/
|
|
11
|
+
contentName?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The content type used to prefilter the results shown
|
|
14
|
+
*/
|
|
15
|
+
contentType?: SCContentType;
|
|
3
16
|
}
|
|
4
17
|
export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;
|
|
@@ -16,84 +16,152 @@ const Event_1 = tslib_1.__importDefault(require("../Event"));
|
|
|
16
16
|
const types_1 = require("@selfcommunity/types");
|
|
17
17
|
const utils_1 = require("@selfcommunity/utils");
|
|
18
18
|
const types_2 = require("../../types");
|
|
19
|
-
const Category_1 = tslib_1.__importDefault(require("../Category"));
|
|
20
19
|
const Course_1 = tslib_1.__importDefault(require("../Course"));
|
|
21
20
|
const Group_1 = tslib_1.__importDefault(require("../Group"));
|
|
22
21
|
const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
|
|
23
22
|
const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../PaymentOrderPdfButton"));
|
|
23
|
+
const Errors_1 = require("../../constants/Errors");
|
|
24
|
+
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
|
|
25
|
+
const x_date_pickers_1 = require("@mui/x-date-pickers");
|
|
26
|
+
const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
|
|
27
|
+
const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
|
|
28
|
+
const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
|
|
24
29
|
const PREFIX = 'SCPaymentOrders';
|
|
30
|
+
const messages = (0, react_intl_1.defineMessages)({
|
|
31
|
+
dateFrom: {
|
|
32
|
+
id: 'ui.paymentOrders.dateFrom',
|
|
33
|
+
defaultMessage: 'ui.paymentOrders.dateFrom'
|
|
34
|
+
},
|
|
35
|
+
dateTo: {
|
|
36
|
+
id: 'ui.paymentOrders.dateTo',
|
|
37
|
+
defaultMessage: 'ui.paymentOrders.dateTo'
|
|
38
|
+
},
|
|
39
|
+
pickerCancelAction: {
|
|
40
|
+
id: 'ui.paymentOrders.picker.cancel',
|
|
41
|
+
defaultMessage: 'ui.paymentOrders.picker.cancel'
|
|
42
|
+
},
|
|
43
|
+
pickerClearAction: {
|
|
44
|
+
id: 'ui.paymentOrders.picker.clear',
|
|
45
|
+
defaultMessage: 'ui.paymentOrders.picker.clear'
|
|
46
|
+
}
|
|
47
|
+
});
|
|
25
48
|
const classes = {
|
|
26
49
|
root: `${PREFIX}-root`,
|
|
27
50
|
content: `${PREFIX}-content`,
|
|
28
|
-
|
|
29
|
-
|
|
51
|
+
filters: `${PREFIX}-filters`,
|
|
52
|
+
search: `${PREFIX}-search`,
|
|
53
|
+
picker: `${PREFIX}-picker`
|
|
30
54
|
};
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
'& tr': {
|
|
40
|
-
'& th': {
|
|
41
|
-
zIndex: 1
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
55
|
+
const options = [
|
|
56
|
+
{
|
|
57
|
+
value: types_1.SCContentType.ALL,
|
|
58
|
+
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.all", defaultMessage: "ui.paymentOrders.contentType.all" })
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
value: types_1.SCContentType.COMMUNITY,
|
|
62
|
+
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.community", defaultMessage: "ui.paymentOrders.contentType.community" })
|
|
45
63
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
flexWrap: 'wrap',
|
|
50
|
-
justifyContent: 'space-between'
|
|
64
|
+
{
|
|
65
|
+
value: types_1.SCContentType.COURSE,
|
|
66
|
+
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.course", defaultMessage: "ui.paymentOrders.contentType.course" })
|
|
51
67
|
},
|
|
52
|
-
|
|
53
|
-
|
|
68
|
+
{
|
|
69
|
+
value: types_1.SCContentType.EVENT,
|
|
70
|
+
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.event", defaultMessage: "ui.paymentOrders.contentType.event" })
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
value: types_1.SCContentType.GROUP,
|
|
74
|
+
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType.group", defaultMessage: "ui.paymentOrders.contentType.group" })
|
|
54
75
|
}
|
|
55
|
-
|
|
76
|
+
];
|
|
77
|
+
const Root = (0, material_1.styled)(material_1.Box, {
|
|
78
|
+
slot: 'Root',
|
|
79
|
+
name: PREFIX
|
|
80
|
+
})(() => ({}));
|
|
56
81
|
function PaymentOrders(inProps) {
|
|
57
82
|
// PROPS
|
|
58
83
|
const props = (0, system_1.useThemeProps)({
|
|
59
84
|
props: inProps,
|
|
60
85
|
name: PREFIX
|
|
61
86
|
});
|
|
62
|
-
const { className } = props, rest = tslib_1.__rest(props, ["className"]);
|
|
87
|
+
const { className, contentName = '', contentType = types_1.SCContentType.ALL } = props, rest = tslib_1.__rest(props, ["className", "contentName", "contentType"]);
|
|
63
88
|
// STATE
|
|
64
89
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
65
90
|
const [orders, setInvoices] = (0, react_1.useState)([]);
|
|
66
91
|
const [hasMore, setHasMore] = (0, react_1.useState)(true);
|
|
67
|
-
const [next, setNext] = (0, react_1.useState)(null);
|
|
68
92
|
const [isLoadingPage, setIsLoadingPage] = (0, react_1.useState)(false);
|
|
93
|
+
const [query, setQuery] = (0, react_1.useState)(contentName);
|
|
94
|
+
const [contentTypeFilter, setContentTypeFilter] = (0, react_1.useState)(contentType);
|
|
95
|
+
const [startDate, setStartDate] = (0, react_1.useState)(null);
|
|
96
|
+
const [endDate, setEndDate] = (0, react_1.useState)(null);
|
|
69
97
|
// HOOKS
|
|
70
98
|
const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
|
|
71
99
|
const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
|
|
72
100
|
const intl = (0, react_intl_1.useIntl)();
|
|
101
|
+
const theme = (0, material_1.useTheme)();
|
|
102
|
+
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
103
|
+
// CONTEXT
|
|
104
|
+
const scContext = (0, react_core_1.useSCContext)();
|
|
105
|
+
//HANDLERS
|
|
106
|
+
const formatDate = (date) => {
|
|
107
|
+
return date.toISOString().split('T')[0];
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Handle change filter name
|
|
111
|
+
* @param event
|
|
112
|
+
*/
|
|
113
|
+
const handleChange = (event) => {
|
|
114
|
+
setQuery(event.target.value);
|
|
115
|
+
};
|
|
116
|
+
/**
|
|
117
|
+
* Handle content type change
|
|
118
|
+
* @param event
|
|
119
|
+
*/
|
|
120
|
+
const handleContentTypeChange = (event) => {
|
|
121
|
+
setContentTypeFilter(event.target.value);
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* Initial Invoices fetch
|
|
125
|
+
*/
|
|
126
|
+
const fetchInvoices = (searchValue = query) => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
127
|
+
setIsLoading(true);
|
|
128
|
+
setHasMore(true);
|
|
129
|
+
setInvoices([]);
|
|
130
|
+
try {
|
|
131
|
+
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) })));
|
|
132
|
+
if (res) {
|
|
133
|
+
setInvoices(res.results);
|
|
134
|
+
setHasMore(res.next !== null);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
catch (error) {
|
|
138
|
+
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
139
|
+
}
|
|
140
|
+
finally {
|
|
141
|
+
setIsLoading(false);
|
|
142
|
+
}
|
|
143
|
+
});
|
|
73
144
|
/**
|
|
74
145
|
* Infinite load more orders
|
|
75
146
|
*/
|
|
76
147
|
const loadMore = (0, react_1.useCallback)(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
setIsLoading(false);
|
|
86
|
-
}
|
|
148
|
+
if (!hasMore || isLoadingPage || isLoading)
|
|
149
|
+
return;
|
|
150
|
+
setIsLoadingPage(true);
|
|
151
|
+
try {
|
|
152
|
+
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) })));
|
|
153
|
+
if (res) {
|
|
154
|
+
setInvoices((prev) => prev.concat(res.results));
|
|
155
|
+
setHasMore(res.next !== null);
|
|
87
156
|
}
|
|
88
|
-
catch (error) {
|
|
89
|
-
console.error(error);
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
if (hasMore && !isLoadingPage) {
|
|
93
|
-
setIsLoadingPage(true);
|
|
94
|
-
yield loadItems();
|
|
95
157
|
}
|
|
96
|
-
|
|
158
|
+
catch (error) {
|
|
159
|
+
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
160
|
+
}
|
|
161
|
+
finally {
|
|
162
|
+
setIsLoadingPage(false);
|
|
163
|
+
}
|
|
164
|
+
}), [orders.length, query, hasMore, isLoadingPage, isLoading, contentTypeFilter, startDate, endDate]);
|
|
97
165
|
const renderContent = (order) => {
|
|
98
166
|
var _a;
|
|
99
167
|
const contentType = order.content_type;
|
|
@@ -101,14 +169,11 @@ function PaymentOrders(inProps) {
|
|
|
101
169
|
if (contentType === types_1.SCContentType.EVENT) {
|
|
102
170
|
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" }));
|
|
103
171
|
}
|
|
104
|
-
else if (contentType === types_1.SCContentType.CATEGORY) {
|
|
105
|
-
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" });
|
|
106
|
-
}
|
|
107
172
|
else if (contentType === types_1.SCContentType.COURSE) {
|
|
108
|
-
return ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: types_2.SCCourseTemplateType.SNIPPET, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
|
|
173
|
+
return ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: types_2.SCCourseTemplateType.SNIPPET, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }));
|
|
109
174
|
}
|
|
110
175
|
else if (contentType === types_1.SCContentType.GROUP) {
|
|
111
|
-
return (
|
|
176
|
+
return (0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined" });
|
|
112
177
|
}
|
|
113
178
|
else if (contentType === types_1.SCContentType.COMMUNITY) {
|
|
114
179
|
if ((_a = order === null || order === void 0 ? void 0 : order.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) {
|
|
@@ -124,15 +189,15 @@ function PaymentOrders(inProps) {
|
|
|
124
189
|
if (inView) {
|
|
125
190
|
loadMore();
|
|
126
191
|
}
|
|
127
|
-
}, [inView]);
|
|
192
|
+
}, [inView, loadMore]);
|
|
128
193
|
/**
|
|
129
194
|
* Initial load
|
|
130
195
|
*/
|
|
131
196
|
(0, react_1.useEffect)(() => {
|
|
132
|
-
|
|
133
|
-
}, []);
|
|
197
|
+
fetchInvoices();
|
|
198
|
+
}, [contentTypeFilter, endDate]);
|
|
134
199
|
if (!isPaymentsEnabled) {
|
|
135
|
-
return
|
|
200
|
+
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
136
201
|
}
|
|
137
202
|
/**
|
|
138
203
|
* Render skeleton
|
|
@@ -140,21 +205,46 @@ function PaymentOrders(inProps) {
|
|
|
140
205
|
const skeleton = () => {
|
|
141
206
|
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 }) }))] })));
|
|
142
207
|
};
|
|
143
|
-
return ((0, jsx_runtime_1.
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
})
|
|
158
|
-
|
|
208
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ 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, md: 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) => {
|
|
209
|
+
e.preventDefault();
|
|
210
|
+
if (e.key === 'Enter') {
|
|
211
|
+
fetchInvoices();
|
|
212
|
+
}
|
|
213
|
+
}, InputProps: {
|
|
214
|
+
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: () => {
|
|
215
|
+
setQuery('');
|
|
216
|
+
fetchInvoices('');
|
|
217
|
+
}, 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 }))] })))
|
|
218
|
+
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { 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, 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: {
|
|
219
|
+
cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
|
|
220
|
+
clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
|
|
221
|
+
} }, { 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: {
|
|
222
|
+
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" }) }) }))) }) })))
|
|
223
|
+
}, slotProps: {
|
|
224
|
+
actionBar: {
|
|
225
|
+
actions: ['cancel', 'clear', 'accept']
|
|
226
|
+
}
|
|
227
|
+
}, 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: {
|
|
228
|
+
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" }) }) }))) }) })))
|
|
229
|
+
}, slotProps: {
|
|
230
|
+
actionBar: {
|
|
231
|
+
actions: ['cancel', 'clear', 'accept']
|
|
232
|
+
}
|
|
233
|
+
}, 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 }, component: material_1.Paper }, { 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 &&
|
|
234
|
+
intl.formatDate(new Date(order.created_at), {
|
|
235
|
+
year: 'numeric',
|
|
236
|
+
month: 'numeric',
|
|
237
|
+
day: 'numeric',
|
|
238
|
+
hour: 'numeric',
|
|
239
|
+
minute: 'numeric'
|
|
240
|
+
}) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.expired_at
|
|
241
|
+
? intl.formatDate(new Date(order.expired_at), {
|
|
242
|
+
year: 'numeric',
|
|
243
|
+
month: 'numeric',
|
|
244
|
+
day: 'numeric',
|
|
245
|
+
hour: 'numeric',
|
|
246
|
+
minute: 'numeric'
|
|
247
|
+
})
|
|
248
|
+
: '-' })), (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, {})) }))] })));
|
|
159
249
|
}
|
|
160
250
|
exports.default = PaymentOrders;
|
|
@@ -163,7 +163,7 @@ export default function Course(inProps) {
|
|
|
163
163
|
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), _jsxs(Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))), scCourse.categories.length > MAX_VISIBLE_CATEGORIES && (_jsx(Tooltip, Object.assign({ title: _jsx(_Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => (_jsx(Box, { children: cat.name }, cat.id))) }) }, { children: _jsx(Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
164
164
|
}
|
|
165
165
|
else {
|
|
166
|
-
contentObj = (_jsx(SnippetRoot, {
|
|
166
|
+
contentObj = (_jsx(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
167
167
|
(isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse) || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
|
|
168
168
|
? 'primary'
|
|
169
169
|
: isCourseAdmin && !scCourse.privacy
|
|
@@ -1,4 +1,17 @@
|
|
|
1
|
+
import { SCContentType } from '@selfcommunity/types';
|
|
1
2
|
export interface PaymentOrdersProps {
|
|
3
|
+
/**
|
|
4
|
+
* Overrides or extends the styles applied to the component.
|
|
5
|
+
* @default null
|
|
6
|
+
*/
|
|
2
7
|
className?: string;
|
|
8
|
+
/**
|
|
9
|
+
* The content name used to prefilter the results shown
|
|
10
|
+
*/
|
|
11
|
+
contentName?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The content type used to prefilter the results shown
|
|
14
|
+
*/
|
|
15
|
+
contentType?: SCContentType;
|
|
3
16
|
}
|
|
4
17
|
export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;
|