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

   1 import React, { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon } from '@proton/components';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import { useActiveShare } from '../../../../hooks/drive/useActiveShare';
  10 import { useFileDrop } from '../../../../hooks/drive/useFileDrop';
  11 import { useFileUploadInput, useFolderUploadInput } from '../../../../store/_uploads/useUploadInput';
  12 import { Actions, countActionWithTelemetry } from '../../../../utils/telemetry';
  13 import { Container } from '../Container';
  14 import type { OnboardingProps } from '../interface';
  15
  16 import './UploadStep.scss';
  17
  18 export const UploadStep = ({ onNext }: OnboardingProps) => {
  19     const { activeFolder } = useActiveShare();
  20     const { handleDrop } = useFileDrop({
  21         shareId: activeFolder.shareId,
  22         linkId: activeFolder.linkId,
  23         onFileUpload: () => countActionWithTelemetry(Actions.OnboardingV2UploadFile),
  24         onFolderUpload: () => countActionWithTelemetry(Actions.OnboardingV2UploadFolder),
  25     });
  26
  27     const [isDragged, setIsDragged] = useState(false);
  28
  29     const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
  30         e.preventDefault();
  31
  32         setIsDragged(true);
  33     };
  34
  35     const handleDragLeave = () => {
  36         setIsDragged(false);
  37     };
  38
  39     return (
  40         <Container
  41             title={c('Onboarding Info').t`Upload your first file`}
  42             subtitle={c('Onboarding Info').t`Secure your files`}
  43             rightContent={
  44                 <div
  45                     className={clsx([
  46                         'drag-drop-zone',
  47                         isDragged && 'bg-weak',
  48                         'relative ratio-square w-full p-4',
  49                         'rounded-xl border border-dashed border-strong',
  50                         'flex flex-column gap-4 justify-center items-center',
  51                     ])}
  52                     onDragExit={handleDragLeave}
  53                     onDragLeave={handleDragLeave}
  54                     onDragEnter={handleDragOver}
  55                     onDragOver={handleDragOver}
  56                     onDrop={(e) => {
  57                         void handleDrop(e);
  58                         setIsDragged(false);
  59                         onNext();
  60                     }}
  61                 >
  62                     <Icon size={6} name="arrow-up-line" />
  63                     <span className="text-lg">{c('Onboarding Info').t`Drag and drop your files here`}</span>
  64
  65                     <div className="absolute bottom-0 mb-8 color-weak">
  66                         <Icon name="lock-open-check-filled" className="mr-2" />
  67                         <span>{c('Info').t`End-to-end encrypted`}</span>
  68                     </div>
  69                 </div>
  70             }
  71         >
  72             <p>
  73                 {c('Onboarding Info')
  74                     .t`Protect your financial documents, ID cards, project files, photos, and more with end-to-end encryption.`}
  75             </p>
  76         </Container>
  77     );
  78 };
  79
  80 export const UploadStepButtons = ({ onNext }: OnboardingProps) => {
  81     const { activeFolder } = useActiveShare();
  82     const {
  83         inputRef: fileInput,
  84         handleClick: fileClick,
  85         handleChange: fileChange,
  86     } = useFileUploadInput(activeFolder.shareId, activeFolder.linkId);
  87     const {
  88         inputRef: folderInput,
  89         handleClick: folderClick,
  90         handleChange: folderChange,
  91     } = useFolderUploadInput(activeFolder.shareId, activeFolder.linkId);
  92
  93     return (
  94         <div className="w-full flex justify-space-between">
  95             <input
  96                 multiple
  97                 type="file"
  98                 ref={fileInput}
  99                 className="hidden"
 100                 onChange={(e) => {
 101                     countActionWithTelemetry(Actions.OnboardingV2UploadFile);
 102                     fileChange(e);
 103                     onNext();
 104                 }}
 105             />
 106             <input
 107                 type="file"
 108                 ref={folderInput}
 109                 className="hidden"
 110                 onChange={(e) => {
 111                     countActionWithTelemetry(Actions.OnboardingV2UploadFolder);
 112                     folderChange(e);
 113                     onNext();
 114                 }}
 115             />
 116
 117             <Button
 118                 size="large"
 119                 shape="ghost"
 120                 color="norm"
 121                 onClick={() => {
 122                     countActionWithTelemetry(Actions.OnboardingV2UploadSkip);
 123                     onNext();
 124                 }}
 125             >
 126                 {c('Onboarding Action').t`Skip for now`}
 127             </Button>
 128
 129             <div className="flex gap-2">
 130                 <Button
 131                     className="flex items-center justify-center gap-2"
 132                     size="large"
 133                     color="norm"
 134                     onClick={folderClick}
 135                 >
 136                     <Icon name="folder-arrow-up" />
 137                     <span>{c('Onboarding Action').t`Upload folder`}</span>
 138                 </Button>
 139                 <Button
 140                     className="flex items-center justify-center gap-2"
 141                     size="large"
 142                     color="norm"
 143                     onClick={fileClick}
 144                 >
 145                     <Icon name="file-arrow-in-up" />
 146                     <span>{c('Onboarding Action').t`Upload file`}</span>
 147                 </Button>
 148             </div>
 149         </div>
 150     );
 151 };