VRFS-3359 : Teacher pricing
* Currency fields only appear when both the appropriate pricing option (column) AND the time range (row). * Currency fields set state and format on blur
This commit is contained in:
Steven Miers
parent
dace5dd08a
commit
766842f4e7
|
|
@ -15,7 +15,6 @@ rest = window.JK.Rest()
|
|||
|
||||
componentDidMount: () ->
|
||||
@root = jQuery(this.getDOMNode())
|
||||
@root.off("change", ".checkbox-enabler").on("change", ".checkbox-enabler", @enableCheckBoxTargets)
|
||||
@enableCheckBoxTargets()
|
||||
|
||||
getInitialState: () ->
|
||||
|
|
@ -27,43 +26,75 @@ rest = window.JK.Rest()
|
|||
checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root))
|
||||
checkBoxes.each ->
|
||||
targetClass = $(this).data("enable-target")
|
||||
|
||||
|
||||
if ($(this).is(":checked"))
|
||||
logger.debug("Enabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))
|
||||
$(".#{targetClass}").removeClass("hidden")
|
||||
$(".#{targetClass}").removeClass("invisible")
|
||||
else
|
||||
logger.debug("Disabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))
|
||||
$(".#{targetClass}").addClass("hidden")
|
||||
$(".#{targetClass}").addClass("invisible")
|
||||
true
|
||||
|
||||
screenName: () ->
|
||||
"pricing"
|
||||
|
||||
onTeacherStateChanged: (changes) ->
|
||||
logger.debug("onTeacherPricingStateChanged", changes, changes.errors?, changes.errors)
|
||||
|
||||
unless this.handleErrors(changes)
|
||||
teacher = changes.teacher
|
||||
logger.debug("@teacher", teacher)
|
||||
this.setState({
|
||||
biography: teacher.biography,
|
||||
introductory_video: teacher.introductory_video,
|
||||
years_teaching: teacher.years_teaching,
|
||||
years_playing: teacher.years_playing,
|
||||
validate_pricing: true
|
||||
price_per_lesson_30_cents: teacher.price_per_lesson_30_cents
|
||||
price_per_lesson_45_cents: teacher.price_per_lesson_45_cents
|
||||
price_per_lesson_60_cents: teacher.price_per_lesson_60_cents
|
||||
price_per_lesson_90_cents: teacher.price_per_lesson_90_cents
|
||||
price_per_lesson_120_cents: teacher.price_per_lesson_120_cents
|
||||
price_per_month_30_cents: teacher.price_per_month_30_cents
|
||||
price_per_month_45_cents: teacher.price_per_month_45_cents
|
||||
price_per_month_60_cents: teacher.price_per_month_60_cents
|
||||
price_per_month_90_cents: teacher.price_per_month_90_cents
|
||||
price_per_month_120_cents: teacher.price_per_month_120_cents
|
||||
prices_per_lesson: teacher.prices_per_lesson
|
||||
prices_per_month: teacher.prices_per_month
|
||||
lesson_duration_30: teacher.lesson_duration_30
|
||||
lesson_duration_45: teacher.lesson_duration_45
|
||||
lesson_duration_60: teacher.lesson_duration_60
|
||||
lesson_duration_90: teacher.lesson_duration_90
|
||||
lesson_duration_120: teacher.lesson_duration_120
|
||||
})
|
||||
@enableCheckBoxTargets()
|
||||
false
|
||||
|
||||
|
||||
|
||||
captureFormState: (e) ->
|
||||
this.setState({
|
||||
prices_per_lesson: $("[name='prices_per_lesson_input']", @root).is(":checked")
|
||||
prices_per_month: $("[name='prices_per_month_input']", @root).is(":checked")
|
||||
lesson_duration_30: $("[name='lesson_duration_30_input']", @root).is(":checked")
|
||||
lesson_duration_45: $("[name='lesson_duration_45_input']", @root).is(":checked")
|
||||
lesson_duration_60: $("[name='lesson_duration_60_input']", @root).is(":checked")
|
||||
lesson_duration_90: $("[name='lesson_duration_90_input']", @root).is(":checked")
|
||||
lesson_duration_120: $("[name='lesson_duration_120_input']", @root).is(":checked")
|
||||
})
|
||||
@enableCheckBoxTargets()
|
||||
#this.forceUpdate()
|
||||
|
||||
captureCurrency: (e) ->
|
||||
for minutes in [30, 45, 60, 90, 120]
|
||||
pricePerLessonCents = context.JK.ProfileUtils.normalizeMoneyForSubmit($("[name='price_per_lesson_#{minutes}_cents']", @root).val())
|
||||
pricePerMonthCents = context.JK.ProfileUtils.normalizeMoneyForSubmit($("[name='price_per_month_#{minutes}_cents']", @root).val())
|
||||
|
||||
this.setState({
|
||||
"price_per_lesson_#{minutes}_cents": pricePerLessonCents
|
||||
"price_per_month_#{minutes}_cents": pricePerMonthCents
|
||||
})
|
||||
|
||||
captureFormState: (changes) ->
|
||||
this.setState({
|
||||
biography: @root.find(".teacher-biography").val(),
|
||||
introductory_video: @root.find(".teacher-introductory-video").val(),
|
||||
years_teaching: @root.find(".years-teaching-experience").val(),
|
||||
years_playing: @root.find(".years-playing-experience").val()
|
||||
});
|
||||
logger.debug("capturedFormState", this.state, changes)
|
||||
displayLessonAmount = context.JK.ProfileUtils.normalizeMoneyForDisplay(pricePerLessonCents)
|
||||
displayMonthAmount = context.JK.ProfileUtils.normalizeMoneyForDisplay(pricePerMonthCents)
|
||||
$("[name='price_per_lesson_#{minutes}_cents']", @root).val(displayLessonAmount)
|
||||
$("[name='price_per_month_#{minutes}_cents']", @root).val(displayMonthAmount)
|
||||
|
||||
navDestination: (instructions) ->
|
||||
navTo=null
|
||||
if instructions?
|
||||
logger.debug("handling instructions", instructions)
|
||||
if instructions.direction=="cancel"
|
||||
navTo = @teacherSetupSource()
|
||||
else if instructions.direction=="back"
|
||||
|
|
@ -75,53 +106,61 @@ rest = window.JK.Rest()
|
|||
navTo
|
||||
|
||||
handleNav: (e) ->
|
||||
logger.debug("handleNav #{this.screenName()}: ", this.state, this, e)
|
||||
navTo = this.navDestination(e)
|
||||
teacherActions.change.trigger(this.state, {navTo: navTo})
|
||||
|
||||
handleTextChange: (e) ->
|
||||
this.setState({"#{e.target.name}": e.target.value})
|
||||
|
||||
handleCheckChange: (e) ->
|
||||
@enableCheckBoxTargets()
|
||||
this.setState({"#{e.target.name}": e.target.value=="on"})
|
||||
|
||||
render: () ->
|
||||
logger.debug("RENDERING TeacherSetupPricing", this.props, this.state)
|
||||
priceRows = []
|
||||
for minutes in [30, 45, 60, 90, 120]
|
||||
logger.debug("RENDERING THIS", minutes)
|
||||
pricePerLessonCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state["price_per_lesson_"+minutes+"_cents"])
|
||||
pricePerMonthCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state["price_per_month_"+minutes+"_cents"])
|
||||
pricePerLessonName = "price_per_lesson_#{minutes}_cents"
|
||||
pricePerMonthName = "price_per_month_#{minutes}_cents"
|
||||
inputName = "lesson_duration_"+minutes+"_input"
|
||||
priceRows.push `
|
||||
<div className="teacher-price-row">
|
||||
<div className="teacher-price-row" key={minutes}>
|
||||
<div className="teacher-half-column left pricing-options">
|
||||
<div className="teacher-field" name={"lesson_duration_"+minutes}>
|
||||
<input type='checkbox' className="checkbox-enabler" data-enable-target={"lesson-"+minutes+"-target"} name={"lesson_duration_"+minutes+"_input"} defaultChecked={this.state["lesson_duration_"+minutes]}/>
|
||||
<label htmlFor={"lesson_duration_"+minutes+"_input"} className="checkbox-label">{minutes} Minutes</label>
|
||||
<input type='checkbox' className="checkbox-enabler" data-enable-target={"lesson-"+minutes+"-target"} name={inputName} key={inputName} checked={this.state["lesson_duration_"+minutes]} onChange={this.handleCheckChange} ref={inputName}/>
|
||||
<label htmlFor={inputName} key={minutes} className="checkbox-label">{minutes} Minutes</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="teacher-half-column right pricing-amounts">
|
||||
<div className={"teacher-field lesson-"+minutes+"-target"} name={"price_duration_"+minutes+"_cents"}>
|
||||
<div className={"teacher-field lesson-"+minutes+"-target"}>
|
||||
<div className="teacher-third-column inline">
|
||||
<label>{minutes} Minutes</label>
|
||||
</div>
|
||||
<div className="teacher-third-column inline per-lesson">
|
||||
<input name="price-duration-{minutes}-cents" className="per-lesson-target" type="number" min="0" max="100000" value={this.state["lesson_duration_"+minutes]} onChange={this.captureFormState} value="0" />
|
||||
<input key={minutes} name={pricePerLessonName} ref={pricePerLessonName} className="per-lesson-target" type="text" min="0" max="100000" value={pricePerLessonCents} onBlur={this.captureCurrency} onChange={this.handleTextChange} />
|
||||
</div>
|
||||
<div className="teacher-third-column inline per-month">
|
||||
<input name="price-duration-{minutes}-cents-month" className="per-month-target" type="number" min="0" max="100000" value={this.state["price_duration_"+minutes]} onChange={this.captureFormState} value="0" />
|
||||
<input key={minutes} name={pricePerMonthName} ref={pricePerMonthName} className="per-month-target" type="text" min="0" max="100000" value={pricePerMonthCents} onBlur={this.captureCurrency} onChange={this.handleTextChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br className="clearall"/>
|
||||
</div>`
|
||||
|
||||
#instrumentsTaughtCheckboxes.push(`<input />`)
|
||||
|
||||
# Render:
|
||||
`<div className="TeacherSetupPricing TeacherSetupComponent" >
|
||||
<div className="teacher-half-column left pricing-options">
|
||||
<label className="margined">Offer Lessons Pricing & Payments:</label>
|
||||
|
||||
<div className="teacher-field" name="prices_per_lesson">
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-lesson-target" name="prices_per_lesson_input" defaultChecked={this.state.prices_per_lesson}></input>
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-lesson-target" name="prices_per_lesson_input" checked={this.state.prices_per_lesson} ref="prices_per_lesson" onChange={this.handleCheckChange}></input>
|
||||
<label htmlFor='prices_per_lesson_input' className="checkbox-label">Per Lesson</label>
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="prices_per_month">
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-month-target" name="prices_per_month_input" defaultChecked={this.state.prices_per_month}></input>
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-month-target" name="prices_per_month_input" checked={this.state.prices_per_month} ref="prices_per_month" onChange={this.handleCheckChange}></input>
|
||||
<label htmlFor='prices_per_month_input' className="checkbox-label">Per Month</label>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue