@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

package/lib/esm/components/PaywallsConfigurator/Skeleton.js

@@ -0,0 +1,43 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Grid, useMediaQuery, useTheme, styled } from '@mui/material';
+import { PREFIX } from './constants';
+import classNames from 'classnames';
+import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    products: `${PREFIX}-products`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({
+    overflow: 'hidden'
+}));
+/**
+ * > API documentation for the Community-JS PaywallsConfiguratorSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaywallsConfiguratorSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaywallsConfiguratorSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaywallsConfiguratorSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function PaywallsConfiguratorSkeleton(inProps) {
+    const { className, PaymentProductSkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "PaymentProductSkeletonProps"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+}

package/lib/esm/components/PaywallsConfigurator/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const PREFIX = "SCPaywallsConfigurator";
+export declare enum ContentAccessType {
+    FREE = "free",
+    PAID = "paid"
+}

package/lib/esm/components/PaywallsConfigurator/constants.js

@@ -0,0 +1,6 @@
+export const PREFIX = 'SCPaywallsConfigurator';
+export var ContentAccessType;
+(function (ContentAccessType) {
+    ContentAccessType["FREE"] = "free";
+    ContentAccessType["PAID"] = "paid";
+})(ContentAccessType || (ContentAccessType = {}));

package/lib/esm/components/PaywallsConfigurator/index.d.ts

@@ -0,0 +1,4 @@
+import PaywallsConfigurator, { PaywallsConfiguratorProps } from './PaywallsConfigurator';
+import PaywallsConfiguratorSkeleton from './Skeleton';
+export default PaywallsConfigurator;
+export { PaywallsConfiguratorProps, PaywallsConfiguratorSkeleton };

package/lib/esm/components/PaywallsConfigurator/index.js

@@ -0,0 +1,4 @@
+import PaywallsConfigurator from './PaywallsConfigurator';
+import PaywallsConfiguratorSkeleton from './Skeleton';
+export default PaywallsConfigurator;
+export { PaywallsConfiguratorSkeleton };

package/lib/esm/components/PaywallsDialog/PaywallsDialog.d.ts

@@ -0,0 +1,8 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaywallsProps } from '../Paywalls/Paywalls';
+export interface PaywallsDialogProps extends BaseDialogProps {
+    className?: string;
+    PaywallsComponentProps: PaywallsProps;
+    disableInitialTransition?: boolean;
+}
+export default function PaywallsDialog(inProps: PaywallsDialogProps): JSX.Element;

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Slide, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage } from 'react-intl';
+import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import Paywalls from '../Paywalls';
+const PREFIX = 'SCPaywallsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(BaseDialog, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
+});
+export default function PaywallsDialog(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, PaywallsComponentProps, disableInitialTransition = false } = props, rest = __rest(props, ["className", "PaywallsComponentProps", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
+            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
+}

package/lib/esm/components/PaywallsDialog/index.d.ts

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

package/lib/esm/components/PaywallsDialog/index.js

@@ -0,0 +1,2 @@
+import PaywallsDialog from './PaywallsDialog';
+export default PaywallsDialog;

package/lib/esm/components/PdfPreview/PdfPreview.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export declare const PdfMaxWidth = 1280;
+export interface PdfPreviewProps {
+    className?: string;
+    pdfUrl?: string;
+    maxWidth?: number;
+}
+export default function PdfPreview(inProps: PdfPreviewProps): ReactElement | null;

package/lib/esm/components/PdfPreview/PdfPreview.js

@@ -0,0 +1,90 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Box, styled, useMediaQuery, useTheme } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { Document, Page, pdfjs } from 'react-pdf';
+import { Logger } from '@selfcommunity/utils';
+import Skeleton from './Skeleton';
+import { http } from '@selfcommunity/api-services';
+import { useResizeObserver, useSCUser } from '@selfcommunity/react-core';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+const PREFIX = 'SCPdfPreview';
+const classes = {
+    root: `${PREFIX}-root`,
+    documentPdfWrapper: `${PREFIX}-document-pdf-wrapper`,
+    documentPdfLink: `${PREFIX}-document-pdf-link`,
+    documentPdf: `${PREFIX}-document-pdf`,
+    documentPdfPage: `${PREFIX}-document-pdf-page`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+// Default options conf PDFViewer
+const options = {
+    cMapUrl: '/cmaps/',
+    standardFontDataUrl: '/standard_fonts/',
+    externalLinkTarget: '_blank',
+    loading: _jsx(Skeleton, {})
+};
+export const PdfMaxWidth = 1280;
+const resizeObserverOptions = {};
+export default function PdfPreview(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, pdfUrl, maxWidth = PdfMaxWidth } = props, rest = __rest(props, ["className", "pdfUrl", "maxWidth"]);
+    // STATE
+    const [isLoading, setIsLoading] = useState(true);
+    const [url, setUrl] = useState(null);
+    const [numPages, setNumPages] = useState();
+    const [containerRef, setContainerRef] = useState(null);
+    const [containerWidth, setContainerWidth] = useState(maxWidth);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const onResize = useCallback((entries) => {
+        const [entry] = entries;
+        if (entry) {
+            setContainerWidth(entry.contentRect.width);
+        }
+    }, []);
+    useResizeObserver(containerRef, resizeObserverOptions, onResize);
+    function onDocumentLoadSuccess({ numPages: nextNumPages }) {
+        setNumPages(nextNumPages);
+        setIsLoading(false);
+    }
+    const fetchBlob = useCallback((url) => __awaiter(this, void 0, void 0, function* () {
+        const response = yield http.request({ url, responseType: 'blob' });
+        return response.data;
+    }), [scUserContext.user, scUserContext.session]);
+    useEffect(() => {
+        if (pdfUrl) {
+            fetchBlob(pdfUrl)
+                .then((res) => {
+                const blob = new Blob([res], { type: 'application/pdf' });
+                const _url = URL.createObjectURL(blob);
+                setUrl(_url);
+                setIsLoading(false);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [scUserContext.user, scUserContext.session]);
+    function renderDocument() {
+        return (_jsx(Document, Object.assign({ onLoadSuccess: onDocumentLoadSuccess, loading: _jsx(Skeleton, {}), file: url, className: classes.documentPdf, options: options }, { children: Array.from({ length: numPages }, (_el, index) => {
+                return (_jsx(Page, { className: classes.documentPdfPage, pageNumber: index + 1, width: containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth, renderTextLayer: false, scale: !isMobile ? 0.7 : undefined }, `page_${index + 1}`));
+            }) })));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.documentPdfWrapper, ref: setContainerRef }, { children: isLoading || !pdfUrl ? (_jsx(Box, Object.assign({ className: classes.documentPdfPage }, { children: _jsx(Skeleton, { maxWidth: maxWidth }) }))) : (_jsx(_Fragment, { children: renderDocument() })) })) })));
+}

package/lib/esm/components/PdfPreview/Skeleton.d.ts

@@ -0,0 +1,5 @@
+export interface InvoicePdfViewSkeletonProps {
+    className?: string;
+    maxWidth?: number;
+}
+export default function PdfPreviewSkeleton(inProps: InvoicePdfViewSkeletonProps): JSX.Element | null;

package/lib/esm/components/PdfPreview/Skeleton.js

@@ -0,0 +1,35 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Skeleton, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import { PdfMaxWidth } from './PdfPreview';
+import classNames from 'classnames';
+const PREFIX = 'PdfPreviewSkeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    circularProgress: `${PREFIX}-circular-progress`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    minHeight: 400,
+    [`& .${classes.circularProgress}`]: {
+        position: 'absolute'
+    }
+}));
+export default function PdfPreviewSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, maxWidth = PdfMaxWidth } = props, rest = __rest(props, ["className", "maxWidth"]);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), sx: { width: maxWidth } }, rest, { children: [maxWidth < 1024 && _jsx(Skeleton, { variant: "rounded", sx: { height: (maxWidth * 3.508) / 2.48, width: maxWidth } }), _jsx(CircularProgress, { color: "primary", className: classes.circularProgress })] })));
+}

package/lib/esm/components/PdfPreview/index.d.ts

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

package/lib/esm/components/PdfPreview/index.js

@@ -0,0 +1,2 @@
+import PdfPreview from './PdfPreview';
+export default PdfPreview;

package/lib/esm/components/PdfPreviewDialog/PdfPreviewDialog.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PdfPreviewProps } from '../PdfPreview';
+export interface PdfPreviewDialogProps extends BaseDialogProps {
+    className?: string;
+    title: string | React.ReactElement;
+    PdfPreviewComponentProps: PdfPreviewProps;
+    pdfUrl: string;
+    disableInitialTransition?: boolean;
+}
+export default function PdfPreviewDialog(inProps: PdfPreviewDialogProps): JSX.Element;

package/lib/esm/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -0,0 +1,60 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AppBar, Grid, IconButton, Slide, Icon, Toolbar, Typography, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import BaseDialog from '../../shared/BaseDialog';
+import PdfPreview from '../PdfPreview';
+import { http } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+const PREFIX = 'SCPdfPreviewDialog';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(BaseDialog, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
+export default function PdfPreviewDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, title, pdfUrl, disableInitialTransition = false, onClose, PdfPreviewComponentProps = {} } = props, rest = __rest(props, ["className", "title", "pdfUrl", "disableInitialTransition", "onClose", "PdfPreviewComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    /**
+     * handle download pdf
+     */
+    const handleDownload = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const response = yield http.request({ url: pdfUrl, responseType: 'blob' });
+            const blob = new Blob([response.data], { type: 'application/pdf' });
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'order.pdf';
+            link.click();
+            // Cleanup
+            window.URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+        }
+    });
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsxs(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [_jsx(AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: _jsxs(Toolbar, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && (_jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: _jsx(Icon, { children: "download" }) }))), _jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: _jsx(Icon, { children: "close" }) }))] }) })), _jsx(Grid, Object.assign({ container: true, className: classes.content }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+}

package/lib/esm/components/PdfPreviewDialog/index.d.ts

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

package/lib/esm/components/PdfPreviewDialog/index.js

@@ -0,0 +1,2 @@
+import PdfPreviewDialog from './PdfPreviewDialog';
+export default PdfPreviewDialog;

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Backdrop, Box, Button, Collapse, Divider, Grid, Icon, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { Backdrop, Box, Button, Collapse, Divider, Grid, Icon, IconButton, Stack, Tooltip, Typography, styled, Grow } from '@mui/material';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Link, SCUserContext, UserUtils, useSCContext } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
@@ -12,7 +11,6 @@ import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { CONTACT_PROD, CONTACT_STAGE, HUB_PROD, HUB_STAGE, PREFIX } from './constants';
 import LogoPlaceholder from '../../assets/logo';
