seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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 2015-09-03 03:52:04 -05:00
parent dace5dd08a
commit 766842f4e7
1 changed files with 74 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
View File

@ -15,7 +15,6 @@ rest = window.JK.Rest()
componentDidMount: () -> componentDidMount: () ->
@root = jQuery(this.getDOMNode()) @root = jQuery(this.getDOMNode())
@root.off("change", ".checkbox-enabler").on("change", ".checkbox-enabler", @enableCheckBoxTargets)
@enableCheckBoxTargets() @enableCheckBoxTargets()
getInitialState: () -> getInitialState: () ->
@ -27,43 +26,75 @@ rest = window.JK.Rest()
checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root)) checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root))
checkBoxes.each -> checkBoxes.each ->
targetClass = $(this).data("enable-target") targetClass = $(this).data("enable-target")
if ($(this).is(":checked")) if ($(this).is(":checked"))
logger.debug("Enabling", targetClass, $(this).is(":checked"), $(".#{targetClass}")) $(".#{targetClass}").removeClass("invisible")
$(".#{targetClass}").removeClass("hidden")
else else
logger.debug("Disabling", targetClass, $(this).is(":checked"), $(".#{targetClass}")) $(".#{targetClass}").addClass("invisible")
$(".#{targetClass}").addClass("hidden") true
screenName: () -> screenName: () ->
"pricing" "pricing"
onTeacherStateChanged: (changes) -> onTeacherStateChanged: (changes) ->
logger.debug("onTeacherPricingStateChanged", changes, changes.errors?, changes.errors)
unless this.handleErrors(changes) unless this.handleErrors(changes)
teacher = changes.teacher teacher = changes.teacher
logger.debug("@teacher", teacher)
this.setState({ this.setState({
biography: teacher.biography, price_per_lesson_30_cents: teacher.price_per_lesson_30_cents
introductory_video: teacher.introductory_video, price_per_lesson_45_cents: teacher.price_per_lesson_45_cents
years_teaching: teacher.years_teaching, price_per_lesson_60_cents: teacher.price_per_lesson_60_cents
years_playing: teacher.years_playing, price_per_lesson_90_cents: teacher.price_per_lesson_90_cents
validate_pricing: true 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) -> displayLessonAmount = context.JK.ProfileUtils.normalizeMoneyForDisplay(pricePerLessonCents)
this.setState({ displayMonthAmount = context.JK.ProfileUtils.normalizeMoneyForDisplay(pricePerMonthCents)
biography: @root.find(".teacher-biography").val(), $("[name='price_per_lesson_#{minutes}_cents']", @root).val(displayLessonAmount)
introductory_video: @root.find(".teacher-introductory-video").val(), $("[name='price_per_month_#{minutes}_cents']", @root).val(displayMonthAmount)
years_teaching: @root.find(".years-teaching-experience").val(),
years_playing: @root.find(".years-playing-experience").val()
});
logger.debug("capturedFormState", this.state, changes)
navDestination: (instructions) -> navDestination: (instructions) ->
navTo=null navTo=null
if instructions? if instructions?
logger.debug("handling instructions", instructions)
if instructions.direction=="cancel" if instructions.direction=="cancel"
navTo = @teacherSetupSource() navTo = @teacherSetupSource()
else if instructions.direction=="back" else if instructions.direction=="back"
@ -75,53 +106,61 @@ rest = window.JK.Rest()
navTo navTo
handleNav: (e) -> handleNav: (e) ->
logger.debug("handleNav #{this.screenName()}: ", this.state, this, e)
navTo = this.navDestination(e) navTo = this.navDestination(e)
teacherActions.change.trigger(this.state, {navTo: navTo}) 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: () -> render: () ->
logger.debug("RENDERING TeacherSetupPricing", this.props, this.state)
priceRows = [] priceRows = []
for minutes in [30, 45, 60, 90, 120] 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 ` 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-half-column left pricing-options">
<div className="teacher-field" name={"lesson_duration_"+minutes}> <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]}/> <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={"lesson_duration_"+minutes+"_input"} className="checkbox-label">{minutes} Minutes</label> <label htmlFor={inputName} key={minutes} className="checkbox-label">{minutes} Minutes</label>
</div> </div>
</div> </div>
<div className="teacher-half-column right pricing-amounts"> <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"> <div className="teacher-third-column inline">
<label>{minutes} Minutes</label> <label>{minutes} Minutes</label>
</div> </div>
<div className="teacher-third-column inline per-lesson"> <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>
<div className="teacher-third-column inline per-month"> <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> </div>
</div> </div>
<br className="clearall"/> <br className="clearall"/>
</div>` </div>`
#instrumentsTaughtCheckboxes.push(`<input />`) # Render:
`<div className="TeacherSetupPricing TeacherSetupComponent" > `<div className="TeacherSetupPricing TeacherSetupComponent" >
<div className="teacher-half-column left pricing-options"> <div className="teacher-half-column left pricing-options">
<label className="margined">Offer Lessons Pricing & Payments:</label> <label className="margined">Offer Lessons Pricing & Payments:</label>
<div className="teacher-field" name="prices_per_lesson"> <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> <label htmlFor='prices_per_lesson_input' className="checkbox-label">Per Lesson</label>
</div> </div>
<div className="teacher-field" name="prices_per_month"> <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> <label htmlFor='prices_per_month_input' className="checkbox-label">Per Month</label>
</div> </div>