feat: Add InstallAppModal component

This component is used when you want to scan a document
from your mobile via a web browser.

packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/InstallAppModal.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getPlatform } from 'cozy-device-helper'
+import Box from 'cozy-ui/transpiled/react/Box'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Empty from 'cozy-ui/transpiled/react/Empty'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import IlluCozyCloud from '../../../assets/icons/IlluCozyCloud.svg'
+import { getLinkByPlatform } from '../helpers'
+
+const InstallAppModal = ({ onBack }) => {
+  const { t } = useI18n()
+  const platform = getPlatform()
+  const link = getLinkByPlatform(platform)
+
+  return (
+    <Dialog
+      open
+      transitionDuration={0}
+      onBack={onBack}
+      content={
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          height="100%"
+          data-testid="InstallAppModal"
+        >
+          <Empty
+            icon={IlluCozyCloud}
+            iconSize="large"
+            title={t('InstallAppModal.title')}
+            text={
+              <>
+                <span className="u-db">{t('InstallAppModal.text')}</span>
+                <Button
+                  className="u-mt-1-half"
+                  label={t(`InstallAppModal.action.${platform}`)}
+                  component="a"
+                  href={link}
+                  target="_blank"
+                  rel="noopener"
+                />
+              </>
+            }
+          />
+        </Box>
+      }
+    />
+  )
+}
+
+InstallAppModal.propTypes = {
+  onBack: PropTypes.func
+}
+
+export default InstallAppModal

packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanActions/ScanMobileActions.jsx

@@ -1,15 +1,18 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import FileInput from 'cozy-ui/transpiled/react/FileInput'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
+import InstallAppModal from '../InstallAppModal'
+
 const styleBtn = { color: 'var(--primaryTextColor)' }
 
 const ScanMobileActions = ({ onOpenFilePickerModal, onChangeFile }) => {
+  const [showInstallAppModal, setShowInstallAppModal] = useState(false)
   const { t } = useI18n()
 
   return (
@@ -44,22 +47,18 @@ const ScanMobileActions = ({ onOpenFilePickerModal, onChangeFile }) => {
           />
         </FileInput>
       </div>
-      <FileInput
-        onChange={onChangeFile}
-        className="u-w-100 u-ta-center u-ml-0"
-        onClick={e => e.stopPropagation()}
-        capture="environment"
-        accept={'image/*'}
+      <Button
+        startIcon={<Icon icon="camera" />}
+        onClick={() => setShowInstallAppModal(true)}
+        fullWidth
+        className="u-m-0"
+        label={t('Scan.takePic')}
         data-testid="takePic-btn"
-      >
-        <Button
-          startIcon={<Icon icon="camera" />}
-          component="a"
-          fullWidth
-          className="u-m-0"
-          label={t('Scan.takePic')}
-        />
-      </FileInput>
+      />
+
+      {showInstallAppModal && (
+        <InstallAppModal onBack={() => setShowInstallAppModal(false)} />
+      )}
     </>
   )
 }

packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanActions/ScanMobileActions.spec.jsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom'
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
@@ -35,22 +36,18 @@ describe('ScanMobileActions', () => {
     const { container } = setup()
     const inputFileButtons = container.querySelectorAll('input[type="file"]')
 
-    expect(inputFileButtons).toHaveLength(2)
+    expect(inputFileButtons).toHaveLength(1)
   })
 
-  it('should called onChangeFileAction function', () => {
-    const onChangeFileAction = jest.fn()
-    const { getByTestId } = setup({ onChangeFile: onChangeFileAction })
+  it('should open InstallAppModal modal when click on takePic button', () => {
+    const { getByTestId } = setup()
 
     const takePicButton = getByTestId('takePic-btn')
-    const importPicFromMobileButton = getByTestId('importPicFromMobile-btn')
 
-    fireEvent.change(takePicButton)
-    expect(onChangeFileAction).toBeCalledTimes(1)
+    fireEvent.click(takePicButton)
 
-    jest.clearAllMocks()
+    const installAppModal = getByTestId('InstallAppModal')
 
-    fireEvent.change(importPicFromMobileButton)
-    expect(onChangeFileAction).toBeCalledTimes(1)
+    expect(installAppModal).toBeInTheDocument()
   })
 })

packages/cozy-mespapiers-lib/src/components/ModelSteps/helpers.js

@@ -1,3 +1,5 @@
+import { ANDROID_APP_URL, IOS_APP_URL } from '../../constants/const'
+
 /**
  * Check if a file is already selected in the state of the FormDataProvider
  * @param {object} formData - State of the FormDataProvider
@@ -165,3 +167,14 @@ export const getLastFormDataFile = ({ formData, stepIndex }) => {
 
   return file || null
 }
+
+export const getLinkByPlatform = platform => {
+  switch (platform) {
+    case 'ios':
+      return IOS_APP_URL
+    case 'android':
+      return ANDROID_APP_URL
+    case 'web': // Case that should only exist in development, as this component is used in ScanMobileActions
+      return IOS_APP_URL
+  }
+}

packages/cozy-mespapiers-lib/src/locales/en.json

@@ -427,5 +427,14 @@
       "text": "%{konnectorSlug} has not yet published the paper on its site. It will be retrieved here automatically once published by %{konnectorSlug}.",
       "button": "Add manually"
     }
+  },
+  "InstallAppModal": {
+    "title": "Install the app",
+    "text": "Install the Cozy Cloud app on your mobile to take photos of your papers directly.",
+    "action": {
+      "android": "Install on Google Play",
+      "ios": "Install on App Store",
+      "web": "Install on App Store"
+    }
   }
 }

packages/cozy-mespapiers-lib/src/locales/fr.json

@@ -427,5 +427,14 @@
       "text": "%{konnectorSlug} n'a pas encore publié le papier sur son site. Il sera récupéré ici automatiquement une fois publié par %{konnectorSlug}.",
       "button": "Ajouter manuellement"
     }
+  },
+  "InstallAppModal": {
+    "title": "Installer l’application",
+    "text": "Installer l'application Cozy Cloud sur votre mobile pour prendre directement vos papiers en photo.",
+    "action": {
+      "android": "Installer sur Google Play",
+      "ios": "Installer sur l'App Store",
+      "web": "Installer sur l'App Store"
+    }
   }
 }