feat(Jumio): clean up jumio sagas, get jumio status after modal closes

packages/blockchain-wallet-v4-frontend/src/components/Alerts/template.js

@@ -927,10 +927,12 @@ const selectMessage = (message, data = undefined) => {
       )
     default:
       return (
-        <FormattedMessage
-          id='components.alerts.unknown_error'
-          defaultMessage='An error has occurred.'
-        />
+        message || (
+          <FormattedMessage
+            id='components.alerts.unknown_error'
+            defaultMessage='An error has occurred.'
+          />
+        )
       )
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/actionTypes.js

@@ -38,6 +38,11 @@ export const SFOX_SELL_BTC_PAYMENT_UPDATED_LOADING =
 export const SFOX_SELL_BTC_PAYMENT_UPDATED_FAILURE =
   '@COMPONENT.SFOX_SELL_BTC_PAYMENT_UPDATED_FAILURE'
 
+export const INITIALIZE_JUMIO = '@COMPONENT.INITIALIZE_JUMIO'
+export const GET_JUMIO_STATUS_SUCCESS = '@COMPONENT.GET_JUMIO_STATUS_SUCCESS'
+export const GET_JUMIO_STATUS_FAILURE = '@COMPONENT.GET_JUMIO_STATUS_FAILURE'
+export const GET_JUMIO_STATUS_LOADING = '@COMPONENT.GET_JUMIO_STATUS_LOADING'
+
 export const GET_JUMIO_TOKEN = '@COMPONENT.GET_JUMIO_TOKEN'
 export const GET_JUMIO_TOKEN_SUCCESS = '@COMPONENT.GET_JUMIO_TOKEN_SUCCESS'
 export const GET_JUMIO_TOKEN_FAILURE = '@COMPONENT.GET_JUMIO_TOKEN_FAILURE'

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/actions.js

@@ -60,6 +60,19 @@ export const sfoxSellBtcPaymentUpdatedFailure = err => ({
   payload: err
 })
 
