packages/components/containers/compatibilityCheck/CompatibilityCheckView.tsx

   1 import { useEffect } from 'react';
   2
   3 import { Href } from '@proton/atoms';
   4 import type { CompatibilityItem } from '@proton/components/containers/compatibilityCheck/compatibilityCheckHelper';
   5 import { getAppName } from '@proton/shared/lib/apps/helper';
   6 import type { APP_NAMES } from '@proton/shared/lib/constants';
   7 import { APPS } from '@proton/shared/lib/constants';
   8 import { getBrowser } from '@proton/shared/lib/helpers/browser';
   9 import { captureMessage } from '@proton/shared/lib/helpers/sentry';
  10 import { getItem, setItem } from '@proton/shared/lib/helpers/storage';
  11 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  12 import unsupportedBrowserSettings from '@proton/styles/assets/img/errors/unsupported-browser.svg';
  13
  14 import useAppTitle from '../../hooks/useAppTitle';
  15
  16 interface Props {
  17     appName: APP_NAMES;
  18     incompatibilities: CompatibilityItem[];
  19 }
  20
  21 const key = 'compatibility-check.notified';
  22
  23 // Note: This is not translated because locales are not loaded at this point
  24 const CompatibilityCheckView = ({ appName = APPS.PROTONMAIL, incompatibilities }: Props) => {
  25     const isVPN = appName === APPS.PROTONVPN_SETTINGS;
  26     const kbUrl = isVPN
  27         ? 'https://protonvpn.com/support/browsers-supported/'
  28         : getKnowledgeBaseUrl('/recommended-browsers');
  29
  30     useAppTitle('Compatibility check');
  31
  32     useEffect(() => {
  33         const notified = getItem(key);
  34         if (!notified) {
  35             captureMessage('Compatibility check failed', {
  36                 level: 'warning',
  37                 extra: { reason: incompatibilities.map(({ name }) => name).join(',') },
  38             });
  39             setItem(key, '1');
  40         }
  41     }, []);
  42
  43     const app = getAppName(appName);
  44     const incompatibilitiesWithText = incompatibilities.filter((incompat) => !!incompat.text);
  45     const browser = getBrowser();
  46
  47     return (
  48         <div className="h-full flex items-center overflow-auto">
  49             <div className="m-auto text-center max-w-custom" style={{ '--max-w-custom': '30em' }}>
  50                 <div className="mb-8 text-center">
  51                     <img src={unsupportedBrowserSettings} alt="" />
  52                 </div>
  53                 <h1 className="text-bold text-4xl">Compatibility check</h1>
  54                 <p>
  55                     {app} requires a modern web browser with cutting edge support for{' '}
  56                     <Href className="primary-link" href="http://caniuse.com/#feat=cryptography">
  57                         WebCrypto (PRNG)
  58                     </Href>{' '}
  59                     and{' '}
  60                     <Href className="primary-link" href="http://caniuse.com/#feat=namevalue-storage">
  61                         Web Storage
  62                     </Href>
  63                     .
  64                 </p>
  65                 <p>Your browser: {`${browser.name} - ${browser.version}`}</p>
  66                 {incompatibilitiesWithText.length > 0 && (
  67                     <ul className="text-left">
  68                         {incompatibilitiesWithText.map(({ name, text }) => {
  69                             return (
  70                                 <li key={name}>
  71                                     {name}: {text}
  72                                 </li>
  73                             );
  74                         })}
  75                     </ul>
  76                 )}
  77                 <Href href={kbUrl} target="_self">
  78                     More info
  79                 </Href>
  80             </div>
  81         </div>
  82     );
  83 };
  84
  85 export default CompatibilityCheckView;