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

86 lines
2.9 KiB
CoffeeScript

context = window
rest = context.JK.Rest()
@JamTrackCta = React.createClass({
redeem: (e) ->
e.preventDefault()
return if @state.processing
isFree = context.JK.currentUserFreeJamTrack
rest.addJamtrackToShoppingCart({id: @props.jam_track.id}).done((response) =>
if(isFree)
if context.JK.currentUserId?
context.JK.currentUserFreeJamTrack = true # make sure the user sees no more free notices
context.location = '/client#/redeemComplete'
else
# now make a rest call to buy it
context.location = '/client#/redeemSignup'
else
context.location = '/client#/shoppingCart'
).fail((jqXHR, textStatus, errorMessage) =>
if jqXHR.status == 422
errors = JSON.parse(jqXHR.responseText)
cart_errors = errors?.errors?.cart_id
if cart_errors?.length == 1 && cart_errors[0] == 'has already been taken'
context.location = '/client#/shoppingCart'
else
context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
@setState({processing:false})
)
@setState({processing:true})
getInitialState:() ->
{processing: false}
render: () ->
isFree = context.JK.currentUserFreeJamTrack
if isFree
img =`<img src="/assets/web/button_cta_jamtrack_free.png" />`
else
img =`<img src="/assets/web/buy-jamtrack-cta.png" />`
if @props.instrument?
getFreeText = "Get \"#{this.props.jam_track.name}\" JamTrack Free Now"
instrumentBrowseUrl = "/client?instrument=#{this.props.instrument_id}#/jamtrack/filter"
`<div className="cta-holder instrument-selection">
<div className="checkout">
<a href="/client#/jamtrack/search" onClick={this.redeem} className="cta-free-jamtrack" alt="ClICK HERE TO PICK YOUR FIRST JAMTRACK FREE!">
{getFreeText}
</a>
<div className="browse-instrument">
<a href={instrumentBrowseUrl}>Or Browse All {this.props.instrument_count} JamTracks With {this.props.instrument} Parts<br/>And Get Your Favorite Free!</a>
</div>
</div>
</div>`
else
bandBrowseUrl = "/client?artist=#{this.props.jam_track.original_artist}#/jamtrack/search"
`<div className="cta-holder">
<div className="checkout">
<a href="/client#/jamtrack/search" onClick={this.redeem} className="cta-free-jamtrack" alt="ClICK HERE TO PICK YOUR FIRST JAMTRACK FREE!">
{img}
</a>
<span className="value-indicator">$1.99 value</span>
</div>
<br/>
<div className="browse-band">
<a href={bandBrowseUrl}>or browse all {this.props.band_track_count} {this.props.jam_track.original_artist} backing tracks</a>
</div>
<br/>
<div className="browse-all">
<a href="/client?search=#/jamtrack/search">or browse all {this.props.all_track_count} backing tracks!</a>
</div>
</div>`
})