packages/components/containers/notification/DesktopNotificationPanel.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Badge from '@proton/components/components/badge/Badge';
   7 import Field from '@proton/components/components/container/Field';
   8 import { Status, create, getStatus, request } from '@proton/shared/lib/helpers/desktopNotification';
   9
  10 const testDefaultNotification = () => {
  11     return create(c('Info').t`You have a new email`, {
  12         body: 'Quarterly operations update',
  13         icon: '/assets/img/notification-badge.gif',
  14         onClick() {
  15             window.focus();
  16         },
  17     });
  18 };
  19
  20 export interface Props {
  21     onTest?: () => Promise<Notification | undefined>;
  22     infoURL?: string;
  23 }
  24 const DesktopNotificationPanel = ({ onTest = testDefaultNotification }: Props) => {
  25     const [status, setStatus] = useState<Status>(getStatus());
  26
  27     const handleEnable = () => {
  28         request(
  29             () => setStatus(getStatus()),
  30             () => setStatus(getStatus())
  31         );
  32     };
  33
  34     return (
  35         <>
  36             <Field className="pt-2">
  37                 <div className="mb-4">
  38                     <span className="mr-2">{c('Info').t`Desktop notifications are currently`}</span>
  39                     {status === Status.GRANTED ? (
  40                         <Badge type="success" className="m-0">{c('Desktop notification status').t`Enabled`}</Badge>
  41                     ) : (
  42                         <Badge type="error" className="m-0">{c('Desktop notification status').t`Disabled`}</Badge>
  43                     )}
  44                 </div>
  45                 <div>
  46                     {status === Status.GRANTED ? (
  47                         <Button size="small" onClick={onTest}>{c('Action').t`Send test notification`}</Button>
  48                     ) : status === Status.DEFAULT ? (
  49                         <Button size="small" onClick={handleEnable}>{c('Action')
  50                             .t`Enable desktop notification`}</Button>
  51                     ) : null}
  52                 </div>
  53             </Field>
  54         </>
  55     );
  56 };
  57
  58 export default DesktopNotificationPanel;