@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.80

package/lib/cjs/components/PaymentProducts/PaymentProducts.d.ts

@@ -0,0 +1,11 @@
+import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice } from '@selfcommunity/types';
+export interface PaymentProductsProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedProducts?: SCPaymentProduct[];
+    paymentOrder?: SCPaymentOrder;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+}
+export default function PaymentProducts(inProps: PaymentProductsProps): JSX.Element;

package/lib/cjs/components/PaymentProducts/PaymentProducts.js

@@ -0,0 +1,76 @@
+"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 PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const use_deep_compare_effect_1 = tslib_1.__importDefault(require("use-deep-compare-effect"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentProducts(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, contentId, contentType, content, prefetchedProducts = [], paymentOrder, onUpdatePaymentOrder } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "prefetchedProducts", "paymentOrder", "onUpdatePaymentOrder"]);
+    // CONST
+    const prefetchedProductsIds = prefetchedProducts.map((product) => product.id);
+    // STATE
+    const [products, setProducts] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    /**
+     * Fetches products list
+     */
+    const fetchProducts = (next) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const data = yield api_services_1.PaymentService.getPaymentProducts({ content_id: contentId, content_type: contentType }, Object.assign({}, (next && { url: next })));
+        return data.next ? data.results.concat(yield fetchProducts(data.next)) : data.results;
+    });
+    /**
+     * On mount, fetches products/prices list
+     */
+    (0, use_deep_compare_effect_1.default)(() => {
+        if (prefetchedProducts.length) {
+            setProducts(prefetchedProducts);
+            setLoading(false);
+        }
+        else if (contentId !== undefined && contentType) {
+            fetchProducts()
+                .then((data) => {
+                if (isMountedRef.current) {
+                    setProducts(data);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+        else if (content && contentType) {
+            setProducts(content.paywalls || []);
+            setLoading(false);
+        }
+    }, [prefetchedProductsIds, 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.jsx)(jsx_runtime_1.Fragment, { children: products.map((p, i) => ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, Object.assign({ paymentProduct: p, contentType: contentType }, (content ? { content } : { contentId }), (paymentOrder && { paymentOrder, onUpdatePaymentOrder })), i))) })) })));
+}
+exports.default = PaymentProducts;

package/lib/cjs/components/PaymentProducts/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS PaymentProductsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaymentProductsSkeleton(inProps: any): JSX.Element;

package/lib/cjs/components/PaymentProducts/Skeleton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProduct/Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    products: `${constants_1.PREFIX}-products`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS PaymentProductsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentProductsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentProductsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentProductsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function PaymentProductsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    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.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}
+exports.default = PaymentProductsSkeleton;

package/lib/cjs/components/PaymentProducts/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaymentProducts";

package/lib/cjs/components/PaymentProducts/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaymentProducts';

package/lib/cjs/components/PaymentProducts/index.d.ts

@@ -0,0 +1,3 @@
+import PaymentProducts, { PaymentProductsProps } from './PaymentProducts';
+export default PaymentProducts;
+export { PaymentProductsProps };

package/lib/cjs/components/PaymentProducts/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const PaymentProducts_1 = tslib_1.__importDefault(require("./PaymentProducts"));
+exports.default = PaymentProducts_1.default;

package/lib/cjs/components/Paywalls/Paywalls.d.ts

@@ -0,0 +1,10 @@
+import { SCContentType, SCPurchasableContent, SCPaymentPrice } from '@selfcommunity/types';
+export interface PaywallsProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedPaymentContentStatus?: SCPurchasableContent;
+    onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
+}
+export default function Paywalls(inProps: PaywallsProps): JSX.Element;

package/lib/cjs/components/Paywalls/Paywalls.js

@@ -0,0 +1,94 @@
+"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;

package/lib/cjs/components/Paywalls/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS PaywallsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaywallsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaywallsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaywallsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaywallsSkeleton(inProps: any): JSX.Element;

package/lib/cjs/components/Paywalls/Skeleton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("../PaymentProduct/Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    products: `${constants_1.PREFIX}-products`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS PaywallsSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaywallsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaywallsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaywallsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function PaywallsSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    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.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}
+exports.default = PaywallsSkeleton;

package/lib/cjs/components/Paywalls/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaywalls";

package/lib/cjs/components/Paywalls/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaywalls';

package/lib/cjs/components/Paywalls/index.d.ts

@@ -0,0 +1,3 @@
+import Paywalls, { PaywallsProps } from './Paywalls';
+export default Paywalls;
+export { PaywallsProps };

package/lib/cjs/components/Paywalls/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Paywalls_1 = tslib_1.__importDefault(require("./Paywalls"));
+exports.default = Paywalls_1.default;

package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.d.ts

@@ -0,0 +1,13 @@
+import { SCPaymentProduct, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
+export interface PaywallsConfiguratorProps {
+    className?: string;
+    contentType?: SCContentType;
+    contentId?: number | string;
+    content?: SCPurchasableContent;
+    prefetchedProducts?: SCPaymentProduct[];
+    selectedProducts?: SCPaymentProduct[];
+    onChangePaymentProducts?: (products: SCPaymentProduct[]) => void;
+    onChangeContentAccessType?: (type: string) => void;
+    disabled?: boolean;
+}
+export default function PaywallsConfigurator(inProps: PaywallsConfiguratorProps): JSX.Element;