onfido-sdk-ui/src/components/Router/StepsRouter.js

JavaScript SDK view layer for Onfido identity verification

import { h, Component } from 'preact'
import classNames from 'classnames'
import {sendScreen} from '../../Tracker'
import {wrapArray} from '../utils/array'
import NavigationBar from '../NavigationBar'
import theme from '../Theme/style.css'
import { withFullScreenState } from '../FullScreen'

class StepsRouter extends Component {

  trackScreen = (screenNameHierarchy, properties = {}) => {
    const { step } = this.currentComponent()
    sendScreen(
      [step.type, ...wrapArray(screenNameHierarchy)],
      {...properties, ...step.options})
  }

  currentComponent = () => this.props.componentsList[this.props.step]

  render = () => {
    const { back, disableNavigation, isFullScreen, options: {...globalUserOptions}, ...otherProps} = this.props
    const componentBlob = this.currentComponent()
    const CurrentComponent = componentBlob.component
    const options = componentBlob.step.options

    return (
      //TODO: Wrap CurrentComponent in themeWrap HOC
      <div className={classNames(theme.step,{[theme.fullScreenStep]: isFullScreen})}>
        <NavigationBar back={back} disabled={disableNavigation} className={theme.navigationBar}/>
        <div className={classNames(theme.content,{
          [theme.fullScreenContentWrapper]: isFullScreen
        })}>
          <CurrentComponent {...{...options, ...globalUserOptions, ...otherProps, back}}
            trackScreen={this.trackScreen} />
        </div>
        <div className={theme.footer} />
      </div>
    )
  }
}

export default withFullScreenState(StepsRouter)