@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

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

@@ -1,7 +1,11 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
 export declare type BottomNavigationProps = MuiBottomNavigationProps;
 /**
- * > API documentation for the Community-JS BottomNavigation component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the bottom navigation bar when browsing from mobile.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BottomNavigation)
 
  #### Import
 
@@ -24,4 +28,3 @@ export declare type BottomNavigationProps = MuiBottomNavigationProps;
  * @param inProps
  */
 export default function BottomNavigation(inProps: BottomNavigationProps): JSX.Element;
-//# sourceMappingURL=BottomNavigation.d.ts.map

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -1,42 +1,30 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { Badge, BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Icon, styled } from '@mui/material';
 import React, { useMemo } from 'react';
 import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
+import { SCFeatureName } from '@selfcommunity/types';
+import { iOS } from '@selfcommunity/utils';
+import ComposerIconButton from '../ComposerIconButton';
 const PREFIX = 'SCBottomNavigation';
 const classes = {
     root: `${PREFIX}-root`,
-    action: `${PREFIX}-action`
+    ios: `${PREFIX}-ios`,
+    action: `${PREFIX}-action`,
+    composer: `${PREFIX}-composer`,
 };
 const Root = styled(MuiBottomNavigation, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => {
-    var _a, _b;
-    return ({
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        backgroundColor: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main,
-        [`& .${classes.action}`]: {
-            fontSize: '1.571rem'
-        }
-    });
-});
-const PREFERENCES = [SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED, SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY];
+})(() => ({}));
 /**
- * > API documentation for the Community-JS BottomNavigation component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the bottom navigation bar when browsing from mobile.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BottomNavigation)
 
  #### Import
 
@@ -69,23 +57,21 @@ export default function BottomNavigation(inProps) {
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
     // PREFERENCES
-    const scPreferences = useSCPreferences();
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferences.preferences]);
+    const { preferences, features } = useSCPreferences();
+    // MEMO
+    const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const isIOS = useMemo(() => iOS(), []);
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest), children
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
-            scUserContext.user ? (React.createElement(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "home") })) : null,
-            (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
-                preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] ? (React.createElement(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
-            scUserContext.user ? (React.createElement(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
+            React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
+            (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
+                preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
+            React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }),
+            scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     React.createElement(Icon, null, "notifications_active")) })) : null,
-            scUserContext.user ? (React.createElement(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
+            privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },
                     React.createElement(Icon, null, "email")) })) : null
         ]));
 }
-//# sourceMappingURL=BottomNavigation.js.map

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

@@ -1,4 +1,3 @@
 import BottomNavigation, { BottomNavigationProps } from './BottomNavigation';
 export default BottomNavigation;
 export { BottomNavigationProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import BottomNavigation from './BottomNavigation';
 export default BottomNavigation;
-//# sourceMappingURL=index.js.map

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

@@ -1,5 +1,6 @@
-import { MessageProps } from './Message';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
+import { CacheStrategies } from '@selfcommunity/utils';
+import { MessageProps } from './Message';
 export interface BroadcastMessagesProps extends VirtualScrollerItemProps {
     /**
      * Id of the BroadcastMessages
@@ -22,19 +23,33 @@ export interface BroadcastMessagesProps extends VirtualScrollerItemProps {
      * @default `interaction.notification_banner`
      */
     subscriptionChannel?: string;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Disable skeleton loader
+     * @default false
      */
     disableLoader?: boolean;
+    /**
+     * View all messages initially loaded
+     * @default false
+     */
+    viewAllMessages?: boolean;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 /**
- > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
- > This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
+ * > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
  *
+ *
+ * This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BroadcastMessages)
+
  #### Import
  ```jsx
  import {BroadcastMessages} from '@selfcommunity/react-ui';
@@ -54,4 +69,3 @@ export interface BroadcastMessagesProps extends VirtualScrollerItemProps {
  * @param inProps
  */
 export default function BroadcastMessages(inProps: BroadcastMessagesProps): JSX.Element;
-//# sourceMappingURL=BroadcastMessages.d.ts.map

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -1,39 +1,18 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Button, CardContent } from '@mui/material';
+import PubSub from 'pubsub-js';
+import { useThemeProps } from '@mui/system';
 import { SCNotificationTopicType, SCNotificationTypologyType } from '@selfcommunity/types';