-import Grow from '@mui/material/Grow';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,

package/lib/esm/components/PlatformWidget/Skeleton.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { PREFIX } from './constants';
 import Widget from '../Widget';
-import { Grid } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Grid, styled, Skeleton } from '@mui/material';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     title: `${PREFIX}-skeleton-title`,

package/lib/esm/components/PollSuggestionWidget/PollSnippet/PollSnippet.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Button, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';

package/lib/esm/components/PollSuggestionWidget/PollSnippet/Skeleton.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Skeleton, styled, useTheme } from '@mui/material';
 import BaseItem from '../../../shared/BaseItem';
 const PREFIX = 'SCPollSnippetSkeleton';
 const classes = {

package/lib/esm/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCCache, useSCUser } from '@selfcommunity/react-core';

package/lib/esm/components/PollSuggestionWidget/Skeleton.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
-import { CardContent, List, ListItem } from '@mui/material';
+import { CardContent, List, ListItem, styled, Skeleton } from '@mui/material';
 import { PollSnippetSkeleton } from './PollSnippet';
-import Skeleton from '@mui/material/Skeleton';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Grid, useMediaQuery, useTheme } from '@mui/material';
-import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { Grid, useMediaQuery, useTheme, styled } from '@mui/material';
+import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { SCFeatureName, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
+import { SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
 import PrivateMessageThread from '../PrivateMessageThread';
 import PrivateMessageSnippets from '../PrivateMessageSnippets';
 import { PREFIX } from './constants';
@@ -79,7 +78,8 @@ export default function PrivateMessageComponent(inProps) {
         return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
     };
     // MEMO
-    const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const authUserId = useMemo(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
     useEffect(() => {
         setObj(id !== null && id !== void 0 ? id : null);

package/lib/esm/components/PrivateMessageComponent/Skeleton.d.ts

@@ -6,7 +6,7 @@ interface PrivateMessageComponentSkeletonMap {
      */
     className?: string;
 }
-export type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
+export declare type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
 

package/lib/esm/components/PrivateMessageComponent/Skeleton.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Grid, useMediaQuery, useTheme } from '@mui/material';
+import { Grid, useMediaQuery, useTheme, styled } from '@mui/material';
 import PrivateMessageSnippetsSkeleton from '../PrivateMessageSnippets/Skeleton';
 import PrivateMessageThreadSkeleton from '../PrivateMessageThread/Skeleton';
 import classNames from 'classnames';

package/lib/esm/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { asUploadButton } from '@rpldy/upload-button';
 import React, { forwardRef, useContext, useState } from 'react';
-import { Alert, AlertTitle, Box, CardContent, CardHeader, Fade, IconButton, ImageListItemBar, List, ListItem, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Alert, AlertTitle, Box, CardContent, CardHeader, Fade, IconButton, ImageListItemBar, List, ListItem, Typography, Icon, styled } from '@mui/material';
 import ChunkedUploady from '@rpldy/chunked-uploady';
 import { SCMessageFileType } from '@selfcommunity/types';
 import { Endpoints } from '@selfcommunity/api-services';
 import { SCContext } from '@selfcommunity/react-core';
-import { styled } from '@mui/material/styles';
 import Widget from '../../Widget';
 import MessageChunkUploader from '../../../shared/MessageChunkUploader';
 import UploadDropZone from '@rpldy/upload-drop-zone';

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Alert, Box, IconButton, TextField } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Alert, Box, IconButton, TextField, styled, Icon } from '@mui/material';
 import classNames from 'classnames';
 import MessageMediaUploader from './MessageMediaUploader';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

package/lib/esm/components/PrivateMessageEditor/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GenericSkeleton } from '../Skeleton';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -1,10 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { SwipeableDrawer, MenuItem, ListItemIcon, IconButton, Menu, useTheme, useMediaQuery, List, ListItem } from '@mui/material';
+import { SwipeableDrawer, MenuItem, ListItemIcon, IconButton, Menu, useTheme, useMediaQuery, List, ListItem, styled, Icon } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';

package/lib/esm/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, ListItem } from '@mui/material';
+import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, ListItem, styled } from '@mui/material';
 import PrivateMessageSnippetItemSkeleton from './Skeleton';
 import { useIntl } from 'react-intl';
 import { SCPrivateMessageStatusType } from '@selfcommunity/types';

