@selfcommunity/react-ui 0.11.0-alpha.71 → 0.11.0-alpha.72
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/CategoryFollowButton/CategoryFollowButton.js +1 -1
- package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js +5 -5
- package/lib/cjs/components/VoteAudienceButton/VoteAudienceButton.js +9 -9
- package/lib/cjs/components/VoteButton/VoteButton.js +6 -6
- package/lib/esm/components/CategoryFollowButton/CategoryFollowButton.js +1 -1
- package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js +5 -5
- package/lib/esm/components/VoteAudienceButton/VoteAudienceButton.js +9 -9
- package/lib/esm/components/VoteButton/VoteButton.js +6 -6
- package/lib/umd/react-ui.js +1 -1
- package/package.json +3 -3
|
@@ -104,7 +104,7 @@ function CategoryFollowButton(inProps) {
|
|
|
104
104
|
if (!scCategory || !categoryFollowEnabled || (scCategory && followed && scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED)) {
|
|
105
105
|
return null;
|
|
106
106
|
}
|
|
107
|
-
if (scCategoriesManager.isLoading(scCategory) || followed === null) {
|
|
107
|
+
if (scUserContext.user && (scCategoriesManager.isLoading(scCategory) || followed === null)) {
|
|
108
108
|
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", loading: true, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" }) })));
|
|
109
109
|
}
|
|
110
110
|
/**
|
|
@@ -86,7 +86,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
86
86
|
* Handle change content type access
|
|
87
87
|
* @param panel
|
|
88
88
|
*/
|
|
89
|
-
const handleChange = (panel) => (
|
|
89
|
+
const handleChange = (panel) => (_event, _isExpanded) => {
|
|
90
90
|
setExpanded(panel);
|
|
91
91
|
onChangeContentAccessType(panel);
|
|
92
92
|
};
|
|
@@ -115,7 +115,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
115
115
|
onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
|
|
116
116
|
handleToggleCreatePaymentPrice();
|
|
117
117
|
};
|
|
118
|
-
const handleDeleteProduct = (
|
|
118
|
+
const handleDeleteProduct = (_p, i) => {
|
|
119
119
|
const products = [...value.slice(0, i), ...value.slice(i + 1)];
|
|
120
120
|
setValue(products);
|
|
121
121
|
onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
|
|
@@ -143,7 +143,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
143
143
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
144
144
|
// @ts-ignore
|
|
145
145
|
const { key } = props, optionProps = tslib_1.__rest(props, ["key"]);
|
|
146
|
-
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "
|
|
146
|
+
return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "pagamenti" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.productItemContent }, { children: [option.name, (0, jsx_runtime_1.jsx)("br", {}), option.payment_prices && option.payment_prices[0] && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, payment_1.getConvertedAmount)(option.payment_prices[0]) }), ' ', option.payment_prices.length > 1 && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["+", option.payment_prices.length - 1] })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.productItemRemoveIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow" }) }))] }), option.id));
|
|
147
147
|
};
|
|
148
148
|
/**
|
|
149
149
|
* Fetch events
|
|
@@ -222,7 +222,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
222
222
|
defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
|
|
223
223
|
}) }) }), -1)), value.map((p, i) => {
|
|
224
224
|
var _a, _b, _c;
|
|
225
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "
|
|
225
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: p.name, secondary: `Prices: ${((_a = p.payment_prices) === null || _a === void 0 ? void 0 : _a.length)
|
|
226
226
|
? p.payment_prices
|
|
227
227
|
.slice(0, 3)
|
|
228
228
|
.map((price) => (0, payment_1.getConvertedAmount)(price))
|
|
@@ -233,7 +233,7 @@ function PaywallsConfigurator(inProps) {
|
|
|
233
233
|
defaultMessage: 'ui.paywallsConfigurator.connected.products.others'
|
|
234
234
|
}, { count: ((_c = p.payment_prices) === null || _c === void 0 ? void 0 : _c.length) - 3 })
|
|
235
235
|
: ''}` })] }), i));
|
|
236
|
-
})] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "list" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && ((0, jsx_runtime_1.jsx)(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loadingProducts, loadingText: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })), id: "payment-products-autocomplete", className: classes.paymentProductsAutocompletePopperRoot, open: true, multiple: true, onClose: (
|
|
236
|
+
})] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "list" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && ((0, jsx_runtime_1.jsx)(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { loading: loadingProducts, loadingText: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })), id: "payment-products-autocomplete", className: classes.paymentProductsAutocompletePopperRoot, open: true, multiple: true, onClose: (_event, reason) => {
|
|
237
237
|
if (reason === 'escape') {
|
|
238
238
|
handleClose();
|
|
239
239
|
}
|
|
@@ -24,13 +24,13 @@ const classes = {
|
|
|
24
24
|
const Root = (0, material_1.styled)(lab_1.LoadingButton, {
|
|
25
25
|
name: PREFIX,
|
|
26
26
|
slot: 'Root',
|
|
27
|
-
overridesResolver: (
|
|
28
|
-
})((
|
|
27
|
+
overridesResolver: (_props, styles) => [styles.root, styles.voted]
|
|
28
|
+
})(() => ({}));
|
|
29
29
|
const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
|
|
30
30
|
name: PREFIX,
|
|
31
31
|
slot: 'Root',
|
|
32
|
-
overridesResolver: (
|
|
33
|
-
})((
|
|
32
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
33
|
+
})(() => ({}));
|
|
34
34
|
/**
|
|
35
35
|
* > API documentation for the Community-JS Vote Audience Button component. Learn about the available props and the CSS API.
|
|
36
36
|
|
|
@@ -69,13 +69,13 @@ function VoteAudienceButton(inProps) {
|
|
|
69
69
|
// CONTEXT
|
|
70
70
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
71
71
|
// HANDLERS
|
|
72
|
-
const handleOpen = (
|
|
72
|
+
const handleOpen = (_event) => {
|
|
73
73
|
setOpen(true);
|
|
74
74
|
};
|
|
75
|
-
const handleClose = (
|
|
75
|
+
const handleClose = (_event) => {
|
|
76
76
|
setOpen(false);
|
|
77
77
|
};
|
|
78
|
-
const handleChangeTab = (
|
|
78
|
+
const handleChangeTab = (_event, newValue) => {
|
|
79
79
|
setTab(newValue);
|
|
80
80
|
};
|
|
81
81
|
// HOOKS
|
|
@@ -105,14 +105,14 @@ function VoteAudienceButton(inProps) {
|
|
|
105
105
|
const audienceIcon = (0, react_1.useMemo)(() => {
|
|
106
106
|
if (reactions.default && !isLoading && !error) {
|
|
107
107
|
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
|
|
108
|
-
contributionReactionsCount.slice(0, 3).map((count,
|
|
108
|
+
contributionReactionsCount.slice(0, 3).map((count, _i) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
|
|
109
109
|
}
|
|
110
110
|
return scUserContext.user && contributionVoted ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" });
|
|
111
111
|
}, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);
|
|
112
112
|
const dialogTitle = (0, react_1.useMemo)(() => {
|
|
113
113
|
if (reactions.default && !isLoading) {
|
|
114
114
|
return ((0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab, "aria-label": "reactions" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.tab.all", id: "ui.voteAudienceButton.dialog.tab.all" }) }), contributionReactionsCount &&
|
|
115
|
-
contributionReactionsCount.map((count) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }), count.count] }) }, count.reaction.id)))] })));
|
|
115
|
+
contributionReactionsCount.map((count) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) })), count.count] }) }, count.reaction.id)))] })));
|
|
116
116
|
}
|
|
117
117
|
else {
|
|
118
118
|
return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.title", id: "ui.voteAudienceButton.dialog.title" });
|
|
@@ -22,12 +22,12 @@ const classes = {
|
|
|
22
22
|
const Root = (0, material_1.styled)(lab_1.LoadingButton, {
|
|
23
23
|
name: PREFIX,
|
|
24
24
|
slot: 'Root',
|
|
25
|
-
overridesResolver: (
|
|
26
|
-
})((
|
|
25
|
+
overridesResolver: (_props, styles) => [styles.root, styles.voted]
|
|
26
|
+
})(() => ({}));
|
|
27
27
|
const PopperRoot = (0, material_1.styled)(material_1.Popper, {
|
|
28
28
|
name: PREFIX,
|
|
29
29
|
slot: 'Root',
|
|
30
|
-
overridesResolver: (
|
|
30
|
+
overridesResolver: (_props, styles) => styles.popperRoot
|
|
31
31
|
})(() => ({}));
|
|
32
32
|
/**
|
|
33
33
|
* > API documentation for the Community-JS Vote Button component. Learn about the available props and the CSS API.
|
|
@@ -72,7 +72,7 @@ function VoteButton(inProps) {
|
|
|
72
72
|
handleClearTimeout();
|
|
73
73
|
timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
|
|
74
74
|
};
|
|
75
|
-
const handleMouseLeave = (
|
|
75
|
+
const handleMouseLeave = (_event) => {
|
|
76
76
|
handleClearTimeout();
|
|
77
77
|
timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
|
|
78
78
|
};
|
|
@@ -141,9 +141,9 @@ function VoteButton(inProps) {
|
|
|
141
141
|
? handleMouseEnter
|
|
142
142
|
: () => handleVoteAction(contributionReaction ? contributionReaction : reactions.default ? reactions.default : null), disabled: isLoading || Boolean(error), loading: isVoting, className: (0, classnames_1.default)(classes.root, className, {
|
|
143
143
|
[classes.voted]: scUserContext.user && contributionVoted
|
|
144
|
-
}) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" })) })));
|
|
144
|
+
}) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contributionReaction.label }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" })) })));
|
|
145
145
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [reactions.default ? (button) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contributionVoted ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteButton.voteDown", defaultMessage: "ui.voteButton.voteDown" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteButton.voteUp", defaultMessage: "ui.voteButton.voteUp" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: button }) }))), reactions.default && Boolean(anchorEl) && !isVoting && !isLoading && ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ id: `vote_${contributionId}_${contributionType}_popper`, className: classes.popperRoot, open: true, anchorEl: anchorEl, placement: "top", keepMounted: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ className: classes.reactionList, onMouseEnter: handleClearTimeout, onMouseLeave: handleMouseLeave }, { children: reactions.reactions
|
|
146
146
|
.filter((reaction) => !contributionVoted || (contributionVoted && contributionReaction.id !== reaction.id) ? reaction.active : reaction)
|
|
147
|
-
.map((reaction) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) }), reaction.id))) })) })))] }));
|
|
147
|
+
.map((reaction) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: reaction.label }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) })) }), reaction.id))) })) })))] }));
|
|
148
148
|
}
|
|
149
149
|
exports.default = VoteButton;
|
|
@@ -102,7 +102,7 @@ export default function CategoryFollowButton(inProps) {
|
|
|
102
102
|
if (!scCategory || !categoryFollowEnabled || (scCategory && followed && scCategory.auto_follow === SCCategoryAutoFollowType.FORCED)) {
|
|
103
103
|
return null;
|
|
104
104
|
}
|
|
105
|
-
if (scCategoriesManager.isLoading(scCategory) || followed === null) {
|
|
105
|
+
if (scUserContext.user && (scCategoriesManager.isLoading(scCategory) || followed === null)) {
|
|
106
106
|
return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", loading: true, className: classNames(classes.root, className) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" }) })));
|
|
107
107
|
}
|
|
108
108
|
/**
|
|
@@ -84,7 +84,7 @@ export default function PaywallsConfigurator(inProps) {
|
|
|
84
84
|
* Handle change content type access
|
|
85
85
|
* @param panel
|
|
86
86
|
*/
|
|
87
|
-
const handleChange = (panel) => (
|
|
87
|
+
const handleChange = (panel) => (_event, _isExpanded) => {
|
|
88
88
|
setExpanded(panel);
|
|
89
89
|
onChangeContentAccessType(panel);
|
|
90
90
|
};
|
|
@@ -113,7 +113,7 @@ export default function PaywallsConfigurator(inProps) {
|
|
|
113
113
|
onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
|
|
114
114
|
handleToggleCreatePaymentPrice();
|
|
115
115
|
};
|
|
116
|
-
const handleDeleteProduct = (
|
|
116
|
+
const handleDeleteProduct = (_p, i) => {
|
|
117
117
|
const products = [...value.slice(0, i), ...value.slice(i + 1)];
|
|
118
118
|
setValue(products);
|
|
119
119
|
onChangePaymentProducts === null || onChangePaymentProducts === void 0 ? void 0 : onChangePaymentProducts(products);
|
|
@@ -141,7 +141,7 @@ export default function PaywallsConfigurator(inProps) {
|
|
|
141
141
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
142
142
|
// @ts-ignore
|
|
143
143
|
const { key } = props, optionProps = __rest(props, ["key"]);
|
|
144
|
-
return (_jsxs("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [_jsx(Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: _jsx(Icon, { children: "
|
|
144
|
+
return (_jsxs("li", Object.assign({}, optionProps, (selected && { style: { backgroundColor: '#f9fafc' } }), { children: [_jsx(Box, Object.assign({ className: classes.productItemCheckIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.productItemCardIcon }, { children: _jsx(Icon, { children: "pagamenti" }) })), _jsxs(Box, Object.assign({ className: classes.productItemContent }, { children: [option.name, _jsx("br", {}), option.payment_prices && option.payment_prices[0] && (_jsxs(_Fragment, { children: [_jsx("span", { children: getConvertedAmount(option.payment_prices[0]) }), ' ', option.payment_prices.length > 1 && _jsxs(_Fragment, { children: ["+", option.payment_prices.length - 1] })] }))] })), _jsx(Box, Object.assign({ className: classes.productItemRemoveIcon, style: { visibility: selected ? 'visible' : 'hidden' } }, { children: _jsx(Icon, { children: "arrow" }) }))] }), option.id));
|
|
145
145
|
};
|
|
146
146
|
/**
|
|
147
147
|
* Fetch events
|
|
@@ -220,7 +220,7 @@ export default function PaywallsConfigurator(inProps) {
|
|
|
220
220
|
defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
|
|
221
221
|
}) }) }), -1)), value.map((p, i) => {
|
|
222
222
|
var _a, _b, _c;
|
|
223
|
-
return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: _jsx(Icon, { children: "delete" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { children: _jsx(Icon, { children: "
|
|
223
|
+
return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(Button, Object.assign({ variant: "contained", color: "secondary", size: "small", onClick: () => handleDeleteProduct(p, i), startIcon: _jsx(Icon, { children: "delete" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnRemove", defaultMessage: "ui.paywallsConfigurator.connected.products.btnRemove" }) })), divider: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { children: _jsx(Icon, { children: "dredit-card" }) }) }), _jsx(ListItemText, { primary: p.name, secondary: `Prices: ${((_a = p.payment_prices) === null || _a === void 0 ? void 0 : _a.length)
|
|
224
224
|
? p.payment_prices
|
|
225
225
|
.slice(0, 3)
|
|
226
226
|
.map((price) => getConvertedAmount(price))
|
|
@@ -231,7 +231,7 @@ export default function PaywallsConfigurator(inProps) {
|
|
|
231
231
|
defaultMessage: 'ui.paywallsConfigurator.connected.products.others'
|
|
232
232
|
}, { count: ((_c = p.payment_prices) === null || _c === void 0 ? void 0 : _c.length) - 3 })
|
|
233
233
|
: ''}` })] }), i));
|
|
234
|
-
})] })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: _jsx(Icon, { children: "list" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && (_jsx(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Box, { children: [_jsx(Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), _jsx(Autocomplete, { loading: loadingProducts, loadingText: _jsx(Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: _jsx(CircularProgress, {}) })), id: "payment-products-autocomplete", className: classes.paymentProductsAutocompletePopperRoot, open: true, multiple: true, onClose: (
|
|
234
|
+
})] })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", fullWidth: true, disableRipple: true, onClick: handleOpenPricesList, startIcon: _jsx(Icon, { children: "list" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.openPriceslist", defaultMessage: "ui.paywallsConfigurator.openPriceslist" }) }))] })), !loading && (_jsx(PaymentProductsPopper, Object.assign({ id: open ? 'payment-products' : undefined, open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Box, { children: [_jsx(Box, Object.assign({ className: classes.paymentProductsPopperTitle }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.content", defaultMessage: "ui.paywallsConfigurator.connected.products.content" }) })), _jsx(Autocomplete, { loading: loadingProducts, loadingText: _jsx(Box, Object.assign({ className: classes.autoCompleteProductsLoading }, { children: _jsx(CircularProgress, {}) })), id: "payment-products-autocomplete", className: classes.paymentProductsAutocompletePopperRoot, open: true, multiple: true, onClose: (_event, reason) => {
|
|
235
235
|
if (reason === 'escape') {
|
|
236
236
|
handleClose();
|
|
237
237
|
}
|
|
@@ -22,13 +22,13 @@ const classes = {
|
|
|
22
22
|
const Root = styled(LoadingButton, {
|
|
23
23
|
name: PREFIX,
|
|
24
24
|
slot: 'Root',
|
|
25
|
-
overridesResolver: (
|
|
26
|
-
})((
|
|
25
|
+
overridesResolver: (_props, styles) => [styles.root, styles.voted]
|
|
26
|
+
})(() => ({}));
|
|
27
27
|
const DialogRoot = styled(BaseDialog, {
|
|
28
28
|
name: PREFIX,
|
|
29
29
|
slot: 'Root',
|
|
30
|
-
overridesResolver: (
|
|
31
|
-
})((
|
|
30
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
31
|
+
})(() => ({}));
|
|
32
32
|
/**
|
|
33
33
|
* > API documentation for the Community-JS Vote Audience Button component. Learn about the available props and the CSS API.
|
|
34
34
|
|
|
@@ -67,13 +67,13 @@ export default function VoteAudienceButton(inProps) {
|
|
|
67
67
|
// CONTEXT
|
|
68
68
|
const scUserContext = useSCUser();
|
|
69
69
|
// HANDLERS
|
|
70
|
-
const handleOpen = (
|
|
70
|
+
const handleOpen = (_event) => {
|
|
71
71
|
setOpen(true);
|
|
72
72
|
};
|
|
73
|
-
const handleClose = (
|
|
73
|
+
const handleClose = (_event) => {
|
|
74
74
|
setOpen(false);
|
|
75
75
|
};
|
|
76
|
-
const handleChangeTab = (
|
|
76
|
+
const handleChangeTab = (_event, newValue) => {
|
|
77
77
|
setTab(newValue);
|
|
78
78
|
};
|
|
79
79
|
// HOOKS
|
|
@@ -103,14 +103,14 @@ export default function VoteAudienceButton(inProps) {
|
|
|
103
103
|
const audienceIcon = useMemo(() => {
|
|
104
104
|
if (reactions.default && !isLoading && !error) {
|
|
105
105
|
return (_jsx(Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
|
|
106
|
-
contributionReactionsCount.slice(0, 3).map((count,
|
|
106
|
+
contributionReactionsCount.slice(0, 3).map((count, _i) => (_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
|
|
107
107
|
}
|
|
108
108
|
return scUserContext.user && contributionVoted ? _jsx(Icon, { children: "thumb_up" }) : _jsx(Icon, { children: "thumb_up_off_alt" });
|
|
109
109
|
}, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);
|
|
110
110
|
const dialogTitle = useMemo(() => {
|
|
111
111
|
if (reactions.default && !isLoading) {
|
|
112
112
|
return (_jsxs(Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab, "aria-label": "reactions" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.tab.all", id: "ui.voteAudienceButton.dialog.tab.all" }) }), contributionReactionsCount &&
|
|
113
|
-
contributionReactionsCount.map((count) => (_jsx(Tab, { label: _jsxs(_Fragment, { children: [_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }), count.count] }) }, count.reaction.id)))] })));
|
|
113
|
+
contributionReactionsCount.map((count) => (_jsx(Tab, { label: _jsxs(_Fragment, { children: [_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) })), count.count] }) }, count.reaction.id)))] })));
|
|
114
114
|
}
|
|
115
115
|
else {
|
|
116
116
|
return _jsx(FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.title", id: "ui.voteAudienceButton.dialog.title" });
|
|
@@ -20,12 +20,12 @@ const classes = {
|
|
|
20
20
|
const Root = styled(LoadingButton, {
|
|
21
21
|
name: PREFIX,
|
|
22
22
|
slot: 'Root',
|
|
23
|
-
overridesResolver: (
|
|
24
|
-
})((
|
|
23
|
+
overridesResolver: (_props, styles) => [styles.root, styles.voted]
|
|
24
|
+
})(() => ({}));
|
|
25
25
|
const PopperRoot = styled(Popper, {
|
|
26
26
|
name: PREFIX,
|
|
27
27
|
slot: 'Root',
|
|
28
|
-
overridesResolver: (
|
|
28
|
+
overridesResolver: (_props, styles) => styles.popperRoot
|
|
29
29
|
})(() => ({}));
|
|
30
30
|
/**
|
|
31
31
|
* > API documentation for the Community-JS Vote Button component. Learn about the available props and the CSS API.
|
|
@@ -70,7 +70,7 @@ export default function VoteButton(inProps) {
|
|
|
70
70
|
handleClearTimeout();
|
|
71
71
|
timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
|
|
72
72
|
};
|
|
73
|
-
const handleMouseLeave = (
|
|
73
|
+
const handleMouseLeave = (_event) => {
|
|
74
74
|
handleClearTimeout();
|
|
75
75
|
timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
|
|
76
76
|
};
|
|
@@ -139,8 +139,8 @@ export default function VoteButton(inProps) {
|
|
|
139
139
|
? handleMouseEnter
|
|
140
140
|
: () => handleVoteAction(contributionReaction ? contributionReaction : reactions.default ? reactions.default : null), disabled: isLoading || Boolean(error), loading: isVoting, className: classNames(classes.root, className, {
|
|
141
141
|
[classes.voted]: scUserContext.user && contributionVoted
|
|
142
|
-
}) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? (_jsx(Icon, { children: _jsx("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) })) : (_jsx(Icon, { children: "thumb_up" }))) : (_jsx(Icon, { children: "thumb_up_off_alt" })) })));
|
|
142
|
+
}) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? (_jsx(Tooltip, Object.assign({ title: contributionReaction.label }, { children: _jsx(Icon, { children: _jsx("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) }) }))) : (_jsx(Icon, { children: "thumb_up" }))) : (_jsx(Icon, { children: "thumb_up_off_alt" })) })));
|
|
143
143
|
return (_jsxs(_Fragment, { children: [reactions.default ? (button) : (_jsx(Tooltip, Object.assign({ title: contributionVoted ? (_jsx(FormattedMessage, { id: "ui.voteButton.voteDown", defaultMessage: "ui.voteButton.voteDown" })) : (_jsx(FormattedMessage, { id: "ui.voteButton.voteUp", defaultMessage: "ui.voteButton.voteUp" })) }, { children: _jsx("span", { children: button }) }))), reactions.default && Boolean(anchorEl) && !isVoting && !isLoading && (_jsx(PopperRoot, Object.assign({ id: `vote_${contributionId}_${contributionType}_popper`, className: classes.popperRoot, open: true, anchorEl: anchorEl, placement: "top", keepMounted: true }, { children: _jsx(Paper, Object.assign({ className: classes.reactionList, onMouseEnter: handleClearTimeout, onMouseLeave: handleMouseLeave }, { children: reactions.reactions
|
|
144
144
|
.filter((reaction) => !contributionVoted || (contributionVoted && contributionReaction.id !== reaction.id) ? reaction.active : reaction)
|
|
145
|
-
.map((reaction) => (_jsx(IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: _jsx(Icon, { children: _jsx("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) }), reaction.id))) })) })))] }));
|
|
145
|
+
.map((reaction) => (_jsx(Tooltip, Object.assign({ title: reaction.label }, { children: _jsx(IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: _jsx(Icon, { children: _jsx("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) })) }), reaction.id))) })) })))] }));
|
|
146
146
|
}
|