130 lines
5.2 KiB
CoffeeScript
130 lines
5.2 KiB
CoffeeScript
context = window
|
|
rest = context.JK.Rest()
|
|
|
|
@JamClassStudentLandingPage = React.createClass({
|
|
|
|
render: () ->
|
|
|
|
|
|
loggedIn = context.JK.currentUserId?
|
|
|
|
if this.state.done
|
|
ctaButtonText = 'sending you in...'
|
|
else if this.state.processing
|
|
ctaButtonText = 'hold on...'
|
|
else
|
|
if loggedIn
|
|
ctaButtonText = 'TRY TESTDRIVE'
|
|
else
|
|
ctaButtonText = 'SIGN UP'
|
|
|
|
if loggedIn
|
|
register = `<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>`
|
|
else
|
|
|
|
if this.state.loginErrors?
|
|
for key, value of this.state.loginErrors
|
|
break
|
|
|
|
errorText = context.JK.getFullFirstError(key, this.state.loginErrors, {email: 'Email', password: 'Password', 'terms_of_service' : 'The terms of service'})
|
|
|
|
register = `<div className="register-area jam-class">
|
|
<div className={classNames({'errors': true, 'active': this.state.loginErrors})}>
|
|
{errorText}
|
|
</div>
|
|
<form className="jamtrack-signup-form">
|
|
<label>Email: </label><input type="text" name="email" />
|
|
<label>Password: </label><input type="password" name="password" />
|
|
<div className="clearall"/>
|
|
<div className="checkbox-wrap"><input className="terms-checkbox" type="checkbox" name="terms" /></div><label className="terms-help">I have read and agree to the JamKazam <a href="/corp/terms" onClick={this.termsClicked}>terms of service</a></label>
|
|
<div className="clearall"/>
|
|
<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>
|
|
</form>
|
|
</div>`
|
|
|
|
|
|
`<div className="top-container">
|
|
<div className="full-row name-and-artist">
|
|
<div>
|
|
<img className="jam-class-teacher" width="375" height="215" src="/assets/landing/jam_class.png" alt="teacher instructing a jam class"/>
|
|
<h1 className="jam-track-name">JAMCLASS</h1>
|
|
<h2 className="original-artist">Finally, online music lessons<br/>that really work!</h2>
|
|
<div className="clearall"/>
|
|
</div>
|
|
<div className="preview-and-action-box jamclass">
|
|
<img src="/assets/landing/arrow-1-student.png" className="arrow1-jamclass" />
|
|
<div className="preview-jamtrack-header">
|
|
Sign Up for TestDrive
|
|
</div>
|
|
<div className={classNames({'preview-area': true, 'jam-class': true})}>
|
|
<p>Sign up now and take lessons from 4 different instructors for just $49.99.<br/>Then pick the one that's best for you.</p>
|
|
<p>Connecting with the right teacher is the most important factor in making your lessons successful, and we make it inexpensive and painless.</p>
|
|
<p>Sign up now for our special TestDrive offer. We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy policy</a></p>
|
|
{register}
|
|
<p>And pick your 4 teachers now!</p>
|
|
<p>We'll give you 1:1 help to get set up and ready to go with our free app.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row summary-text">
|
|
<p className="top-summary">
|
|
JamClass by JamKazam is by far the best way to take online music lessons. Using our unique, patented technologies, you can play live in sync with your teacher over the Internet with incredible audio quality. Find and connect with the best teacher (not the closest) painlessly using our TestDrive program. Refer back to recorded demonstrations and concepts between lessons. Apply what you're learning to play along with a virtual band on your favorite songs. All while avoiding the time and cost of travel to and from lessons.
|
|
</p>
|
|
</div>
|
|
</div>`
|
|
|
|
getInitialState: () ->
|
|
{loginErrors: null, processing:false}
|
|
|
|
privacyPolicy: (e) ->
|
|
e.preventDefault()
|
|
|
|
context.JK.popExternalLink('/corp/privacy')
|
|
|
|
termsClicked: (e) ->
|
|
e.preventDefault()
|
|
|
|
context.JK.popExternalLink('/corp/terms')
|
|
|
|
componentDidMount:() ->
|
|
$root = $(this.getDOMNode())
|
|
$checkbox = $root.find('.terms-checkbox')
|
|
context.JK.checkbox($checkbox)
|
|
|
|
# add item to cart, create the user if necessary, and then place the order to get the free JamTrack.
|
|
ctaClick: (e) ->
|
|
e.preventDefault()
|
|
|
|
return if @state.processing
|
|
|
|
@setState({loginErrors: null})
|
|
|
|
loggedIn = context.JK.currentUserId?
|
|
|
|
|
|
|
|
createUser: () ->
|
|
$form = $('.jamtrack-signup-form')
|
|
email = $form.find('input[name="email"]').val()
|
|
password = $form.find('input[name="password"]').val()
|
|
terms = $form.find('input[name="terms"]').is(':checked')
|
|
|
|
rest.signup({email: email, password: password, first_name: null, last_name: null, terms:terms})
|
|
.done((response) =>
|
|
|
|
|
|
).fail((jqXHR) =>
|
|
@setState({processing:false})
|
|
if jqXHR.status == 422
|
|
response = JSON.parse(jqXHR.responseText)
|
|
if response.errors
|
|
@setState({loginErrors: response.errors})
|
|
else
|
|
context.JK.app.notify({title: 'Unknown Signup Error', text: jqXHR.responseText})
|
|
else
|
|
context.JK.app.notifyServerError(jqXHR, "Unable to Sign Up")
|
|
)
|
|
|
|
|
|
@setState({processing:true})
|
|
}) |