packages/components/containers/desktop/InboxDesktopSettingsSection.tsx

   1 import type { PropsWithChildren } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button, ButtonLike, Pill } from '@proton/atoms';
   7 import Icon, { type IconName } from '@proton/components/components/icon/Icon';
   8 import Option from '@proton/components/components/option/Option';
   9 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
  10 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  11 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  12 import { DESKTOP_PLATFORMS } from '@proton/shared/lib/constants';
  13 import type { DesktopVersion } from '@proton/shared/lib/desktop/DesktopVersion';
  14 import { invokeInboxDesktopIPC } from '@proton/shared/lib/desktop/ipcHelpers';
  15 import { isElectronMail } from '@proton/shared/lib/helpers/desktop';
  16 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  17
  18 import useInboxDesktopVersion from './useInboxDesktopVersion';
  19
  20 interface DownloadSectionProps extends PropsWithChildren {
  21     version: string;
  22     icon: IconName;
  23     platform: DESKTOP_PLATFORMS;
  24     isBeta?: boolean;
  25 }
  26
  27 const DownloadDropdown = ({ app }: { app: DesktopVersion }) => {
  28     const debUrl = app.File.find((file) => file.Url.endsWith('.deb'))!.Url;
  29     const debText = c('Download link').t`.deb for Debian / Ubuntu`;
  30     const rpmUrl = app.File.find((file) => file.Url.endsWith('.rpm'))!.Url;
  31     const rpmText = c('Download link').t`.rpm for Fedora / Red Hat`;
  32
  33     const [value, setValue] = useState(debUrl);
  34
  35     const handleClick = () => {
  36         if (isElectronMail) {
  37             invokeInboxDesktopIPC({ type: 'openExternal', payload: value });
  38         } else {
  39             window.open(value, '_self');
  40         }
  41     };
  42
  43     return (
  44         <div className="flex gap-2 w-full">
  45             <SelectTwo value={value} onChange={({ value }) => setValue(value)}>
  46                 <Option value={debUrl} title={debText}>
  47                     {debText}
  48                 </Option>
  49                 <Option value={rpmUrl} title={rpmText}>
  50                     {rpmText}
  51                 </Option>
  52             </SelectTwo>
  53             <Button color="norm" onClick={handleClick} fullWidth>{c('Action').t`Download`}</Button>
  54         </div>
  55     );
  56 };
  57
  58 const DownloadButton = ({ link }: { link?: string }) => {
  59     if (isElectronMail && link) {
  60         const handleClick = () => {
  61             invokeInboxDesktopIPC({ type: 'openExternal', payload: link });
  62         };
  63
  64         return <Button color="norm" onClick={handleClick} fullWidth>{c('Action').t`Download`}</Button>;
  65     }
  66
  67     return (
  68         <ButtonLike as="a" color="norm" shape="solid" fullWidth href={link} target="_self">
  69             {c('Action').t`Download`}
  70         </ButtonLike>
  71     );
  72 };
  73
  74 const getPlatformCopy = (platform: DESKTOP_PLATFORMS) => {
  75     switch (platform) {
  76         case DESKTOP_PLATFORMS.WINDOWS:
  77             return c('Title').t`For Windows`;
  78         case DESKTOP_PLATFORMS.MACOS:
  79             return c('Title').t`For macOS`;
  80         case DESKTOP_PLATFORMS.LINUX:
  81             return c('Title').t`For Linux`;
  82     }
  83 };
  84
  85 const DownloadCard = ({ version, icon, platform, isBeta, children }: DownloadSectionProps) => {
  86     return (
  87         <div className="flex">
  88             <div className="border p-7 flex-1 rounded flex flex-column items-center">
  89                 <Icon size={12} name={icon} className="mb-4" />
  90                 <h3 className="text-bold text-xl m-0 text-center">{getPlatformCopy(platform)}</h3>
  91                 {version.length ? (
  92                     <div className="flex gap-2 items-baseline">
  93                         {isBeta && <Pill className="mt-2">{c('Label').t`Beta`}</Pill>}
  94                         <span className=" text-center">{version}</span>
  95                     </div>
  96                 ) : null}
  97
  98                 <div className="mt-4 w-full">{children}</div>
  99             </div>
 100         </div>
 101     );
 102 };
 103
 104 export const InboxDesktopSettingsSection = () => {
 105     const { windowsApp, macosApp, linuxApp } = useInboxDesktopVersion();
 106
 107     return (
 108         <SettingsSectionWide>
 109             <SettingsParagraph
 110                 inlineLearnMore
 111                 className="mt-0 mb-4"
 112                 learnMoreUrl={getKnowledgeBaseUrl('/mail-desktop-app')}
 113             >
 114                 {c('Info').t`Fast and focused. Email and calendar, right on your desktop.`}
 115             </SettingsParagraph>
 116
 117             <div className="mt-8 grid-column-2 grid-auto-fill gap-4">
 118                 <DownloadCard
 119                     version={windowsApp.Version}
 120                     icon="brand-windows"
 121                     platform={DESKTOP_PLATFORMS.WINDOWS}
 122                     isBeta={windowsApp.CategoryName === 'EarlyAccess'}
 123                 >
 124                     <DownloadButton link={windowsApp.File[0]!.Url} />
 125                 </DownloadCard>
 126                 <DownloadCard
 127                     version={macosApp.Version}
 128                     icon="brand-apple"
 129                     platform={DESKTOP_PLATFORMS.MACOS}
 130                     isBeta={macosApp.CategoryName === 'EarlyAccess'}
 131                 >
 132                     <DownloadButton link={macosApp.File[0]!.Url} />
 133                 </DownloadCard>
 134                 <DownloadCard version={linuxApp.Version} icon="brand-linux" platform={DESKTOP_PLATFORMS.LINUX}>
 135                     <DownloadDropdown app={linuxApp} />
 136                 </DownloadCard>
 137             </div>
 138         </SettingsSectionWide>
 139     );
 140 };