Merge pull request #807 from onfido/hotfix/wrong-cross-device-redirec…

…tion-cx-4180

Hotfix/wrong cross device redirection cx 4180

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to the Node [default version scheme](https://docs.npmjs.com
 - UI: Accessibility - Make camera feed view accessible to screen readers
 - UI: Accessibility - More descriptive ARIA label for camera shutter button
 - Public: Fixed user being able to submit verification multiple times on coming back to desktop from the cross device flow if integrator has opted to exclude the `complete` step in SDK setup
+- Public: Fix wrong cross device redirection when user is already on mobile (iOS 10)
 
 ## [5.3.0] - 2019-09-03
 

src/components/Capture/withCrossDeviceWhenNoCamera.js

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact'
+import { isDesktop } from '~utils'
 
 export default WrappedComponent =>
   class WithCrossDeviceWhenNoCamera extends Component {
@@ -32,6 +33,10 @@ export default WrappedComponent =>
           console.error('Unable to complete the flow: upload fallback not allowed')
           return;
         }
+        if (!isDesktop) {
+          // The cross device option should not be available when the user is already using a mobile device
+          return;
+        }
         const step = 0
         const excludeStepFromHistory = true
         changeFlowTo('crossDeviceSteps', step, excludeStepFromHistory)

src/components/Uploader/index.js

@@ -99,7 +99,10 @@ class Uploader extends Component {
       instructions
     } = this.props
     const isPoA = !!poaDocumentType
-    const documentTypeGroup = getDocumentTypeGroup(poaDocumentType || documentType)
+    // Different upload types show different icons
+    // return the right icon name for document or face step
+    // For document, the upload can be 'identity' or 'proofOfAddress'
+    const uploadType = getDocumentTypeGroup(poaDocumentType || documentType) || 'face'
     const UploadArea = isDesktop ? DesktopUploadArea : MobileUploadArea
     const { error } = this.state
 
@@ -113,7 +116,7 @@ class Uploader extends Component {
             { ...{ isPoA } }
           >
             <div className={ style.instructions }>
-              <span className={ classNames(theme.icon, style.icon, style[`${ camelCase(documentTypeGroup) }Icon`]) } />
+              <span className={ classNames(theme.icon, style.icon, style[`${camelCase(uploadType)}Icon`]) } />
               { error ?
                 <UploadError { ...{ error } } /> :
                 <div className={ style.instructionsCopy }>{ instructions }</div>

src/components/Uploader/style.css

@@ -55,7 +55,7 @@
   }
 }
 
-.identityIcon {
+.identityIcon, .faceIcon {
   &:extend(.icon);
   background-image: url('assets/upload.svg');