-import { http, Endpoints } from '@selfcommunity/api-services';
-import { Logger } from '@selfcommunity/utils';
-import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
-import { SCOPE_SC_UI } from '../../constants/Errors';
+import { CacheStrategies } from '@selfcommunity/utils';
+import { SCPreferences, useSCFetchBroadcastMessages, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Message from './Message';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { MessageSkeleton } from './Skeleton';
 import Widget from '../Widget';
-import PubSub from 'pubsub-js';
-import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCBroadcastMessages';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     boxLoadMore: `${PREFIX}-box-load-more`,
@@ -42,31 +21,16 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.boxLoadMore}`]: {
-        textAlign: 'center',
-        '& > div': {
-            paddingBottom: theme.spacing(2)
-        },
-        marginBottom: theme.spacing(2)
-    },
-    [`& .${classes.avatarLoadMore}`]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-        marginRight: theme.spacing()
-    },
-    [`& .${classes.buttonLoadMore}`]: {
-        textTransform: 'capitalize',
-        marginLeft: -10
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
 /**
- > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
- > This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
+ * > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
+ *
  *
+ * This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BroadcastMessages)
+
  #### Import
  ```jsx
  import {BroadcastMessages} from '@selfcommunity/react-ui';
@@ -91,21 +55,9 @@ export default function BroadcastMessages(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'broadcast_messages', className = null, MessageProps = {}, subscriptionChannel = `${SCNotificationTopicType.INTERACTION}.${SCNotificationTypologyType.NOTIFICATION_BANNER}`, disableLoader = false, onStateChange, onHeightChange } = props, rest = __rest(props, ["id", "className", "MessageProps", "subscriptionChannel", "disableLoader", "onStateChange", "onHeightChange"]);
-    // STATE
-    const broadcastMessagesRefreshUrl = `${Endpoints.BroadcastMessagesList.url()}?limit=3`;
-    const [loading, setLoading] = useState(null);
-    const [next, setNext] = useState(broadcastMessagesRefreshUrl);
-    const [messages, setMessages] = useState([]);
-    const [viewAll, setViewAll] = useState(false);
+    const { id = 'broadcast_messages', className = null, MessageProps = {}, subscriptionChannel = `${SCNotificationTopicType.INTERACTION}.${SCNotificationTypologyType.NOTIFICATION_BANNER}`, disableLoader = false, viewAllMessages = false, cacheStrategy = CacheStrategies.NETWORK_ONLY, onStateChange, onHeightChange } = props, rest = __rest(props, ["id", "className", "MessageProps", "subscriptionChannel", "disableLoader", "viewAllMessages", "cacheStrategy", "onStateChange", "onHeightChange"]);
     // CONTEXT
     const scUserContext = useSCUser();
