packages/components/containers/vpn/ProtonVPNClientsSection/ProtonVPNClientsSection.tsx

   1 import { useHistory, useLocation } from 'react-router-dom';
   2
   3 import { c } from 'ttag';
   4
   5 import { useWelcomeFlags } from '@proton/account';
   6 import { Button, ButtonLike, Href } from '@proton/atoms';
   7 import Copy from '@proton/components/components/button/Copy';
   8 import DropdownMenuLink from '@proton/components/components/dropdown/DropdownMenuLink';
   9 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  10 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  11 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  12 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  13 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  14 import useNotifications from '@proton/components/hooks/useNotifications';
  15 import { getWelcomeToText } from '@proton/shared/lib/apps/text';
  16 import { VPN_APP_NAME } from '@proton/shared/lib/constants';
  17 import onboardingVPNWelcome from '@proton/styles/assets/img/onboarding/vpn-welcome.svg';
  18
  19 import DownloadClientCard from '../../../components/downloadClientCard/DownloadClientCard';
  20 import OnboardingContent from '../../onboarding/OnboardingContent';
  21
  22 interface DownloadModalProps extends ModalProps {
  23     downloadUrl: string;
  24 }
  25
  26 const DownloadModal = ({ downloadUrl, ...rest }: DownloadModalProps) => {
  27     return (
  28         <ModalTwo {...rest} size="small">
  29             <ModalTwoContent className="m-8 text-center">
  30                 <OnboardingContent
  31                     img={<img src={onboardingVPNWelcome} alt={getWelcomeToText(VPN_APP_NAME)} />}
  32                     title={c('Title').t`Download ${VPN_APP_NAME}`}
  33                     description={c('Info').t`The securest way to browse, stream, and be online.`}
  34                 />
  35                 <ButtonLike
  36                     as={Href}
  37                     color="norm"
  38                     size="large"
  39                     target="_blank"
  40                     href={downloadUrl}
  41                     fullWidth
  42                     onClick={() => {
  43                         rest.onClose?.();
  44                     }}
  45                     className="mb-2"
  46                 >{c('Action').t`Download`}</ButtonLike>
  47                 <Button color="norm" size="large" fullWidth shape="ghost" onClick={rest.onClose}>
  48                     {c('Action').t`Close`}
  49                 </Button>
  50             </ModalTwoContent>
  51         </ModalTwo>
  52     );
  53 };
  54
  55 const ProtonVPNClientsSection = () => {
  56     const history = useHistory();
  57     const location = useLocation();
  58     const { setDone } = useWelcomeFlags();
  59     const { createNotification } = useNotifications();
  60
  61     const androidLinks = [
  62         {
  63             href: 'https://protonvpn.com/download/ProtonVPN.apk',
  64             children: 'APK',
  65         },
  66         {
  67             href: 'https://github.com/ProtonVPN/android-app/releases',
  68             children: 'GitHub',
  69         },
  70         {
  71             href: 'https://f-droid.org/en/packages/ch.protonvpn.android/',
  72             children: 'F-Droid',
  73         },
  74     ].map(({ href, children }) => {
  75         return (
  76             <div className="flex items-center overflow-hidden" key={children}>
  77                 <DropdownMenuLink className="flex-1" href={href}>
  78                     {children}
  79                 </DropdownMenuLink>
  80                 <Copy
  81                     shape="ghost"
  82                     value={href}
  83                     className="shrink-0 mr-2"
  84                     onCopy={() => {
  85                         createNotification({
  86                             text: c('Success').t`Link copied to clipboard`,
  87                         });
  88                     }}
  89                 />
  90             </div>
  91         );
  92     });
  93
  94     return (
  95         <SettingsSectionWide>
  96             <DownloadModal
  97                 downloadUrl="https://protonvpn.com/download"
  98                 open={location.search.includes('prompt')}
  99                 onClose={() => {
 100                     history.replace({ ...location, search: '' });
 101                     setDone();
 102                 }}
 103             />
 104             <SettingsParagraph>
 105                 {c('Info')
 106                     .t`To secure your internet connection, download and install the ${VPN_APP_NAME} application for your device and connect to a server.`}
 107             </SettingsParagraph>
 108             <div className="flex gap-4 flex-column md:flex-row">
 109                 <DownloadClientCard
 110                     title={c('VPNClient').t`Android`}
 111                     icon="brand-android"
 112                     link="https://play.google.com/store/apps/details?id=ch.protonvpn.android&utm_campaign=ww-all-2a-vpn-int_webapp-g_eng-apps_links_dashboard&utm_source=account.protonvpn.com&utm_medium=link&utm_content=dashboard&utm_term=android"
 113                     items={androidLinks}
 114                 />
 115                 <DownloadClientCard
 116                     title={c('VPNClient').t`iOS`}
 117                     icon="brand-apple"
 118                     link="https://apps.apple.com/app/apple-store/id1437005085?pt=106513916&ct=protonvpn.com-dashboard&mt=8"
 119                 />
 120                 <DownloadClientCard
 121                     title={c('VPNClient').t`Windows`}
 122                     icon="brand-windows"
 123                     link="https://protonvpn.com/download-windows/"
 124                 />
 125                 <DownloadClientCard
 126                     title={c('VPNClient').t`macOS`}
 127                     icon="brand-mac"
 128                     link="https://protonvpn.com/download-macos/"
 129                 />
 130                 <DownloadClientCard
 131                     title={c('VPNClient').t`GNU/Linux`}
 132                     icon="brand-linux"
 133                     link="https://protonvpn.com/download-linux/"
 134                 />
 135                 <DownloadClientCard
 136                     title={c('VPNClient').t`Chromebook`}
 137                     icon="brand-chrome"
 138                     link="https://play.google.com/store/apps/details?id=ch.protonvpn.android&utm_campaign=ww-all-2a-vpn-int_webapp-g_eng-apps_links_dashboard&utm_source=account.protonvpn.com&utm_medium=link&utm_content=dashboard&utm_term=chromebook"
 139                     items={androidLinks}
 140                 />
 141                 <DownloadClientCard
 142                     title={c('VPNClient').t`Android TV`}
 143                     icon="tv"
 144                     link="https://play.google.com/store/apps/details?id=ch.protonvpn.android&utm_campaign=ww-all-2a-vpn-int_webapp-g_eng-apps_links_dashboard&utm_source=account.protonvpn.com&utm_medium=link&utm_content=dashboard&utm_term=androidtv"
 145                     items={androidLinks}
 146                 />
 147             </div>
 148         </SettingsSectionWide>
 149     );
 150 };
 151
 152 export default ProtonVPNClientsSection;