package/lib/esm/components/PrivateMessageSnippetItem/Skeleton.js

@@ -1,10 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import { useTheme } from '@mui/material';
+import { useTheme, styled, ListItem, ListItemAvatar, ListItemText, Skeleton } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Button, Card, CardContent, Icon, IconButton, List, TextField, useTheme } from '@mui/material';
+import { Button, Card, CardContent, Icon, IconButton, List, TextField, useTheme, styled, useMediaQuery } from '@mui/material';
 import PubSub from 'pubsub-js';
 import { SCNotificationTopicType, SCNotificationTypologyType, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
 import PrivateMessageSnippetsSkeleton from './Skeleton';
@@ -13,7 +12,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCUserContext, useSCFetchPrivateMessageSnippets } from '@selfcommunity/react-core';
 import { CacheStrategies } from '@selfcommunity/utils';
 import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { PREFIX } from './constants';
 const messages = defineMessages({
     placeholder: {

package/lib/esm/components/PrivateMessageSnippets/Skeleton.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import List from '@mui/material/List';
-import { styled } from '@mui/material/styles';
 import PrivateMessageSnippetItemSkeleton from '../PrivateMessageSnippetItem/Skeleton';
-import { Button, Card, CardContent, Skeleton, Stack } from '@mui/material';
+import { Button, Card, CardContent, Skeleton, Stack, List, styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -1,19 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Endpoints, http, PrivateMessageService } from '@selfcommunity/api-services';
 import { SCUserContext, UserUtils, useSCFetchUser } from '@selfcommunity/react-core';
 import { SCNotificationTopicType, SCNotificationTypologyType, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
 import PrivateMessageThreadItem, { PrivateMessageThreadItemSkeleton } from '../PrivateMessageThreadItem';
 import PubSub from 'pubsub-js';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Avatar, Box, Card, CardContent, IconButton, List, ListItemAvatar, ListSubheader, TextField, Typography } from '@mui/material';
+import { Avatar, Box, Card, CardContent, IconButton, List, ListItemAvatar, ListSubheader, TextField, Typography, styled, Autocomplete, Icon } from '@mui/material';
 import PrivateMessageEditor from '../PrivateMessageEditor';
-import Autocomplete from '@mui/material/Autocomplete';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import Icon from '@mui/material/Icon';
 import PrivateMessageThreadSkeleton from './Skeleton';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { groupBy, Logger } from '@selfcommunity/utils';