feat(Jumio): add 'next' to jumio flow, if user has account close, if …

…not go to funding
blockchain · Jul 17, 2018 · 3d34a25 · 3d34a25
1 parent d39f88d
commit 3d34a25
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 9 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/index.js
@@ -7,14 +7,33 @@ import { getData } from './selectors'
 import Success from './template.success'
 
 class JumioContainer extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.onFinish = this.onFinish.bind(this)
+  }
+
   componentWillMount () {
     this.props.sfoxActions.getJumioToken()
   }
 
+  onFinish () {
+    const { data } = this.props
+    const { accounts } = data.getOrElse({})
+    accounts.length
+      ? this.props.modalActions.closeModal()
+      : this.props.sfoxActions.nextStep('funding')
+  }
+
   render () {
     const { data } = this.props
     return data.cata({
-      Success: value => <Success token={value.token} options={value.options} />,
+      Success: value => (
+        <Success
+          token={value.token}
+          options={value.options}
+          onFinish={this.onFinish}
+        />
+      ),
       Loading: () => <div>Loading</div>,
       Failure: msg => <div>{msg}</div>,
       NotAsked: () => <div />
@@ -27,6 +46,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(actions.modals, dispatch),
   sfoxActions: bindActionCreators(actions.modules.sfox, dispatch)
 })
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/selectors.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/selectors.js
@@ -3,14 +3,19 @@ import { lift, path } from 'ramda'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
 
 export const getData = createDeepEqualSelector(
-  [selectors.core.walletOptions.getOptions, path(['sfoxSignup', 'jumioToken'])],
-  (optionsR, tokenR) => {
-    const transform = (options, token) => {
+  [
+    selectors.core.data.sfox.getAccounts,
+    selectors.core.walletOptions.getOptions,
+    path(['sfoxSignup', 'jumioToken'])
+  ],
+  (accountsR, optionsR, tokenR) => {
+    const transform = (accounts, options, token) => {
       return {
+        accounts,
         options,
         token
       }
     }
-    return lift(transform)(optionsR, tokenR)
+    return lift(transform)(accountsR, optionsR, tokenR)
   }
 )
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/template.success.js
@@ -6,8 +6,8 @@ const Container = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
 `
 const JumioFrame = styled.iframe`
   width: 80%;
@@ -16,9 +16,20 @@ const JumioFrame = styled.iframe`
   border-style: solid;
   border-color: ${props => props.theme['gray-1']};
 `
+const LinkContainer = styled.div`
+  width: 80%;
+  margin-top: 5px;
+  text-align: right;
+`
+const Link = styled.span`
+  cursor: pointer;
+  font-size: 13px;
+  text-decoration: underline;
+  color: ${props => props.theme['brand-secondary']};
+`
 
-const Success = value => {
-  const { options, token } = value
+const Success = props => {
+  const { options, token, onFinish } = props
   const { authorizationToken } = token
   const walletHelperRoot = path(['domains', 'walletHelper'], options)
   const jumioUrl = `${walletHelperRoot}/wallet-helper/jumio/#/key/${authorizationToken}`
@@ -31,6 +42,9 @@ const Success = value => {
         scrolling='yes'
         id='jumio'
       />
+      <LinkContainer>
+        <Link onClick={onFinish}>Next</Link>
+      </LinkContainer>
     </Container>
   )
 }