Merge pull request #1669 from blockchain/feat/pre-idv-device-check

Feat/pre idv device check

Author: plondon

config/mocks/wallet-options-v4.json

@@ -329,6 +329,9 @@
           "apiKey": "b7a7c320c19ea3a8e276c8921bc3ff79ec064d2cd9d98ab969acc648246b4be5ab2379af704c5d3a3021c0ddf82b3e479590718847c1301e1a85331d2d2a8370",
           "upperLimit": 750
         }
+      },
+      "sift": {
+        "apiKey": "0ecd212038"
       }
     },
     "ios": {},

packages/blockchain-wallet-v4-frontend/src/components/SiftScience/index.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { path, prop } from 'ramda'
+
+const SiftScienceIframe = styled.iframe`
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: -1000px;
+  left: -1000px;
+`
+
+class SiftScience extends Component {
+  componentDidMount () {
+    let receiveMessage = e => {
+      // const helperDomain = path(
+      //   ['domains', 'walletHelper'],
+      //   this.props.walletOptions
+      // )
+      if (!e.data.command) return
+      if (e.data.from !== 'sift-science') return
+      if (e.data.to !== 'exchange') return
+      // if (e.origin !== helperDomain) return
+      switch (e.data.command) {
+        case 'done':
+          this.props.onDone && this.props.onDone()
+          break
+        default:
+          return null
+      }
+    }
+    window.addEventListener('message', receiveMessage, false)
+  }
+
+  render () {
+    const { options, userId, sessionId = '', siftKey } = this.props
+
+    if (!userId) {
+      return null
+    }
+
+    const walletOptions = options || prop('data', this.props.walletOptions)
+    const helperDomain = path(['domains', 'walletHelper'], walletOptions)
+    let url = `${helperDomain}/wallet-helper/sift-science/#/key/${siftKey}/user/${userId}/sessionId/${sessionId}`
+    return (
+      <SiftScienceIframe src={url} scrolling='no' id='sift-science-iframe' />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  walletOptions: path(['walletOptionsPath'], state)
+})
+
+export default connect(mapStateToProps)(SiftScience)

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actionTypes.js

@@ -46,6 +46,12 @@ export const SET_KYC_FLOW_LOADING = '@DATA.KYC.SET_KYC_FLOW_LOADING'
 export const SET_KYC_FLOW_SUCCESS = '@DATA.KYC.SET_KYC_FLOW_SUCCESS'
 export const SET_KYC_FLOW_FAILURE = '@DATA.KYC.SET_KYC_FLOW_FAILURE'
 
+export const GET_PRE_IDV_DATA = '@EVENT.KYC.GET_PRE_IDV_DATA'
+export const SET_PRE_IDV_DATA_LOADING = '@DATA.KYC.SET_PRE_IDV_DATA_LOADING'
+export const SET_PRE_IDV_DATA_SUCCESS = '@DATA.KYC.SET_PRE_IDV_DATA_SUCCESS'
+
+export const PRE_IDV_CHECK_FINISHED = '@EVENT.KYC.PRE_IDV_CHECK_FINISHED'
+
 export const SEND_DEEP_LINK = '@EVENT.KYC.SEND_DEEP_LINK'
 
 export const UPDATE_EMAIL = '@EVENT.KYC.UPDATE_EMAIL'

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/actions.js

@@ -106,6 +106,20 @@ export const sendDeeplink = () => ({
   type: AT.SEND_DEEP_LINK
 })
 
+export const getPreIdvData = () => ({
+  type: AT.GET_PRE_IDV_DATA
+})
+export const setPreIdvDataLoading = () => ({
+  type: AT.SET_PRE_IDV_DATA_LOADING
+})
+export const setPreIdvDataSuccess = preIdvData => ({
+  type: AT.SET_PRE_IDV_DATA_SUCCESS,
+  payload: { preIdvData }
+})
+export const preIdvCheckFinished = () => ({
+  type: AT.PRE_IDV_CHECK_FINISHED
+})
+
 export const setStepsLoading = () => ({
   type: AT.SET_STEPS_LOADING
 })

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/reducers.js

@@ -12,6 +12,7 @@ const INITIAL_STATE = {
   supportedCountries: Remote.NotAsked,
   supportedDocuments: Remote.NotAsked,
   flowConfig: Remote.NotAsked,
+  preIdvData: Remote.NotAsked,
   states: Remote.NotAsked,
   steps: Remote.NotAsked
 }
@@ -73,6 +74,9 @@ export default (state = INITIAL_STATE, action) => {
     case AT.SET_KYC_FLOW_FAILURE: {
       return assoc('flowConfig', Remote.Failure(payload.e), state)
     }
+    case AT.SET_PRE_IDV_DATA_SUCCESS: {
+      return assoc('preIdvData', Remote.Success(payload.preIdvData), state)
+    }
     case AT.SET_STEPS_LOADING: {
       return assoc('steps', Remote.Loading, state)
     }

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.js

@@ -6,6 +6,7 @@ import profileSagas from 'data/modules/profile/sagas'
 import * as C from 'services/AlertService'
 
 import * as A from './actions'
+import * as AT from './actionTypes'
 import * as S from './selectors'
 import {
   EMAIL_STEPS,
@@ -379,6 +380,10 @@ export default ({ api, coreSagas }) => {
   const checkKycFlow = function * () {
     try {
       yield put(A.setKycFlowLoading())
+      const preIdvData = yield call(api.fetchPreIdvData)
+      yield put(A.setPreIdvDataSuccess(preIdvData))
+      yield take(AT.PRE_IDV_CHECK_FINISHED)
+      yield delay(1000)
       const { flowType } = yield call(api.fetchKycConfig)
       const type = FLOW_TYPES[toUpper(flowType)]
       if (!type) throw wrongFlowTypeError

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.spec.js

@@ -9,10 +9,9 @@ import { Remote } from 'blockchain-wallet-v4/src'
 import { actions, model, selectors } from 'data'
 import * as A from './actions'
 import * as S from './selectors'
-import { EMAIL_STEPS, FLOW_TYPES, SUNRIVER_LINK_ERROR_MODAL } from './model'
+import { EMAIL_STEPS, SUNRIVER_LINK_ERROR_MODAL } from './model'
 import sagas, {
   logLocation,
-  wrongFlowTypeError,
   noCampaignDataError,
   invalidLinkError
 } from './sagas'
@@ -34,7 +33,6 @@ const getCampaignData = jest.fn()
 profileSagas.mockReturnValue({ createUser, getCampaignData })
 
 const {
-  checkKycFlow,
   createRegisterUserCampaign,
   defineSteps,
   goToNextStep,
@@ -165,38 +163,6 @@ describe('goToNextStep saga', () => {
       .run())
 })
 
-describe('checkKycFlow saga', () => {
-  it('should set flow config', () => {
-    const flowType = FLOW_TYPES.LOW
-    api.fetchKycConfig.mockResolvedValue({ flowType })
-    return expectSaga(checkKycFlow)
-      .put(A.setKycFlowLoading())
-      .call(api.fetchKycConfig)
-      .put(A.setKycFlowSuccess({ flowType }))
-      .run()
-  })
-
-  it('should set wrong type error if type is not in FLOW_TYPES', () => {
-    const flowType = FLOW_TYPES.LOW + '1'
-    api.fetchKycConfig.mockResolvedValue({ flowType })
-    return expectSaga(checkKycFlow)
-      .put(A.setKycFlowLoading())
-      .call(api.fetchKycConfig)
-      .put(A.setKycFlowFailure(wrongFlowTypeError))
-      .run()
-  })
-
-  it('should set error if flow type endpoint rejects', () => {
-    const error = {}
-    api.fetchKycConfig.mockRejectedValue(error)
-    return expectSaga(checkKycFlow)
-      .put(A.setKycFlowLoading())
-      .call(api.fetchKycConfig)
-      .put(A.setKycFlowFailure(error))
-      .run()
-  })
-})
-
 describe('createRegisterUserCampaign', () => {
   it('should call verify identity and register user campaign', () => {
     const saga = testSaga(createRegisterUserCampaign)

packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/selectors.js

@@ -36,4 +36,10 @@ export const getKycFlowConfig = path([
   'flowConfig'
 ])
 
+export const getPreIdvData = path([
+  'components',
+  'identityVerification',
+  'preIdvData'
+])
+
 export const getSteps = path(['components', 'identityVerification', 'steps'])

packages/blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Verify/index.js

@@ -3,12 +3,14 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import { actions, model } from 'data'
-import { getData } from './selectors'
+import { getData, getPreIdvData } from './selectors'
 import { MediaContextConsumer } from 'providers/MatchMediaProvider'
+import SiftScience from 'components/SiftScience'
 
 import LowFlow from './template.lowflow'
 import HighFlow from './template.highflow'
 import Loading from './template.loading'
+import DataError from 'components/DataError'
 import { hasWebcam } from 'utils/helpers'
 
 const { FLOW_TYPES, KYC_PROVIDERS } = model.components.identityVerification
@@ -45,9 +47,9 @@ class VerifyContainer extends React.PureComponent {
   }
 
   render () {
-    const { data, actions, modalActions, ...rest } = this.props
+    const { data, preIdvData, actions, modalActions, ...rest } = this.props
 
-    return data.cata({
+    const VerificationFlow = data.cata({
       Success: ({
         deeplink,
         docTypes,
@@ -82,13 +84,30 @@ class VerifyContainer extends React.PureComponent {
       },
       Loading: () => <Loading />,
       NotAsked: () => null,
+      Failure: message => <DataError message={message} />
+    })
+
+    const PreIdvCheck = preIdvData.cata({
+      Success: val => (
+        <SiftScience {...val} onDone={actions.preIdvCheckFinished} />
+      ),
+      Loading: () => null,
+      NotAsked: () => null,
       Failure: () => null
     })
+
+    return (
+      <React.Fragment>
+        {VerificationFlow}
+        {PreIdvCheck}
+      </React.Fragment>
+    )
   }
 }
 
 const mapStateToProps = state => ({
-  data: getData(state)
+  data: getData(state),
+  preIdvData: getPreIdvData(state)
 })
 
 const mapDispatchToProps = dispatch => ({

packages/blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Verify/selectors.js

@@ -4,23 +4,42 @@ import { model, selectors } from 'data'
 const { GENERAL, EXPIRED } = model.profile.DOC_RESUBMISSION_REASONS
 const { getEmail } = selectors.core.settings
 const {
-  getSupportedDocuments,
-  getKycFlowConfig
+  getKycFlowConfig,
+  getPreIdvData: getSiftData,
+  getSupportedDocuments
 } = selectors.components.identityVerification
 
 export const getData = state => {
+  const getEmailR = getEmail(state)
+  const getSupportedDocumentsR = getSupportedDocuments(state)
+  const getKycFlowConfigR = getKycFlowConfig(state)
+
   return lift((email, docTypes, flowConfig) => {
     const needsDocResubmit = selectors.modules.profile
       .getKycDocResubmissionStatus(state)
       .map(anyPass([equals(GENERAL), equals(EXPIRED)]))
       .getOrElse(false)
 
     return {
-      email,
       deeplink: 'https://blockchainwallet.page.link/dashboard',
       docTypes,
+      email,
       flowConfig,
       needsDocResubmit
     }
-  })(getEmail(state), getSupportedDocuments(state), getKycFlowConfig(state))
+  })(getEmailR, getSupportedDocumentsR, getKycFlowConfigR)
+}
+
+export const getPreIdvData = state => {
+  const getPreIdvDataR = getSiftData(state)
+  const getSiftKeyR = selectors.core.walletOptions.getSiftKey(state)
+
+  const siftKey = getSiftKeyR.getOrElse('')
+
+  return lift(preIdvData => {
+    return {
+      ...preIdvData,
+      siftKey
+    }
+  })(getPreIdvDataR)
 }