+export const initializeJumio = () => ({ type: AT.INITIALIZE_JUMIO })
+export const getJumioStatusLoading = () => ({
+  type: AT.GET_JUMIO_STATUS_LOADING
+})
+export const getJumioStatusSuccess = payload => ({
+  type: AT.GET_JUMIO_STATUS_SUCCESS,
+  payload
+})
+export const getJumioStatusFailure = error => ({
+  type: AT.GET_JUMIO_STATUS_FAILURE,
+  payload: error
+})
+
 export const getJumioToken = () => ({ type: AT.GET_JUMIO_TOKEN })
 export const getJumioTokenLoading = () => ({ type: AT.GET_JUMIO_TOKEN_LOADING })
 export const getJumioTokenSuccess = payload => ({

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/reducers.js

@@ -7,7 +7,8 @@ const INITIAL_STATE = {
   qaSellAddress: null,
   siftScienceEnabled: false,
   payment: Remote.NotAsked,
-  jumioToken: Remote.NotAsked
+  jumioToken: Remote.NotAsked,
+  jumioStatus: Remote.NotAsked
 }
 
 const sfoxSignup = (state = INITIAL_STATE, action) => {
@@ -47,6 +48,15 @@ const sfoxSignup = (state = INITIAL_STATE, action) => {
     case AT.SFOX_SELL_BTC_PAYMENT_UPDATED_FAILURE: {
       return assoc('payment', Remote.Failure(payload), state)
     }
+    case AT.GET_JUMIO_STATUS_SUCCESS: {
+      return assoc('jumioStatus', Remote.Success(payload), state)
+    }
+    case AT.GET_JUMIO_STATUS_LOADING: {
+      return assoc('jumioStatus', Remote.Loading, state)
+    }
+    case AT.GET_JUMIO_STATUS_FAILURE: {
+      return assoc('jumioStatus', Remote.Failure(payload), state)
+    }
     case AT.GET_JUMIO_TOKEN_SUCCESS: {
       return assoc('jumioToken', Remote.Success(payload), state)
     }

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagaRegister.js

@@ -14,8 +14,9 @@ export default ({ coreSagas }) => {
     yield takeLatest(AT.SUBMIT_MICRO_DEPOSITS, sfoxSagas.submitMicroDeposits)
     yield takeLatest(AT.SUBMIT_QUOTE, sfoxSagas.submitQuote)
     yield takeLatest(AT.SUBMIT_SELL_QUOTE, sfoxSagas.submitSellQuote)
-    yield takeLatest(AT.HANDLE_MODAL_CLOSE, sfoxSagas.checkForProfileFailure)
+    yield takeLatest(AT.HANDLE_MODAL_CLOSE, sfoxSagas.checkProfileStatus)
     yield takeLatest(AT.SFOX_INITIALIZE_PAYMENT, sfoxSagas.initializePayment)
+    yield takeLatest(AT.INITIALIZE_JUMIO, sfoxSagas.initializeJumio)
     yield takeLatest(AT.GET_JUMIO_TOKEN, sfoxSagas.getJumioToken)
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.js

@@ -225,14 +225,16 @@ export default ({ coreSagas }) => {
     }
   }
 
-  const checkForProfileFailure = function*() {
+  const checkProfileStatus = function*() {
     const profile = yield select(selectors.core.data.sfox.getProfile)
     const modals = yield select(modalSelectors.getModals)
     if (
       Remote.Failure.is(profile) &&
       equals('SfoxExchangeData', prop('type', head(modals)))
     ) {
       yield call(coreSagas.data.sfox.refetchProfile)
+    } else {
+      yield call(getJumioStatus)
     }
   }
 
@@ -258,11 +260,43 @@ export default ({ coreSagas }) => {
     }
   }
 
+  const initializeJumio = function*() {
+    try {
+      const status = yield call(getJumioStatus)
+      // const accountsR = yield select(selectors.core.data.sfox.getAccounts)
+      // const accounts = accountsR.getOrElse([])
+      // If user has not set up jumio and they have bank accounts
+      if (status === 'missing_token') {
+        // TODO:: prompt for token
+      }
+    } catch (e) {
+      yield put(actions.logs.logErrorMessage(logLocation, 'initializeJumio', e))
+    }
+  }
+
+  const getJumioStatus = function*() {
+    try {
+      yield put(A.getJumioStatusLoading())
+      const profileR = yield select(selectors.core.data.sfox.getProfile)
+      const tokenR = yield select(selectors.core.kvStore.buySell.getSfoxJumio)
+      const token = tokenR.getOrFail()
+      const profile = profileR.getOrElse({})
+      if (!token) return 'missing_token'
+      const status = yield apply(profile, profile.getJumioStatus, [token.id])
+      yield put(A.getJumioStatusSuccess(status))
+    } catch (e) {
+      yield put(A.getJumioStatusFailure(e))
+    }
+  }
+
   const getJumioToken = function*() {
     try {
       yield put(A.getJumioTokenLoading())
-      const profile = yield select(selectors.core.data.sfox.getProfile)
-      const token = yield apply(profile.data, profile.data.getJumioToken)
+      const profileR = yield select(selectors.core.data.sfox.getProfile)
+      const profile = profileR.getOrElse({})
+      const token = yield apply(profile, profile.getJumioToken)
+      yield put(actions.core.kvStore.buySell.sfoxSetJumioToken(token))
+      yield call(getJumioStatus)
       yield put(A.getJumioTokenSuccess(token))
     } catch (e) {
       yield put(A.getJumioTokenFailure(e))
@@ -271,7 +305,7 @@ export default ({ coreSagas }) => {
   }
 
   return {
-    checkForProfileFailure,
+    checkProfileStatus,
     initializePayment,
     prepareAddress,
     setBankManually,
@@ -281,6 +315,7 @@ export default ({ coreSagas }) => {
     submitMicroDeposits,
     submitQuote,
     submitSellQuote,
+    initializeJumio,
     getJumioToken,
     upload
   }

packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.spec.js

@@ -412,12 +412,12 @@ describe('sfoxSagas', () => {
     })
   })
 
-  describe('sfox checkForProfileFailure', () => {
-    const { checkForProfileFailure } = sfoxSagas({
+  describe('sfox checkProfileStatus', () => {
+    const { checkProfileStatus } = sfoxSagas({
       coreSagas
     })
 
-    const saga = testSaga(checkForProfileFailure)
+    const saga = testSaga(checkProfileStatus)
 
     it('should select the profile', () => {
       saga.next().select(selectors.core.data.sfox.getProfile)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/JumioStatus/index.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import { actions, selectors } from 'data'
+import { getData } from './selectors'
+import { Success } from './template.success'
+
+class JumioStatusContainer extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.openJumio = this.openJumio.bind(this)
+  }
+
+  componentDidMount () {
+    this.props.sfoxActions.initializeJumio()
+  }
+
+  openJumio () {
+    this.props.sfoxActions.nextStep('jumio')
+    this.props.modalActions.showModal('SfoxExchangeData', { step: 'jumio' })
+  }
+
+  render () {
+    return this.props.data.cata({
+      Success: value => <Success value={value} onClick={this.openJumio} />,
+      Loading: () => <div />,
+      NotAsked: () => <div />,
+      Failure: () => <div />
+    })
+  }
+}
+
+const mapStateToProps = state => ({
+  data: getData(state),
+  profile: selectors.core.data.sfox.getProfile(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(actions.modals, dispatch),
+  sfoxActions: bindActionCreators(actions.modules.sfox, dispatch)
+})
+
+const enhance = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)
+
+export default enhance(JumioStatusContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/JumioStatus/selectors.js

@@ -0,0 +1,3 @@
+import { path } from 'ramda'
+
+export const getData = state => path(['sfoxSignup', 'jumioStatus'])(state)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/JumioStatus/template.success.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FormattedMessage } from 'react-intl'
+import { Button, Text } from 'blockchain-info-components'
+
+const Container = styled.div`
+  padding: 15px;
+  border: 1px solid ${props => props.theme['gray-1']};
+`
+const Title = styled(Text)`
+  color: ${props => props.theme['brand-primary']};
+  margin-bottom: 10px;
+`
+const Body = styled(Text)`
+  font-size: 14px;
+  font-weight: 300;
+`
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+`
+
+export const Success = ({ value, onClick }) => {
+  const { status } = value
+  const statusTitleHelper = status => {
+    switch (status) {
+      case 'PENDING':
+        return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.title.pending'
+            defaultMessage='Identity Verification Pending'
+          />
+        )
+      case 'FAILED':
+        return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.title.failed'
+            defaultMessage='Identity Verification Failed'
+          />
+        )
+    }
+  }
+  const statusBodyHelper = status => {
+    switch (status) {
+      case 'PENDING':
+        return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.body.pending'
+            defaultMessage='It looks like you tried to verify your identity but never finished.'
+          />
+        )
+      case 'FAILED':
+        return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.body.failed'
+            defaultMessage='There was a problem with your identity verification documents. Please try again.'
+          />
+        )
+    }
+  }
+
+  return (
+    status !== 'DONE' && (
+      <Container>
+        <Title>{statusTitleHelper(status)}</Title>
+        <Body>{statusBodyHelper(status)}</Body>
+        <ButtonWrapper>
+          <Button onClick={onClick} nature='light' uppercase>
+            <FormattedMessage
+              id='scenes.buysell.sfoxcheckout.content.jumio.button.tryagain'
+              defaultMessage='Try Again'
+            />
+          </Button>
+        </ButtonWrapper>
+      </Container>
+    )
+  )
+}

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js

@@ -10,6 +10,7 @@ import { FormattedMessage } from 'react-intl'
 import { Remote } from 'blockchain-wallet-v4/src'
 import Stepper, { StepView } from 'components/Utilities/Stepper'
 import OrderCheckout from './OrderCheckout'
+import JumioStatus from './JumioStatus'
 import { OrderDetails, OrderSubmit } from './OrderReview'
 import Helper from 'components/BuySell/FAQ'
 import EmptyOrderHistoryContainer from 'components/BuySell/EmptyOrderHistory'
@@ -24,7 +25,7 @@ const CheckoutWrapper = styled.div`
 `
 const OrderSubmitWrapper = CheckoutWrapper.extend`
   width: 35%;
-  padding: 30px 30px 30px 10%;
+  padding: 0px 30px 30px 10%;
   ${media.mobile`
     padding: 0px;
   `};
@@ -171,7 +172,10 @@ const Success = props => {
                 type={'buy'}
               />
             </CheckoutWrapper>
-            <OrderSubmitWrapper>{faqListHelper()}</OrderSubmitWrapper>
+            <OrderSubmitWrapper>
+              <JumioStatus />
+              {faqListHelper()}
+            </OrderSubmitWrapper>
           </SfoxBuySellContainer>
         </StepView>
         <StepView step={1}>

packages/blockchain-wallet-v4/src/redux/kvStore/buySell/actionTypes.js

@@ -14,6 +14,8 @@ export const FETCH_METADATA_BUYSELL_FAILURE =
 export const CREATE_METADATA_BUYSELL = '@CORE.CREATE_METADATA_BUYSELL'
 
 export const SFOX_SET_PROFILE_BUYSELL = '@CORE.SFOX_SET_PROFILE_BUYSELL'
+export const SFOX_SET_JUMIO_TOKEN = '@CORE.SFOX_SET_JUMIO_TOKEN'
+
 export const COINIFY_SET_PROFILE_BUYSELL = '@CORE.COINIFY_SET_PROFILE_BUYSELL'
 
 export const WIPE_EXTERNAL = '@CORE.WIPE_EXTERNAL'

packages/blockchain-wallet-v4/src/redux/kvStore/buySell/actions.js

@@ -38,6 +38,10 @@ export const sfoxSetProfileBuySell = payload => ({
   type: AT.SFOX_SET_PROFILE_BUYSELL,
   payload
 })
+export const sfoxSetJumioToken = payload => ({
+  type: AT.SFOX_SET_JUMIO_TOKEN,
+  payload
+})
 export const coinifySetProfileBuySell = payload => ({
   type: AT.COINIFY_SET_PROFILE_BUYSELL,
   payload

packages/blockchain-wallet-v4/src/redux/kvStore/buySell/reducers.js

@@ -68,6 +68,14 @@ export default (state = INITIAL_STATE, action) => {
 
       return over(valueLens, setAll, state)
     }
+    case AT.SFOX_SET_JUMIO_TOKEN: {
+      const valueLens = compose(
+        mapped,
+        KVStoreEntry.value
+      )
+      const setJumio = compose(assocPath(['sfox', 'jumio'], payload))
+      return over(valueLens, setJumio, state)
+    }
     case AT.COINIFY_SET_PROFILE_BUYSELL: {
       const valueLens = compose(
         mapped,

packages/blockchain-wallet-v4/src/redux/kvStore/buySell/selectors.js

@@ -10,6 +10,9 @@ export const getSfoxTrades = state =>
 export const getSfoxUser = state =>
   getMetadata(state).map(path(['value', 'sfox', 'user']))
 
+export const getSfoxJumio = state =>
+  getMetadata(state).map(path(['value', 'sfox', 'jumio']))
+
 export const getCoinifyTrades = state =>
   getMetadata(state).map(path(['value', 'coinify', 'trades']))