Courses UI - take class size as buy input instead of bucketizing

app/core/Router.coffee

@@ -59,9 +59,9 @@ module.exports = class CocoRouter extends Backbone.Router
 
     'courses': go('courses/mock1/CoursesView')
     'courses/mock1': go('courses/mock1/CoursesView')
+    'courses/mock1/enroll': go('courses/mock1/CourseEnrollView')
     'courses/mock1/:courseID': go('courses/mock1/CourseDetailsView')
     'courses/mock1/:courseID/info': go('courses/mock1/CourseInfoView')
-    'courses/mock1/enroll': go('courses/mock1/CourseEnrollView')
 
     'db/*path': 'routeToServer'
     'demo(/*subpath)': go('DemoView')

app/templates/courses/mock1/course-enroll.jade

@@ -7,89 +7,46 @@ block content
   div
     span *UNDER CONSTRUCTION, send feedback to
     a.spl(href='mailto:team@codecombat.com') team@codecombat.com
-  div TODO: figure out correct terminology.  Someone should probably purchase a course, and then enroll their students.
   div(style='border-bottom: 1px solid black')
 
   .well.well-lg.enroll-container
-    h1.center Purchase Course
+    h1.center Buy Course
     h3 1. Course
-    p Select 'All Courses' to recieve up to a 70% discount!
+    p Select 'All Courses' for a 50% discount!
     .form-group
       select.form-control.course-select
         each course in courses
           option(value="#{course.title}")= course.title
         option(value="All Courses") All Courses
+
     h3 2. Number of students
-    .quantity-container(style="width:50%;")
-      .radio
-        label
-          if quantity === 20
-            input(type='radio', name='quantity', data-quantity=20, checked=true)
-          else
-            input(type='radio', name='quantity', data-quantity=20)
-          if selectedCourseTitle === 'All Courses'
-            span Up to 20 students $499
-          else if selectedCourseTitle === 'Introduction to Computer Science'
-            span Up to 20 students $0
-          else
-            span Up to 20 students $99
-      .radio
-        label
-          if quantity === 50
-            input(type='radio', name='quantity', data-quantity=50, checked=true)
-          else
-            input(type='radio', name='quantity', data-quantity=50)
-          if selectedCourseTitle === 'All Courses'
-            span Up to 50 students $999
-          else if selectedCourseTitle === 'Introduction to Computer Science'
-            span Up to 20 students $0
-          else
-            span Up to 50 students $199
-      .radio
-        label
-          if quantity === 100
-            input(type='radio', name='quantity', data-quantity=100, checked=true)
-          else
-            input(type='radio', name='quantity', data-quantity=100)
-          if selectedCourseTitle === 'All Courses'
-            span Up to 100 students $1499
-          else if selectedCourseTitle === 'Introduction to Computer Science'
-            span Up to 20 students $0
-          else
-            span Up to 100 students $349
-      .radio
-        label
-          if quantity === 500
-            input(type='radio', name='quantity', data-quantity=500, checked=true)
-          else
-            input(type='radio', name='quantity', data-quantity=500)
-          if selectedCourseTitle === 'All Courses'
-            span Up to 500 students $2999
-          else if selectedCourseTitle === 'Introduction to Computer Science'
-            span Up to 20 students $0
-          else
-            span Up to 500 students $799
-    h3 3. Pick a name for your class
-    p This will be displayed on the course page for you and your studentsm, and it can be changed later.
+    p Enter the number of students you need for this class.
+    input.input-quantity(type='text', value="#{quantity}")
+
+    h3 3. Name your class
+    p This will be displayed on the course page for you and your students, and it can be changed later.
     input.session-name(type='text', placeholder="Mrs. Smith's 4th Period")
-    h3 4. Purchase
+
+    h3 4. Buy
     p
       span.spr You are purchasing a license for
-      strong.spr up to #{quantity} students
+      strong.spr #{selectedCourseTitle}
       span.spr for
-      strong #{selectedCourseTitle}
+      strong #{quantity} students
       | .
-    p After purchase you will receive an unlock code to distribute to your students, which they can use to enroll.
+    p After purchase you will receive an unlock code to distribute to your students, which they can use to enroll in your class.
     p.center
       if price > 0
         button.btn.btn-success.btn-lg.btn-buy $#{price}
       else
         button.btn.btn-success.btn-lg.btn-buy FREE
+
     h3 Free trial for teachers!
     p
       span.spr Please fill out our
       a(href='/teachers/freetrial', data-i18n="teachers.teacher_subs_2")
       span.spl to get individual access to all courses for evalutaion purposes.
+
     h3 Questions?
     p
       span Please contact

app/views/courses/mock1/CourseEnrollView.coffee

@@ -9,9 +9,9 @@ module.exports = class CourseEnrollView extends RootView
   events:
     'click .btn-buy': 'onClickBuy'
     'change .course-select': 'onChangeCourse'
-    'change input:radio': 'onQuantityChange'
+    'change .input-quantity': 'onQuantityChange'
 
-  constructor: (options, @courseID) ->
+  constructor: (options, @courseID=0) ->
     super options
     @initData()
 
@@ -50,22 +50,14 @@ module.exports = class CourseEnrollView extends RootView
     @render?()
 
   onQuantityChange: (e) ->
-    @quantity = $(e.target).data('quantity')
+    @quantity = $(e.target).val() ? 20
     @updatePrice()
     @render?()
 
   updatePrice: ->
     if @selectedCourseTitle is 'All Courses'
-      @price = switch
-        when @quantity is 20 then 499
-        when @quantity is 50 then 999
-        when @quantity is 100 then 1499
-        else 2999
+      @price = (@courses.length - 1) * @quantity * 2
     else if @selectedCourseTitle is 'Introduction to Computer Science'
       @price = 0
     else
-      @price = switch
-        when @quantity is 20 then 99
-        when @quantity is 50 then 199
-        when @quantity is 100 then 349
-        else 799
+      @price = @quantity * 4