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

context = window
rest = context.JK.Rest()

@JamClassEducationLandingPage = 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 = "SIGN UP"
      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"/>
          <input className="terms-checkbox" type="checkbox" name="terms"/><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>
          <div className="jam-class-ed-video">
            <iframe src="//www.youtube.com/embed/wdMN1fQyD9k" frameborder="0" allowfullscreen="allowfullscreen"/>
          </div>

          <h1 className="jam-track-name">MAKE LESSONS MORE CONVENIENT</h1>

          <h2 className="original-artist">And give your booster fund a boost!</h2>

          <div className="clearall"/>
        </div>
        <JamClassPhone customClass="school"/>

        <div className="preview-and-action-box jamclass school">
          <img src="/assets/landing/arrow-1-student.png" className="arrow1-jamclass"/>

          <div className="preview-jamtrack-header">
            Sign Up Your School
          </div>
          <div className={classNames({'preview-area': true, 'jam-class': true})}>
            <p>Sign up to let us know you’re interested in partnering, and we’ll follow up to answer your

              questions.</p>

            <p>If this is a good fit for your school, we’ll give you all the 1:1 help you need to get your school

              and staff up and running.</p>

            <p>We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy
              policy</a></p>
            {register}
            <p>It takes less than 1 hour of your time to set up this program for your school! We do everything else.</p>
          </div>
        </div>
      </div>
      <div className="row summary-text">
        <p className="top-summary">
          JamKazam has developed remarkable new technology that lets musicians play together live in sync with studio
          quality audio from different locations over the Internet. Now JamKazam has launched an online music lesson
          marketplace, and we’ve set up a program specifically to partner with secondary education music programs to
          make lessons more convenient for students and parents, to help instructors teach more, and to simultaneously
          contribute to your music program's booster fund.
        </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
      @markTeacher()
    else
      @createUser()

    @setState({processing: true})


  markTeacher: () ->
    rest.updateUser({school_interest: true})
    .done((response) =>
      this.setState({done: true})
      context.location = '/client#/home'
    )
    .fail((jqXHR) =>
      this.setState({processing: false})
      context.JK.app.notifyServerError(jqXHR, "Unable to Mark As Interested in School")
    )

  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,
      school_interest: true,
      education_interest: true
    })
    .done((response) =>
      context.location = '/client#/home'
    ).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})
})