Skip to content

Commit

Permalink
refactor(Tiers): Move messages to component services file
Browse files Browse the repository at this point in the history
  • Loading branch information
plondon committed Dec 13, 2018
1 parent 1b8a7e0 commit e862e4c
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 135 deletions.
13 changes: 7 additions & 6 deletions packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
import { FormattedMessage } from 'react-intl'
import { head, path, propEq } from 'ramda'
import { head, path, propEq, toLower } from 'ramda'
import { connect } from 'react-redux'

import { actions } from 'data'
Expand All @@ -11,7 +11,8 @@ import media from 'services/ResponsiveService'
import { Exchange } from 'blockchain-wallet-v4/src'
import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'

import { TIERS, getTiming } from './model'
import { TIERS } from './model'
import { messages, limits, status } from './services'

const Wrapper = styled.div`
display: flex;
Expand Down Expand Up @@ -115,21 +116,21 @@ export const TierCard = ({ userData, userTiers, tier, ...rest }) => {
<Text size='28px' color='marketing-secondary'>
{Exchange.getSymbol(tierData.limits.currency) +
Currency.formatFiat(
tierData.limits[path([tier, 'limit', 'type'], TIERS)],
tierData.limits[toLower(path([tier, 'limit'], TIERS))],
0
)}
</Text>
<Text size='14px' color='textBlack' style={{ marginTop: '8px' }}>
{path([tier, 'limit', 'message'], TIERS)}
{limits[path([tier, 'limit'], TIERS)]}
</Text>
<Text size='14px' color='gray-3' style={{ marginTop: '7px' }}>
{getTiming(tierData.state, tier)}
{status(tierData.state, path([tier, 'time'], TIERS))}
</Text>
</Column>
<Column>
{path([tier, 'requirements'], TIERS).map((requirement, i) => (
<TextGroup inline key={i} style={{ marginBottom: '8px' }}>
{requirement.message}
{messages[requirement.name]}
{requirement.complete(userData, userTiers) && (
<Icon
style={{ marginLeft: '5px' }}
Expand Down
139 changes: 10 additions & 129 deletions packages/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/model.js
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,26 @@
import React from 'react'
import { path, prop, propEq } from 'ramda'
import { FormattedMessage } from 'react-intl'
import { Text } from 'blockchain-info-components'

export const getTiming = (state, tier) => {
switch (state) {
case 'verified':
return (
<Text size='14px' color='success'>
<FormattedMessage
id='components.identityverification.tiercard.verified'
defaultMessage='Approved!'
/>
</Text>
)
case 'pending':
return (
<Text size='14px' color='btc'>
<FormattedMessage
id='components.identityverification.tiercard.pending'
defaultMessage='In Review'
/>
</Text>
)
case 'rejected':
return (
<Text size='14px' color='error'>
<FormattedMessage
id='components.identityverification.tiercard.rejected'
defaultMessage='Rejected'
/>
</Text>
)
default:
return (
<FormattedMessage
id='components.identityverification.tiercard.timing'
defaultMessage='Takes {time} min'
values={{ time: path([tier, 'time'], TIERS) }}
/>
)
}
}

export const TIERS = {
1: {
time: '3',
isActive: propEq('state', 'ACTIVE'),
limit: {
type: 'annual',
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.annuallimit'
defaultMessage='Annual Swap Limit'
/>
</Text>
)
},
limit: 'ANNUAL',
requirements: [
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.email'
defaultMessage='Verified Email'
/>
</Text>
),
name: 'EMAIL',
complete: prop('email')
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.name'
defaultMessage='Name'
/>
</Text>
),
name: 'NAME',
complete: userData =>
prop('firstName', userData) && prop('lastName', userData)
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.dob'
defaultMessage='Date of Birth'
/>
</Text>
),
name: 'DOB',
complete: prop('dob')
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.address'
defaultMessage='Address'
/>
</Text>
),
name: 'ADDRESS',
complete: userData =>
path(['address', 'city'], userData) &&
path(['address', 'country'], userData) &&
Expand All @@ -112,60 +31,22 @@ export const TIERS = {
2: {
time: '10',
isActive: propEq('kycState', 'VERIFIED'),
limit: {
type: 'daily',
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.dailylimit'
defaultMessage='Daily Swap Limit'
/>
</Text>
)
},
limit: 'DAILY',
requirements: [
{
message: (
<Text size='14px' color='gray-3'>
<FormattedMessage
id='components.identityverification.tiercard.tier1'
defaultMessage='Tier 1+'
/>
</Text>
),
name: 'TIER1',
complete: (userData, tiersData) => tiersData[1].state === 'verified'
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.phone'
defaultMessage='Verified Phone'
/>
</Text>
),
name: 'MOBILE',
complete: prop('mobileVerified')
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.id'
defaultMessage="Gov't Issued ID"
/>
</Text>
),
name: 'GOVID',
complete: userData => prop('kycState', userData) !== 'NONE'
},
{
message: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.selfie'
defaultMessage='Selfie'
/>
</Text>
),
name: 'SELFIE',
complete: userData => prop('kycState', userData) !== 'NONE'
}
]
Expand Down
129 changes: 129 additions & 0 deletions ...es/blockchain-wallet-v4-frontend/src/components/IdentityVerification/TierCard/services.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { Text } from 'blockchain-info-components'

export const messages = {
EMAIL: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.email'
defaultMessage='Verified Email'
/>
</Text>
),
NAME: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.name'
defaultMessage='Name'
/>
</Text>
),
DOB: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.dob'
defaultMessage='Date of Birth'
/>
</Text>
),
ADDRESS: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.address'
defaultMessage='Address'
/>
</Text>
),
TIER1: (
<Text size='14px' color='gray-3'>
<FormattedMessage
id='components.identityverification.tiercard.tier1'
defaultMessage='Tier 1+'
/>
</Text>
),
MOBILE: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.phone'
defaultMessage='Verified Phone'
/>
</Text>
),
GOVID: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.id'
defaultMessage="Gov't Issued ID"
/>
</Text>
),
SELFIE: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.selfie'
defaultMessage='Selfie'
/>
</Text>
)
}

export const limits = {
ANNUAL: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.annuallimit'
defaultMessage='Annual Swap Limit'
/>
</Text>
),
DAILY: (
<Text size='14px'>
<FormattedMessage
id='components.identityverification.tiercard.dailylimit'
defaultMessage='Daily Swap Limit'
/>
</Text>
)
}

export const status = (state, time) => {
switch (state) {
case 'verified':
return (
<Text size='14px' color='success'>
<FormattedMessage
id='components.identityverification.tiercard.verified'
defaultMessage='Approved!'
/>
</Text>
)
case 'pending':
return (
<Text size='14px' color='btc'>
<FormattedMessage
id='components.identityverification.tiercard.pending'
defaultMessage='In Review'
/>
</Text>
)
case 'rejected':
return (
<Text size='14px' color='error'>
<FormattedMessage
id='components.identityverification.tiercard.rejected'
defaultMessage='Rejected'
/>
</Text>
)
default:
return (
<FormattedMessage
id='components.identityverification.tiercard.timing'
defaultMessage='Takes {time} min'
values={{ time }}
/>
)
}
}

0 comments on commit e862e4c

Please sign in to comment.