From ae854d858f498a7d97828b0dd5f9cc153bedd6da Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Mon, 21 Sep 2015 13:00:06 -0500
Subject: [PATCH] VRFS-3359 : Fix several errors related to syntax, property
 usage, etc.

---
 .../TeacherSetupPricing.js.jsx.coffee         | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
index 4f014b87b..e41318325 100644
--- a/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
@@ -21,13 +21,15 @@ rest = window.JK.Rest()
     {}
 
   enableCheckBoxTargets: (e) ->
-    # Do unchecked boxes last since any unchecked target has priority:
+    # Do checked boxes first and THEN do unchecked
+    # boxes since any unchecked target has priority:
     checkBoxes = $("input[type='checkbox'].checkbox-enabler:checked", @root)
     checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root))
-    checkBoxes.each ->
-      targetClass = $(this).data("enable-target")
+    $.each checkBoxes, (idx, checkBox) =>
+      targetClass = $(checkBox).data("enable-target")
+      isChecked=$(checkBox).is(":checked")
 
-      if ($(this).is(":checked"))
+      if isChecked
         $(".#{targetClass}").removeClass("invisible")
       else
         $(".#{targetClass}").addClass("invisible")
@@ -113,23 +115,36 @@ rest = window.JK.Rest()
     this.setState({"#{e.target.name}": e.target.value})
 
   handleCheckChange: (e) ->
+    this.setState({"#{e.target.name}": e.target.checked})
     @enableCheckBoxTargets()
-    this.setState({"#{e.target.name}": e.target.value=="on"})
 
   render: () ->
     priceRows = []
+    logger.debug("Current State is", this.state)
     for minutes in [30, 45, 60, 90, 120]
       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"
+      priceKey = "lesson_duration_#{minutes}"
+      inputName = "#{priceKey}_input"
+      containerName = "#{priceKey}_container"
       priceRows.push `
         <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={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 className="teacher-field" name={containerName}>
+              <input type='checkbox'
+                      className={"checkbox-enabler " + priceKey}
+                      data-enable-target={"lesson-"+minutes+"-target"}
+                      name={priceKey}
+                      key={priceKey}
+                      checked={this.state[priceKey]}
+                      onChange={this.handleCheckChange}
+                      ref={priceKey}>
+              </input>
+              <label htmlFor='{priceKey}' key='{priceKey}' className="checkbox-label">
+                {minutes} Minutes
+              </label>
             </div>
           </div>
 
@@ -139,10 +154,10 @@ rest = window.JK.Rest()
                 <label>{minutes} Minutes</label>
               </div>
               <div className="teacher-third-column inline per-lesson">
-                <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}  />
+                <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 key={minutes} name={pricePerMonthName} ref={pricePerMonthName} className="per-month-target" type="text" min="0" max="100000" value={pricePerMonthCents} onBlur={this.captureCurrency} onChange={this.handleTextChange} />
+                <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>
@@ -154,14 +169,14 @@ rest = window.JK.Rest()
       <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" 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 className="teacher-field" name="prices_per_lesson_container">
+          <input type='checkbox' className='checkbox-enabler' data-enable-target="per-lesson-target" name="prices_per_lesson" checked={this.state.prices_per_lesson} ref="prices_per_lesson" onChange={this.handleCheckChange}></input>
+          <label htmlFor='prices_per_lesson' 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" 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 className="teacher-field" name="prices_per_month_container">
+          <input type='checkbox' className='checkbox-enabler' data-enable-target="per-month-target" name="prices_per_month" checked={this.state.prices_per_month} ref="prices_per_month" onChange={this.handleCheckChange}></input>
+          <label htmlFor='prices_per_month' className="checkbox-label">Per Month</label>
         </div>
 
       </div>