@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.69

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 = React.forwardRef(function NoTransition(props) {
+    return _jsxs(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/PrivateMessageComponent/PrivateMessageComponent.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Grid, useMediaQuery, useTheme, styled } from '@mui/material';
-import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+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';
@@ -78,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/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -127,18 +127,18 @@ export default function PrivateMessageThreadItem(inProps) {
             let type = m.file.mimetype;
             switch (true) {
                 case type.startsWith(SCMessageFileType.IMAGE):
-                    section = (_jsx(Box, Object.assign({ className: classes.img }, { children: _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img', onClick: () => setOpenDialog(true) }) })));
+                    section = (_jsx(Box, Object.assign({ className: classes.img }, { children: _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img", onClick: () => setOpenDialog(true) }) })));
                     break;
                 case type.startsWith(SCMessageFileType.VIDEO):
                     if (!isSupportedVideoFormat(m.file.filename)) {
                         section = defaultSection;
                     }
                     else {
-                        section = (_jsxs(Box, Object.assign({ className: classNames(classes.img, classes.video) }, { children: [_jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsx(IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: _jsx(Icon, { children: "play_circle_outline" }) }))] })));
+                        section = (_jsxs(Box, Object.assign({ className: classNames(classes.img, classes.video) }, { children: [_jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), _jsx(IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: _jsx(Icon, { children: "play_circle_outline" }) }))] })));
                     }
                     break;
                 case type.startsWith(SCMessageFileType.DOCUMENT):
-                    section = (_jsxs(Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] }))] })));
+                    section = (_jsxs(Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] }))] })));
                     break;
                 default:
                     // section = <Icon>hide_image</Icon>;
@@ -159,5 +159,5 @@ export default function PrivateMessageThreadItem(inProps) {
             message.status !== SCPrivateMessageStatusType.HIDDEN && _jsx(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (_jsx(Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), _jsxs(_Fragment, { children: [hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (_jsx(Box, Object.assign({ className: classes.text }, { children: _jsx(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), _jsx(Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                             hour: 'numeric',
                             minute: 'numeric'
-                        })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), 'download') })) }))] })));
+                        })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: "100%" }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), "download") })) }))] })));
 }

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -165,17 +165,9 @@ export default function UserToastNotifications(inProps) {
              * - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
              */
             const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
-            enqueueSnackbar(getContent(data.data), {
-                preventDuplicate: true,
-                key: messageKey,
-                variant: 'notification',
-                persist: data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
-                anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-                action: null,
-                SnackbarProps: {
+            enqueueSnackbar(getContent(data.data), Object.assign(Object.assign({ preventDuplicate: true, key: messageKey, variant: 'notification', persist: data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER }, (data.data.activity_type !== SCNotificationTypologyType.NOTIFICATION_BANNER && { autoHideDuration: 10000 })), { anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, action: null, SnackbarProps: {
                     id: messageKey
-                }
-            });
+                } }));
         }
     };
     /**

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

@@ -0,0 +1,41 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback handle address
+     * @param address
+     */
+    handlePaymentMethod?: (paymentMethod: StripePaymentMethod) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodDialog(inProps: UserAddPaymentMethodDialogProps): JSX.Element;

package/lib/esm/components/UserAddPaymentMethodDialog/UserAddPaymentMethodDialog.js

@@ -0,0 +1,91 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { loadStripe } from '@stripe/stripe-js';
+import { StripeCurrency } from '../../types/payment';
+import { Box, CircularProgress } from '@mui/material';
+import { Elements } from '@stripe/react-stripe-js';
+import { getDefaultAppearanceStyle, getDefaultLocale } from '../../utils/payment';
+import UserAddPaymentMethodForm from '../UserAddPaymentMethodForm';
+const classes = {
+    root: `${PREFIX}-root`,
+    loading: `${PREFIX}-loading`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({
+    [`& .MuiDialogContent-root`]: {
+        overflowX: 'hidden'
+    },
+    [`& .${classes.loading}`]: {
+        marginTop: '200px'
+    }
+}));
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, handlePaymentMethod, open = false } = props, rest = __rest(props, ["className", "handlePaymentMethod", "open"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // STATE
+    const [isLoadingInit, setIsLoadingInit] = React.useState(true);
+    const [customer, setCustomer] = useState(null);
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && loadStripe
+        ? loadStripe(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: getDefaultLocale(intl).locale })
+        : null;
+    const theme = useTheme();
+    const elementsOptions = Object.assign(Object.assign({ mode: 'setup', currency: StripeCurrency.EUR, paymentMethodCreation: 'manual', loader: 'always' }, getDefaultAppearanceStyle(theme)), getDefaultLocale(intl));
+    const handleClose = () => {
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(null);
+    };
+    const handleSuccess = (paymentMethod) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(paymentMethod);
+    };
+    useEffect(() => {
+        /* getAccountCustomer().then((customer) => {
+                setCustomer(customer);
+                setIsLoadingInit(false);
+            }); */
+    }, []);
+    if (!isPaymentsEnabled || !scUserContext.user) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.userAddPaymentMethodDialog.title", id: "ui.userAddPaymentMethodDialog.title" }), open: open }, { children: isLoadingInit ? (_jsx(Box, Object.assign({ className: classes.loading }, { children: _jsx(CircularProgress, {}) }))) : (_jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(UserAddPaymentMethodForm, { customer: customer, handleSuccess: handleSuccess, handleClose: handleClose }) }))) })));
+}

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

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

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCUserAddPaymentMethodDialog';

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

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

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

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