VRFS-3359 : Teacher pricing

Display or hide fields depending on checkboxes.

web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee

@@ -16,7 +16,7 @@ SessionActions = @SessionActions
 
   render: () ->
     console.log("SetupNav: this.props", this.state, this.ref, this.props.handleNav)
-    `<div className="TeacherSetupNav">
+    `<div className="TeacherSetupNav right">
         <a className="nav-button button-grey" onClick={this.navBack}>
           BACK
         </a>

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

@@ -10,14 +10,35 @@ rest = window.JK.Rest()
     Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
   ]
 
+  componentDidUnmount: () ->
+    @root.off("change", ".checkbox-enabler")
+
+  componentDidMount: () ->
+    @root = jQuery(this.getDOMNode())
+    @root.off("change", ".checkbox-enabler").on("change", ".checkbox-enabler", @enableCheckBoxTargets)
+    @enableCheckBoxTargets()
+
   getInitialState: () ->
     {}
 
+  enableCheckBoxTargets: (e) ->
+    # Do unchecked boxes last 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")
+    
+      if ($(this).is(":checked"))
+        logger.debug("Enabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))      
+        $(".#{targetClass}").removeClass("hidden")
+      else
+        logger.debug("Disabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))      
+        $(".#{targetClass}").addClass("hidden")
+
   screenName: () ->
     "pricing"
 
   onTeacherStateChanged: (changes) ->
-    $root = jQuery(this.getDOMNode())
     logger.debug("onTeacherPricingStateChanged", changes, changes.errors?, changes.errors)
     unless this.handleErrors(changes)
       teacher = changes.teacher
@@ -31,12 +52,11 @@ rest = window.JK.Rest()
       })
 
   captureFormState: (changes) ->
-    $root = jQuery(this.getDOMNode())
     this.setState({
-      biography: $root.find(".teacher-biography").val(),
+      biography: @root.find(".teacher-biography").val(),
-      introductory_video: $root.find(".teacher-introductory-video").val(),
+      introductory_video: @root.find(".teacher-introductory-video").val(),
-      years_teaching: $root.find(".years-teaching-experience").val(),
+      years_teaching: @root.find(".years-teaching-experience").val(),
-      years_playing: $root.find(".years-playing-experience").val()
+      years_playing: @root.find(".years-playing-experience").val()
     });
     logger.debug("capturedFormState", this.state, changes)
 
@@ -61,18 +81,77 @@ rest = window.JK.Rest()
 
   render: () ->
     logger.debug("RENDERING TeacherSetupPricing", this.props, this.state)
-    instrumentsTaughtCheckboxes = []
+    priceRows = []
+    for minutes in [30, 45, 60, 90, 120]
+      logger.debug("RENDERING THIS", minutes)
+      priceRows.push `
+        <div className="teacher-price-row">
+          <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>
+            </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-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" />
+              </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" />
+              </div>
+            </div>
+          </div>
+          <br className="clearall"/>
+        </div>`
+
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
     `<div className="TeacherSetupPricing TeacherSetupComponent" >
-      <div className="teacher-quarter-column left">
+      <div className="teacher-half-column left pricing-options">
-        <div className="teacher-field" name="instruments_taught">
+        <label className="margined">Offer Lessons Pricing & Payments:</label>
-          <label for="teacher-instruments-taught">Instruments Taught:</label>
+
-          <div className="checkbox-scroller">
+        <div className="teacher-field" name="prices_per_lesson">
-          </div>
+          <input type='checkbox' className='checkbox-enabler' data-enable-target="per-lesson-target" name="prices_per_lesson_input" defaultChecked={this.state.prices_per_lesson}></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>
+          <label htmlFor='prices_per_month_input' className="checkbox-label">Per Month</label>
+        </div>
+
       </div>
-      <TeacherSetupNav handleNav={this.handleNav}/>
+
+      <div className="teacher-half-column right pricing-options">
+        <label className="margined">Please fill in the prices (in US Dollars) for the lessons you have chosen to offer in the boxes below:</label>
+      </div>
+      <br className="clearall"/>
+
+      <div className="teacher-price-row">
+        <div className="teacher-half-column left pricing-options">
+          <label className="margined">Offer Lessons of These Durations:</label>
+        </div>
+        <div className="teacher-half-column right pricing-options">
+            <div className="teacher-third-column">&nbsp;</div>
+            <div className="teacher-third-column">
+              <label className="margined">Price Per Lesson</label>
+            </div>
+            <div className="teacher-third-column">
+              <label className="margined">Price Per Month</label>
+            </div>
+        </div>
+        <br className="clearall"/>
+      </div>
+
+      {priceRows}
+
+      <br className="clearall"/>
+      <TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>
     </div>`
 
 

web/app/assets/stylesheets/client/teachers.css.scss

@@ -22,6 +22,16 @@
     }
   }
 
+  label.margined {
+    margin-top: 1em;
+    margin-bottom: 0.25em;
+  }
+
+  .inline {
+    display: inline;
+    //width: auto !important;
+  }
+
   .teacher-setup-form {
     padding: 1em;
     .error-text {
@@ -41,6 +51,10 @@
       @extend .w25;
     }
 
+    .teacher-half-column {
+      @extend .w50;
+    }
+
     .teacher-third-column {
       @include border_box_sizing;
       width: 33%;
@@ -67,8 +81,9 @@
 
     }
 
+
     .teacher-field {
-      padding: 1em;
+      padding: 0.25em;
       @include border_box_sizing;
       input, select, textarea {
         @include border_box_sizing;
@@ -79,19 +94,6 @@
         overflow: hidden;
       }
 
-      em {
-        font-style: italic;
-      }
-
-      label {
-        margin-bottom: 4px;
-      }
-
-      textarea {
-        height: auto;
-        overflow:hidden;
-      }
-
       input[type="number"] {
         border-radius: 4px;
 
@@ -100,6 +102,30 @@
         height: 24px;
         //padding: 5px;
       }
+
+      input[type="checkbox"] {
+        display: inline;
+        width: auto;
+      }
+
+      em {
+        font-style: italic;
+      }
+
+      label {
+        margin-bottom: 4px;
+      }
+
+      label.checkbox-label {
+        display: inline;
+      }
+
+      textarea {
+        height: auto;
+        overflow:hidden;
+      }
+
+      
     }
 
 

web/app/views/clients/teachers/setup/_pricing.html.slim

@@ -1,4 +1,4 @@
-#teacher-setup-pricing.screen.secondary layout="screen" layout-id="teachers/setup/pricing"
+#teacher-setup-pricing.teacher-setup.screen.secondary layout="screen" layout-id="teachers/setup/pricing"
   .content-head
     .content-icon
       = image_tag "content/icon_bands.png", :size => "19x19"