Skip to content

Commit

Permalink
feat: implemented button to jump to payment methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@milan-bc
milan-bc committed Jul 16, 2020
1 parent e2c4df9 commit 57baff7
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 26 deletions.
1 change: 1 addition & 0 deletions packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
View file
Expand Up @@ -1113,6 +1113,7 @@
"modals.simplebuy.selectcurrency": "Select Your Currency",
"modals.simplebuy.cryptoselect": "Buy with Cash or Card",
"modals.simplebuy.paymentmethods": "Payment Methods",
"modals.simplebuy.depositcash_description": "Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.",
"modals.simplebuy.selectcrypto": "Select the crypto you want to buy.",
"modals.simplebuy.setupaccount": "Next, we'll set up your account.",
"modals.simplebuy.success": "Trade Complete",
Expand Down
2 changes: 2 additions & 0 deletions packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
View file
Expand Up @@ -1116,6 +1116,7 @@ type MessagesType = {
'modals.simplebuy.confirm.activity': 'Your final amount may change due to market activity.'
'modals.simplebuy.confirm.buynow': 'Buy Now'
'modals.simplebuy.confirm.fee': 'Fees'
'modals.simplebuy.confirm.jump_to_payment': 'Select Cash or Card'
'modals.simplebuy.confirm.payment': 'Payment Method'
'modals.simplebuy.confirm.rate': 'Exchange Rate'
'modals.simplebuy.confirm.total': 'Total'
Expand All @@ -1139,6 +1140,7 @@ type MessagesType = {
'modals.simplebuy.selectcurrency': 'Select Your Currency'
'modals.simplebuy.cryptoselect': 'Buy with Cash or Card'
'modals.simplebuy.paymentmethods': 'Payment Methods'
'modals.simplebuy.depositcash_description': 'Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.'
'modals.simplebuy.selectcrypto': 'Select the crypto you want to buy.'
'modals.simplebuy.setupaccount': "Next, we'll set up your account."
'modals.simplebuy.success': 'Trade Complete'
Expand Down
56 changes: 56 additions & 0 deletions ...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
View file
Expand Up @@ -91,6 +91,36 @@ const ErrorText = styled(Text)`
margin-bottom: 16px;
`

const JumpToPayment = styled.div`
border: 1px solid ${props => props.theme.grey100};
box-sizing: border-box;
width: 400px;
height: 80px;
border-radius: 8px;
margin-bottom: 24px;
display: flex;
flex-direction: row;
cursor: pointer;
padding: 23px 28px 28px 28px;
line-height: 32px;
justify-content: space-between;
`

const JumpIconWrapper = styled.div`
background-color: ${props => props.theme.blue000};
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 22px;
`
const JumpText = styled(Text)`
width: 285px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 32px;
`

export type Props = OwnProps & SuccessStateType

const normalizeAmount = (
Expand Down Expand Up @@ -263,6 +293,32 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
</GreyBlueCartridge>
</Amounts>
)}
<JumpToPayment
onClick={() =>
props.simpleBuyActions.setStep({
step: 'PAYMENT_METHODS',
pair: props.pair,
fiatCurrency: props.fiatCurrency || 'USD'
})
}
>
<JumpIconWrapper>
<Icon
cursor
name='plus-in-circle-filled'
size='22px'
color='blue600'
style={{ marginLeft: '4px' }}
/>
</JumpIconWrapper>
<JumpText>
<FormattedMessage
id='modals.simplebuy.confirm.jump_to_payment'
defaultMessage='Select Cash or Card'
/>
</JumpText>
<Icon cursor name='arrow-right' size='20px' color='grey600' />
</JumpToPayment>
{props.error && (
<ErrorText>
<Icon
Expand Down
182 changes: 156 additions & 26 deletions ...ages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx
View file
Expand Up @@ -3,7 +3,8 @@ import { Form, InjectedFormProps, reduxForm } from 'redux-form'
import { FormattedMessage } from 'react-intl'
import { Icon, Text } from 'blockchain-info-components'
import { Props as OwnProps, SuccessStateType } from '../index'
import React from 'react'
import { SBFormPaymentMethod } from 'data/components/simpleBuy/types'
import React, { PureComponent } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
Expand All @@ -15,36 +16,165 @@ const Wrapper = styled.div`
const TopText = styled(Text)`
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
`
const PaymentsWrapper = styled.div`
border-top: 1px solid ${props => props.theme.grey000};
`

// const IconContainer = styled.div`
// width: 38px;
// height: 32px;
// border-radius: 16px;
// background-color: ${props => props.theme.blue000};
// display: flex;
// align-items: center;
// justify-content: center;
// `

export type Props = OwnProps & SuccessStateType

const Payments: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
return (
<Wrapper>
<Form>
<FlyoutWrapper>
<TopText color='grey800' size='20px' weight={600}>
<FormattedMessage
id='modals.simplebuy.paymentmethods'
defaultMessage='Payment Methods'
/>
<Icon
cursor
data-e2e='sbCloseModalIcon'
name='close'
size='20px'
color='grey600'
role='button'
onClick={props.handleClose}
/>
</TopText>
</FlyoutWrapper>
</Form>
</Wrapper>
)
class Payments extends PureComponent<InjectedFormProps<{}, Props> & Props> {
getType = (value: SBFormPaymentMethod) => {
switch (value.type) {
case 'BANK_ACCOUNT':
return 'Bank Wire Transfer'
case 'PAYMENT_CARD':
return 'Add a Credit or Debit Card'
case 'USER_CARD':
return value && value.card
? value.card.label
? value.card.label
: value.card.type
: 'Add a Credit or Debit Card'
case 'FUNDS':
return ''
}
}

// getIcon = (value: SBCheckoutFormValuesType): ReactElement => {
// switch (value.type) {
// case 'BANK_ACCOUNT':
// return (
// <IconContainer>
// <Icon size='18px' color='blue600' name='bank-filled' />
// </IconContainer>
// )
// case 'PAYMENT_CARD':
// return (
// <IconContainer>
// <Icon size='16px' color='blue600' name='credit-card-sb' />
// </IconContainer>
// )
// case 'USER_CARD':
// let cardType = CARD_TYPES.find(
// card => card.type === (value.card ? value.card.type : '')
// )
// return (
// <img
// height='18px'
// width='auto'
// src={cardType ? cardType.logo : DEFAULT_CARD_SVG_LOGO}
// />
// )
// case 'FUNDS':
// return <></>
// }
// }

renderElements = () => {
const availableCards = this.props.cards.filter(
card => card.state === 'ACTIVE'
)
const defaultCardMethod = this.props.paymentMethods.methods.find(
m => m.type === 'PAYMENT_CARD'
)
const cardMethods = availableCards.map(card => ({
text: card.card
? card.card.label
? card.card.label
: card.card.type
: 'Credit or Debit Card',
value: {
...card,
type: 'USER_CARD',
limits: defaultCardMethod
? defaultCardMethod.limits
: { min: '1000', max: '500000' }
}
}))
const defaultMethods = this.props.paymentMethods.methods.map(value => ({
text: this.getType(value),
value
}))
// TODO: remove when adding FUNDS type
const defaultMethodsNoFunds = defaultMethods.filter(
method => method.value.type !== 'FUNDS'
)

const itemsss = {
group: '',
items: [...cardMethods, ...defaultMethodsNoFunds]
}
// eslint-disable-next-line
console.log('itemsss', itemsss)

// eslint-disable-next-line
console.log('availableCards', availableCards)
// eslint-disable-next-line
console.log('defaultMethodsNoFunds', defaultMethodsNoFunds)

// return [
// {
// group: '',
// items: [...cardMethods, ...defaultMethodsNoFunds]
// }
// ]
}

render () {
return (
<Wrapper>
<Form>
<FlyoutWrapper>
<TopText color='grey800' size='20px' weight={600}>
<Icon
cursor
name='arrow-left'
size='20px'
color='grey600'
style={{ marginRight: '24px' }}
role='button'
onClick={() =>
this.props.simpleBuyActions.setStep({
step: 'ENTER_AMOUNT',
fiatCurrency: this.props.fiatCurrency || 'USD',
pair: this.props.pair
})
}
/>
<div style={{ marginLeft: '28px' }}>
<FormattedMessage
id='modals.simplebuy.paymentmethods'
defaultMessage='Payment Methods'
/>
</div>
</TopText>
</FlyoutWrapper>
{this.renderElements()}

<PaymentsWrapper>
<div>
<FormattedMessage
id='modals.simplebuy.depositcash_description'
defaultMessage='Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.'
/>
</div>
</PaymentsWrapper>
</Form>
</Wrapper>
)
}
}

export default reduxForm<{}, Props>({
Expand Down

0 comments on commit 57baff7

Please sign in to comment.