velocity-verification/src/components/Capture/Document.js

JavaScript SDK view layer for identity verification

import { h, Component  } from 'preact'
import { appendToTracking } from '../../Tracker'
import DocumentAutoCapture from '../Photo/DocumentAutoCapture'
import DocumentLiveCapture from '../Photo/DocumentLiveCapture'
import Uploader from '../Uploader'
import GenericError from '../GenericError'
import PageTitle from '../PageTitle'
import CustomFileInput from '../CustomFileInput'
import withPrivacyStatement from './withPrivacyStatement'
import withCameraDetection from './withCameraDetection'
import withCrossDeviceWhenNoCamera from './withCrossDeviceWhenNoCamera'
import { getDocumentTypeGroup } from '../DocumentSelector/documentTypes'
import { isDesktop } from '~utils'
import { compose } from '~utils/func'
import { randomId, upperCase } from '~utils/string'
import { getMobileOSName } from '~utils/detectMobileOS'
import { localised } from '../../locales'
import style from './style.css'

class Document extends Component {
  static defaultProps = {
    side: 'front',
    forceCrossDevice: false
  }

  handleCapture = payload => {
    const { isPoA, documentType, actions, side, nextStep } = this.props
    if(!payload) return null
    actions.createCapture({
      blob:payload,
      method: 'document',
      documentType: isPoA ? 'cc_image' : documentType,
      side,
      id: randomId(),
    })
    nextStep()
  }

  handleUpload = blob => this.handleCapture(blob)

  handleError = () => this.props.actions.deleteCapture()

  renderUploadFallback = text =>
    <CustomFileInput className={style.uploadFallback} onChange={this.handleUpload} accept="image/*" capture>
      {text}
    </CustomFileInput>

  renderCrossDeviceFallback = text =>
    <span onClick={ () => this.props.changeFlowTo('crossDeviceSteps') }>
      {text}
    </span>

  render() {
    const {
      useLiveDocumentCapture,
      useWebcam,
      hasCamera,
      documentType,
      poaDocumentType='cc_image',
      isPoA,
      side,
      translate,
      subTitle,
      uploadFallback
    } = this.props
    const copyNamespace = `capture.${isPoA ? 'cc_image' : documentType}.${side}`
    const title = translate(`${copyNamespace}.title`)
    const propsWithErrorHandling = { ...this.props, onError: this.handleError }
    const renderTitle = <PageTitle {...{title, subTitle}} smaller />
    const renderFallback = isDesktop ? this.renderCrossDeviceFallback : this.renderUploadFallback
    const enableLiveDocumentCapture = useLiveDocumentCapture && !isDesktop
    if (hasCamera) {
      if (useWebcam) {
        return (
          <DocumentAutoCapture
            {...propsWithErrorHandling}
            renderTitle={ renderTitle }
            renderFallback={ renderFallback }
            containerClassName={ style.documentContainer }
            onValidCapture={ this.handleCapture }
          />
        )
      }
      if (enableLiveDocumentCapture) {
        return (
          <DocumentLiveCapture
            {...propsWithErrorHandling}
            renderTitle={ renderTitle }
            renderFallback={ renderFallback }
            containerClassName={ style.liveDocumentContainer }
            onCapture={ this.handleCapture }
            isUploadFallbackDisabled={ !uploadFallback }
          />
        )
      }
    }

    if (!hasCamera && !uploadFallback && enableLiveDocumentCapture) {
      return <GenericError error={{ name: `UNSUPPORTED_${upperCase(getMobileOSName())}_BROWSER` }} />
    }

    // Different upload types show different icons
    // return the right icon name for document
    // For document, the upload can be 'identity' or 'proof_of_address'
    const uploadType = getDocumentTypeGroup(poaDocumentType || documentType)
    return (
      <Uploader
        {...propsWithErrorHandling}
        uploadType={ uploadType }
        onUpload={ this.handleUpload }
        title={ translate(`${copyNamespace}.upload_title`) || title }
        instructions={ translate(`${copyNamespace}.instructions`) }
      />
    )
  }
}

export default compose(
  appendToTracking,
  localised,
  withPrivacyStatement,
  withCameraDetection,
  withCrossDeviceWhenNoCamera,
)(Document)