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

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

@JamClassTeacherLandingPage = 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 = 'Enter Teacher Profile'
      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>
        <JamClassPhone/>
        <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 as Teacher
          </div>
          <div className={classNames({'preview-area': true, 'jam-class': true})}>
            <p>Sign up and start getting students referred from our marketplace.</p>
            <p>We'll give you all the 1:1 help you need to get set up and running.  We can help if you need tech support with gear, and we'll get you in a session to make sure you're ready to go!</p>
            <p>Sign up now to join our community.  We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy policy</a></p>
            {register}
            <p>We guarantee you will be blown away by how much better this is than Skype for online lessons.</p>
          </div>
        </div>
      </div>
      <div className="row summary-text">
        <p className="top-summary">
          JamClass by JamKazam is by far the best way to teach online music lessons. Using our unique, patented technologies, you can play live in sync with your students over the Internet with incredible audio quality. Teach students who live far away. Teach during normally “off hours”. And let JamKazam bring students to you through our lesson marketplace, increasing your income in multiple dimensions. 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?

    if loggedIn
      @markTeacher()
    else
      @createUser()

    @setState({processing:true})

  markTeacher: () ->
    rest.updateUser({teacher: true})
    .done((response) =>
      this.setState({done: true})
      context.location = '/client#/teachers/setup/introduction'
    )
    .fail((jqXHR) =>
      this.setState({processing: false})
      context.JK.app.notifyServerError(jqXHR, "Unable to Mark As Teacher")
    )

  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, teacher  : true})
    .done((response) =>
      @setState({done: true})
      context.location = '/client#/teachers/setup/introduction'
    ).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")
    )

})