03f69eff86
* fix type error fix is subscribed check - Persist subscription data locally - add / remove subscription during log in / out - Use store directly in hook Add toast error if subscription fails Revert removal of v2 hotfix linting issue Add custom notification handler - fix isSupported flag - make icon color compatible with light/dark theme - fix icon on notifications blocked banner wip: add push notification banner to notifications page. - ignore failed deletions via internal API - add ua parsing package - add more robust meta data to token save refactor naming + add push toggle to notification button shift some code around update css naming o proper BEM notation update notifications UI remove now unneeded util function Update push notification system to sue firebase sdk separate service worker webpack bundling update service worker to use firebase sdk Add firebase config Add firebase and remove filemanager Stub out the basics for browser push notifications. * fix safari * try smaller image for badge * add token validation with server, refactor code * remove param * add special icon for web notification badge * add translations * add missing trans for toast error * add pushRequest method that will not prompt users who have subscribed but since disabled notifications in the settings.
42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import * as ICONS from 'constants/icons';
|
|
import useBrowserNotifications from '$web/component/browserNotificationSettings/use-browser-notifications';
|
|
import 'scss/component/notifications-banner.scss';
|
|
import Icon from 'component/common/icon';
|
|
import Button from 'component/button';
|
|
import usePersistedState from 'effects/use-persisted-state';
|
|
|
|
export const BrowserNotificationBanner = () => {
|
|
const { pushSupported, pushEnabled, pushPermission, pushToggle } = useBrowserNotifications();
|
|
const [hasAcknowledgedPush, setHasAcknowledgedPush] = usePersistedState('push-nag', false);
|
|
|
|
if (!pushSupported || pushEnabled || pushPermission === 'denied' || hasAcknowledgedPush) return null;
|
|
|
|
const handleClose = () => setHasAcknowledgedPush(true);
|
|
|
|
return (
|
|
<div className="browserNotificationsBanner notice-message">
|
|
<div className="browserNotificationsBanner__overview">
|
|
<Icon className="browserNotificationsBanner__icon" icon={ICONS.NOTIFICATION} size={32} />
|
|
<p>
|
|
<strong>{__('Realtime push notifications straight to your browser.')}</strong>
|
|
<br />
|
|
<span className="notificationsBlocked__subText">{__("Don't miss another notification again.")}</span>
|
|
</p>
|
|
</div>
|
|
<div className="browserNotificationsBanner__actions">
|
|
<Button
|
|
className="browserNotificationsBanner__button"
|
|
button="primary"
|
|
title={__('Enable Push Notifications')}
|
|
label={__('Enable Push Notifications')}
|
|
onClick={pushToggle}
|
|
/>
|
|
<Button button="close" title={__('Dismiss')} icon={ICONS.REMOVE} onClick={handleClose} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BrowserNotificationBanner;
|