@fyno/inapp-react
Version:
React SDK for invoking Fyno inapp notifications center
1,273 lines (1,267 loc) • 74.8 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var toast = require('react-hot-toast');
var toast__default = _interopDefault(toast);
var React = require('react');
var React__default = _interopDefault(React);
var Box = _interopDefault(require('@mui/material/Box'));
var socketIO = _interopDefault(require('socket.io-client'));
var parse = _interopDefault(require('html-react-parser'));
var iconsMaterial = require('@mui/icons-material');
var lab = require('@mui/lab');
var material = require('@mui/material');
var reactIntersectionObserver = require('react-intersection-observer');
var OpenInNewIcon = _interopDefault(require('@mui/icons-material/OpenInNew'));
var moment = _interopDefault(require('moment'));
var useSound = _interopDefault(require('use-sound'));
var styles = require('@mui/material/styles');
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var DocumentComponent = function DocumentComponent(_ref) {
var _temp$docType, _temp$docType2, _temp$docType3;
var _ref$docType = _ref.docType,
docType = _ref$docType === void 0 ? 'txt' : _ref$docType;
var theme = material.useTheme();
var isDarkMode = theme.palette.mode === 'dark';
var temp = {
pdf: {
iconColor: isDarkMode ? 'rgba(172, 82, 82, 1)' : 'rgba(212, 121, 121, 1)',
background: isDarkMode ? 'rgba(172, 82, 82, 0.2)' : 'rgba(218, 118, 118, 0.15)',
title: 'PDF'
},
xlsx: {
iconColor: isDarkMode ? 'rgba(51, 143, 104, 1)' : 'rgba(85 ,149 ,121,1)',
background: isDarkMode ? 'rgba(51, 143, 104, 0.2)' : 'rgba(69, 125, 101, 0.15)',
title: 'XLSX'
},
xls: {
iconColor: isDarkMode ? 'rgba(51, 143, 104, 1)' : 'rgba(85, 149, 121, 1)',
background: isDarkMode ? 'rgba(51, 143, 104, 0.2)' : 'rgba(69, 125, 101, 0.15)',
title: 'XLS'
},
docx: {
iconColor: isDarkMode ? 'rgba(106, 159, 205, 1)' : 'rgba(101, 162, 219, 1)',
background: isDarkMode ? 'rgba(106, 159, 205, 0.2)' : 'rgba(123, 175, 225, 0.15)',
title: 'DOCX'
},
doc: {
iconColor: isDarkMode ? 'rgba(106, 159, 205, 1)' : 'rgba(101, 162, 219, 1)',
background: isDarkMode ? 'rgba(106, 159, 205, 0.2)' : 'rgba(123, 175, 225, 0.15)',
title: 'DOC'
},
txt: {
iconColor: isDarkMode ? 'rgba(185, 168, 75, 1)' : 'rgba(201, 184, 91, 1)',
background: isDarkMode ? 'rgba(185, 168, 75, 0.2)' : 'rgba(206, 192, 116, 0.15)',
title: 'TXT'
}
};
var boxStyles = {
width: '50px',
height: '50px',
borderRadius: 1,
background: ((_temp$docType = temp[docType]) === null || _temp$docType === void 0 ? void 0 : _temp$docType.background) || theme.palette.action.selected,
color: ((_temp$docType2 = temp[docType]) === null || _temp$docType2 === void 0 ? void 0 : _temp$docType2.iconColor) || theme.palette.action.active,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
};
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: _extends({}, boxStyles)
}, /*#__PURE__*/React__default.createElement(iconsMaterial.LibraryBooks, {
fontSize: "small"
}), /*#__PURE__*/React__default.createElement(material.Typography, {
sx: {
fontSize: '0.6rem'
}
}, ((_temp$docType3 = temp[docType]) === null || _temp$docType3 === void 0 ? void 0 : _temp$docType3.title) || docType.toUpperCase()));
};
var AttachmentComponent = function AttachmentComponent(_ref2) {
var type = _ref2.type,
attachmentsObject = _ref2.attachmentsObject,
showBlur = _ref2.showBlur;
var attachment = (attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.attachment) || '';
var isDocument = (attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.type) === 'Document' || false;
var docType = isDocument ? attachment === null || attachment === void 0 ? void 0 : attachment.substring(attachment.lastIndexOf('.') + 1) : null;
switch (type) {
case 'Image':
return /*#__PURE__*/React__default.createElement("img", {
alt: "image",
src: attachment,
width: "50rem",
height: "50rem",
style: {
borderRadius: 5
}
});
case 'Video':
return /*#__PURE__*/React__default.createElement("video", {
src: attachment,
width: "50rem",
height: "50rem",
style: {
borderRadius: 5
}
});
case 'Document':
return /*#__PURE__*/React__default.createElement(DocumentComponent, {
docType: docType,
showBlur: showBlur
});
default:
return null;
}
};
var preview = function preview(value, list) {
if (value) {
var preview_val = value;
var _loop = function _loop(key) {
var _preview_val, _preview_val2;
var regex = new RegExp(key, list[key].scope);
preview_val = typeof preview_val === 'string' ? (_preview_val = preview_val) === null || _preview_val === void 0 ? void 0 : _preview_val.replace(regex, list[key]["with"]) : (_preview_val2 = preview_val) === null || _preview_val2 === void 0 ? void 0 : _preview_val2.map(function (item) {
return item === null || item === void 0 ? void 0 : item.replace(regex, list[key]["with"]);
});
};
for (var key in list) {
_loop(key);
}
var tt_regex = /(<tt style="word-wrap: break-word; white-space: pre-wrap; word-break: break-word;">(?:\n|.)+?<\/tt>)/gm;
var m;
var replace = [];
var replace_with = [];
while ((m = tt_regex.exec(preview_val)) !== null) {
if (m.index === tt_regex.lastIndex) {
tt_regex.lastIndex++;
}
var replace_with_temp = m[0].replace(/<i>|<\/i>?/gm, '_').replace(/<b>|<\/b>?/gm, '*').replace(/<s>|<\/s>?/gm, '~');
if (m[0] !== replace_with_temp) {
replace.push(m[0]);
replace_with.push(replace_with_temp);
}
}
for (var i = 0; i < (replace === null || replace === void 0 ? void 0 : replace.length); i++) {
preview_val = preview_val.replace(replace[i], replace_with[i]);
}
return preview_val;
} else {
return '';
}
};
var MainBody = function MainBody(_ref3) {
var body = _ref3.body,
title = _ref3.title;
var theme = material.useTheme();
var list = {
'&': {
scope: 'g',
"with": '&'
},
'<': {
scope: 'g',
"with": '<'
},
'>': {
scope: 'g',
"with": '>'
},
'"': {
scope: 'g',
"with": '"'
},
'\n': {
scope: 'g',
"with": '<br/>'
},
'\\*(\\S(?:.*?)\\S|\\S)\\*': {
scope: 'g',
"with": '<b>$1</b>'
},
'\\b_(\\S(?:.*?)\\S|\\S)_\\b': {
scope: 'g',
"with": '<i>$1</i>'
},
'~(\\S(?:.*?)\\S|\\S)~': {
scope: 'g',
"with": '<s>$1</s>'
},
'```((?:\\n|.)*?)```': {
scope: 'gm',
"with": '<tt style="word-wrap: break-word; white-space: pre-wrap; word-break: break-word;">$1</tt>'
}
};
var renderBody = preview(body, list);
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
gap: 2,
wordWrap: 'break-word'
}
}, /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Typography, {
fontSize: "0.85rem",
fontWeight: 600,
color: theme.palette.text.primary
}, title), /*#__PURE__*/React__default.createElement(material.Typography, {
fontSize: "0.8rem",
fontWeight: 200,
color: theme.palette.text.primary
}, parse(renderBody))));
};
var NotificationFooter = function NotificationFooter(_ref4) {
var _theme$palette, _theme$palette$error;
var createdAt = _ref4.createdAt,
msg = _ref4.msg;
var theme = material.useTheme();
var _useNotificationsHome = useNotificationsHomeContext(),
_useNotificationsHome2 = _useNotificationsHome.handlers,
handleMarkAsRead = _useNotificationsHome2.handleMarkAsRead,
handleDelete = _useNotificationsHome2.handleDelete;
var _useState = React.useState(false),
openMenu = _useState[0],
setOpenMenu = _useState[1];
var buttonRef = React.useRef();
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
my: 1,
pl: {
xs: '8%',
sm: '10%'
}
},
component: "div"
}, /*#__PURE__*/React__default.createElement(material.Typography, {
fontSize: "0.7rem",
sx: {
color: theme.palette.secondary.main,
pl: {
xs: 2,
sm: 0.35
}
}
}, moment.parseZone(createdAt).fromNow()), /*#__PURE__*/React__default.createElement(iconsMaterial.MoreHoriz, {
color: "secondary",
ref: buttonRef,
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
setOpenMenu(!openMenu);
},
sx: {
cursor: 'pointer',
':hover': {
background: theme.palette.action.focus
},
borderRadius: 10,
zIndex: 50
}
}), /*#__PURE__*/React__default.createElement(material.Menu, {
PaperProps: {
style: {
backgroundImage: 'none'
}
},
open: openMenu,
anchorEl: buttonRef.current,
onClose: function onClose(e) {
e.preventDefault();
e.stopPropagation();
setOpenMenu(false);
}
}, !(msg !== null && msg !== void 0 && msg.isRead) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.MenuItem, {
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
handleMarkAsRead(msg);
setOpenMenu(false);
}
}, /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
alignItems: 'center',
gap: 2
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.DoneAll, {
fontSize: "0.6rem"
}), " Mark as read")), /*#__PURE__*/React__default.createElement(material.Divider, null)), /*#__PURE__*/React__default.createElement(material.MenuItem, {
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
setOpenMenu(false);
handleDelete(msg);
}
}, /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
alignItems: 'center',
gap: 2,
py: 1,
color: theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : (_theme$palette$error = _theme$palette.error) === null || _theme$palette$error === void 0 ? void 0 : _theme$palette$error.main
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.DeleteOutline, {
color: "error",
fontSize: "0.6rem"
}), " Delete"))));
};
var LinkWrapper = function LinkWrapper(_ref5) {
var children = _ref5.children,
link = _ref5.link,
_ref5$hover = _ref5.hover,
hover = _ref5$hover === void 0 ? false : _ref5$hover,
item = _ref5.item;
var theme = material.useTheme();
var hasAttachment = (link === null || link === void 0 ? void 0 : link.length) > 0 && hover;
var _useNotificationsHome3 = useNotificationsHomeContext(),
handleMarkAsRead = _useNotificationsHome3.handlers.handleMarkAsRead;
var _useState2 = React.useState(false),
showBlur = _useState2[0],
setShowBlur = _useState2[1];
var HoverBoxStyles = {
display: 'flex',
height: '50px',
width: '50px',
zIndex: 50,
alignItems: 'center',
justifyContent: 'center',
opacity: '0%',
':hover': {
opacity: '100%'
},
color: theme.palette.common.white,
position: 'absolute'
};
return (
/*#__PURE__*/
React__default.createElement(material.Box, {
onClick: function onClick(e) {
handleMarkAsRead(item);
},
sx: {
position: 'relative'
}
}, hasAttachment && /*#__PURE__*/React__default.createElement(material.Box, {
sx: _extends({}, HoverBoxStyles),
onMouseOver: function onMouseOver() {
setShowBlur(true);
},
onMouseOut: function onMouseOut() {
setShowBlur(false);
}
}, /*#__PURE__*/React__default.createElement(OpenInNewIcon, {
fontSize: "small"
})), /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
filter: showBlur ? theme.palette.mode === 'light' ? 'brightness(50%) blur(1px)' : 'blur(1px)' : ''
}
}, children))
);
};
var ActionsComponent = function ActionsComponent(_ref6) {
var _item$notification_co;
var item = _ref6.item;
var _useNotificationsHome4 = useNotificationsHomeContext(),
handleMarkAsRead = _useNotificationsHome4.handlers.handleMarkAsRead;
var buttons = item === null || item === void 0 ? void 0 : (_item$notification_co = item.notification_content) === null || _item$notification_co === void 0 ? void 0 : _item$notification_co.buttons;
if ((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0) {
return /*#__PURE__*/React__default.createElement(material.Grid, {
container: true,
flexDirection: "row-reverse",
justifyContent: "flex-end",
sx: {
gap: 1,
mt: 1
}
}, buttons.map(function (item, index) {
var sameTab = (item === null || item === void 0 ? void 0 : item.sameTab) || 'false';
if ((item === null || item === void 0 ? void 0 : item.primary) === 'false' || (item === null || item === void 0 ? void 0 : item.primary) === undefined) {
return /*#__PURE__*/React__default.createElement("a", {
key: item + index,
target: sameTab === 'false' ? '_blank' : '_self',
href: "" + (item === null || item === void 0 ? void 0 : item.action),
style: {
textDecoration: 'none'
},
onClick: function onClick(e) {
e.stopPropagation();
handleMarkAsRead(item);
},
rel: "noreferrer"
}, /*#__PURE__*/React__default.createElement(material.Button, {
disableElevation: true,
variant: "outlined",
size: "small",
sx: {
fontSize: '0.6rem'
}
}, item === null || item === void 0 ? void 0 : item.label));
} else if ((item === null || item === void 0 ? void 0 : item.primary) === 'true') {
return /*#__PURE__*/React__default.createElement("a", {
key: item + index,
target: sameTab === 'false' ? '_blank' : '_self',
href: "" + (item === null || item === void 0 ? void 0 : item.action),
style: {
textDecoration: 'none'
},
onClick: function onClick(e) {
e.stopPropagation();
handleMarkAsRead(item);
},
rel: "noreferrer"
}, /*#__PURE__*/React__default.createElement(material.Button, {
disableElevation: true,
variant: "contained",
size: "small",
sx: {
fontSize: '0.6rem'
}
}, item === null || item === void 0 ? void 0 : item.label));
}
}));
} else return null;
};
var NotificationItem = function NotificationItem(_ref7) {
var _item$notification_co2, _item$notification_co3, _item$notification_co4, _item$notification_co5, _item$notification_co6, _item$notification_co7, _item$notification_co8, _item$notification_co9, _item$notification_co10, _item$notification_co11;
var item = _ref7.item;
var theme = material.useTheme();
var type = item === null || item === void 0 ? void 0 : (_item$notification_co2 = item.notification_content) === null || _item$notification_co2 === void 0 ? void 0 : (_item$notification_co3 = _item$notification_co2.attachments) === null || _item$notification_co3 === void 0 ? void 0 : _item$notification_co3.type;
var read = item === null || item === void 0 ? void 0 : item.isRead;
var mainLink = (item === null || item === void 0 ? void 0 : (_item$notification_co4 = item.notification_content) === null || _item$notification_co4 === void 0 ? void 0 : (_item$notification_co5 = _item$notification_co4.action) === null || _item$notification_co5 === void 0 ? void 0 : _item$notification_co5.href) || null;
var sameTab = (item === null || item === void 0 ? void 0 : (_item$notification_co6 = item.notification_content) === null || _item$notification_co6 === void 0 ? void 0 : (_item$notification_co7 = _item$notification_co6.action) === null || _item$notification_co7 === void 0 ? void 0 : _item$notification_co7.sameTab) || false;
if (mainLink && mainLink[0] !== '/') {
if (!(/^https:/.test(mainLink) || /^http:/.test(mainLink))) {
if (/[a-zA-Z]\.[a-zA-Z]/.test(mainLink)) {
mainLink = 'https://' + mainLink;
} else if (mainLink !== '#') {
mainLink = '/' + mainLink;
} else {
mainLink = null;
sameTab = 'true';
}
}
} else {
mainLink = null;
sameTab = 'true';
}
var _useNotificationsHome5 = useNotificationsHomeContext(),
brandLogo = _useNotificationsHome5.data.brandLogo,
handleMarkAsRead = _useNotificationsHome5.handlers.handleMarkAsRead;
var createdAt = item === null || item === void 0 ? void 0 : item.createdAt;
var title = item === null || item === void 0 ? void 0 : (_item$notification_co8 = item.notification_content) === null || _item$notification_co8 === void 0 ? void 0 : _item$notification_co8.title;
var body = item === null || item === void 0 ? void 0 : (_item$notification_co9 = item.notification_content) === null || _item$notification_co9 === void 0 ? void 0 : _item$notification_co9.body;
var logo = (item === null || item === void 0 ? void 0 : (_item$notification_co10 = item.notification_content) === null || _item$notification_co10 === void 0 ? void 0 : _item$notification_co10.icon) || brandLogo;
var attachmentsObject = item === null || item === void 0 ? void 0 : (_item$notification_co11 = item.notification_content) === null || _item$notification_co11 === void 0 ? void 0 : _item$notification_co11.attachments;
var attachmentLink = attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.attachment;
var styles = {
pt: 2,
pb: 0,
px: 3,
background: read ? '' : theme.palette.primary.main + '1A',
cursor: 'pointer',
':hover': {
translate: '0 -2px'
},
transition: '0.3s translate ease-in-out',
borderBottom: 1,
borderColor: theme.palette.divider
};
var xs = material.useMediaQuery(theme.breakpoints.down('sm'));
return /*#__PURE__*/React__default.createElement(material.Grid, {
container: true,
sx: _extends({}, styles),
onClick: function onClick(e) {
e.stopPropagation();
handleMarkAsRead(item);
if (mainLink) window.open(mainLink, sameTab === 'true' ? '_self' : '_blank');
},
columnGap: xs ? 1 : 0
}, /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 1.3
}, /*#__PURE__*/React__default.createElement("img", {
src: logo,
width: "30px",
height: "30px",
style: {
borderRadius: '4px',
objectFit: 'contain'
}
})), /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 7.7
}, /*#__PURE__*/React__default.createElement(MainBody, {
title: title,
body: body
}), /*#__PURE__*/React__default.createElement(ActionsComponent, {
item: item
})), /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 2
}, /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'space-between'
}
}, /*#__PURE__*/React__default.createElement(LinkWrapper, {
item: item,
link: attachmentLink,
hover: true,
sameTab: "false"
}, /*#__PURE__*/React__default.createElement(AttachmentComponent, {
type: type,
attachmentsObject: attachmentsObject
})))), /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 12
}, /*#__PURE__*/React__default.createElement(NotificationFooter, {
createdAt: createdAt,
msg: item
})));
};
var ClickAwayWrapper = function ClickAwayWrapper(_ref8) {
var open = _ref8.open,
children = _ref8.children,
setAnchorElDelete = _ref8.setAnchorElDelete;
if (open) {
return /*#__PURE__*/React__default.createElement(material.ClickAwayListener, {
onClickAway: function onClickAway() {
setAnchorElDelete();
}
}, children);
}
return children;
};
var EmptyList = function EmptyList() {
var _useNotificationsHome6 = useNotificationsHomeContext(),
_useNotificationsHome7 = _useNotificationsHome6.data,
tabPanelValue = _useNotificationsHome7.tabPanelValue,
openDeleteDialog = _useNotificationsHome7.openDeleteDialog,
header = _useNotificationsHome7.header,
_useNotificationsHome8 = _useNotificationsHome6.handlers,
handleClickDelete = _useNotificationsHome8.handleClickDelete,
deleteAllMessages = _useNotificationsHome8.deleteAllMessages;
var theme = material.useTheme();
var tabIsUnread = tabPanelValue === 'unread';
var xs = material.useMediaQuery(theme.breakpoints.up('sm'));
var getHeight = function getHeight() {
if (!xs) {
return '70vh';
}
var height = 62;
if (xs) {
if (header) {
height = height - 6;
}
if (openDeleteDialog) {
height = height - 5;
}
}
return height + "vh";
};
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
height: getHeight(),
color: theme.palette.secondary.main,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
position: 'relative'
}
}, /*#__PURE__*/React__default.createElement(material.Collapse, {
sx: {
position: 'absolute',
top: 0,
zIndex: 5000
},
"in": openDeleteDialog
}, /*#__PURE__*/React__default.createElement(ClickAwayWrapper, {
open: openDeleteDialog,
setAnchorElDelete: function setAnchorElDelete(e) {
handleClickDelete(e);
}
}, /*#__PURE__*/React__default.createElement(material.Paper, {
sx: {
p: 3,
display: 'flex',
alignItems: 'center',
gap: 4,
borderTopLeftRadius: 0,
borderTopRightRadius: 0
}
}, /*#__PURE__*/React__default.createElement(material.Typography, {
sx: {
width: '80%',
fontSize: '0.8rem'
},
textAlign: "left"
}, "Are you sure you want to delete all the notifications?"), /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
gap: 1
}
}, /*#__PURE__*/React__default.createElement(material.IconButton, {
variant: "contained",
size: "small",
onClick: function onClick(e) {
return deleteAllMessages(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.Check, null)), /*#__PURE__*/React__default.createElement(material.IconButton, {
size: "small",
onClick: function onClick(e) {
return handleClickDelete(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.Close, null)))))), /*#__PURE__*/React__default.createElement(iconsMaterial.HourglassEmpty, {
fontSize: "large"
}), /*#__PURE__*/React__default.createElement(material.Typography, {
color: "secondary",
sx: {
width: '50%',
mb: tabIsUnread ? 0 : 3.1
}
}, "No ", tabIsUnread ? 'unread' : '', " notifications to show yet"));
};
var NotificationsList = function NotificationsList(_ref9) {
var filter = _ref9.filter;
var theme = material.useTheme();
var _useInView = reactIntersectionObserver.useInView(),
ref = _useInView.ref,
inView = _useInView.inView;
var _useNotificationsHome9 = useNotificationsHomeContext(),
_useNotificationsHome10 = _useNotificationsHome9.data,
list = _useNotificationsHome10.list,
unreadList = _useNotificationsHome10.unreadList,
count = _useNotificationsHome10.count,
openDeleteDialog = _useNotificationsHome10.openDeleteDialog,
tabPanelValue = _useNotificationsHome10.tabPanelValue,
unreadCount = _useNotificationsHome10.unreadCount,
header = _useNotificationsHome10.header,
page = _useNotificationsHome10.page,
notificationCenterPosition = _useNotificationsHome10.notificationCenterPosition,
_useNotificationsHome11 = _useNotificationsHome9.handlers,
loadMoreNotifications = _useNotificationsHome11.loadMoreNotifications,
deleteAllMessages = _useNotificationsHome11.deleteAllMessages,
handleClickDelete = _useNotificationsHome11.handleClickDelete;
var mapperList = filter ? unreadList : list;
var xs = material.useMediaQuery(theme.breakpoints.up('sm'));
var checkCount = tabPanelValue === 'all' ? count : unreadCount;
React.useEffect(function () {
if (inView && (mapperList === null || mapperList === void 0 ? void 0 : mapperList.length) < checkCount) {
loadMoreNotifications(page, tabPanelValue);
}
}, [inView]);
var getRemaingingHeightForContent = function getRemaingingHeightForContent(offset) {
if (offset === void 0) {
offset = 0;
}
if (typeof window !== 'undefined') {
var _window;
var totalHeight = (_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight;
var headerComp = document.querySelector('[data-testid="noti-center-header"]');
var tabComp = document.querySelector('[data-testid="noti-center-tabs"]');
var footerComp = document.querySelector('[data-testid="noti-center-footer"]');
var headerCompHeight = headerComp ? headerComp === null || headerComp === void 0 ? void 0 : headerComp.offsetHeight : 64;
var tabCompHeight = tabComp ? tabComp === null || tabComp === void 0 ? void 0 : tabComp.offsetHeight : 0;
var footerCompHeight = footerComp ? footerComp === null || footerComp === void 0 ? void 0 : footerComp.offsetHeight : 0;
var remainingHeight = totalHeight - headerCompHeight - tabCompHeight - footerCompHeight - offset;
return remainingHeight;
}
};
if ((mapperList === null || mapperList === void 0 ? void 0 : mapperList.length) > 0) {
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
height: xs ? notificationCenterPosition === 'left' || notificationCenterPosition === 'right' ? getRemaingingHeightForContent() - 20 : header !== undefined ? '56.25vh' : '62.75vh' : '70vh',
position: 'relative',
overflowY: 'auto',
scrollBehavior: 'auto'
}
}, /*#__PURE__*/React__default.createElement(material.Collapse, {
sx: {
position: 'sticky',
top: 0,
zIndex: 5000
},
"in": openDeleteDialog
}, /*#__PURE__*/React__default.createElement(ClickAwayWrapper, {
open: openDeleteDialog,
setAnchorElDelete: function setAnchorElDelete(e) {
handleClickDelete(e);
}
}, /*#__PURE__*/React__default.createElement(material.Paper, {
sx: {
p: 3,
display: 'flex',
alignItems: 'center',
gap: 4,
borderTopLeftRadius: 0,
borderTopRightRadius: 0
}
}, /*#__PURE__*/React__default.createElement(material.Typography, {
sx: {
width: '80%',
fontSize: '0.8rem'
},
textAlign: "left"
}, "Are you sure you want to delete all the notifications?"), /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
gap: 1
}
}, /*#__PURE__*/React__default.createElement(material.IconButton, {
variant: "contained",
size: "small",
onClick: function onClick(e) {
return deleteAllMessages(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.Check, null)), /*#__PURE__*/React__default.createElement(material.IconButton, {
size: "small",
onClick: function onClick(e) {
return handleClickDelete(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.Close, null)))))), /*#__PURE__*/React__default.createElement(material.Grid, {
container: true,
sx: {
height: '100%',
overflowY: 'auto',
overflowX: 'hidden',
pointerEvents: openDeleteDialog ? 'none' : '',
opacity: openDeleteDialog ? '50%' : '100%'
},
style: {
alignContent: 'flex-start'
}
}, mapperList.map(function (item, index) {
return /*#__PURE__*/React__default.createElement(material.Grid, {
key: item + index,
item: true,
xs: 12
}, /*#__PURE__*/React__default.createElement(NotificationItem, {
item: item
}), index === (mapperList === null || mapperList === void 0 ? void 0 : mapperList.length) - 2 && /*#__PURE__*/React__default.createElement(material.Box, {
ref: ref
}));
}), (mapperList === null || mapperList === void 0 ? void 0 : mapperList.length) === checkCount && (mapperList === null || mapperList === void 0 ? void 0 : mapperList.length) > 19 && /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 12,
textAlign: "center",
sx: {
background: theme.palette.secondary.main + '1A',
py: 1
}
}, /*#__PURE__*/React__default.createElement(material.Typography, {
variant: "caption",
color: "secondary"
}, "Showing all notifications"))));
}
return /*#__PURE__*/React__default.createElement(EmptyList, null);
};
var NotificationsList$1 = /*#__PURE__*/React__default.memo(NotificationsList);
var hexToRGBA = function hexToRGBA(hexCode, opacity) {
var _hex, _hex2, _hex3, _hex4;
var hex = hexCode === null || hexCode === void 0 ? void 0 : hexCode.replace('#', '');
if (((_hex = hex) === null || _hex === void 0 ? void 0 : _hex.length) === 3) {
hex = "" + hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
var r = parseInt((_hex2 = hex) === null || _hex2 === void 0 ? void 0 : _hex2.substring(0, 2), 16);
var g = parseInt((_hex3 = hex) === null || _hex3 === void 0 ? void 0 : _hex3.substring(2, 4), 16);
var b = parseInt((_hex4 = hex) === null || _hex4 === void 0 ? void 0 : _hex4.substring(4, 6), 16);
return "rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")";
};
var DocumentComponent$1 = function DocumentComponent(_ref) {
var _temp$docType, _temp$docType2, _temp$docType3;
var _ref$docType = _ref.docType,
docType = _ref$docType === void 0 ? 'txt' : _ref$docType;
var theme = material.useTheme();
var isDarkMode = theme.palette.mode === 'dark';
var temp = {
pdf: {
iconColor: isDarkMode ? 'rgba(172, 82, 82, 1)' : 'rgba(212, 121, 121, 1)',
background: isDarkMode ? 'rgba(172, 82, 82, 0.2)' : 'rgba(218, 118, 118, 0.15)',
title: 'PDF'
},
xlsx: {
iconColor: isDarkMode ? 'rgba(51, 143, 104, 1)' : 'rgba(85 ,149 ,121,1)',
background: isDarkMode ? 'rgba(51, 143, 104, 0.2)' : 'rgba(69, 125, 101, 0.15)',
title: 'XLSX'
},
xls: {
iconColor: isDarkMode ? 'rgba(51, 143, 104, 1)' : 'rgba(85, 149, 121, 1)',
background: isDarkMode ? 'rgba(51, 143, 104, 0.2)' : 'rgba(69, 125, 101, 0.15)',
title: 'XLS'
},
docx: {
iconColor: isDarkMode ? 'rgba(106, 159, 205, 1)' : 'rgba(101, 162, 219, 1)',
background: isDarkMode ? 'rgba(106, 159, 205, 0.2)' : 'rgba(123, 175, 225, 0.15)',
title: 'DOCX'
},
doc: {
iconColor: isDarkMode ? 'rgba(106, 159, 205, 1)' : 'rgba(101, 162, 219, 1)',
background: isDarkMode ? 'rgba(106, 159, 205, 0.2)' : 'rgba(123, 175, 225, 0.15)',
title: 'DOC'
},
txt: {
iconColor: isDarkMode ? 'rgba(185, 168, 75, 1)' : 'rgba(201, 184, 91, 1)',
background: isDarkMode ? 'rgba(185, 168, 75, 0.2)' : 'rgba(206, 192, 116, 0.15)',
title: 'TXT'
}
};
var boxStyles = {
width: '50px',
height: '50px',
borderRadius: 1,
background: ((_temp$docType = temp[docType]) === null || _temp$docType === void 0 ? void 0 : _temp$docType.background) || theme.palette.action.selected,
color: ((_temp$docType2 = temp[docType]) === null || _temp$docType2 === void 0 ? void 0 : _temp$docType2.iconColor) || theme.palette.action.active,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
};
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: _extends({}, boxStyles)
}, /*#__PURE__*/React__default.createElement(iconsMaterial.LibraryBooks, {
fontSize: "small"
}), /*#__PURE__*/React__default.createElement(material.Typography, {
sx: {
fontSize: '0.6rem'
}
}, ((_temp$docType3 = temp[docType]) === null || _temp$docType3 === void 0 ? void 0 : _temp$docType3.title) || docType.toUpperCase()));
};
var ActionsComponent$1 = function ActionsComponent(_ref2) {
var _item$notification_co;
var item = _ref2.item,
t = _ref2.t,
socketInstance = _ref2.socketInstance;
var buttons = item === null || item === void 0 ? void 0 : (_item$notification_co = item.notification_content) === null || _item$notification_co === void 0 ? void 0 : _item$notification_co.buttons;
var data = item;
if ((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0) {
return /*#__PURE__*/React__default.createElement(material.Grid, {
container: true,
flexDirection: "row-reverse",
justifyContent: "flex-end",
sx: {
gap: 1,
mt: 1,
ml: 5
}
}, buttons.map(function (item, index) {
var sameTab = (item === null || item === void 0 ? void 0 : item.sameTab) || 'true';
if ((item === null || item === void 0 ? void 0 : item.primary) === 'false' || (item === null || item === void 0 ? void 0 : item.primary) === undefined) {
return /*#__PURE__*/React__default.createElement("a", {
key: item + index,
onClick: function onClick(e) {
e.stopPropagation();
toast__default.dismiss(t.id);
socketInstance.emit('message:read', data);
},
target: sameTab === 'false' ? '_self' : '_blank',
href: "" + (item === null || item === void 0 ? void 0 : item.action),
rel: "noopener noreferrer",
style: {
textDecoration: 'none'
}
}, /*#__PURE__*/React__default.createElement(material.Button, {
disableElevation: true,
variant: "outlined",
onClick: function onClick() {
return toast__default.dismiss(t.id);
},
size: "small",
sx: {
fontSize: '0.5rem'
}
}, item === null || item === void 0 ? void 0 : item.label));
} else if ((item === null || item === void 0 ? void 0 : item.primary) === 'true') {
return /*#__PURE__*/React__default.createElement("a", {
key: item + index,
target: !sameTab ? '_self' : '_blank',
href: "" + (item === null || item === void 0 ? void 0 : item.action),
rel: "noopener noreferrer",
style: {
textDecoration: 'none'
}
}, /*#__PURE__*/React__default.createElement(material.Button, {
disableElevation: true,
variant: "contained",
onClick: function onClick() {
return toast__default.dismiss(t.id);
},
size: "small",
sx: {
fontSize: '0.5rem'
}
}, item === null || item === void 0 ? void 0 : item.label));
}
}));
} else return null;
};
var AttachmentComponent$1 = function AttachmentComponent(_ref3) {
var type = _ref3.type,
attachmentsObject = _ref3.attachmentsObject,
showBlur = _ref3.showBlur;
var attachment = (attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.attachment) || '';
var isDocument = (attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.type) === 'Document' || false;
var docType = isDocument ? attachment === null || attachment === void 0 ? void 0 : attachment.substring(attachment.lastIndexOf('.') + 1) : null;
switch (type) {
case 'Image':
return /*#__PURE__*/React__default.createElement("img", {
alt: "image",
src: attachment,
width: "50rem",
height: "50rem",
style: {
borderRadius: 5
}
});
case 'Video':
return /*#__PURE__*/React__default.createElement("video", {
src: attachment,
width: "50rem",
height: "50rem",
style: {
borderRadius: 5
}
});
case 'Document':
return /*#__PURE__*/React__default.createElement(DocumentComponent$1, {
docType: docType,
showBlur: showBlur
});
default:
return null;
}
};
var preview$1 = function preview(value, list) {
if (value) {
var preview_val = value;
var _loop = function _loop(key) {
var _list$key, _preview_val, _list$key2, _preview_val2;
var regex = new RegExp(key, (_list$key = list[key]) === null || _list$key === void 0 ? void 0 : _list$key.scope);
preview_val = typeof preview_val === 'string' ? (_preview_val = preview_val) === null || _preview_val === void 0 ? void 0 : _preview_val.replace(regex, (_list$key2 = list[key]) === null || _list$key2 === void 0 ? void 0 : _list$key2["with"]) : (_preview_val2 = preview_val) === null || _preview_val2 === void 0 ? void 0 : _preview_val2.map(function (item) {
var _list$key3;
return item === null || item === void 0 ? void 0 : item.replace(regex, (_list$key3 = list[key]) === null || _list$key3 === void 0 ? void 0 : _list$key3["with"]);
});
};
for (var key in list) {
_loop(key);
}
var tt_regex = /(<tt style="word-wrap: break-word; white-space: pre-wrap; word-break: break-word;">(?:\n|.)+?<\/tt>)/gm;
var m;
var replace = [];
var replace_with = [];
while ((m = tt_regex.exec(preview_val)) !== null) {
if (m.index === tt_regex.lastIndex) {
tt_regex.lastIndex++;
}
var replace_with_temp = m[0].replace(/<i>|<\/i>?/gm, '_').replace(/<b>|<\/b>?/gm, '*').replace(/<s>|<\/s>?/gm, '~');
if (m[0] !== replace_with_temp) {
replace.push(m[0]);
replace_with.push(replace_with_temp);
}
}
for (var i = 0; i < (replace === null || replace === void 0 ? void 0 : replace.length); i++) {
preview_val = preview_val.replace(replace[i], replace_with[i]);
}
return preview_val;
} else {
return '';
}
};
var MainBody$1 = function MainBody(_ref4) {
var body = _ref4.body,
title = _ref4.title;
var list = {
'&': {
scope: 'g',
"with": '&'
},
'<': {
scope: 'g',
"with": '<'
},
'>': {
scope: 'g',
"with": '>'
},
'"': {
scope: 'g',
"with": '"'
},
'\n': {
scope: 'g',
"with": '<br/>'
},
'\\*(\\S(?:.*?)\\S|\\S)\\*': {
scope: 'g',
"with": '<b>$1</b>'
},
'\\b_(\\S(?:.*?)\\S|\\S)_\\b': {
scope: 'g',
"with": '<i>$1</i>'
},
'~(\\S(?:.*?)\\S|\\S)~': {
scope: 'g',
"with": '<s>$1</s>'
},
'```((?:\\n|.)*?)```': {
scope: 'gm',
"with": '<tt style="word-wrap: break-word; white-space: pre-wrap; word-break: break-word;">$1</tt>'
}
};
var theme = material.useTheme();
var renderBody = preview$1(body, list);
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
gap: 2,
textAlign: 'left',
wordWrap: 'break-word'
}
}, /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Typography, {
fontSize: "0.85rem",
fontWeight: 600,
color: theme.palette.toasttext.primary
}, title), /*#__PURE__*/React__default.createElement(material.Typography, {
fontSize: "0.7rem",
fontWeight: 200,
color: theme.palette.toasttext.primary
}, parse(renderBody))));
};
var ToastStructure = function ToastStructure(_ref5) {
var _msg$notification_con, _msg$notification_con2, _msg$notification_con3, _msg$notification_con4, _msg$notification_con5, _msg$notification_con6, _msg$notification_con7, _msg$notification_con8, _msg$notification_con9, _msg$notification_con10;
var msg = _ref5.msg,
t = _ref5.t,
socketInstance = _ref5.socketInstance,
logo = _ref5.logo,
close = _ref5.close;
var title = msg === null || msg === void 0 ? void 0 : (_msg$notification_con = msg.notification_content) === null || _msg$notification_con === void 0 ? void 0 : _msg$notification_con.title;
var body = msg === null || msg === void 0 ? void 0 : (_msg$notification_con2 = msg.notification_content) === null || _msg$notification_con2 === void 0 ? void 0 : _msg$notification_con2.body;
var type = msg === null || msg === void 0 ? void 0 : (_msg$notification_con3 = msg.notification_content) === null || _msg$notification_con3 === void 0 ? void 0 : (_msg$notification_con4 = _msg$notification_con3.attachments) === null || _msg$notification_con4 === void 0 ? void 0 : _msg$notification_con4.type;
var attachmentsObject = msg === null || msg === void 0 ? void 0 : (_msg$notification_con5 = msg.notification_content) === null || _msg$notification_con5 === void 0 ? void 0 : _msg$notification_con5.attachments;
var attachmentLink = (attachmentsObject === null || attachmentsObject === void 0 ? void 0 : attachmentsObject.attachment) || null;
var icon = (msg === null || msg === void 0 ? void 0 : (_msg$notification_con6 = msg.notification_content) === null || _msg$notification_con6 === void 0 ? void 0 : _msg$notification_con6.icon) || logo;
var link = msg === null || msg === void 0 ? void 0 : (_msg$notification_con7 = msg.notification_content) === null || _msg$notification_con7 === void 0 ? void 0 : (_msg$notification_con8 = _msg$notification_con7.action) === null || _msg$notification_con8 === void 0 ? void 0 : _msg$notification_con8.href;
var sameTab = (msg === null || msg === void 0 ? void 0 : (_msg$notification_con9 = msg.notification_content) === null || _msg$notification_con9 === void 0 ? void 0 : (_msg$notification_con10 = _msg$notification_con9.action) === null || _msg$notification_con10 === void 0 ? void 0 : _msg$notification_con10.sameTab) || 'false';
if (link && link[0] !== '/') {
if (!(/^https:/.test(link) || /^http:/.test(link))) {
if (/[a-zA-Z]\.[a-zA-Z]/.test(link)) {
link = 'https://' + link;
} else if (link !== '#') {
link = '/' + link;
} else {
link = null;
sameTab = 'true';
}
}
} else {
link = null;
sameTab = 'true';
}
return /*#__PURE__*/React__default.createElement(material.Box, {
target: sameTab === 'false' ? '_blank' : '_self',
onClick: function onClick(e) {
e.stopPropagation();
toast__default.dismiss(t.id);
socketInstance.emit('message:read', msg);
if (link) window.open(link, sameTab === 'true' ? '_self' : '_blank');
},
style: {
textDecoration: 'none',
width: '100%'
}
}, /*#__PURE__*/React__default.createElement(material.Grid, {
container: true,
spacing: 0,
alignItems: "center"
}, /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 1.5,
justifyContent: "center",
alignItems: "center"
}, /*#__PURE__*/React__default.createElement("img", {
src: icon,
width: "30px",
height: "30px",
style: {
borderRadius: '4px',
objectFit: 'contain'
}
})), /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 8
}, /*#__PURE__*/React__default.createElement(MainBody$1, {
title: title,
body: body
})), /*#__PURE__*/React__default.createElement(material.Grid, {
item: true,
xs: 2.5
}, /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'space-between'
}
}, /*#__PURE__*/React__default.createElement(material.Box, {
href: attachmentLink,
onClick: function onClick(e) {
e.stopPropagation();
window.open(attachmentLink, '_blank');
}
}, /*#__PURE__*/React__default.createElement(AttachmentComponent$1, {
type: type,
attachmentsObject: attachmentsObject
})))), /*#__PURE__*/React__default.createElement(ActionsComponent$1, {
item: msg,
t: t,
socketInstance: socketInstance
}), close ? /*#__PURE__*/React__default.createElement(material.IconButton, {
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
toast__default.dismiss(t.id);
},
style: {
position: 'absolute',
top: '-13%',
left: '-3%',
backgroundColor: 'rgba(58, 53, 65, 0.04)'
},
size: "small"
}, /*#__PURE__*/React__default.createElement(iconsMaterial.Close, {
fontSize: "small"
})) : ''));
};
var Actions = function Actions() {
var _useNotificationsHome = useNotificationsHomeContext(),
_useNotificationsHome2 = _useNotificationsHome.data,
list = _useNotificationsHome2.list,
unreadList = _useNotificationsHome2.unreadList,
_useNotificationsHome3 = _useNotificationsHome.handlers,
handleClickDelete = _useNotificationsHome3.handleClickDelete,
handleMarkAllAsRead = _useNotificationsHome3.handleMarkAllAsRead;
if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
return /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
alignItems: 'center',
mr: 2
}
}, (unreadList === null || unreadList === void 0 ? void 0 : unreadList.length) > 0 && /*#__PURE__*/React__default.createElement(material.Tooltip, {
title: "Mark all as read"
}, /*#__PURE__*/React__default.createElement(material.IconButton, {
onClick: function onClick(e) {
return handleMarkAllAsRead(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.DoneAll, null))), /*#__PURE__*/React__default.createElement(material.Tooltip, {
title: "Delete all"
}, /*#__PURE__*/React__default.createElement(material.IconButton, {
onClick: function onClick(e) {
return handleClickDelete(e);
}
}, /*#__PURE__*/React__default.createElement(iconsMaterial.DeleteSweepOutlined, null))));
}
return null;
};
var NotificationsTabs = function NotificationsTabs() {
var _theme$palette$primar;
var _useNotificationsHome4 = useNotificationsHomeContext(),
_useNotificationsHome5 = _useNotificationsHome4.data,
tabPanelValue = _useNotificationsHome5.tabPanelValue,
unreadCount = _useNotificationsHome5.unreadCount,
handleChangeTabs = _useNotificationsHome4.handlers.handleChangeTabs;
var theme = material.useTheme();
return /*#__PURE__*/React__default.createElement(lab.TabContext, {
value: tabPanelValue
}, /*#__PURE__*/React__default.createElement(material.Box, {
sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}
}, /*#__PURE__*/React__default.createElement(lab.TabList, {
variant: "standard",
onChange: handleChangeTabs,
"data-testid": "noti-center-tabs"
}, /*#__PURE__*/React__default.createElement(material.Tab, {
disableRipple: true,
value: "all",
label: "All"
}), /*#__PURE__*/React__default.createElement(material.Tab, {
disableRipple: true,
value: "unread",
label: "Unread",
sx: {
minHeight: 0
},
icon: /*#__PURE__*/React__default.createElement(material.Chip, {
size: "small",
className: "MuiChip-light",
sx: {
color: (_theme$palette$primar = theme.palette.primary) === null || _theme$palette$primar === void 0 ? void 0 : _theme$palette$primar.main,
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.12)
},
label: unreadCount
}),
iconPosition: "end"
})), /*#__PURE__*/React__default.createElement(Actions, null)), /*#__PURE__*/React__default.createElement(material.Divider, {
sx: {
mt: 0,
mb: 0
}
}), /*#__PURE__*/React__default.createElement(lab.TabPanel, {
value: "all",
sx: {
p: 0
}
}, /*#__PURE__*/React__default.createElement(NotificationsList$1, {
filter: false
})), /*#__PURE__*/React__default.createElement(lab.TabPanel, {
value: "unread",
sx: {
p: 0
}
}, /*#__PURE__*/React__default.createElement(NotificationsList$1, {
filter: true
})));
};
var _excluded = ["children"];
var NotificationsHomeContext = /*#__PURE__*/React__default.createContext();
var useNotificationsHomeContext = function useNotificationsHomeContext() {
return React.useContext(NotificationsHomeContext);
};
var NotificationsHomeProvider = function NotificationsHomeProvider(_ref) {
var children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var user = props.user,
workspace = props.workspace,
integration = props.integration,
signature = props.signature,
themeConfig = props.themeC