packages/pass/hooks/useNotificationEnhancer.tsx

   1 import { type FC, useCallback } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { CircleLoader, InlineLinkButton } from '@proton/atoms';
   6 import { Icon, NotificationButton } from '@proton/components';
   7 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   8 import { AccountPath } from '@proton/pass/constants';
   9 import { useNavigateToAccount } from '@proton/pass/hooks/useNavigateToAccount';
  10 import type { Notification } from '@proton/pass/store/actions/enhancers/notification';
  11 import { NotificationKey } from '@proton/pass/types/worker/notification';
  12
  13 import { usePassConfig } from './usePassConfig';
  14
  15 type NotificationEnhancerOptions = { onLink: (url: string) => void };
  16
  17 const ReactivateLink: FC<NotificationEnhancerOptions> = ({ onLink }) => {
  18     const { SSO_URL } = usePassConfig();
  19
  20     return (
  21         <InlineLinkButton
  22             key="reactivate-link"
  23             className="text-semibold"
  24             onClick={() => onLink(`${SSO_URL}/encryption-keys`)}
  25         >
  26             {c('Action').t`Learn more`} <Icon name="arrow-out-square" />{' '}
  27         </InlineLinkButton>
  28     );
  29 };
  30
  31 export const useNotificationEnhancer = () => {
  32     const { onLink } = usePassCore();
  33     const navigateToAccount = useNavigateToAccount(AccountPath.ACCOUNT_PASSWORD_2FA);
  34
  35     return useCallback((notification: Notification): Notification => {
  36         const reactivateLink = <ReactivateLink onLink={onLink} key="reactactivate-link" />;
  37
  38         switch (notification.key) {
  39             case NotificationKey.INACTIVE_SHARES: {
  40                 return {
  41                     ...notification,
  42                     text: (
  43                         <div>
  44                             {c('Error')
  45                                 .jt`Some vaults are no longer accessible due to a password reset. Reactivate your account keys in order to regain access. ${reactivateLink}`}
  46                         </div>
  47                     ),
  48                 };
  49             }
  50             case NotificationKey.ORG_MISSING_2FA: {
  51                 return {
  52                     ...notification,
  53                     text: (
  54                         <>
  55                             <span>{c('Info')
  56                                 .t`Your account is restricted because your organization has enforced two-factor authentication. Please enable two-factor authentication in your Account Settings or contact your administrator.`}</span>
  57                             <NotificationButton onClick={navigateToAccount}>
  58                                 {c('Action').t`Setup 2FA`}
  59                             </NotificationButton>
  60                         </>
  61                     ),
  62                 };
  63             }
  64             default:
  65                 return {
  66                     ...notification,
  67                     showCloseButton: notification.showCloseButton && !notification.loading,
  68                     text: notification.loading ? (
  69                         <>
  70                             {notification.text} <CircleLoader />
  71                         </>
  72                     ) : (
  73                         `${notification.text}${notification.errorMessage ? ` (${notification.errorMessage})` : ''}`
  74                     ),
  75                 };
  76         }
  77     }, []);
  78 };