2020-10-15 10:24:47 -04:00
import React from 'react' ;
import Icon from 'flavours/glitch/components/icon' ;
import Button from 'flavours/glitch/components/button' ;
2020-11-10 23:36:29 -05:00
import IconButton from 'flavours/glitch/components/icon_button' ;
2020-12-15 12:43:54 -05:00
import { requestBrowserPermission } from 'flavours/glitch/actions/notifications' ;
import { changeSetting } from 'flavours/glitch/actions/settings' ;
2020-10-15 10:24:47 -04:00
import { connect } from 'react-redux' ;
import PropTypes from 'prop-types' ;
2020-11-10 23:36:29 -05:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2020-10-15 10:24:47 -04:00
2020-11-10 23:36:29 -05:00
const messages = defineMessages ( {
close : { id : 'lightbox.close' , defaultMessage : 'Close' } ,
} ) ;
2020-10-15 10:24:47 -04:00
class NotificationsPermissionBanner extends React . PureComponent {
static propTypes = {
dispatch : PropTypes . func . isRequired ,
2020-11-10 23:36:29 -05:00
intl : PropTypes . object . isRequired ,
2020-10-15 10:24:47 -04:00
} ;
handleClick = ( ) => {
this . props . dispatch ( requestBrowserPermission ( ) ) ;
2023-02-03 14:52:07 -05:00
} ;
2020-10-15 10:24:47 -04:00
2020-11-10 23:36:29 -05:00
handleClose = ( ) => {
2020-12-15 12:43:54 -05:00
this . props . dispatch ( changeSetting ( [ 'notifications' , 'dismissPermissionBanner' ] , true ) ) ;
2023-02-03 14:52:07 -05:00
} ;
2020-11-10 23:36:29 -05:00
2020-10-15 10:24:47 -04:00
render ( ) {
2020-11-10 23:36:29 -05:00
const { intl } = this . props ;
2020-10-15 10:24:47 -04:00
return (
< div className = 'notifications-permission-banner' >
2020-11-10 23:36:29 -05:00
< div className = 'notifications-permission-banner__close' >
< IconButton icon = 'times' onClick = { this . handleClose } title = { intl . formatMessage ( messages . close ) } / >
< / div >
2020-10-15 10:24:47 -04:00
< h2 > < FormattedMessage id = 'notifications_permission_banner.title' defaultMessage = 'Never miss a thing' / > < / h2 >
< p > < FormattedMessage id = 'notifications_permission_banner.how_to_control' defaultMessage = "To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values = { { icon : < Icon id = 'sliders' / > } } / > < / p >
< Button onClick = { this . handleClick } > < FormattedMessage id = 'notifications_permission_banner.enable' defaultMessage = 'Enable desktop notifications' / > < / Button >
< / div >
) ;
}
}
2023-03-24 18:15:25 -04:00
export default connect ( ) ( injectIntl ( NotificationsPermissionBanner ) ) ;