Courses UI: update purchase/continue flow

Don’t show unlock code entry to teachers
Don’t show existing class selection or purchase course to students
Update copy to make it clearer what’s going on

app/core/Router.coffee

@@ -60,7 +60,7 @@ 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/enroll/:courseID': go('courses/mock1/CourseEnrollView')
     'courses/mock1/:courseID': go('courses/mock1/CourseDetailsView')
     'courses/mock1/:courseID/info': go('courses/mock1/CourseInfoView')
 

app/styles/courses/mock1/courses.sass

@@ -1,8 +1,5 @@
 #courses-view
 
-  .btn-continue
-    margin-top: 40px
-
   .center
     text-align: center
 

app/templates/courses/mock1/courses.jade

@@ -21,7 +21,7 @@ block content
             .col-md-12
               .well.well-sm
                 p
-                  div.instruction-label Pick your class
+                  div.instruction-label Pick from your current classes
                 .container-fluid
                   .row
                     .col-md-8
@@ -33,21 +33,19 @@ block content
           .row.button-row.center.row-pick-class
             .col-md-12
               div.or Or
-          .row.button-row
+          if studentMode
-            .col-md-12
+            .row.button-row
-              .well.well-sm
-                p
-                  div.instruction-label Enter an unlock code
-                .container-fluid
-                  .row
-                    .col-md-8
-                      input.code-input(type='text', placeholder="Enter unlock code")
-                    .col-md-4
-                      button.btn.btn-success.btn-enroll Enroll
-          if !studentMode
-            .row.button-row.center
               .col-md-12
-                div.or Or
+                .well.well-sm
+                  p
+                    div.instruction-label Enter an unlock code
+                  .container-fluid
+                    .row
+                      .col-md-8
+                        input.code-input(type='text', placeholder="Enter unlock code")
+                      .col-md-4
+                        button.btn.btn-success.btn-enroll Enroll
+          else
             .row.button-row.center
               .col-md-12
                 button.btn.btn-success.btn-lg.btn-buy Buy this course
@@ -104,8 +102,16 @@ mixin course-block(course, courseID)
                 each topic in course.topics
                   li= topic
               strong Hours of content: #{course.duration}
-            .col-md-6.center
+            .col-md-6.center(style='margin-top: 40px;')
-              if !studentMode || !course.unlocked
+              if !studentMode
-                button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'}
+                if course.unlocked
+                  button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'}
+                else if course.title === 'Introduction to Computer Science'
+                  button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{courseID}") Get FREE course
+                else
+                  button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{courseID}") Buy course
               else
-                a.btn.btn-lg.btn-success.btn-continue(href="/courses/mock1/#{courseID}?student=true") Continue
+                if course.unlocked
+                  a.btn.btn-lg.btn-success.btn-continue(href="/courses/mock1/#{courseID}?student=true") Continue
+                else
+                  button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") Enter

app/views/courses/mock1/CoursesView.coffee

@@ -40,12 +40,9 @@ module.exports = class CoursesView extends RootView
     @praise = mockData.praise[_.random(0, mockData.praise.length - 1)]
 
   onClickBuy: (e) ->
-    $('#continueModal').modal('hide')
     courseID = $(e.target).data('course-id') ? 0
-    viewClass = require 'views/courses/mock1/CourseEnrollView'
+    app.router.navigate("/courses/mock1/enroll/#{courseID}")
-    viewArgs = [{}, courseID]
+    window.location.reload()
-    navigationEvent = route: "/courses/mock1/enroll", viewClass: viewClass, viewArgs: viewArgs
-    Backbone.Mediator.publish 'router:navigate', navigationEvent
 
   onClickContinue: (e) ->
     courseID = $(e.target).data('course-id')
@@ -55,7 +52,9 @@ module.exports = class CoursesView extends RootView
     $('#continueModal').find('.btn-enroll').data('course-id', courseID)
     $('#continueModal').find('.btn-enter').data('course-id', courseID)
     $('#continueModal .row-pick-class').show() if @courses[courseID]?.unlocked
-    if courseTitle is 'Introduction to Computer Science'
+    if @courses[courseID]?.unlocked
+      $('#continueModal .btn-buy').prop('innerText', 'Start new class')
+    else if courseTitle is 'Introduction to Computer Science'
       $('#continueModal .btn-buy').prop('innerText', 'Get this FREE course!')
     else
       $('#continueModal .btn-buy').prop('innerText', 'Buy this course')