packages/components/containers/notification/DesktopNotificationPanel.tsx

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