Skip to content

Commit

Permalink
fix(Onboarding): Claim xlm page should show well send you free crypto…
Browse files Browse the repository at this point in the history 
… once profile complete
  • Loading branch information
plondon committed Mar 8, 2019
1 parent 99f4182 commit 085aca8
Showing 1 changed file with 203 additions and 64 deletions.
267 changes: 203 additions & 64 deletions ...blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Submitted/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,27 @@ import React from 'react'
import { reduxForm } from 'redux-form'
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
import { compose, bindActionCreators } from 'redux'
import { prop } from 'ramda'
import { connect } from 'react-redux'
import styled from 'styled-components'
import CopyToClipBoard from 'react-copy-to-clipboard'

import { actions, model } from 'data'
import { Button, Icon, HeartbeatLoader, Text } from 'blockchain-info-components'
import { actions, model, selectors } from 'data'
import {
Button,
HeartbeatLoader,
Icon,
Link,
TooltipHost,
Text
} from 'blockchain-info-components'
import { Form } from 'components/Form'
import { IdentityVerificationForm } from 'components/IdentityVerification'

const { ID_VERIFICATION_SUBMITTED_FORM } = model.components.identityVerification
const {
CAMPAIGNS,
ID_VERIFICATION_SUBMITTED_FORM
} = model.components.identityVerification

const SubmittedIdentityVerificationForm = styled(IdentityVerificationForm)`
justify-content: center;
Expand Down Expand Up @@ -57,74 +69,201 @@ const ClaimButton = styled(Button)`
font-size: 18px;
min-width: 200px;
`
const Footer = styled.div`
display: flex;
margin-top: 16px;
justify-content: space-around;
align-items: center;
height: auto;
padding: 0 24px 32px 24px;
box-sizing: border-box;
`
const FooterButton = styled(Button)`
height: 48px;
font-weight: 300;
min-width: auto;
padding: 14px;
`
const FooterIcon = styled(Icon).attrs({
color: 'white'
})`
margin-right: 12px;
`

class Submitted extends React.PureComponent {
state = {
initialIsSunRiverTagged: this.props.isSunRiverTagged
}

handleCopy = () => {
this.setState({ isLinkCopied: true })
setTimeout(() => {
this.setState({ isLinkCopied: false })
}, 3000)
}

const Submitted = ({ campaign, identityVerificationActions, submitting }) => (
<SubmittedIdentityVerificationForm>
<SubmittedWrapper>
<Icon name='checkmark-in-circle-filled' color='success' size='36px' />
<Header>
<FormattedMessage
id='modals.exchange.identityverification.submitted.appcomplete'
defaultMessage='Application Complete!'
/>
</Header>
<SubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.subheader'
defaultMessage="You've successfully submitted your application. A Blockchain Support Member is now reviewing your information."
/>
</SubHeader>
<NextSteps>
<NextStepsHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.nextstepsheader'
defaultMessage='What happens next?'
/>
</NextStepsHeader>
<NextStepsSubHeader>
<FormattedHTMLMessage
id='modals.exchange.identityverification.submitted.mayaskforid'
defaultMessage="You'll hear back from us in the next <b>5 business days</b>. If something looks odd, we may have to ask you to upload another form of ID."
/>
</NextStepsSubHeader>
<NextStepsSubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.whileyouwait'
defaultMessage='While you wait, you can still trade and move currency up to your current limit.'
/>
</NextStepsSubHeader>
</NextSteps>
<Form
onSubmit={e => {
e.preventDefault()
identityVerificationActions.claimCampaignClicked(campaign)
}}
>
<ClaimButton nature='primary' type='submit' disabled={submitting}>
{submitting ? (
<HeartbeatLoader height='20px' width='20px' color='white' />
) : (
hideCopied = () => {
this.setState({ isLinkCopied: false })
}

render () {
const { campaign, identityVerificationActions, submitting } = this.props
const { initialIsSunRiverTagged } = this.state
const { isLinkCopied } = this.state
const link = 'https://www.blockchain.com/getcrypto/claim'
const tweetLink =
'https://twitter.com/intent/tweet?text=' +
`I just claimed free ${prop('coinName', CAMPAIGNS[campaign])} ${prop(
'coinCode',
CAMPAIGNS[campaign]
)} from @blockchain. Get Yours ${link}`
const facebookLink = `https://www.facebook.com/sharer/sharer.php?u=${link}`

