143 lines
5.7 KiB
CoffeeScript
143 lines
5.7 KiB
CoffeeScript
@JamClassStudentLandingMiddlePage = React.createClass({
|
|
|
|
avatar: (name = 'your choice', photo_url = '/assets/shared/avatar_generic.png') ->
|
|
`<div className="avatar-header">
|
|
<div className="avatar">
|
|
<img src={photo_url}/>
|
|
</div>
|
|
<div className="username">
|
|
{name}
|
|
</div>
|
|
</div>`
|
|
|
|
getInitialState: () ->
|
|
{
|
|
modified: false
|
|
package_type: null
|
|
teachers: null
|
|
}
|
|
|
|
selector: (count, e) ->
|
|
e.preventDefault()
|
|
|
|
context.JK.app.layout.showDialog('test-drive-package-dialog').one(contexnt.JK.EVENTS.DIALOG_CLOSED, (e, data) =>
|
|
#... code
|
|
if !data.canceled
|
|
console.log("dialog closed. result", data.result)
|
|
# dialog wasn't cancelled, so let's check the value of our result:
|
|
@setState(data.result)
|
|
|
|
|
|
setTimeout((() => context.JK.prodBubble($('.preview-area.jam-class'), 'body', data.result.package_type)), 1500)
|
|
)
|
|
|
|
componentDidMount: () ->
|
|
@root = $(@getDOMNode())
|
|
@root.find('.bio p').dotdotdot()
|
|
|
|
componentDidUpdate:( ) ->
|
|
|
|
@root.find('.bio p').dotdotdot()
|
|
render: () ->
|
|
|
|
if this.props.package?
|
|
|
|
package_type = this.state.package_type || this.props.package.package_type
|
|
|
|
if package_type == '4'
|
|
description =
|
|
`<div>
|
|
<p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry
|
|
the first person you date, right?</p>
|
|
|
|
<p>Take full 30-minute lessons from each of these 4 amazing teachers for just $12.50 each - a total of
|
|
$49.99. Then you can pick the one who is best for you to continue your musical journey, with the
|
|
confidence that your investment in lessons will deliver maximum growth!</p>
|
|
</div>`
|
|
|
|
options =
|
|
`<div className="other-options">
|
|
<p>Like the TestDrive concept, but 4 teachers is too many for you?</p>
|
|
<ul>
|
|
<li>Get a special offer of <a onClick={this.selector.bind(this, 2)}>2 of these teachers for a total of $29.99</a>.</li>
|
|
<li>Or <a onClick={this.selector.bind(this, 1)}>1 teacher for $14.99</a>.</li>
|
|
<li>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</li>
|
|
</ul>
|
|
</div>`
|
|
else if package_type == '2'
|
|
description =
|
|
`<div>
|
|
<p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry
|
|
the first person you date, right?</p>
|
|
|
|
<p>Take full 30-minute lessons from each of these 2 amazing teachers for just $14.99 each - a total of
|
|
$29.99. Then you can pick the one who is best for you to continue your musical journey, with the
|
|
confidence that your investment in lessons will deliver maximum growth!</p>
|
|
</div>`
|
|
|
|
options =
|
|
`<div className="other-options">
|
|
<p>Like the TestDrive concept, but prefer not to try 2 different teachers?</p>
|
|
<ul>
|
|
<li>Get a special offer of <a onClick={this.selector.bind(this, 1)}>1 of these teachers for just $14.99</a>. </li>
|
|
<li>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</li>
|
|
</ul>
|
|
</div>`
|
|
else
|
|
description =
|
|
`<div>
|
|
<p>Take a full 30-minute lesson from this great teacher for just $14.99 - half the cost of a typical music
|
|
lesson. You can make sure everything is working great, and then continue your musical journey with the
|
|
confidence that your investment in lessons will deliver maximum growth!</p>
|
|
</div>`
|
|
options =
|
|
`<div className="other-options">
|
|
<p>You can book a TestDrive lesson with this awesome teacher now!</p>
|
|
<p>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</p>
|
|
</div>`
|
|
|
|
teacherList = @state.teachers || this.props.package.teachers
|
|
|
|
if @state.modified
|
|
options = null
|
|
|
|
teachers = []
|
|
for teacher in teacherList
|
|
biography = teacher.biography
|
|
biography = biography.replace(/\n/g, "<br/>")
|
|
teachers.push(
|
|
`<div key={teacher.id} className="teacher-option">
|
|
{this.avatar(teacher.name, teacher.photo_url)}
|
|
<div className="bio">
|
|
<p dangerouslySetInnerHTML={{__html: biography}}></p>
|
|
</div>
|
|
</div>`)
|
|
|
|
`<div className="row cta-row packaged">
|
|
<h2>SIGN UP FOR TESTDRIVE NOW!</h2>
|
|
{description}
|
|
|
|
{teachers}
|
|
|
|
{options}
|
|
</div>`
|
|
else
|
|
`<div className="row cta-row">
|
|
<h2>SIGN UP FOR TESTDRIVE NOW!</h2>
|
|
|
|
<p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry the
|
|
first person you date, right? Our TestDrive program lets you:</p>
|
|
<ul>
|
|
<li>Take a full lesson from 4 different teachers for just $12.49 each, or</li>
|
|
<li>Take a full lesson from 2 different teachers for just $14.99 each, or</li>
|
|
<li>Take a full lesson from 1 teacher for just $14.99</li>
|
|
</ul>
|
|
|
|
<p className="bump">Then continue your lessons with the best teacher for you!</p>
|
|
|
|
<p className="bump">Join 40,000+ other musicians in the JamKazam community. Sign up for TestDrive today, and
|
|
you'll be eligible for any of the three special offers above!</p>
|
|
|
|
<p className="cta-text">Not sure if this is for you? Scroll down to learn more...</p>
|
|
</div>`
|
|
}) |