@fyno/inapp-react
Version:
React SDK for invoking Fyno inapp notifications center
1,765 lines (1,761 loc) • 212 kB
JavaScript
import toast, { toast as toast$1, Toaster } from 'react-hot-toast'
import React, { useEffect, useState, useRef, useContext } from 'react'
import Box$1 from '@mui/material/Box'
import socketIO from 'socket.io-client'
import parse from 'html-react-parser'
import {
Check,
Close,
HourglassEmpty,
MoreHoriz,
DoneAll,
DeleteOutline,
LibraryBooks,
DeleteSweepOutlined,
SettingsOutlined,
NotificationsOutlined,
ArrowBackIosNew,
Lock,
CheckCircle,
WifiOff
} from '@mui/icons-material'
import { TabContext, TabList, TabPanel } from '@mui/lab'
import {
useTheme,
useMediaQuery,
Box,
Collapse,
Paper,
Typography,
IconButton,
Grid,
ClickAwayListener,
Menu,
MenuItem,
Divider,
Button,
Tab,
Chip,
Tooltip,
debounce,
Badge,
CircularProgress,
Icon,
Dialog,
DialogTitle,
DialogContent,
DialogActions
} from '@mui/material'
import { useInView } from 'react-intersection-observer'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import moment from 'moment'
import useSound from 'use-sound'
import { createTheme, ThemeProvider } from '@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 = {}
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
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 = 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.createElement(
Box,
{
sx: _extends({}, boxStyles)
},
/*#__PURE__*/ React.createElement(LibraryBooks, {
fontSize: 'small'
}),
/*#__PURE__*/ React.createElement(
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.createElement('img', {
alt: 'image',
src: attachment,
width: '50rem',
height: '50rem',
style: {
borderRadius: 5
}
})
case 'Video':
return /*#__PURE__*/ React.createElement('video', {
src: attachment,
width: '50rem',
height: '50rem',
style: {
borderRadius: 5
}
})
case 'Document':
return /*#__PURE__*/ React.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 = 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.createElement(
Box,
{
sx: {
display: 'flex',
flexDirection: 'column',
gap: 2,
wordWrap: 'break-word'
}
},
/*#__PURE__*/ React.createElement(
Box,
null,
/*#__PURE__*/ React.createElement(
Typography,
{
fontSize: '0.85rem',
fontWeight: 600,
color: theme.palette.text.primary
},
title
),
/*#__PURE__*/ React.createElement(
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 = useTheme()
var _useNotificationsHome = useNotificationsHomeContext(),
_useNotificationsHome2 = _useNotificationsHome.handlers,
handleMarkAsRead = _useNotificationsHome2.handleMarkAsRead,
handleDelete = _useNotificationsHome2.handleDelete
var _useState = useState(false),
openMenu = _useState[0],
setOpenMenu = _useState[1]
var buttonRef = useRef()
return /*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
my: 1,
pl: {
xs: '8%',
sm: '10%'
}
},
component: 'div'
},
/*#__PURE__*/ React.createElement(
Typography,
{
fontSize: '0.7rem',
sx: {
color: theme.palette.secondary.main,
pl: {
xs: 2,
sm: 0.35
}
}
},
moment.parseZone(createdAt).fromNow()
),
/*#__PURE__*/ React.createElement(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: '10px',
zIndex: 50
}
}),
/*#__PURE__*/ React.createElement(
Menu,
{
PaperProps: {
style: {
borderRadius: '10px',
backgroundImage: 'none'
}
},
open: openMenu,
anchorEl: buttonRef.current,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'right'
},
transformOrigin: {
vertical: 'top',
horizontal: 'right'
},
onClose: function onClose(e) {
e.preventDefault()
e.stopPropagation()
setOpenMenu(false)
}
},
!(msg !== null && msg !== void 0 && msg.isRead) &&
/*#__PURE__*/ React.createElement(
Box,
null,
/*#__PURE__*/ React.createElement(
MenuItem,
{
onClick: function onClick(e) {
e.preventDefault()
e.stopPropagation()
handleMarkAsRead(msg)
setOpenMenu(false)
}
},
/*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
alignItems: 'center',
gap: 2
}
},
/*#__PURE__*/ React.createElement(DoneAll, {
fontSize: '0.6rem'
}),
' Mark as read'
)
),
/*#__PURE__*/ React.createElement(Divider, null)
),
/*#__PURE__*/ React.createElement(
MenuItem,
{
onClick: function onClick(e) {
e.preventDefault()
e.stopPropagation()
setOpenMenu(false)
handleDelete(msg)
}
},
/*#__PURE__*/ React.createElement(
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.createElement(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 = useTheme()
var hasAttachment =
(link === null || link === void 0 ? void 0 : link.length) > 0 && hover
var _useNotificationsHome3 = useNotificationsHomeContext(),
handleMarkAsRead = _useNotificationsHome3.handlers.handleMarkAsRead
var _useState2 = 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.createElement(
Box,
{
onClick: function onClick(e) {
handleMarkAsRead(item)
},
sx: {
position: 'relative'
}
},
hasAttachment &&
/*#__PURE__*/ React.createElement(
Box,
{
sx: _extends({}, HoverBoxStyles),
onMouseOver: function onMouseOver() {
setShowBlur(true)
},
onMouseOut: function onMouseOut() {
setShowBlur(false)
}
},
/*#__PURE__*/ React.createElement(OpenInNewIcon, {
fontSize: 'small'
})
),
/*#__PURE__*/ React.createElement(
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.createElement(
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.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.createElement(
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.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.createElement(
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 = 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 = useMediaQuery(theme.breakpoints.down('sm'))
return /*#__PURE__*/ React.createElement(
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,
className: 'notification-item-row'
},
/*#__PURE__*/ React.createElement(
Grid,
{
item: true,
xs: 1.3
},
/*#__PURE__*/ React.createElement('img', {
src: logo,
width: '30px',
height: '30px',
style: {
borderRadius: '4px',
objectFit: 'contain'
}
})
),
/*#__PURE__*/ React.createElement(
Grid,
{
item: true,
xs: 7.7
},
/*#__PURE__*/ React.createElement(MainBody, {
title: title,
body: body
}),
/*#__PURE__*/ React.createElement(ActionsComponent, {
item: item
})
),
/*#__PURE__*/ React.createElement(
Grid,
{
item: true,
xs: 2
},
/*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'space-between'
}
},
/*#__PURE__*/ React.createElement(
LinkWrapper,
{
item: item,
link: attachmentLink,
hover: true,
sameTab: 'false'
},
/*#__PURE__*/ React.createElement(AttachmentComponent, {
type: type,
attachmentsObject: attachmentsObject
})
)
)
),
/*#__PURE__*/ React.createElement(
Grid,
{
item: true,
xs: 12
},
/*#__PURE__*/ React.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.createElement(
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 = useTheme()
var tabIsUnread = tabPanelValue === 'unread'
var xs = 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.createElement(
Box,
{
sx: {
height: getHeight(),
color: theme.palette.secondary.main,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
position: 'relative'
}
},
/*#__PURE__*/ React.createElement(
Collapse,
{
sx: {
position: 'absolute',
top: 0,
zIndex: 5000
},
in: openDeleteDialog
},
/*#__PURE__*/ React.createElement(
ClickAwayWrapper,
{
open: openDeleteDialog,
setAnchorElDelete: function setAnchorElDelete(e) {
handleClickDelete(e)
}
},
/*#__PURE__*/ React.createElement(
Paper,
{
sx: {
p: 3,
display: 'flex',
alignItems: 'center',
gap: 4,
borderTopLeftRadius: 0,
borderTopRightRadius: 0
}
},
/*#__PURE__*/ React.createElement(
Typography,
{
sx: {
width: '80%',
fontSize: '0.8rem'
},
textAlign: 'left'
},
'Are you sure you want to delete all the notifications?'
),
/*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
gap: 1
}
},
/*#__PURE__*/ React.createElement(
IconButton,
{
variant: 'contained',
size: 'small',
onClick: function onClick(e) {
return deleteAllMessages(e)
}
},
/*#__PURE__*/ React.createElement(Check, null)
),
/*#__PURE__*/ React.createElement(
IconButton,
{
size: 'small',
onClick: function onClick(e) {
return handleClickDelete(e)
}
},
/*#__PURE__*/ React.createElement(Close, null)
)
)
)
)
),
/*#__PURE__*/ React.createElement(HourglassEmpty, {
fontSize: 'large'
}),
/*#__PURE__*/ React.createElement(
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 = useTheme()
var _useInView = 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,
showBranding = _useNotificationsHome10.showBranding,
_useNotificationsHome11 = _useNotificationsHome9.handlers,
loadMoreNotifications = _useNotificationsHome11.loadMoreNotifications,
deleteAllMessages = _useNotificationsHome11.deleteAllMessages,
handleClickDelete = _useNotificationsHome11.handleClickDelete
var mapperList = filter ? unreadList : list
var xs = useMediaQuery(theme.breakpoints.up('sm'))
var checkCount = tabPanelValue === 'all' ? count : unreadCount
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.createElement(
Box,
{
sx: {
height: xs
? notificationCenterPosition === 'left' ||
notificationCenterPosition === 'right'
? getRemaingingHeightForContent() - 20
: header !== undefined
? '56.25vh'
: showBranding
? '62.75vh'
: '64.75vh'
: '70vh',
position: 'relative',
overflowY: 'auto',
scrollBehavior: 'auto'
}
},
/*#__PURE__*/ React.createElement(
Collapse,
{
sx: {
position: 'sticky',
top: 0,
zIndex: 5000
},
in: openDeleteDialog
},
/*#__PURE__*/ React.createElement(
ClickAwayWrapper,
{
open: openDeleteDialog,
setAnchorElDelete: function setAnchorElDelete(e) {
handleClickDelete(e)
}
},
/*#__PURE__*/ React.createElement(
Paper,
{
sx: {
p: 3,
display: 'flex',
alignItems: 'center',
gap: 4,
borderTopLeftRadius: 0,
borderTopRightRadius: 0
}
},
/*#__PURE__*/ React.createElement(
Typography,
{
sx: {
width: '80%',
fontSize: '0.8rem'
},
textAlign: 'left'
},
'Are you sure you want to delete all the notifications?'
),
/*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
gap: 1
}
},
/*#__PURE__*/ React.createElement(
IconButton,
{
variant: 'contained',
size: 'small',
onClick: function onClick(e) {
return deleteAllMessages(e)
}
},
/*#__PURE__*/ React.createElement(Check, null)
),
/*#__PURE__*/ React.createElement(
IconButton,
{
size: 'small',
onClick: function onClick(e) {
return handleClickDelete(e)
}
},
/*#__PURE__*/ React.createElement(Close, null)
)
)
)
)
),
/*#__PURE__*/ React.createElement(
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.createElement(
Grid,
{
key: item + index,
item: true,
xs: 12
},
/*#__PURE__*/ React.createElement(NotificationItem, {
item: item
}),
index ===
(mapperList === null || mapperList === void 0
? void 0
: mapperList.length) -
2 &&
/*#__PURE__*/ React.createElement(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.createElement(
Grid,
{
item: true,
xs: 12,
textAlign: 'center',
sx: {
background: theme.palette.secondary.main + '1A',
py: 1
}
},
/*#__PURE__*/ React.createElement(
Typography,
{
variant: 'caption',
color: 'secondary'
},
'Showing all notifications'
)
)
)
)
}
return /*#__PURE__*/ React.createElement(EmptyList, null)
}
var NotificationsList$1 = /*#__PURE__*/ React.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 = 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.createElement(
Box,
{
sx: _extends({}, boxStyles)
},
/*#__PURE__*/ React.createElement(LibraryBooks, {
fontSize: 'small'
}),
/*#__PURE__*/ React.createElement(
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.createElement(
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.createElement(
'a',
{
key: item + index,
onClick: function onClick(e) {
e.stopPropagation()
toast.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.createElement(
Button,
{
disableElevation: true,
variant: 'outlined',
onClick: function onClick() {
return toast.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.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.createElement(
Button,
{
disableElevation: true,
variant: 'contained',
onClick: function onClick() {
return toast.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.createElement('img', {
alt: 'image',
src: attachment,
width: '50rem',
height: '50rem',
style: {
borderRadius: 5
}
})
case 'Video':
return /*#__PURE__*/ React.createElement('video', {
src: attachment,
width: '50rem',
height: '50rem',
style: {
borderRadius: 5
}
})
case 'Document':
return /*#__PURE__*/ React.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 = useTheme()
var renderBody = preview$1(body, list)
return /*#__PURE__*/ React.createElement(
Box,
{
sx: {
display: 'flex',
flexDirection: 'column',
gap: 2,
textAlign: 'left',
wordWrap: 'break-word'
}
},
/*#__PURE__*/ React.createElement(
Box,
null,
/*#__PURE__*/ React.createElement(
Typography,
{
fontSize: '0.85rem',
fontWeight: 600,
color: theme.palette.toasttext.primary
},
title
),
/*#__PURE__*/ React.createElement(
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 !== '#') {
l