return (
<SubmittedIdentityVerificationForm>
<SubmittedWrapper>
<Icon name='checkmark-in-circle-filled' color='success' size='36px' />
<Header>
<FormattedMessage
id='modals.exchange.identityverification.submitted.claim'
defaultMessage='Claim Free XLM'
id='modals.exchange.identityverification.submitted.appcomplete'
defaultMessage='Application Complete!'
/>
)}
</ClaimButton>
<NextStepsSubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.makesuretoclick'
defaultMessage='Once your verification is successfully completed, we’ll send you free crypto. Make sure you click the button to claim your free XLM.'
/>
</NextStepsSubHeader>
</Form>
</SubmittedWrapper>
</SubmittedIdentityVerificationForm>
)
</Header>
<SubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.subheader'
defaultMessage="You've successfully submitted your application. A Blockchain Support Member is now reviewing your information."
/>
</SubHeader>
<NextSteps>
<NextStepsHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.nextstepsheader'
defaultMessage='What happens next?'
/>
</NextStepsHeader>
<NextStepsSubHeader>
<FormattedHTMLMessage
id='modals.exchange.identityverification.submitted.mayaskforid'
defaultMessage="You'll hear back from us in the next <b>5 business days</b>. If something looks odd, we may have to ask you to upload another form of ID."
/>
</NextStepsSubHeader>
<NextStepsSubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.whileyouwait'
defaultMessage='While you wait, you can still trade and move currency up to your current limit.'
/>
</NextStepsSubHeader>
</NextSteps>
<Form
onSubmit={e => {
e.preventDefault()
identityVerificationActions.claimCampaignClicked(campaign)
}}
>
{initialIsSunRiverTagged ? (
<React.Fragment>
<Text color='black' size='20px'>
<FormattedMessage
id='modals.exchange.identityverification.submitted.freecrypto'
defaultMessage="Once your profile is successfully verified, we'll send you your free crypto. Don't forget to share the wealth with friends and family!"
/>
</Text>
<Footer>
<Link
href={tweetLink}
rel='noopener noreferrer'
target='_blank'
>
<FooterButton nature='primary' size='16px'>
<FooterIcon name='twitter' size='18px' />
<FormattedMessage
defaultMessage='Tweet'
id='modals.airdropsuccess.tweet'
/>
</FooterButton>
</Link>
<Link
href={facebookLink}
rel='noopener noreferrer'
target='_blank'
>
<FooterButton nature='secondary' size='16px'>
<FooterIcon name='facebook' size='18px' />
<FormattedMessage
defaultMessage='Share'
id='modals.airdropsuccess.share'
/>
</FooterButton>
</Link>
<CopyToClipBoard text={link} onCopy={this.handleCopy}>
{isLinkCopied ? (
<TooltipHost id='copied'>
<FooterButton
nature='purple'
size='16px'
onMouseLeave={this.hideCopied}
>
<FooterIcon name='copy' size='12px' />
<FormattedMessage
defaultMessage='Copy'
id='modals.airdropsuccess.copy'
/>
</FooterButton>
</TooltipHost>
) : (
<FooterButton nature='purple' size='16px'>
<FooterIcon name='copy' size='12px' />
<FormattedMessage
defaultMessage='Copy'
id='modals.airdropsuccess.copy'
/>
</FooterButton>
)}
</CopyToClipBoard>
</Footer>
</React.Fragment>
) : (
<React.Fragment>
<ClaimButton
nature='primary'
type='submit'
disabled={submitting}
>
{submitting ? (
<HeartbeatLoader height='20px' width='20px' color='white' />
) : (
<FormattedMessage
id='modals.exchange.identityverification.submitted.claim'
defaultMessage='Claim Free XLM'
/>
)}
</ClaimButton>
<NextStepsSubHeader>
<FormattedMessage
id='modals.exchange.identityverification.submitted.makesuretoclick'
defaultMessage='Once your verification is successfully completed, we’ll send you free crypto. Make sure you click the button to claim your free XLM.'
/>
</NextStepsSubHeader>
</React.Fragment>
)}
</Form>
</SubmittedWrapper>
</SubmittedIdentityVerificationForm>
)
}
}

Submitted.defaultProps = {
campaign: 'sunriver'
}

const mapStateToProps = state => ({
isSunRiverTagged: selectors.modules.profile
.getSunRiverTag(state)
.getOrElse(false)
})

const mapDispatchToProps = dispatch => ({
identityVerificationActions: bindActionCreators(
actions.components.identityVerification,
Expand All @@ -135,7 +274,7 @@ const mapDispatchToProps = dispatch => ({
const enhance = compose(
reduxForm({ form: ID_VERIFICATION_SUBMITTED_FORM }),
connect(
undefined,
mapStateToProps,
mapDispatchToProps
)
)
Expand Down

0 comments on commit 085aca8

Please sign in to comment.