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
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Arrow } from '../nav/viewer.icons'
import { Loader } from 'app/common/loader.component'
import { isHandheld } from 'app/utils'
import { ENV_PRODUCTION } from 'app/constants'
import * as subscriptionActions from './subscription.actions'
const initialState = {
email: "",
agreed: false,
subscribed: false,
success: false,
loading: false,
}
export default class SubscriptionForm extends Component {
state = {
...initialState
}
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleCheckbox = this.handleCheckbox.bind(this)
this.handleReset = this.handleReset.bind(this)
}
handleChange(e) {
this.setState({ email: e.target.value })
}
handleCheckbox(e) {
this.setState({ agreed: e.target.checked })
}
handleKeyDown(e) {
// disable tab
if (e.keyCode === 9) {
e.preventDefault()
}
}
handleSubmit(e) {
e.preventDefault()
if (!this.state.agreed || this.state.loading) {
return
}
if (ENV_PRODUCTION) {
this.setState({ loading: true })
subscriptionActions.subscribe(this.state.email)
.then(res => {
this.setState({ loading: false, subscribed: true, success: res.ok })
})
.catch(err => {
this.setState({ loading: false, subscribed: true, success: false })
})
} else {
this.setState({ loading: true })
setTimeout(() => {
this.setState({ loading: false, subscribed: true, success: true })
}, 1000)
}
}
handleReset(e) {
this.setState({ ...initialState })
}
render() {
let className = "subscription-form"
if (this.state.subscribed) className += " subscribed"
if (this.state.loading) className += " loading"
return (
<form
className={className}
onSubmit={this.handleSubmit}
>
<div className="subscription-callout">
Subscribe to e-flux and get notified when the next episode is available.
</div>
<div className="subscription-row">
<input
type="email"
name="email"
value={this.state.email}
placeholder={isHandheld ? "Email address" : "Email address here"}
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
onKeyDown={this.handleKeyDown}
onChange={this.handleChange}
/>
<button className="subscription-submit" onClick={this.handleSubmit}>
{'Submit '}
<Arrow type='right' />
</button>
</div>
<label className="subscription-privacy checkbox">
<input
type="checkbox"
checked={this.state.agreed}
onChange={this.handleCheckbox}
/>
<span>
{"I have read e-flux’s privacy policy "}
{"and agree that e-flux may send me announcements to the email address "}
{"entered above and that my data will be processed for this "}
{"purpose in accordance with e-flux’s "}
<a href="https://www.e-flux.com/privacy" target="_blank">privacy policy.</a>
</span>
</label>
<div className="subscription-loading">
<Loader />
</div>
<div className="subscription-thanks">
{this.state.success ? (
"Thanks! You will receive an email soon confirming your subscription."
) : (
"Sorry, there was a problem adding your subscription."
)}
<br />
<button className="subscription-reset" onClick={this.handleReset}>OK</button>
</div>
</form>
)
}
}
|
