@selfcommunity/react-ui 0.10.5-payments.148 → 0.10.5-payments.149
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.js +1 -2
- package/lib/cjs/components/CheckoutReturnDialog/CheckoutReturnDialog.js +8 -6
- package/lib/cjs/components/PaymentOrders/PaymentOrders.js +4 -2
- package/lib/cjs/components/PaymentProduct/PaymentProduct.js +10 -1
- package/lib/cjs/components/PaymentProductPrice/PaymentProductPrice.js +5 -2
- package/lib/cjs/components/PaymentProducts/PaymentProducts.js +1 -1
- package/lib/cjs/components/PaymentProductsDialog/PaymentProductsDialog.js +1 -1
- package/lib/cjs/utils/payment.d.ts +2 -2
- package/lib/cjs/utils/payment.js +4 -4
- package/lib/esm/components/BuyButton/BuyButton.js +1 -2
- package/lib/esm/components/CheckoutReturnDialog/CheckoutReturnDialog.js +8 -6
- package/lib/esm/components/PaymentOrders/PaymentOrders.js +4 -2
- package/lib/esm/components/PaymentProduct/PaymentProduct.js +10 -1
- package/lib/esm/components/PaymentProductPrice/PaymentProductPrice.js +5 -2
- package/lib/esm/components/PaymentProducts/PaymentProducts.js +1 -1
- package/lib/esm/components/PaymentProductsDialog/PaymentProductsDialog.js +1 -1
- package/lib/esm/utils/payment.d.ts +2 -2
- package/lib/esm/utils/payment.js +4 -4
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -15,7 +15,6 @@ const PaymentProductsDialog_1 = tslib_1.__importDefault(require("../PaymentProdu
|
|
|
15
15
|
const PaymentProducts_1 = tslib_1.__importDefault(require("../PaymentProducts"));
|
|
16
16
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
17
17
|
const utils_1 = require("@selfcommunity/utils");
|
|
18
|
-
const PaymentDetailDialog_1 = tslib_1.__importDefault(require("../PaymentDetailDialog"));
|
|
19
18
|
const PREFIX = 'SCBuyButton';
|
|
20
19
|
const classes = {
|
|
21
20
|
requestRoot: `${PREFIX}-request-root`,
|
|
@@ -173,6 +172,6 @@ function BuyButton(inProps) {
|
|
|
173
172
|
if (!contentId && !content) {
|
|
174
173
|
return null;
|
|
175
174
|
}
|
|
176
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children:
|
|
175
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })))] }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PaymentProductsDialog_1.default, { open: true, onClose: handleClose, PaymentProductsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })) }) })) }))] }));
|
|
177
176
|
}
|
|
178
177
|
exports.default = BuyButton;
|
|
@@ -50,6 +50,7 @@ function CheckoutReturnDialog(inProps) {
|
|
|
50
50
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
51
51
|
const [contentType, setContentType] = (0, react_1.useState)(null);
|
|
52
52
|
const [contentId, setContentId] = (0, react_1.useState)(null);
|
|
53
|
+
const [content, setContent] = (0, react_1.useState)(null);
|
|
53
54
|
// HOOKS
|
|
54
55
|
const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
|
|
55
56
|
const intl = (0, react_intl_1.useIntl)();
|
|
@@ -58,10 +59,11 @@ function CheckoutReturnDialog(inProps) {
|
|
|
58
59
|
(0, react_1.useEffect)(() => {
|
|
59
60
|
api_services_1.PaymentApiClient.getCheckoutSession({ session_id: checkoutSessionId })
|
|
60
61
|
.then((r) => {
|
|
61
|
-
setContentType(r.metadata.content_type);
|
|
62
|
-
setContentId(parseInt(r.metadata.content_id));
|
|
63
62
|
if (r.status === types_1.SCCheckoutSessionStatus.COMPLETE) {
|
|
64
63
|
api_services_1.PaymentApiClient.checkoutCompleteSession({ session_id: checkoutSessionId }).then((r) => {
|
|
64
|
+
setContentType(r.content_type);
|
|
65
|
+
setContentId(r.content_id);
|
|
66
|
+
setContent(r[r.content_type]);
|
|
65
67
|
setLoading(false);
|
|
66
68
|
});
|
|
67
69
|
}
|
|
@@ -79,16 +81,16 @@ function CheckoutReturnDialog(inProps) {
|
|
|
79
81
|
const renderContent = () => {
|
|
80
82
|
let footer;
|
|
81
83
|
if (contentType === types_1.SCContentType.EVENT) {
|
|
82
|
-
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, {
|
|
84
|
+
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: content, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_2.SCRoutes.EVENT_ROUTE_NAME, content), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
|
|
83
85
|
}
|
|
84
86
|
else if (contentType === types_1.SCContentType.CATEGORY) {
|
|
85
|
-
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Category_1.default, {
|
|
87
|
+
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Category_1.default, { category: content, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_2.SCRoutes.CATEGORY_ROUTE_NAME, content), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
|
|
86
88
|
}
|
|
87
89
|
else if (contentType === types_1.SCContentType.COURSE) {
|
|
88
|
-
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Course_1.default, {
|
|
90
|
+
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Course_1.default, { course: content, template: course_1.SCCourseTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_2.SCRoutes.COURSE_ROUTE_NAME, content), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
|
|
89
91
|
}
|
|
90
92
|
else if (contentType === types_1.SCContentType.GROUP) {
|
|
91
|
-
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, {
|
|
93
|
+
footer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, { group: content, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(react_core_2.SCRoutes.GROUP_ROUTE_NAME, content), component: react_core_2.Link, className: classes.btn }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
|
|
92
94
|
}
|
|
93
95
|
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: (0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, className: classes.img, alt: intl.formatMessage({
|
|
94
96
|
id: 'ui.checkoutReturnDialog.buy',
|
|
@@ -12,6 +12,8 @@ const api_services_1 = require("@selfcommunity/api-services");
|
|
|
12
12
|
const system_1 = require("@mui/system");
|
|
13
13
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
14
14
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
15
|
+
const payment_1 = require("../../utils/payment");
|
|
16
|
+
const Event_1 = tslib_1.__importDefault(require("../Event"));
|
|
15
17
|
const PREFIX = 'SCPaymentOrders';
|
|
16
18
|
const classes = {
|
|
17
19
|
root: `${PREFIX}-root`,
|
|
@@ -99,9 +101,9 @@ function PaymentOrders(inProps) {
|
|
|
99
101
|
* Render skeleton
|
|
100
102
|
*/
|
|
101
103
|
const skeleton = () => {
|
|
102
|
-
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:
|
|
104
|
+
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 }) }))] })));
|
|
103
105
|
};
|
|
104
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (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: "
|
|
106
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (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: (0, jsx_runtime_1.jsx)(Event_1.default, { event: order[order.content_type], actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }) })), (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 &&
|
|
105
107
|
intl.formatDate(new Date(order.created_at), {
|
|
106
108
|
year: 'numeric',
|
|
107
109
|
month: 'numeric',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
5
6
|
const material_1 = require("@mui/material");
|
|
6
7
|
const styles_1 = require("@mui/material/styles");
|
|
7
8
|
const system_1 = require("@mui/system");
|
|
@@ -27,12 +28,20 @@ function PaymentProduct(inProps) {
|
|
|
27
28
|
const { className, id, product, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "id", "product", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder"]);
|
|
28
29
|
// HOOKS
|
|
29
30
|
const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
|
|
31
|
+
// CONST
|
|
32
|
+
const productPaymentPriceIds = (0, react_1.useMemo)(() => {
|
|
33
|
+
if (product) {
|
|
34
|
+
return product.payment_prices.map((p) => p.id);
|
|
35
|
+
}
|
|
36
|
+
return [];
|
|
37
|
+
}, [product]);
|
|
38
|
+
const isProductExpanded = (0, react_1.useMemo)(() => !paymentOrder || (paymentOrder && paymentOrder.payment_price && productPaymentPriceIds.indexOf(paymentOrder.payment_price.id) > -1), [paymentOrder, productPaymentPriceIds]);
|
|
30
39
|
if (!isPaymentsEnabled) {
|
|
31
40
|
return null;
|
|
32
41
|
}
|
|
33
42
|
if (!product) {
|
|
34
43
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
35
44
|
}
|
|
36
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ defaultExpanded:
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: product.name }) })), product.description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", component: "div" }, { children: product.description })))] })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: product.payment_prices.map((price, index) => ((0, jsx_runtime_1.jsx)(PaymentProductPrice_1.default, Object.assign({ price: price, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
|
|
37
46
|
}
|
|
38
47
|
exports.default = PaymentProduct;
|
|
@@ -12,12 +12,15 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
|
12
12
|
const react_intl_1 = require("react-intl");
|
|
13
13
|
const react_core_1 = require("@selfcommunity/react-core");
|
|
14
14
|
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
|
|
15
|
+
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
15
16
|
const classes = {
|
|
16
17
|
root: `${constants_1.PREFIX}-root`,
|
|
17
18
|
image: `${constants_1.PREFIX}-image`,
|
|
18
19
|
primary: `${constants_1.PREFIX}-primary`,
|
|
19
20
|
secondary: `${constants_1.PREFIX}-secondary`,
|
|
21
|
+
purchasedAt: `${constants_1.PREFIX}-purchased-at`,
|
|
20
22
|
button: `${constants_1.PREFIX}-button`,
|
|
23
|
+
buttonPurchased: `${constants_1.PREFIX}-button-purchased`,
|
|
21
24
|
action: `${constants_1.PREFIX}-action`
|
|
22
25
|
};
|
|
23
26
|
const Root = (0, styles_1.styled)(BaseItem_1.default, {
|
|
@@ -52,9 +55,9 @@ function PaymentProductPrice(inProps) {
|
|
|
52
55
|
if (!price) {
|
|
53
56
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
54
57
|
}
|
|
55
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, image: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })) })), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paymentOrder && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: true, className: classes.root, image: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) })) })), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paymentOrder && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: (0, classnames_1.default)(classes.secondary, classes.purchasedAt) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
|
|
56
59
|
purchasedAt: intl.formatDate(new Date(), { day: 'numeric', year: 'numeric', month: 'long' })
|
|
57
|
-
} }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color:
|
|
60
|
+
} }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: (0, classnames_1.default)(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: react_core_1.Link, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: scRoutingContext.url(react_core_1.SCRoutes.CHECKOUT_PAYMENT, {
|
|
58
61
|
content_type: contentType.toLowerCase(),
|
|
59
62
|
content_id: content ? content.id : contentId,
|
|
60
63
|
price_id: price.id
|
|
@@ -71,6 +71,6 @@ function PaymentProducts(inProps) {
|
|
|
71
71
|
if (!isPaymentsEnabled) {
|
|
72
72
|
return null;
|
|
73
73
|
}
|
|
74
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: products.map((p, i) => ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ product: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: products.map((p, i) => ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ product: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder })), i))) })) })));
|
|
75
75
|
}
|
|
76
76
|
exports.default = PaymentProducts;
|
|
@@ -37,6 +37,6 @@ function PaymentProductsDialog(inProps) {
|
|
|
37
37
|
if (!isPaymentsEnabled) {
|
|
38
38
|
return null;
|
|
39
39
|
}
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: (0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({}, PaymentProductsComponentProps)) })));
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: PaymentProductsComponentProps && PaymentProductsComponentProps.paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: (0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({}, PaymentProductsComponentProps)) })));
|
|
41
41
|
}
|
|
42
42
|
exports.default = PaymentProductsDialog;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SCThemeType } from '@selfcommunity/react-core';
|
|
2
2
|
import { Appearance } from '@stripe/stripe-js';
|
|
3
3
|
import { IntlShape } from 'react-intl';
|
|
4
|
-
import { SCLanguageType,
|
|
4
|
+
import { SCLanguageType, SCPaymentPrice } from '@selfcommunity/types';
|
|
5
5
|
declare const getDefaultAppearanceStyle: (theme: SCThemeType) => {
|
|
6
6
|
appearance: Appearance;
|
|
7
7
|
};
|
|
@@ -12,5 +12,5 @@ declare const getDefaultPaymentMethodConfiguration: () => {
|
|
|
12
12
|
payment_method_configuration?: string;
|
|
13
13
|
paymentMethodTypes?: string[];
|
|
14
14
|
};
|
|
15
|
-
declare const getConvertedAmount: (
|
|
15
|
+
declare const getConvertedAmount: (paymentPrice: SCPaymentPrice) => string | null;
|
|
16
16
|
export { getDefaultAppearanceStyle, getDefaultLocale, getDefaultPaymentMethodConfiguration, getConvertedAmount };
|
package/lib/cjs/utils/payment.js
CHANGED
|
@@ -48,9 +48,9 @@ const getDefaultPaymentMethodConfiguration = () => ({
|
|
|
48
48
|
paymentMethodTypes: ['card']
|
|
49
49
|
});
|
|
50
50
|
exports.getDefaultPaymentMethodConfiguration = getDefaultPaymentMethodConfiguration;
|
|
51
|
-
const getConvertedAmount = (
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return
|
|
51
|
+
const getConvertedAmount = (paymentPrice) => {
|
|
52
|
+
if (!paymentPrice)
|
|
53
|
+
return;
|
|
54
|
+
return `${(paymentPrice.unit_amount / 100).toFixed(2)}${paymentPrice.currency === types_1.SCPaymentPriceCurrencyType.EUR && '€'}`;
|
|
55
55
|
};
|
|
56
56
|
exports.getConvertedAmount = getConvertedAmount;
|
|
@@ -13,7 +13,6 @@ import PaymentProductsDialog from '../PaymentProductsDialog';
|
|
|
13
13
|
import PaymentProducts from '../PaymentProducts';
|
|
14
14
|
import { CategoryApiClient, GroupApiClient, EventApiClient, CourseApiClient } from '@selfcommunity/api-services';
|
|
15
15
|
import { capitalize } from '@selfcommunity/utils';
|
|
16
|
-
import PaymentDetailDialog from '../PaymentDetailDialog';
|
|
17
16
|
const PREFIX = 'SCBuyButton';
|
|
18
17
|
const classes = {
|
|
19
18
|
requestRoot: `${PREFIX}-request-root`,
|
|
@@ -171,5 +170,5 @@ export default function BuyButton(inProps) {
|
|
|
171
170
|
if (!contentId && !content) {
|
|
172
171
|
return null;
|
|
173
172
|
}
|
|
174
|
-
return (_jsxs(_Fragment, { children: [_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: _jsx(Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children:
|
|
173
|
+
return (_jsxs(_Fragment, { children: [_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: _jsx(Icon, { children: "card_giftcard" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen }, rest, { children: btnLabel })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: _jsx("b", { children: paymentOrder ? (_jsx(FormattedMessage, { id: "ui.paymentProductsDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })) }) })), _jsx(PaymentProducts, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })))] }) }))) : (_jsx(_Fragment, { children: _jsx(PaymentProductsDialog, { open: true, onClose: handleClose, PaymentProductsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), (paymentOrder && { paymentOrder: paymentOrder, onUpdatePaymentOrder: handleUpdatePaymentOrder })) }) })) }))] }));
|
|
175
174
|
}
|
|
@@ -48,6 +48,7 @@ export default function CheckoutReturnDialog(inProps) {
|
|
|
48
48
|
const [loading, setLoading] = useState(true);
|
|
49
49
|
const [contentType, setContentType] = useState(null);
|
|
50
50
|
const [contentId, setContentId] = useState(null);
|
|
51
|
+
const [content, setContent] = useState(null);
|
|
51
52
|
// HOOKS
|
|
52
53
|
const { isPaymentsEnabled } = useSCPaymentsEnabled();
|
|
53
54
|
const intl = useIntl();
|
|
@@ -56,10 +57,11 @@ export default function CheckoutReturnDialog(inProps) {
|
|
|
56
57
|
useEffect(() => {
|
|
57
58
|
PaymentApiClient.getCheckoutSession({ session_id: checkoutSessionId })
|
|
58
59
|
.then((r) => {
|
|
59
|
-
setContentType(r.metadata.content_type);
|
|
60
|
-
setContentId(parseInt(r.metadata.content_id));
|
|
61
60
|
if (r.status === SCCheckoutSessionStatus.COMPLETE) {
|
|
62
61
|
PaymentApiClient.checkoutCompleteSession({ session_id: checkoutSessionId }).then((r) => {
|
|
62
|
+
setContentType(r.content_type);
|
|
63
|
+
setContentId(r.content_id);
|
|
64
|
+
setContent(r[r.content_type]);
|
|
63
65
|
setLoading(false);
|
|
64
66
|
});
|
|
65
67
|
}
|
|
@@ -77,16 +79,16 @@ export default function CheckoutReturnDialog(inProps) {
|
|
|
77
79
|
const renderContent = () => {
|
|
78
80
|
let footer;
|
|
79
81
|
if (contentType === SCContentType.EVENT) {
|
|
80
|
-
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Event, {
|
|
82
|
+
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Event, { event: content, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, content), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
|
|
81
83
|
}
|
|
82
84
|
else if (contentType === SCContentType.CATEGORY) {
|
|
83
|
-
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Category, {
|
|
85
|
+
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Category, { category: content, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, content), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
|
|
84
86
|
}
|
|
85
87
|
else if (contentType === SCContentType.COURSE) {
|
|
86
|
-
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Course, {
|
|
88
|
+
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Course, { course: content, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, content), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
|
|
87
89
|
}
|
|
88
90
|
else if (contentType === SCContentType.GROUP) {
|
|
89
|
-
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Group, {
|
|
91
|
+
footer = (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ className: classes.contentObject }, { children: _jsx(Group, { group: content, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, content), component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
|
|
90
92
|
}
|
|
91
93
|
return (_jsxs(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [_jsx(Grow, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: _jsx("img", { src: CLAPPING, className: classes.img, alt: intl.formatMessage({
|
|
92
94
|
id: 'ui.checkoutReturnDialog.buy',
|
|
@@ -10,6 +10,8 @@ import { PaymentService } from '@selfcommunity/api-services';
|
|
|
10
10
|
import { useThemeProps } from '@mui/system';
|
|
11
11
|
import classNames from 'classnames';
|
|
12
12
|
import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
|
|
13
|
+
import { getConvertedAmount } from '../../utils/payment';
|
|
14
|
+
import Event from '../Event';
|
|
13
15
|
const PREFIX = 'SCPaymentOrders';
|
|
14
16
|
const classes = {
|
|
15
17
|
root: `${PREFIX}-root`,
|
|
@@ -97,9 +99,9 @@ export default function PaymentOrders(inProps) {
|
|
|
97
99
|
* Render skeleton
|
|
98
100
|
*/
|
|
99
101
|
const skeleton = () => {
|
|
100
|
-
return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width:
|
|
102
|
+
return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 20 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 30 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 80, width: 250 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
|
|
101
103
|
};
|
|
102
|
-
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: Paper }, { 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: "
|
|
104
|
+
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: Paper }, { 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: _jsx(Event, { event: order[order.content_type], actions: _jsx(_Fragment, {}) }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
|
|
103
105
|
intl.formatDate(new Date(order.created_at), {
|
|
104
106
|
year: 'numeric',
|
|
105
107
|
month: 'numeric',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from 'react';
|
|
3
4
|
import { AccordionDetails, AccordionSummary, Typography } from '@mui/material';
|
|
4
5
|
import { styled } from '@mui/material/styles';
|
|
5
6
|
import { useThemeProps } from '@mui/system';
|
|
@@ -25,11 +26,19 @@ export default function PaymentProduct(inProps) {
|
|
|
25
26
|
const { className, id, product, contentType, contentId, content, paymentOrder, onUpdatePaymentOrder } = props, rest = __rest(props, ["className", "id", "product", "contentType", "contentId", "content", "paymentOrder", "onUpdatePaymentOrder"]);
|
|
26
27
|
// HOOKS
|
|
27
28
|
const { isPaymentsEnabled } = useSCPaymentsEnabled();
|
|
29
|
+
// CONST
|
|
30
|
+
const productPaymentPriceIds = useMemo(() => {
|
|
31
|
+
if (product) {
|
|
32
|
+
return product.payment_prices.map((p) => p.id);
|
|
33
|
+
}
|
|
34
|
+
return [];
|
|
35
|
+
}, [product]);
|
|
36
|
+
const isProductExpanded = useMemo(() => !paymentOrder || (paymentOrder && paymentOrder.payment_price && productPaymentPriceIds.indexOf(paymentOrder.payment_price.id) > -1), [paymentOrder, productPaymentPriceIds]);
|
|
28
37
|
if (!isPaymentsEnabled) {
|
|
29
38
|
return null;
|
|
30
39
|
}
|
|
31
40
|
if (!product) {
|
|
32
41
|
return _jsx(PaymentProductSkeleton, {});
|
|
33
42
|
}
|
|
34
|
-
return (_jsxs(Root, Object.assign({ defaultExpanded:
|
|
43
|
+
return (_jsxs(Root, Object.assign({ disabled: !productPaymentPriceIds.length, defaultExpanded: isProductExpanded && productPaymentPriceIds.length > 0, square: true, className: classNames(classes.root, className) }, rest, { children: [_jsxs(AccordionSummary, Object.assign({ "aria-controls": "panel1-content", id: "panel1-header" }, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div" }, { children: _jsx("b", { children: product.name }) })), product.description && (_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: product.description })))] })), _jsx(AccordionDetails, { children: product.payment_prices.map((price, index) => (_jsx(PaymentProductPrice, Object.assign({ price: price, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onHandleActionBuy: onUpdatePaymentOrder })), index))) })] })));
|
|
35
44
|
}
|
|
@@ -10,12 +10,15 @@ import PaymentProductPriceSkeleton from './Skeleton';
|
|
|
10
10
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
11
11
|
import { Link, SCRoutes, useSCPaymentsEnabled, useSCRouting } from '@selfcommunity/react-core';
|
|
12
12
|
import BaseItem from '../../shared/BaseItem';
|
|
13
|
+
import classNames from 'classnames';
|
|
13
14
|
const classes = {
|
|
14
15
|
root: `${PREFIX}-root`,
|
|
15
16
|
image: `${PREFIX}-image`,
|
|
16
17
|
primary: `${PREFIX}-primary`,
|
|
17
18
|
secondary: `${PREFIX}-secondary`,
|
|
19
|
+
purchasedAt: `${PREFIX}-purchased-at`,
|
|
18
20
|
button: `${PREFIX}-button`,
|
|
21
|
+
buttonPurchased: `${PREFIX}-button-purchased`,
|
|
19
22
|
action: `${PREFIX}-action`
|
|
20
23
|
};
|
|
21
24
|
const Root = styled(BaseItem, {
|
|
@@ -50,9 +53,9 @@ export default function PaymentProductPrice(inProps) {
|
|
|
50
53
|
if (!price) {
|
|
51
54
|
return _jsx(PaymentProductPriceSkeleton, {});
|
|
52
55
|
}
|
|
53
|
-
return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, image: _jsx(Box, Object.assign({ className: classes.image }, { children: _jsx(Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: _jsx(Icon, { children: "card_giftcard" }) })) })), primary: _jsx(Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: paymentOrder && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
|
|
56
|
+
return (_jsx(Root, Object.assign({ disableTypography: true, className: classes.root, image: _jsx(Box, Object.assign({ className: classes.image }, { children: _jsx(Avatar, Object.assign({ variant: "square", alt: 'price.name', className: classes.image }, { children: _jsx(Icon, { children: "card_giftcard" }) })) })), primary: _jsx(Typography, Object.assign({ variant: "body1" }, { children: formattedPrice })), secondary: _jsxs(_Fragment, { children: [!isMobile && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classes.secondary }, { children: price.description }))), _jsx(_Fragment, { children: paymentOrder && (_jsx(Typography, Object.assign({ component: "p", variant: "body2", className: classNames(classes.secondary, classes.purchasedAt) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.paymentProduct.action.purchasedAt", id: "ui.paymentProduct.action.purchasedAt", values: {
|
|
54
57
|
purchasedAt: intl.formatDate(new Date(), { day: 'numeric', year: 'numeric', month: 'long' })
|
|
55
|
-
} }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: _jsx(Button, Object.assign({ size: "small", color:
|
|
58
|
+
} }) }))) })] }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(Zoom, Object.assign({ in: true, style: { transitionDelay: '200ms' } }, { children: _jsx(Button, Object.assign({ size: "small", color: paymentOrder && paymentOrder.payment_price.id === price.id ? 'secondary' : 'error', className: classNames(classes.button, { [classes.buttonPurchased]: paymentOrder && paymentOrder.payment_price.id === price.id }) }, (paymentOrder && { disabled: true }), { variant: "contained", component: Link, startIcon: _jsx(Icon, { children: "card_giftcard" }) }, (onHandleActionBuy && { onClick: handleActionBuy }), { to: scRoutingContext.url(SCRoutes.CHECKOUT_PAYMENT, {
|
|
56
59
|
content_type: contentType.toLowerCase(),
|
|
57
60
|
content_id: content ? content.id : contentId,
|
|
58
61
|
price_id: price.id
|
|
@@ -69,5 +69,5 @@ export default function PaymentProducts(inProps) {
|
|
|
69
69
|
if (!isPaymentsEnabled) {
|
|
70
70
|
return null;
|
|
71
71
|
}
|
|
72
|
-
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsx(_Fragment, { children: products.map((p, i) => (_jsx(PaymentProduct, Object.assign({ product: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder
|
|
72
|
+
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: loading ? (_jsx(PaymentProductsSkeleton, {})) : (_jsx(_Fragment, { children: products.map((p, i) => (_jsx(PaymentProduct, Object.assign({ product: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder })), i))) })) })));
|
|
73
73
|
}
|
|
@@ -35,5 +35,5 @@ export default function PaymentProductsDialog(inProps) {
|
|
|
35
35
|
if (!isPaymentsEnabled) {
|
|
36
36
|
return null;
|
|
37
37
|
}
|
|
38
|
-
return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: _jsx(FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: _jsx(PaymentProducts, Object.assign({}, PaymentProductsComponentProps)) })));
|
|
38
|
+
return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: PaymentProductsComponentProps && PaymentProductsComponentProps.paymentOrder ? (_jsx(FormattedMessage, { id: "ui.paymentProductsDialog.title.purchased", defaultMessage: "ui.paymentProductsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paymentProductsDialog.title", defaultMessage: "ui.paymentProductsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: _jsx(PaymentProducts, Object.assign({}, PaymentProductsComponentProps)) })));
|
|
39
39
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SCThemeType } from '@selfcommunity/react-core';
|
|
2
2
|
import { Appearance } from '@stripe/stripe-js';
|
|
3
3
|
import { IntlShape } from 'react-intl';
|
|
4
|
-
import { SCLanguageType,
|
|
4
|
+
import { SCLanguageType, SCPaymentPrice } from '@selfcommunity/types';
|
|
5
5
|
declare const getDefaultAppearanceStyle: (theme: SCThemeType) => {
|
|
6
6
|
appearance: Appearance;
|
|
7
7
|
};
|
|
@@ -12,5 +12,5 @@ declare const getDefaultPaymentMethodConfiguration: () => {
|
|
|
12
12
|
payment_method_configuration?: string;
|
|
13
13
|
paymentMethodTypes?: string[];
|
|
14
14
|
};
|
|
15
|
-
declare const getConvertedAmount: (
|
|
15
|
+
declare const getConvertedAmount: (paymentPrice: SCPaymentPrice) => string | null;
|
|
16
16
|
export { getDefaultAppearanceStyle, getDefaultLocale, getDefaultPaymentMethodConfiguration, getConvertedAmount };
|
package/lib/esm/utils/payment.js
CHANGED
|
@@ -42,9 +42,9 @@ const getDefaultPaymentMethodConfiguration = () => ({
|
|
|
42
42
|
// payment_method_configuration: SCPaymentMethodConfiguration
|
|
43
43
|
paymentMethodTypes: ['card']
|
|
44
44
|
});
|
|
45
|
-
const getConvertedAmount = (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return
|
|
45
|
+
const getConvertedAmount = (paymentPrice) => {
|
|
46
|
+
if (!paymentPrice)
|
|
47
|
+
return;
|
|
48
|
+
return `${(paymentPrice.unit_amount / 100).toFixed(2)}${paymentPrice.currency === SCPaymentPriceCurrencyType.EUR && '€'}`;
|
|
49
49
|
};
|
|
50
50
|
export { getDefaultAppearanceStyle, getDefaultLocale, getDefaultPaymentMethodConfiguration, getConvertedAmount };
|