feat(KYC): added more info step

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

@@ -10,7 +10,6 @@ import * as A from './actions'
 import * as S from './selectors'
 import {
   EMAIL_STEPS,
-  STEPS,
   SMS_STEPS,
   SMS_NUMBER_FORM,
   PERSONAL_FORM,
@@ -44,7 +43,7 @@ export default ({ api, coreSagas }) => {
     PERSONAL_STEP_COMPLETE,
     MOBILE_STEP_COMPLETE
   } = model.analytics.KYC
-  const { USER_ACTIVATION_STATES, TIERS } = model.profile
+  const { TIERS } = model.profile
   const {
     getCampaignData,
     fetchUser,
@@ -176,20 +175,8 @@ export default ({ api, coreSagas }) => {
   }
 
   const initializeStep = function*() {
-    const activationState = (yield select(
-      selectors.modules.profile.getUserActivationState
-    )).getOrElse(USER_ACTIVATION_STATES.NONE)
-    const mobileVerified = (yield select(selectors.modules.profile.getUserData))
-      .map(prop('mobileVerified'))
-      .getOrElse(false)
     const steps = (yield select(S.getSteps)).getOrElse([])
-    if (activationState === USER_ACTIVATION_STATES.NONE)
-      return yield put(A.setVerificationStep(head(steps)))
-    if (mobileVerified) return yield put(A.setVerificationStep(STEPS.verify))
-    if (activationState === USER_ACTIVATION_STATES.CREATED)
-      return yield put(A.setVerificationStep(STEPS.mobile))
-    if (activationState === USER_ACTIVATION_STATES.ACTIVE)
-      return yield put(A.setVerificationStep(STEPS.verify))
+    return yield put(A.setVerificationStep(head(steps)))
   }
 
   const goToPrevStep = function*() {

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

@@ -9,7 +9,7 @@ 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, STEPS } from './model'
+import { EMAIL_STEPS, FLOW_TYPES } from './model'
 import sagas, { wrongFlowTypeError } from './sagas'
 
 const api = {
@@ -39,10 +39,7 @@ const {
   verifyIdentity
 } = sagas({ api, coreSagas })
 
-const { USER_ACTIVATION_STATES, TIERS } = model.profile
-const { NONE, CREATED, ACTIVE } = USER_ACTIVATION_STATES
-
-const { getUserActivationState } = selectors.modules.profile
+const { TIERS } = model.profile
 
 getSmsVerified.mockReturnValue(Remote.of(false))
 getUserTiers.mockReturnValue(Remote.NotAsked)
@@ -105,70 +102,12 @@ describe('defineSteps saga', () => {
 
 describe('initializeStep saga', () => {
   const steps = ['personal', 'mobile', 'verify']
-  it('should initialize first of the steps by default', () =>
+  it('should select steps and initialize first step', () =>
     expectSaga(initializeStep)
-      .provide([
-        [select(getUserActivationState), Remote.NotAsked],
-        [select(getUserData), Remote.NotAsked],
-        [select(S.getSteps), Remote.of(steps)]
-      ])
-      .select(getUserActivationState)
-      .select(getUserData)
+      .provide([[select(S.getSteps), Remote.of(steps)]])
       .select(S.getSteps)
       .put(A.setVerificationStep(steps[0]))
       .run())
-
-  it('should initialize first of the steps if userState is NONE', () =>
-    expectSaga(initializeStep)
-      .provide([
-        [select(getUserActivationState), Remote.of(NONE)],
-        [select(getUserData), Remote.NotAsked],
-        [select(S.getSteps), Remote.of(steps)]
-      ])
-      .select(getUserActivationState)
-      .select(getUserData)
-      .select(S.getSteps)
-      .put(A.setVerificationStep(steps[0]))
-      .run())
-
-  it('should initialize with verify step if userState is not NONE and mobileVerified is true', () =>
-    expectSaga(initializeStep)
-      .provide([
-        [select(getUserActivationState), Remote.of(CREATED)],
-        [select(getUserData), Remote.of({ mobileVerified: true })],
-        [select(S.getSteps), Remote.of(steps)]
-      ])
-      .select(getUserActivationState)
-      .select(getUserData)
-      .select(S.getSteps)
-      .put(A.setVerificationStep(STEPS.verify))
-      .run())
-
-  it('should initialize mobile step if userState is CREATED and mobileVerified is false', () =>
-    expectSaga(initializeStep)
-      .provide([
-        [select(getUserActivationState), Remote.of(CREATED)],
-        [select(getUserData), Remote.of({ mobileVerified: false })],
-        [select(S.getSteps), Remote.of(steps)]
-      ])
-      .select(getUserActivationState)
-      .select(getUserData)
-      .select(S.getSteps)
-      .put(A.setVerificationStep(STEPS.mobile))
-      .run())
-
-  it('should initialize verify step if userState is ACTIVE and mobileVerified is false', () =>
-    expectSaga(initializeStep)
-      .provide([
-        [select(getUserActivationState), Remote.of(ACTIVE)],
-        [select(getUserData), Remote.of({ mobileVerified: false })],
-        [select(S.getSteps), Remote.of(steps)]
-      ])
-      .select(getUserActivationState)
-      .select(getUserData)
-      .select(S.getSteps)
-      .put(A.setVerificationStep(STEPS.verify))
-      .run())
 })
 
 describe('goToPrevStep saga', () => {

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

@@ -0,0 +1,89 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import media from 'services/ResponsiveService'
+import { actions } from 'data'
+import { Button } from 'blockchain-info-components'
+import { FooterShadowWrapper } from 'components/Form'
+import {
+  BackButton,
+  IdentityVerificationForm,
+  InputWrapper,
+  IdentityVerificationImage,
+  IdentityVerificationHeader,
+  IdentityVerificationSubHeader,
+  Footer
+} from 'components/IdentityVerification'
+
+const MoreInfoWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  ${media.mobile`
+    flex-direction: column;
+  `};
+`
+
+const MoreInfo = ({ goToNextStep, closeAllModals }) => (
+  <IdentityVerificationForm>
+    <FooterShadowWrapper
+      fields={
+        <MoreInfoWrapper>
+          <InputWrapper>
+            <IdentityVerificationHeader>
+              <FormattedMessage
+                id='identityverification.more_info.header'
+                defaultMessage='We Need Some More Information'
+              />
+            </IdentityVerificationHeader>
+            <IdentityVerificationImage name='identity-verification' />
+            <IdentityVerificationSubHeader>
+              <FormattedMessage
+                id='identityverification.more_info.more_info'
+                defaultMessage='We need to get a bit more information from you before you can start trading.'
+              />
+              <br />
+              <FormattedMessage
+                id='identityverification.more_info.required_documents'
+                defaultMessage="You'll need to verify your phone number and provide a government issued ID and selfie. Please click Continue below to complete these final steps."
+              />
+            </IdentityVerificationSubHeader>
+          </InputWrapper>
+        </MoreInfoWrapper>
+      }
+      footer={
+        <Footer>
+          <BackButton data-e2e='moreInfoCancelButton' onClick={closeAllModals}>
+            <FormattedMessage
+              id='identityverification.more_info.back'
+              defaultMessage='Cancel'
+            />
+          </BackButton>
+          <Button
+            nature='primary'
+            data-e2e='moreInfoContinueButton'
+            onClick={goToNextStep}
+          >
+            <FormattedMessage
+              id='identityverification.more_info.continue'
+              defaultMessage='Continue'
+            />
+          </Button>
+        </Footer>
+      }
+    />
+  </IdentityVerificationForm>
+)
+
+const mapDispatchToProps = dispatch => ({
+  goToNextStep: () =>
+    dispatch(actions.components.identityVerification.goToNextStep()),
+  closeAllModals: () => dispatch(actions.modals.closeAllModals())
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(MoreInfo)

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

@@ -0,0 +1 @@
+export { default } from './MoreInfo'

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

@@ -18,6 +18,7 @@ import Loading from './template.loading'
 import Personal from './Personal'
 import VerifyMobile from './VerifyMobile'
 import Verify from './Verify'
+import MoreInfo from './MoreInfo'
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -93,6 +94,12 @@ const stepMap = {
       defaultMessage='Personal'
     />
   ),
+  [STEPS.moreInfo]: (
+    <FormattedMessage
+      id='modals.identityverification.steps.more_info'
+      defaultMessage='Info'
+    />
+  ),
   [STEPS.mobile]: (
     <FormattedMessage
       id='modals.identityverification.steps.mobile'
@@ -139,6 +146,8 @@ class IdentityVerification extends React.PureComponent {
         />
       )
 
+    if (step === STEPS.moreInfo) return <MoreInfo />
+
     if (step === STEPS.mobile)
       return (
         <VerifyMobile

packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/LimitInfo/LimitInfo.js

@@ -136,8 +136,8 @@ export const LimitAction = ({
 }
 export class LimitInfo extends React.PureComponent {
   upgradeTier = () => {
-    const { actions, nextTier } = this.props
-    actions.verifyIdentity(nextTier)
+    const { actions, nextTier, upgradeRequired } = this.props
+    actions.verifyIdentity(nextTier, false, upgradeRequired)
   }
 
   render () {