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

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

@SchoolTeacherLandingPage = React.createClass({

  render: () ->
    if this.props.school.large_photo_url?
      logo = `<div className="school-logo">
        <img src={this.props.school.large_photo_url}/>
      </div>`
    loggedIn = context.JK.currentUserId? && !this.props.preview

    if this.state.done
      ctaButtonText = 'sending you in...'
    else if this.state.processing
      ctaButtonText = 'hold on...'
    else
      if loggedIn
        ctaButtonText = "ALREADY A JAMKAZAM USER"
      else
        ctaButtonText = "SIGN UP"

    if loggedIn
      register =
        `<div className="register-area jam-class">
          <button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
                  onClick={this.ctaClick}>{ctaButtonText}</button>
        </div>`
    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="school-signup-form">
          <div className="field">
            <label>Email: </label><input type="text" defaultValue={this.props.defaultEmail} name="email"/>
          </div>
          <div className="field">
            <label>Password: </label><input type="password" name="password"/>
          </div>

          <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" target="_blank">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 className="privacy-policy">
          We will not share your email.<br/>See our <a href="/corp/privacy" target="_blank">privacy policy</a>.
        </div>
      </div>`


    if this.props.school.education
      explain = `<p>Please register here if you are a private music lesson teacher affiliated with
        the {this.props.school.name} music program, and if you are interested in teaching online music lessons using the
        JamKazam service. When you
        have registered, someone from JamKazam will contact you to answer any questions you have about our online lesson
        service. We'll help you get set up and ready to go, and we'll get into an online session with you to make sure
        everything is working properly.</p>`
    else
      explain = `<p> Please register here if you are currently a teacher with {this.props.school.name}, and if you plan
        to teach
        online music lessons for students of {this.props.school.name} using the JamKazam service. When you have
        registered, we
        will
        email you instructions to set up your online teacher profile, and we'll schedule a brief online training session
        to make sure
        you are comfortable using the service and ready to go with students in online lessons.</p>`

    `<div className="container">
      <div className="header-area">
        <div className="header-content">
          {logo}

          <div className="headers">
            <h1>REGISTER AS A TEACHER</h1>

            <h2>with {this.props.school.name}</h2>
          </div>
          <br className="clearall"/>
        </div>
      </div>

      <div className="explain">
        {explain}
      </div>

      {register}
    </div>`

  getInitialState: () ->
    {loginErrors: null, processing: false}

  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
      #window.location.href = "/client#/jamclass"
      window.location.href = "/client#/profile/#{context.JK.currentUserId}"
    else
      @createUser()

    @setState({processing: true})

  createUser: () ->
    $form = $('.school-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,
      school_invitation_code: this.props.invitation_code,
      school_id: this.props.school.id
    })
    .done((response) =>
      @setState({done: true})
      #window.location.href = "/client#/jamclass"
      window.location.href = "/client#/profile/#{response.id}"
    ).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")
    )
})