Skip to content

Commit

Permalink
feat(KYC): added qrcode/link to the high flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@tony-blockchain
tony-blockchain committed Nov 30, 2018
1 parent b0e235b commit d37a36f
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 164 deletions.
123 changes: 21 additions & 102 deletions .../modals/Exchange/IdentityVerification/Verify/__snapshots__/template.highflow.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,108 +4,9 @@ exports[`HighFlow should render correctly 1`] = `
<IdentityVerification__IdentityVerificationForm>
<FooterShadowWrapper
fields={
<templatehighflow__VerifyWrapper>
<IdentityVerification__ColLeft>
<IdentityVerification__InputWrapper>
<IdentityVerification__IdentityVerificationHeader>
<FormattedMessage
defaultMessage="Last Step. Continue your verification on mobile"
id="identityverification.highflow.header"
values={Object {}}
/>
</IdentityVerification__IdentityVerificationHeader>
<IdentityVerification__IdentityVerificationImage
name="identity-verification"
/>
<IdentityVerification__IdentityVerificationSubHeader>
<Text
altFont={false}
capitalize={false}
color="gray-5"
cursor="inherit"
italic={false}
opacity={1}
size="16px"
uppercase={false}
weight={400}
>
<FormattedMessage
defaultMessage="We need to confirm your identity by taking a selfie video"
id="identityverification.highflow.message"
values={Object {}}
/>
</Text>
<br />
<Text
altFont={false}
capitalize={false}
color="gray-5"
cursor="inherit"
italic={false}
opacity={1}
size="16px"
uppercase={false}
weight={400}
>
<FormattedMessage
defaultMessage="- We just sent you an SMS to {mobile} with a link to complete KYC on your mobile device"
id="identityverification.highflow.sentlink"
values={
Object {
"mobile": "1234567890",
}
}
/>
</Text>
<Text
altFont={false}
capitalize={false}
color="gray-5"
cursor="inherit"
italic={false}
opacity={1}
size="16px"
uppercase={false}
weight={400}
>
<FormattedMessage
defaultMessage="- Get your ID or Passport ready"
id="identityverification.highflow.getidready"
values={Object {}}
/>
</Text>
<br />
<Link
bold={false}
capitalize={false}
color="brand-secondary"
onClick={
[MockFunction] {
"calls": Array [
Array [],
],
"results": Array [
Object {
"isThrow": false,
"value": undefined,
},
],
}
}
size="16px"
uppercase={false}
weight={400}
>
<FormattedMessage
defaultMessage="Resend link"
id="identityverification.highflow.resend"
values={Object {}}
/>
</Link>
</IdentityVerification__IdentityVerificationSubHeader>
</IdentityVerification__InputWrapper>
</IdentityVerification__ColLeft>
</templatehighflow__VerifyWrapper>
<Context.Consumer>
[Function]
</Context.Consumer>
}
footer={
<templatehighflow__Footer>
Expand All @@ -118,6 +19,24 @@ exports[`HighFlow should render correctly 1`] = `
values={Object {}}
/>
</IdentityVerification__BackButton>
<Button
bold={false}
capitalize={false}
disabled={false}
fullwidth={false}
height="40px"
nature="primary"
onClick={[MockFunction]}
rounded={false}
small={false}
uppercase={false}
>
<FormattedMessage
defaultMessage="I'm done"
id="identityverification.personal.done"
values={Object {}}
/>
</Button>
</templatehighflow__Footer>
}
/>
Expand Down
18 changes: 14 additions & 4 deletions ...es/blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Verify/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,20 @@ class VerifyContainer extends React.PureComponent {
}

render () {
const { data, actions, ...rest } = this.props
const { data, actions, modalActions, ...rest } = this.props

return data.cata({
Success: ({ docTypes, flowType, mobile }) =>
Success: ({ docTypes, flowType, email, deeplink }) =>
flowType === FLOW_TYPES.LOW ? (
<LowFlow supportedDocuments={docTypes} {...rest} />
) : (
<HighFlow mobile={mobile} send={actions.sendDeeplink} {...rest} />
<HighFlow
email={email}
deeplink={deeplink}
send={actions.sendDeeplink}
done={modalActions.closeAllModals}
{...rest}
/>
),
Loading: () => <Loading />,
NotAsked: () => null,
Expand All @@ -40,7 +46,11 @@ const mapStateToProps = state => ({
})

const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions.components.identityVerification, dispatch)
actions: bindActionCreators(
actions.components.identityVerification,
dispatch
),
modalActions: bindActionCreators(actions.modals, dispatch)
})

