jam-cloud/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee

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>
          <h1 className="jamclass-h1">Let Us Find You The Perfect Music Teacher</h1>

          <h2 className="jamclass-h2">And Connect You Online With Our Patented, Unique Technology</h2>
          <img className="app-screenshot" src="/assets/landing/ad-session-window.png" height="344" width="608"/>
          <img className="video-screenshot" src="/assets/landing/ad-video-window.png" height="192" width="312"/>

          <div className="clearall"/>
        </div>
        <div className="logo-composite">
          <div className="logo-composite-header">as seen on</div>
          <img src="/assets/landing/logo-composite.png" height="349" width="320"/>
        </div>
        <JamClassPhone customClass="student"/>

        <div className="preview-and-action-box jamclass student">
          <img src="/assets/landing/student_landing_cta_arrow.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. You have no obligation to buy anything. Signing up makes you eligible for our TestDrive
              offers.</p>

            <p>After signing up, you can search our community of world-class instructors. If you book a TestDrive lesson
              you can choose to TestDrive 4, 2, or 1 teachers at that time.</p>

            <p>We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy
              policy</a></p>
            {register}
            <p>And pick your 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">
          <h2 className="future-header">The Future of Music Education Is Here</h2>
          <ul className="future-list">
            <li>Connect with the best teacher for you, not the closest</li>
            <li>TestDrive multiple teachers to find your ideal match</li>
            <li>Enjoy studio quality audio in online sessions</li>
            <li>Play music with your teacher live and in sync</li>
            <li>Avoid the time and hassle of travel to and from lessons</li>
            <li>Record lessons to refer back to them anytime</li>
            <li>Use JamTracks to learn and play with your favorite music</li>
            <li>Practice what you've learned in online sessions with others</li>
          </ul>
        </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?

    if loggedIn
      @markStudent()
    else
      @createUser()

    @setState({processing: true})

  markStudent: () ->
    rest.updateUser({student: true})
    .done((response) =>
      this.setState({done: true})
      context.location = '/client#/jamclass/searchOptions'
    )
    .fail((jqXHR) =>
      this.setState({processing: false})
      context.JK.app.notifyServerError(jqXHR, "Unable to Mark As Student")
    )

  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, student: true})
    .done((response) =>
      @setState({done: true})
      context.location = '/client#/jamclass/searchOptions'
    ).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})
})