-    // CONST
-    const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const unViewedMessages = messages.filter((m) => !m.viewed_at);
-    const viewedMessageCounter = messages.length - unViewedMessages.length;
-    // REFS
-    const refreshSubscription = useRef(null);
     // Compute preferences
     const scPreferences = useSCPreferences();
     const preferences = useMemo(() => {
@@ -113,66 +65,60 @@ export default function BroadcastMessages(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
+    // REFS
+    const refreshSubscription = useRef(null);
+    // STATE
+    const [viewAll, setViewAll] = useState(viewAllMessages);
+    const { data, loading, fetchMessages, setMessages } = useSCFetchBroadcastMessages({ cacheStrategy });
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const unViewedMessages = data.results.filter((m) => !m.viewed_at);
+    const viewedMessageCounter = data.count - unViewedMessages.length + 1;
     /**
      * Dispose a broadcast message
      * @param message
      */
     const handleDisposeMessage = (message) => {
-        setMessages(messages.filter((m) => m.id != message.id));
-        if (messages.length <= 1) {
+        const _data = setMessages(data.results.filter((m) => m.id != message.id));
+        if (_data.results.length <= 1) {
             fetchMessages(true);
         }
     };
     /**
-     * Fetch broadcast messages
-     * Loads until the messages are already seen
-     */
-    const performFetchMessages = (next) => __awaiter(this, void 0, void 0, function* () {
-        const response = yield http.request({
-            url: next,
-            method: Endpoints.BroadcastMessagesList.method
-        });
-        const data = response.data;
-        if (data.next && !data.results[data.results.length - 1]['viewed_at']) {
-            return { data: data.results.concat((yield performFetchMessages(data.next)).data), next: data.next };
-        }
-        return { data: data.results, next: data.next };
-    });
-    /**
-     * Fetch broadcast messages
+     * Handle mark read message
+     * @param message
      */
-    const fetchMessages = (refresh = false) => {
-        setLoading(true);
-        performFetchMessages(refresh ? broadcastMessagesRefreshUrl : next)
-            .then((res) => {
-            setMessages(refresh ? res.data : [...messages, ...res.data]);
-            setNext(res.next);
-            setLoading(false);
-            const unviewd = res.data.filter((m) => !m.viewed_at).length;
-            if (unviewd > 0) {
-                scUserContext.setUnseenNotificationBannersCounter(scUserContext.user.unseen_notification_banners_counter - unviewd);
+    const handleMarkRead = (message) => {
+        const _data = [...data.results];
+        data.results.map((m, i) => {
+            if (m.id === message.id) {
+                _data[i] = Object.assign(Object.assign({}, m), { viewed_at: new Date() });
             }
-        })
-            .catch((error) => {
-            Logger.error(SCOPE_SC_UI, error);
         });
+        scUserContext.setUnseenNotificationBannersCounter(scUserContext.user.unseen_notification_banners_counter - 1);
+        setMessages(_data);
     };
     /**
      * if messages.length < unViewedMessages.length show other message
      * if the difference between the 2 arrays is small fetch remote messages
      */
-    const fetchOtherMessages = () => {
+    const fetchOtherMessages = useMemo(() => () => {
         setViewAll(true);
-        if ((next && viewAll) || (next && !viewAll && viewedMessageCounter <= 2)) {
+        if ((data.next && viewAll) || (data.next && !viewAll && viewedMessageCounter <= 2)) {
             fetchMessages();
         }
-    };
+    }, [setViewAll, viewAll, viewedMessageCounter, data.next, fetchMessages]);
     /**
      * On mount, fetch first page of notifications
      */
     useEffect(() => {
-        if (authUserId !== null) {
-            fetchMessages();
+        let _t;
+        if (authUserId !== null && cacheStrategy !== CacheStrategies.CACHE_FIRST) {
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            _t = setTimeout(fetchMessages);
+            return () => {
+                _t && clearTimeout(_t);
+            };
         }
     }, [authUserId]);
     /**
@@ -180,6 +126,7 @@ export default function BroadcastMessages(inProps) {
      */
     const subscriber = (msg, data) => {
         fetchMessages(true);
+        setViewAll(false);
     };
     /**
      * When a ws notification arrives, update data
@@ -194,18 +141,17 @@ export default function BroadcastMessages(inProps) {
      * Feed virtual update
      */
     useEffect(() => {
-        onStateChange && onStateChange({ disableLoader: true });
+        onStateChange && onStateChange({ viewAllMessages: viewAll, cacheStrategy: CacheStrategies.CACHE_FIRST, disableLoader: true });
         onHeightChange && onHeightChange();
-    }, [messages.length, loading]);
-    const messagesToShow = [...unViewedMessages, ...messages.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
+    }, [data.results.length, loading, viewAll, cacheStrategy]);
+    const messagesToShow = [...unViewedMessages, ...data.results.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
     return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
         messagesToShow.map((message, index) => (React.createElement(Box, { key: index },
-            React.createElement(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage }))))),
+            React.createElement(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead }))))),
         loading && !disableLoader && React.createElement(MessageSkeleton, null),
-        loading !== null && !loading && (next || (viewedMessageCounter > 0 && !viewAll)) && (React.createElement(Widget, { className: classes.boxLoadMore },
+        loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (React.createElement(Widget, { className: classes.boxLoadMore },
             React.createElement(CardContent, null,
                 React.createElement(Button, { variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } },
                     React.createElement(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }),
                     React.createElement(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })))))));
 }
-//# sourceMappingURL=BroadcastMessages.js.map

package/lib/esm/components/BroadcastMessages/Message.d.ts

@@ -16,6 +16,11 @@ export interface MessageProps extends CardProps {
      * Banner of the message
      */
     message: SCBroadcastMessageType;
+    /**
+     * Bypass mark read message
+     * @default false
+     */
+    disableMarkRead?: boolean;
     /**
      * Handler triggered when message is closed
      * @default null
@@ -37,4 +42,3 @@ export interface MessageProps extends CardProps {
     [p: string]: any;
 }
 export default function Message(props: MessageProps): JSX.Element;
-//# sourceMappingURL=Message.d.ts.map

package/lib/esm/components/BroadcastMessages/Message.js

@@ -1,15 +1,5 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useContext, useMemo, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Avatar, Box, CardContent, CardHeader, CardMedia, Chip, CircularProgress, Fade, IconButton, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
@@ -19,12 +9,12 @@ import MarkRead from '../../shared/MarkRead';
 import Widget from '../Widget';
 import { SCBroadcastMessageTemplateType } from '../../types';
 import classNames from 'classnames';
-import { red } from '@mui/material/colors';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { Link, SCPreferences, SCPreferencesContext, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
-const PREFIX = 'SCBroadcastMessage';
+import { PREFIX } from './constants';
 const classes = {
+    root: `${PREFIX}-message-root`,
     header: `${PREFIX}-header`,
     title: `${PREFIX}-title`,
     media: `${PREFIX}-media`,
@@ -36,39 +26,12 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    [`& .${classes.header} .MuiAvatar-img`]: {
-        objectFit: 'fill'
-    },
-    [`& .${classes.title}`]: {
-        padding: '4px 16px'
-    },
-    [`& .${classes.listItemSnippet}`]: {
-        padding: '0px 5px',
-        alignItems: 'center'
-    },
-    [`& .${classes.listItemSnippetNew}`]: {
-        borderLeft: '2px solid red'
-    },
-    [`& .${classes.messageIconWrap}`]: {
-        minWidth: 'auto',
-        paddingRight: 10
-    },
-    [`& .${classes.messageIconSnippet}`]: {
-        backgroundColor: red[500],
-        color: '#FFF',
-        width: 30,
-        height: 30
-    }
-}));
+    slot: 'MessageRoot'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
 export default function Message(props) {
     // PROPS
-    const { id = `message_${props.message.id}`, className, message, onClose = null, onRead = null, template = SCBroadcastMessageTemplateType.DETAIL } = props, rest = __rest(props, ["id", "className", "message", "onClose", "onRead", "template"]);
+    const { id = `message_${props.message.id}`, className, message, disableMarkRead = false, onClose = null, onRead = null, template = SCBroadcastMessageTemplateType.DETAIL } = props, rest = __rest(props, ["id", "className", "message", "disableMarkRead", "onClose", "onRead", "template"]);
     // STATE
     const [open, setOpen] = useState(message.disposed_at === null);
     const [closing, setClosing] = useState(false);
@@ -83,6 +46,9 @@ export default function Message(props) {
         return _preferences;
     }, [scPrefernces.preferences]);
     // HANDLERS
+    /**
+     * Handle dispose message
+     */
     const handleClose = () => {
         setClosing(true);
         http
@@ -102,16 +68,28 @@ export default function Message(props) {
             Logger.error(SCOPE_SC_UI, error);
         });
     };