export default connect(
Expand Down
9 changes: 5 additions & 4 deletions ...lockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Verify/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ const {
getKycFLowType
} = selectors.components.identityVerification

const { getUserData } = selectors.modules.profile
const { getEmail } = selectors.core.settings

export const getData = state => {
return lift(({ mobile }, docTypes, flowType) => ({
mobile,
return lift((email, docTypes, flowType) => ({
email,
deeplink: 'https://blockchainwallet.page.link/dashboard',
docTypes,
flowType
}))(getUserData(state), getSupportedDocuments(state), getKycFLowType(state))
}))(getEmail(state), getSupportedDocuments(state), getKycFLowType(state))
}
141 changes: 96 additions & 45 deletions ...n-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Verify/template.highflow.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
import styled from 'styled-components'
import QRCodeReact from 'qrcode.react'

import media from 'services/ResponsiveService'

import { Link, Text } from 'blockchain-info-components'
import { Button, Link, Text } from 'blockchain-info-components'
import { FooterShadowWrapper } from 'components/Form'
import {
BackButton,
Expand All @@ -16,74 +17,118 @@ import {
IdentityVerificationSubHeader,
IdentityVerificationImage
} from 'components/IdentityVerification'
import { MediaContextConsumer } from 'providers/MatchMediaProvider'

const Footer = styled.div`
width: 60%;
display: flex;
flex-direction: row;
justify-content: space-between;
`
const ColumnSubHeader = styled(IdentityVerificationSubHeader)`
display: flex;
flex-direction: column;
align-items: flex-start;
ustify-content: flex-start;
`
const VerifyWrapper = styled.div`
display: flex;
flex-direction: row;
${media.mobile`
flex-direction: column;
`};
`
const CenterWrapper = styled.div`
align-self: center;
`

class Verify extends React.PureComponent {
componentDidMount () {
this.props.send()
}

render () {
const { send, onBack, mobile } = this.props
const { onBack, done, deeplink, email } = this.props
return (
<IdentityVerificationForm>
<FooterShadowWrapper
fields={
<VerifyWrapper>
<ColLeft>
<InputWrapper>
<IdentityVerificationHeader>
<FormattedMessage
id='identityverification.highflow.header'
defaultMessage='Last Step. Continue your verification on mobile'
/>
</IdentityVerificationHeader>
<IdentityVerificationImage name='identity-verification' />
<IdentityVerificationSubHeader>
<Text>
<FormattedMessage
id='identityverification.highflow.message'
defaultMessage='We need to confirm your identity by taking a selfie video'
/>
</Text>
<br />
<Text>
<FormattedMessage
id='identityverification.highflow.sentlink'
defaultMessage='- We just sent you an SMS to {mobile} with a link to complete KYC on your mobile device'
values={{ mobile }}
/>
</Text>
<Text>
<FormattedMessage
id='identityverification.highflow.getidready'
defaultMessage='- Get your ID or Passport ready'
/>
</Text>
<br />
<Link onClick={send}>
<FormattedMessage
id='identityverification.highflow.resend'
defaultMessage='Resend link'
/>
</Link>
</IdentityVerificationSubHeader>
</InputWrapper>
</ColLeft>
</VerifyWrapper>
<MediaContextConsumer>
{({ mobile }) => (
<VerifyWrapper>
<ColLeft>
<InputWrapper>
<IdentityVerificationHeader>
<FormattedMessage
id='identityverification.highflow.header'
defaultMessage='Last Step. Continue your verification on mobile'
/>
</IdentityVerificationHeader>
<IdentityVerificationImage name='identity-verification' />
<ColumnSubHeader>
<Text weight={300}>
<FormattedMessage
id='identityverification.highflow.message'
defaultMessage='We need you to continue your verification on our mobile app.
Follow these steps:'
/>
</Text>
<Text size='14px' weight={300}>
<FormattedMessage
id='identityverification.highflow.sentlink'
defaultMessage='*We’ve also sent you an email with these instructions to {email}'
values={{ email }}
/>
</Text>
<br />
{mobile && (
<React.Fragment>
<Text weight={300}>
<FormattedHTMLMessage
id='identityverification.highflow.followlink'
defaultMessage='1 - <b>Follow this link</b> to log in to or download our mobile app.'
/>
</Text>
<br />
<CenterWrapper>
<Link href={deeplink} target='_blank'>
<Button nature='primary'>
<FormattedMessage
id='identityverification.highflow.continueonmobile'
defaultMessage='Continue on mobile'
/>
</Button>
</Link>
</CenterWrapper>
</React.Fragment>
)}
{!mobile && (
<React.Fragment>
<Text weight={300}>
<FormattedHTMLMessage
id='identityverification.highflow.scanqr'
defaultMessage='1 - <b>Scan this QR code</b> with your phone to log in to this wallet or download our mobile app. '
/>
</Text>
<br />
<CenterWrapper>
<QRCodeReact value={deeplink} size={108} />
</CenterWrapper>
</React.Fragment>
)}
<br />
<Text weight={300}>
<FormattedHTMLMessage
id='identityverification.highflow.getidready'
defaultMessage='2 - Get your <b>Identity documents</b> (eg. Passport) and be ready to take a selfie video. '
/>
</Text>
</ColumnSubHeader>
</InputWrapper>
</ColLeft>
</VerifyWrapper>
)}
</MediaContextConsumer>
}
footer={
<Footer>
Expand All @@ -93,6 +138,12 @@ class Verify extends React.PureComponent {
defaultMessage='Back'
/>
</BackButton>
<Button nature='primary' onClick={done}>
<FormattedMessage
id='identityverification.personal.done'
defaultMessage="I'm done"
/>
</Button>
</Footer>
}
/>
Expand Down

0 comments on commit d37a36f

Please sign in to comment.