applications/drive/src/app/components/modals/DriveOnboardingV2Modal/steps/DesktopAppStep.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { Icon } from '@proton/components';
   5 import { DESKTOP_PLATFORMS } from '@proton/shared/lib/constants';
   6 import macosImg from '@proton/styles/assets/img/onboarding/drive-v2-macos.svg';
   7 import windowsImg from '@proton/styles/assets/img/onboarding/drive-v2-windows.svg';
   8
   9 import { Actions, countActionWithTelemetry } from '../../../../utils/telemetry';
  10 import { Container } from '../Container';
  11 import { IconList } from '../IconList';
  12 import type { OnboardingProps } from '../interface';
  13
  14 type Props = OnboardingProps & {
  15     download: () => void;
  16     platform: DESKTOP_PLATFORMS;
  17 };
  18
  19 export const DesktopAppStep = ({ platform }: Props) => {
  20     return (
  21         <Container
  22             title={c('Onboarding Info').t`Get the desktop app`}
  23             subtitle={c('Onboarding Info').t`Work faster, smarter`}
  24             image={platform === DESKTOP_PLATFORMS.MACOS ? macosImg : windowsImg}
  25         >
  26             <IconList
  27                 items={[
  28                     {
  29                         icon: 'bolt',
  30                         text: c('Onboarding Info').t`Faster uploads for large or multiple files`,
  31                     },
  32                     {
  33                         icon: 'tv',
  34                         text: c('Onboarding Info').t`Organize files right from your desktop`,
  35                     },
  36                     {
  37                         icon: 'broom',
  38                         text: c('Onboarding Info').t`Free up hard drive space on your computer`,
  39                     },
  40                 ]}
  41             />
  42         </Container>
  43     );
  44 };
  45
  46 export const DesktopAppStepButtons = ({ platform, download, onNext }: Props) => {
  47     return (
  48         <div className="w-full flex justify-space-between">
  49             <Button
  50                 size="large"
  51                 shape="ghost"
  52                 color="norm"
  53                 onClick={() => {
  54                     countActionWithTelemetry(Actions.OnboardingV2InstallSkip);
  55                     onNext();
  56                 }}
  57             >
  58                 {c('Onboarding Action').t`Install later`}
  59             </Button>
  60
  61             <Button
  62                 className="flex items-center justify-center gap-2"
  63                 size="large"
  64                 color="norm"
  65                 onClick={() => {
  66                     if (platform === DESKTOP_PLATFORMS.MACOS) {
  67                         countActionWithTelemetry(Actions.OnboardingV2InstallMacApp);
  68                     } else if (platform === DESKTOP_PLATFORMS.WINDOWS) {
  69                         countActionWithTelemetry(Actions.OnboardingV2InstallWindowsApp);
  70                     }
  71
  72                     download();
  73                     onNext();
  74                 }}
  75             >
  76                 <Icon name="arrow-down-line" />
  77                 <span>{c('Onboarding Action').t`Install and continue`}</span>
  78             </Button>
  79         </div>
  80     );
  81 };