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

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

@JamClassRetailerLandingPage = 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>
          <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">MANAGE A MUSIC INSTRUMENT STORE?</h1>

          <h2 className="original-artist">Increase revenues without more inventory or space</h2>

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

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

          <div className="preview-jamtrack-header">
            Sign Up Your Store
          </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 store, we’ll help set up your JamKazam account and ship you a countertop
              display with POSA cards.</p>

            <p>We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy
              policy</a></p>
            {register}
            <p>Learn how we can help you increase revenues without additional inventory or floor space.</p>
          </div>
        </div>
      </div>
      <div className="row summary-text">
        <p className="top-summary">
          Founded by a team that has built and sold companies to Google, eBay, GameStop and more, JamKazam has built
          technology that lets musicians play together live in sync with studio quality audio over the Internet. Now
          we’ve launched both an online music lesson marketplace, as well as a JamTracks marketplace that lets musicians
          play along with their favorite bands and songs in compelling new ways. And we’ve created a simple, profitable
          POSA card (point of sale activated gift card) program that retailers can use to sell these products without
          any inventory investment or floor space.
        </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({retailer_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,
      retailer_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})
})