+    /**
+     * Handle on read message
+     * @param res
+     */
+    const handleOnRead = (res) => {
+        if (res.status < 300) {
+            onRead && onRead(message);
+        }
+    };
+    useEffect(() => {
+        setOpen(message.disposed_at === null);
+    }, [message]);
     // RENDER
     const renderContent = (banner) => {
         return (React.createElement(React.Fragment, null,
             React.createElement(CardContent, { className: classes.title },
                 React.createElement(Typography, { variant: "h6" }, banner.title)),
             banner.image && React.createElement(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
-            React.createElement(CardContent, { className: classes.content },
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, banner.body_text),
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" },
-                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))));
+            (banner.body_text || banner.link_text) && (React.createElement(CardContent, { className: classes.content },
+                banner.body_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
+                banner.link_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" },
+                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
     };
     // Banner
     const { banner } = message;
@@ -120,10 +98,10 @@ export default function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return (React.createElement(Root, Object.assign({ id: id, className: className }, rest),
+        return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
             React.createElement(Fade, { in: open, unmountOnExit: true },
                 React.createElement(Box, null,
-                    message.viewed_at === null && React.createElement(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] } }),
+                    message.viewed_at === null && !disableMarkRead && (React.createElement(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })),
                     React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === SCBroadcastMessageTemplateType.DETAIL && (React.createElement(IconButton, { "aria-label": "close", onClick: handleClose, disabled: closing }, closing ? React.createElement(CircularProgress, { size: 20 }) : React.createElement(Icon, null, "close"))), title: React.createElement(Chip, { color: "secondary", size: "small", label: React.createElement(FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }),
                     renderContent(banner)))));
     }
@@ -138,4 +116,3 @@ export default function Message(props) {
             React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
                     React.createElement(Typography, { component: "span", color: "inherit" }, banner.title)) }))));
 }
-//# sourceMappingURL=Message.js.map

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

@@ -9,17 +9,17 @@
 
  #### Component Name
 
- The name `SCBroadcastMessageSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-message-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessageSkeleton-root|Styles applied to the root element.|
- |header|.SCBroadcastMessageSkeleton-header|Styles applied to the header element.|
- |title|.SCBroadcastMessageSkeleton-title|Styles applied to the title element.|
- |media|.SCBroadcastMessageSkeleton-media|Styles applied to the media element.|
- |content|.SCBroadcastMessageSkeleton-content|Styles applied to the content section.|
+ |root|.SCBroadcastMessages-message-skeleton-root|Styles applied to the root element.|
+ |header|.SCBroadcastMessages-header|Styles applied to the header element.|
+ |title|.SCBroadcastMessages-title|Styles applied to the title element.|
+ |media|.SCBroadcastMessages-media|Styles applied to the media element.|
+ |content|.SCBroadcastMessages-content|Styles applied to the content section.|
  *
  */
 export declare function MessageSkeleton(props: any): JSX.Element;
@@ -34,14 +34,13 @@ export declare function MessageSkeleton(props: any): JSX.Element;
 
  #### Component Name
 
- The name `SCBroadcastMessagesSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessagesSkeleton-root|Styles applied to the root element.|
+ |root|.SCBroadcastMessages-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function BroadcastMessagesSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map