feat: Add FilePicker btn to Scan page

Changed the beginning of the Scan process for a better UX
cozy · Feb 7, 2022 · a86fffa · a86fffa
1 parent bd6a5e9
commit a86fffa
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 164 deletions.
diff --git a/src/components/Contexts/StepperDialogProvider.jsx b/src/components/Contexts/StepperDialogProvider.jsx
@@ -5,7 +5,6 @@ const StepperDialogContext = createContext()
 const StepperDialogProvider = ({ children }) => {
   const [isStepperDialogOpen, setIsStepperDialogOpen] = useState(undefined)
   const [stepperDialogTitle, setStepperDialogTitle] = useState('')
-  const [alreadyScan, setAlreadyScan] = useState(true)
 
   const [allCurrentSteps, setAllCurrentSteps] = useState([])
   const [currentStepIndex, setCurrentStepIndex] = useState(1)
@@ -69,22 +68,19 @@ const StepperDialogProvider = ({ children }) => {
       currentStepIndex,
       stepperDialogTitle,
       currentDefinition,
-      alreadyScan,
       setIsStepperDialogOpen,
       setCurrentStepIndex,
       setCurrentDefinition,
       setStepperDialogTitle,
       previousStep,
-      nextStep,
-      setAlreadyScan
+      nextStep
     }),
     [
       isStepperDialogOpen,
       allCurrentSteps,
       currentStepIndex,
       stepperDialogTitle,
       currentDefinition,
-      alreadyScan,
       previousStep,
       nextStep
     ]

diff --git a/src/components/ImportDropdown/ImportDropdown.jsx b/src/components/ImportDropdown/ImportDropdown.jsx
@@ -12,7 +12,6 @@ import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
 import IconStack from 'cozy-ui/transpiled/react/IconStack'
 import FileDuotoneIcon from 'cozy-ui/transpiled/react/Icons/FileDuotone'
 import Camera from 'cozy-ui/transpiled/react/Icons/Camera'
-import PhoneUpload from 'cozy-ui/transpiled/react/Icons/PhoneUpload'
 import { ActionMenuHeader } from 'cozy-ui/transpiled/react/ActionMenu'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
 
