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

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