-
Notifications
You must be signed in to change notification settings - Fork 504
/
index.js
135 lines (121 loc) · 4.28 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { bindActionCreators, compose } from 'redux'
import { Field, reduxForm } from 'redux-form'
import ui from 'redux-ui'
import { path, prop } from 'ramda'
import { actions } from 'data'
import { TabMenuBuySellStatus } from 'components/Form'
import HorizontalMenu from 'components/HorizontalMenu'
import Loading from 'components/BuySell/Loading'
import { hasAccount } from 'services/ExchangeService'
import SfoxCheckout from './SfoxCheckout'
import CoinifyCheckout from './CoinifyCheckout'
import { getData, getFields } from './selectors'
import SelectPartner from './template.success'
const Wrapper = styled.div`
width: 100%;
height: 100%;
`
const CheckoutWrapper = styled.div`
width: 100%;
font-size: 13px;
font-weight: 300;
padding: 30px 30px;
box-sizing: border-box;
height: calc(100% - 56px);
color: ${props => props.theme['gray-5']};
font-family: 'Montserrat', Helvetica, sans-serif;
flex-direction: row;
display: flex;
@media(min-height: 800px) {
height: 70%;
}
`
const Menu = reduxForm({ form: 'buySellTabStatus' })(HorizontalMenu)
class BuySellContainer extends React.PureComponent {
constructor (props) {
super(props)
this.selectPartner = this.selectPartner.bind(this)
this.submitEmail = this.submitEmail.bind(this)
}
componentDidMount () {
this.props.formActions.initialize('buySellTabStatus', { status: 'buy' })
this.props.data.map(data => this.props.formActions.change('selectPartner', 'country', data.countryCode))
}
/**
* The idea here is that we will call .cata which passes a metadata value to a selectPartner method.
* If there is a token (evidence of signup), show the Checkout view.
* If not, open the tray and send user through the signup flow.
*/
selectPartner (buySell, options, type) {
if (path(['sfox', 'account_token'], buySell)) {
return {
component: <SfoxCheckout type={type} options={options} value={buySell} />,
partner: 'sfox'
}
}
if (path(['unocoin', 'token'], buySell)) { // TODO replace token
return {
component: <span>Unocoin</span>,
partner: ''
}
}
if (path(['coinify', 'offline_token'], buySell)) {
return {
component: <CoinifyCheckout type={type} options={options} value={buySell} />,
partner: 'coinify'
}
}
return {
component: <SelectPartner type={type} options={options} value={buySell}
onSubmit={this.onSubmit} submitEmail={this.submitEmail} {...this.props} />,
partner: ''
}
}
submitEmail () {
this.props.updateUI({ submittedEmail: true })
let email = encodeURIComponent(path(['fields', 'email'], this.props))
let country = path(['fields', 'country'], this.props)
let state = path(['fields', 'country'], this.props) === 'US' ? path(['fields', 'stateSelection', 'name'], this.props) : undefined
let url = 'https://docs.google.com/forms/d/e/1FAIpQLSeYiTe7YsqEIvaQ-P1NScFLCSPlxRh24zv06FFpNcxY_Hs0Ow/viewform?entry.1192956638=' + email + '&entry.644018680=' + country + '&entry.387129390=' + state
window.open(url, '_blank')
}
render () {
const { data, fields } = this.props
const view = data.cata({
Success: (value) => this.selectPartner(path(['buySell', 'value'], value), value.options, path(['type'], fields), fields),
Failure: (message) => <div>failure: {message}</div>,
Loading: () => <Loading />,
NotAsked: () => <Loading />
})
return (
<Wrapper>
{
hasAccount(path(['component', 'props', 'value'], view))
? <Menu>
<Field name='status' component={TabMenuBuySellStatus} partner={prop('partner', view)} />
</Menu>
: null
}
<CheckoutWrapper>
{prop('component', view)}
</CheckoutWrapper>
</Wrapper>
)
}
}
const mapStateToProps = state => ({
data: getData(state),
fields: getFields(state)
})
const mapDispatchToProps = dispatch => ({
formActions: bindActionCreators(actions.form, dispatch),
modalActions: bindActionCreators(actions.modals, dispatch)
})
const enhance = compose(
connect(mapStateToProps, mapDispatchToProps),
ui({ state: { submittedEmail: false } })
)
export default enhance(BuySellContainer)