@@ -27,8 +26,7 @@ const ImportDropdown = ({ label, icon, hasSteps }) => {
   const scannerT = useScannerI18n()
 
   const { setShowPlaceholderThemesList } = usePlaceholderModal()
-  const { currentDefinition, setIsStepperDialogOpen, setAlreadyScan } =
-    useStepperDialog()
+  const { currentDefinition, setIsStepperDialogOpen } = useStepperDialog()
   const konnectorCategory = currentDefinition?.connectorCriteria?.category
   const konnectorName = currentDefinition?.connectorCriteria?.name
 
@@ -47,21 +45,12 @@ const ImportDropdown = ({ label, icon, hasSteps }) => {
     window.open(webLink, '_blank')
   }
 
-  const handleClick = useCallback(
-    ({ alreadyScan }) => {
-      if (hasSteps) {
-        setShowPlaceholderThemesList(false)
-        setIsStepperDialogOpen(true)
-        setAlreadyScan(alreadyScan)
-      }
-    },
-    [
-      hasSteps,
-      setAlreadyScan,
-      setIsStepperDialogOpen,
-      setShowPlaceholderThemesList
-    ]
-  )
+  const handleClick = useCallback(() => {
+    if (hasSteps) {
+      setShowPlaceholderThemesList(false)
+      setIsStepperDialogOpen(true)
+    }
+  }, [hasSteps, setIsStepperDialogOpen, setShowPlaceholderThemesList])
 
   return (
     <>
@@ -91,10 +80,7 @@ const ImportDropdown = ({ label, icon, hasSteps }) => {
         </Media>
       </ActionMenuHeader>
       <List className={'u-mv-half'}>
-        <ListItem
-          onClick={() => handleClick({ alreadyScan: false })}
-          disabled={!hasSteps}
-        >
+        <ListItem onClick={handleClick} disabled={!hasSteps}>
           <ListItemIcon>
             <Icon icon={Camera} size={16} />
           </ListItemIcon>
@@ -104,19 +90,6 @@ const ImportDropdown = ({ label, icon, hasSteps }) => {
             ellipsis={false}
           />
         </ListItem>
-        <ListItem
-          onClick={() => handleClick({ alreadyScan: true })}
-          disabled={!hasSteps}
-        >
-          <ListItemIcon>
-            <Icon icon={PhoneUpload} size={16} />
-          </ListItemIcon>
-          <ListItemText
-            primary={t('ImportDropdown.importPicture.title')}
-            secondary={t('ImportDropdown.importPicture.text')}
-            ellipsis={false}
-          />
-        </ListItem>
         <ListItem
           onClick={konnectorCategory || konnectorName ? goToStore : null}
           disabled={konnectorCategory || konnectorName ? false : true}

diff --git a/src/components/ImportDropdown/ImportDropdown.spec.jsx b/src/components/ImportDropdown/ImportDropdown.spec.jsx
@@ -37,7 +37,6 @@ describe('ImportDropdown components:', () => {
 
     expect(getByText('Add: ID card'))
     expect(getByText('Auto import'))
-    expect(getByText('Scan with my camera'))
   })
 
   it('should display correct menu for Passeport', () => {
@@ -46,6 +45,5 @@ describe('ImportDropdown components:', () => {
 
     expect(getByText('Add: Passport'))
     expect(getByText('Auto import'))
-    expect(getByText('Scan with my camera'))
   })
 })
diff --git a/src/components/ModelSteps/Scan.jsx b/src/components/ModelSteps/Scan.jsx
@@ -1,23 +1,17 @@
-import React, { useState, useRef, useEffect, memo, useCallback } from 'react'
+import React, { useState, useEffect, memo, useCallback } from 'react'
 
 import { useClient, models } from 'cozy-client'
-import ActionMenu from 'cozy-ui/transpiled/react/ActionMenu'
 import DialogActions from 'cozy-ui/transpiled/react/DialogActions'
-import { ButtonLink } from 'cozy-ui/transpiled/react/Button'
+import { Button, ButtonLink } from 'cozy-ui/transpiled/react/Button'
 import Camera from 'cozy-ui/transpiled/react/Icons/Camera'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import FileInput from 'cozy-ui/transpiled/react/FileInput'
-import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import FolderMoveto from 'cozy-ui/transpiled/react/Icons/FolderMoveto'
 import PhoneUpload from 'cozy-ui/transpiled/react/Icons/PhoneUpload'
 import FilePicker from 'cozy-ui/transpiled/react/FilePicker'
 import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
-import { useStepperDialog } from 'src/components/Hooks/useStepperDialog'
 import CompositeHeader from 'src/components/CompositeHeader/CompositeHeader'
 import AcquisitionResult from 'src/components/ModelSteps/AcquisitionResult'
 import IlluGenericNewPage from 'src/assets/icons/IlluGenericNewPage.svg'
@@ -32,29 +26,20 @@ const validFileType = file => {
   return regexValidation.test(file.type)
 }
 
+const styleBtn = { color: 'var(--primaryTextColor)' }
+
 const Scan = ({ currentStep }) => {
   const { t } = useI18n()
   const client = useClient()
   const { illustration, text } = currentStep
   const [file, setFile] = useState(null)
-  const actionBtnRef = useRef()
-  const { alreadyScan } = useStepperDialog()
 
   const [isFilePickerModalOpen, setIsFilePickerModalOpen] = useState(false)
   const [cozyFileId, setCozyFileId] = useState('')
-  const [isImportChoiceMethodOpen, setIsImportChoiceMethodOpen] =
-    useState(false)
-
-  const closeImportFileModal = () => setIsImportChoiceMethodOpen(false)
-
-  const onClickExistingFileBtn = () => {
-    setIsImportChoiceMethodOpen(true)
-  }
 
   const onChangeFile = useCallback(file => {
     if (file) {
       setFile(file)
-      setIsImportChoiceMethodOpen(false)
     }
   }, [])
 
@@ -103,87 +88,48 @@ const Scan = ({ currentStep }) => {
         disableSpacing
         className={'columnLayout u-mh-0 u-mb-1 cozyDialogActions'}
       >
-        {!alreadyScan ? (
-          <>
-            <ButtonLink
-              subtle
-              onClick={onClickExistingFileBtn}
-              className={'u-w-100'}
-              label={t('Scan.useExistingPic')}
-            />
-            <FileInput
-              onChange={onChangeFile}
-              className={'u-w-100 u-ta-center u-mb-half u-ml-0'}
-              onClick={e => e.stopPropagation()}
-              capture={'environment'}
-              accept={'image/*'}
-            >
-              <ButtonLink
-                icon={Camera}
-                className={'u-w-100 u-m-0'}
-                label={t('Scan.takePic')}
-              />
-            </FileInput>
-          </>
-        ) : (
-          <>
-            <FileInput
-              onChange={onChangeFile}
-              className={'u-w-100 u-ta-center'}
-              onClick={e => e.stopPropagation()}
-              capture={'environment'}
-              accept={'image/*'}
-            >
-              <ButtonLink
-                subtle
-                icon={Camera}
-                className={'u-w-100'}
-                label={t('Scan.takePic')}
-              />
-            </FileInput>
+        <div>
+          <Divider textAlign="center" className={'u-mv-1'}>
+            {t('Scan.divider')}
+          </Divider>
+          <Button
+            theme="secondary"
+            style={styleBtn}
+            onClick={openFilePickerModal}
+            icon={FolderMoveto}
+            className={'u-w-100'}
+            label={t('Scan.selectPicFromCozy')}
+          />
+          <FileInput
+            onChange={onChangeFile}
+            className={'u-w-100 u-ml-0'}
+            onClick={e => e.stopPropagation()}
+            accept={'image/*,.pdf'}
+          >
             <ButtonLink
+              theme={'secondary'}
+              style={styleBtn}
+              icon={PhoneUpload}
               className={'u-w-100 u-m-0'}
-              label={t('Scan.selectPic')}
-              onClick={onClickExistingFileBtn}
+              label={t('Scan.importPic')}
             />
-          </>
-        )}
+          </FileInput>
+        </div>
+        <FileInput
+          onChange={onChangeFile}
+          className={'u-w-100 u-ta-center u-ml-0'}
+          onClick={e => e.stopPropagation()}
+          capture={'environment'}
+          accept={'image/*'}
+        >
+          <ButtonLink
+            icon={Camera}
+            className={'u-w-100 u-m-0'}
+            label={t('Scan.takePic')}
+          />
+        </FileInput>
       </DialogActions>
 
-      {isImportChoiceMethodOpen && (
-        <ActionMenu onClose={closeImportFileModal} anchorElRef={actionBtnRef}>
-          <List>
-            <ListItem onClick={openFilePickerModal}>
-              <ListItemIcon>
-                <Icon icon={FolderMoveto} size={16} />
-              </ListItemIcon>
-              <Typography variant="body1">
-                {t('Scan.modal.cozySelect')}
-              </Typography>
-            </ListItem>
-            <ListItem>
-              <ListItemIcon>
-                <Icon icon={PhoneUpload} size={16} />
-              </ListItemIcon>
-              <FileInput
-                onChange={onChangeFile}
-                className={'u-w-100 u-mb-half u-ml-0'}
-                onClick={e => e.stopPropagation()}
-                accept={'image/*,.pdf'}
-              >
-                <Typography
-                  variant="body1"
-                  className={'u-p-0'}
-                  onClick={e => e.stopPropagation()}
-                >
-                  {t('Scan.modal.deviceSelect')}
-                </Typography>
-              </FileInput>
-            </ListItem>
-          </List>
-        </ActionMenu>
-      )}
-
       {isFilePickerModalOpen && (
         <FilePicker
           onChange={onChangeFilePicker}

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -48,8 +48,8 @@
     "papers": "My papers"
   },
   "ConfirmReplaceFile": {
-    "content": "Your new document will be stored in the <b>Drive/Administratif/My Papers</b> folder.",
-    "question": "Do you want to keep the original file from your drive that were used to generate the document? |||| Do you want to keep the original files from your drive that were used to generate the document?",
+    "content": "Your new document will be stored in the <b>Drive/Administrative/My Papers</b> folder.",
+    "question": "Do you want to keep the original file from your drive that was used to generate the document? |||| Do you want to keep the original files from your drive that were used to generate the document?",
     "keep": "Keep",
     "title": "Keep the original file? |||| Keep the original files?",
     "replace": "No, thanks"
@@ -83,16 +83,12 @@
   },
   "ImportDropdown": {
     "importAuto": {
-      "text": "Connect your energy or telecom services to your Cozy to get your bills. Your supporting documents will be updated automatically",
+      "text": "Retrieve this document from its website, your paper will then be kept updated automatically",
       "title": "Auto import"
     },
-    "importPicture": {
-      "text": "Import a document from my mobile device",
-      "title": "Use an existing picture"
-    },
     "scanPicture": {
-      "title": "Scan with my camera",
-      "text": "Scan a document with your mobile device"
+      "text": "Use your camera or an existing document",
+      "title": "Take or select pictures"
     },
     "title": "Add: %{name}"
   },
@@ -224,14 +220,13 @@
     "title": "New paper%{name}"
   },
   "Scan": {
+    "divider": "or",
+    "importPic": "Import from my phone",
     "modal": {
-      "cozySelect": "Select from my cozy",
-      "deviceSelect": "Import from my device",
       "validFileType": "Accepted formats: image or pdf"
     },
-    "selectPic": "Select an existing picture",
-    "takePic": "Take a picture",
-    "useExistingPic": "I already have a picture"
+    "selectPicFromCozy": "Select from my Cozy",
+    "takePic": "Take a picture"
   },
   "viewer": {
     "shareData": {

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -83,16 +83,12 @@
   },
   "ImportDropdown": {
     "importAuto": {
-      "text": "Connectez vos services d’énergie ou de telecom à votre Cozy pour récupérer vos factures. Vos justificatifs seront mis à jour automatiquement",
+      "text": "Récupérer ce document grâce à son site internet, votre papier sera ensuite maintenu à jour automatiquement",
       "title": "Importer automatiquement"
     },
-    "importPicture": {
-      "text": "Importer un document depuis mon téléphone",
-      "title": "Utiliser une photo existante"
-    },
     "scanPicture": {
-      "text": "Scanner un document avec votre téléphone",
-      "title": "Scanner avec mon appareil photo"
+      "text": "Utiliser votre appareil photo ou un document existant",
+      "title": "Prendre ou sélectionner des photos"
     },
     "title": "Ajout : %{name}"
   },
@@ -224,14 +220,13 @@
     "title": "Nouveau papier%{name}"
   },
   "Scan": {
+    "divider": "ou",
+    "importPic": "Importer depuis mon téléphone",
     "modal": {
-      "cozySelect": "Sélectionner dans mon Cozy",
-      "deviceSelect": "Importer depuis mon téléphone",
       "validFileType": "Format acceptés : image ou pdf"
     },
-    "takePic": "Prendre en photo",
-    "useExistingPic": "Utiliser une photo existante",
-    "selectPic": "Sélectionner une photo existante"
+    "selectPicFromCozy": "Sélectionner dans mon Cozy",
+    "takePic": "Prendre en photo"
   },
   "viewer": {
     "shareData": {