94 lines
3.9 KiB
CoffeeScript
94 lines
3.9 KiB
CoffeeScript
context = window
|
|
rest = context.JK.Rest()
|
|
|
|
@GiftCardLandingPage = React.createClass({
|
|
|
|
render: () ->
|
|
|
|
if this.state.done
|
|
ctaButtonText10 = 'sending you in...'
|
|
ctaButtonText20 = 'sending you in...'
|
|
else if this.state.processing
|
|
ctaButtonText10 = 'hold on...'
|
|
ctaButtonText20 = 'hold on...'
|
|
else
|
|
ctaButtonText10 = `<span>ADD $10 CARD<br/>TO CART</span>`
|
|
ctaButtonText20 = `<span>ADD $20 CARD<br/>TO CART</span>`
|
|
|
|
|
|
ctaButtons =
|
|
`<div className="cta-buttons">
|
|
<button className={classNames({'five-jt': true, 'gift-card': true, 'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick.bind(this, 5)}>{ctaButtonText10}</button>
|
|
<button className={classNames({'ten-jt': true, 'gift-card': true, 'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick.bind(this, 10)}>{ctaButtonText20}</button>
|
|
</div>`
|
|
|
|
|
|
`<div className="top-container">
|
|
<div className="full-row name-and-artist">
|
|
<div>
|
|
<img className="gift-card-preview" width="300" height="191" src="/assets/landing/gift_card.png" alt="gift card "/>
|
|
<h1 className="jam-track-name">$10 or $20 JAMTRACKS GIFT CARDS</h1>
|
|
<h2 className="original-artist">A PERFECT GIFT FOR MUSICIANS</h2>
|
|
<div className="clearall"/>
|
|
</div>
|
|
<div className="preview-and-action-box">
|
|
<img src="/assets/landing/jamtrack_landing_arrow_1.png" className="arrow1" />
|
|
<img src="/assets/landing/jamtrack_landing_arrow_2.png" className="arrow2" />
|
|
<div className="preview-jamtrack-header gift-card">
|
|
Preview A JamTrack
|
|
<div className="jamtrack-title">"{this.props.jam_track.name}"</div>
|
|
</div>
|
|
<div className={classNames({'preview-area': true, 'gift-card': true})}>
|
|
<p>Click the play buttons below to preview the master mix and 20-second samples of all the isolated tracks.</p>
|
|
<div className="tracks previews">
|
|
|
|
</div>
|
|
<p className="gift-getter">
|
|
Get a $10 gift card (good for 5 songs) or a $20 gift card (good for 10 songs), and your happy
|
|
gift card getter can choose their favorites from our catalog of 3,700+ popular songs.
|
|
</p>
|
|
{ctaButtons}
|
|
<a className="browse-all" href="/client?search=#/jamtrack/search">or browse our catalog of 3,700+ songs</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row summary-text">
|
|
<p className="top-summary">
|
|
JamTracks by JamKazam are the best way to play along with your favorite songs. Far better and different than traditional
|
|
backing tracks, our JamTracks are complete multi-track professional recordings, with fully isolated tracks for each part of the music.
|
|
And our free app and Internet service are packed with features that give you unmatched creative freedom to learn, practice, record, play with others, and share your performances.
|
|
</p>
|
|
</div>
|
|
</div>`
|
|
|
|
getInitialState: () ->
|
|
{processing:false}
|
|
|
|
componentDidMount:() ->
|
|
$root = $(this.getDOMNode())
|
|
|
|
# add item to cart, create the user if necessary, and then place the order to get the free JamTrack.
|
|
ctaClick: (card_type, e) ->
|
|
e.preventDefault()
|
|
|
|
return if @state.processing
|
|
|
|
loggedIn = context.JK.currentUserId?
|
|
|
|
rest.addGiftCardToShoppingCart({id: card_type}).done((response) =>
|
|
|
|
if loggedIn
|
|
@setState({done: true})
|
|
context.location = '/client#/shoppingCart'
|
|
else
|
|
@setState({done: true})
|
|
context.location = '/client#/shoppingCart'
|
|
|
|
).fail((jqXHR, textStatus, errorMessage) =>
|
|
if jqXHR.status == 422
|
|
errors = JSON.parse(jqXHR.responseText)
|
|
cart_errors = errors?.errors?.cart_id
|
|
context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
|
|
@setState({processing:false})
|
|
)
|
|
}) |