@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
95 lines (94 loc) • 5.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../constants/Errors");
const PaymentProducts_1 = tslib_1.__importDefault(require("../PaymentProducts"));
const react_intl_1 = require("react-intl");
const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
const payment_1 = require("../../utils/payment");
const classes = {
root: `${constants_1.PREFIX}-root`,
error: `${constants_1.PREFIX}-error`
};
const Root = (0, material_1.styled)(material_1.Box, {
slot: 'Root',
name: constants_1.PREFIX
})(({ theme }) => ({}));
function Paywalls(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className, contentId, contentType, content, prefetchedPaymentContentStatus, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "prefetchedPaymentContentStatus", "onUpdatePaymentOrder"]);
// STATE
const [products, setProducts] = (0, react_1.useState)([]);
const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
const [loading, setLoading] = (0, react_1.useState)(true);
// HOOKS
const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
const intl = (0, react_intl_1.useIntl)();
// Check if the payment price of the purchase is in the current list
const isPricePurchasedIncluded = (0, react_1.useMemo)(() => {
let _included = false;
if (!products.length || !paymentOrder) {
return true;
}
products.map((p) => {
if (p.payment_prices) {
const _ids = p.payment_prices.map((price) => price.id);
if (_ids.indexOf(paymentOrder.payment_price.id) > -1) {
_included = _included || true;
}
}
});
return _included;
}, [products, paymentOrder]);
/**
* On mount, fetch payment content status
*/
(0, react_1.useEffect)(() => {
if (prefetchedPaymentContentStatus) {
setProducts(prefetchedPaymentContentStatus.paywalls);
setPaymentOrder(prefetchedPaymentContentStatus.payment_order);
setLoading(false);
}
else if (content && contentType) {
setProducts(content.paywalls || []);
setPaymentOrder(content.payment_order || null);
setLoading(false);
}
else if (contentId !== undefined && contentType) {
api_services_1.PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
.then((data) => {
if (isMountedRef.current) {
setProducts(data.paywalls.map((p) => p.payment_product));
setPaymentOrder(data.payment_order);
setLoading(false);
}
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
}, [prefetchedPaymentContentStatus, contentId, contentType]);
if (!isPaymentsEnabled) {
return null;
}
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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PaymentProducts_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedProducts: products, paymentOrder: paymentOrder }, (paymentOrder && { paymentOrder, onUpdatePaymentOrder }))), paymentOrder && !isPricePurchasedIncluded && ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywalls.priceNotIncluded", defaultMessage: "ui.paywalls.priceNotIncluded" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.paywalls.contentPurchasedAt", id: "ui.paywalls.contentPurchasedAt", values: {
purchasedAt: intl.formatDate(new Date(paymentOrder.created_at), { day: 'numeric', year: 'numeric', month: 'long' }),
price: (0, payment_1.getConvertedAmount)(paymentOrder.payment_price)
} }) })), (0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: paymentOrder.payment_price.payment_product, contentType: contentType }, (content ? { content } : { contentId })))] })))] })) })));
}
exports.default = Paywalls;