Update /courses/purchase visuals
This commit is contained in:
parent
0a1be8e80e
commit
cb4d8fee8c
3 changed files with 79 additions and 7 deletions
app
styles/courses
templates/courses
views/courses
|
@ -3,3 +3,9 @@
|
||||||
.enrollment-count
|
.enrollment-count
|
||||||
font-size: 30px
|
font-size: 30px
|
||||||
width: 120px
|
width: 120px
|
||||||
|
|
||||||
|
.not-enrolled
|
||||||
|
line-height: 16px
|
||||||
|
|
||||||
|
.uppercase
|
||||||
|
text-transform: uppercase
|
||||||
|
|
|
@ -24,13 +24,46 @@ block content
|
||||||
if view.state === 'error'
|
if view.state === 'error'
|
||||||
.alert.alert-danger= view.stateMessage
|
.alert.alert-danger= view.stateMessage
|
||||||
|
|
||||||
|
- var usedEnrollments = view.prepaids.totalRedeemers();
|
||||||
|
- var totalEnrollments = view.prepaids.totalMaxRedeemers();
|
||||||
|
- var remainingEnrollments = totalEnrollments - usedEnrollments;
|
||||||
|
.row
|
||||||
|
.col-md-4
|
||||||
|
.col-md-3
|
||||||
|
strong.uppercase unused paid enrollments
|
||||||
|
.col-md-1
|
||||||
|
strong= remainingEnrollments
|
||||||
|
br
|
||||||
|
.row
|
||||||
|
.col-md-4
|
||||||
|
.col-md-3
|
||||||
|
strong.uppercase students not enrolled
|
||||||
|
.row
|
||||||
|
.col-md-4
|
||||||
|
.col-md-3
|
||||||
|
each classroom in view.classrooms.models
|
||||||
|
if classroom.get('members').length > 0
|
||||||
|
.not-enrolled= classroom.get('name')
|
||||||
|
.not-enrolled Total Across All Classes
|
||||||
|
.col-md-1
|
||||||
|
- var totalNotEnrolled = 0
|
||||||
|
each classroom in view.classrooms.models
|
||||||
|
if classroom.get('members').length > 0 && view.classroomNotEnrolledMap
|
||||||
|
.not-enrolled
|
||||||
|
strong= view.classroomNotEnrolledMap[classroom.id]
|
||||||
|
.not-enrolled
|
||||||
|
strong= view.totalNotEnrolled
|
||||||
|
|
||||||
|
br
|
||||||
|
br
|
||||||
|
|
||||||
p.text-center
|
p.text-center
|
||||||
strong How many additional paid enrollments do you need?
|
strong How many additional paid enrollments do you need?
|
||||||
br
|
br
|
||||||
|
|
||||||
p.text-center
|
p.text-center
|
||||||
input#students-input.text-center.enrollment-count(
|
input#students-input.text-center.enrollment-count(
|
||||||
value=view.numberOfStudents
|
value= view.numberOfStudents
|
||||||
type='number'
|
type='number'
|
||||||
)
|
)
|
||||||
br
|
br
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
app = require 'core/application'
|
app = require 'core/application'
|
||||||
AuthModal = require 'views/core/AuthModal'
|
AuthModal = require 'views/core/AuthModal'
|
||||||
|
Classroom = require 'models/Classroom'
|
||||||
CocoCollection = require 'collections/CocoCollection'
|
CocoCollection = require 'collections/CocoCollection'
|
||||||
Course = require 'models/Course'
|
Course = require 'models/Course'
|
||||||
|
Prepaids = require 'collections/Prepaids'
|
||||||
RootView = require 'views/core/RootView'
|
RootView = require 'views/core/RootView'
|
||||||
stripeHandler = require 'core/services/stripe'
|
stripeHandler = require 'core/services/stripe'
|
||||||
template = require 'templates/courses/purchase-courses-view'
|
template = require 'templates/courses/purchase-courses-view'
|
||||||
|
User = require 'models/User'
|
||||||
utils = require 'core/utils'
|
utils = require 'core/utils'
|
||||||
|
|
||||||
module.exports = class PurchaseCoursesView extends RootView
|
module.exports = class PurchaseCoursesView extends RootView
|
||||||
|
@ -12,12 +15,22 @@ module.exports = class PurchaseCoursesView extends RootView
|
||||||
template: template
|
template: template
|
||||||
numberOfStudents: 30
|
numberOfStudents: 30
|
||||||
pricePerStudent: 4
|
pricePerStudent: 4
|
||||||
|
|
||||||
initialize: (options) ->
|
initialize: (options) ->
|
||||||
@listenTo stripeHandler, 'received-token', @onStripeReceivedToken
|
@listenTo stripeHandler, 'received-token', @onStripeReceivedToken
|
||||||
@fromClassroom = utils.getQueryVariable('from-classroom')
|
@fromClassroom = utils.getQueryVariable('from-classroom')
|
||||||
|
@members = new CocoCollection([], { model: User })
|
||||||
|
@listenTo @members, 'sync', @membersSync
|
||||||
|
@classrooms = new CocoCollection([], { url: "/db/classroom", model: Classroom })
|
||||||
|
@classrooms.comparator = '_id'
|
||||||
|
@listenToOnce @classrooms, 'sync', @onceClassroomsSync
|
||||||
|
@supermodel.loadCollection(@classrooms, 'classrooms', {data: {ownerID: me.id}})
|
||||||
|
@prepaids = new Prepaids()
|
||||||
|
@prepaids.comparator = '_id'
|
||||||
|
@prepaids.fetchByCreator(me.id)
|
||||||
|
@supermodel.loadCollection(@prepaids, 'prepaids')
|
||||||
super(options)
|
super(options)
|
||||||
|
|
||||||
events:
|
events:
|
||||||
'input #students-input': 'onInputStudentsInput'
|
'input #students-input': 'onInputStudentsInput'
|
||||||
'click #purchase-btn': 'onClickPurchaseButton'
|
'click #purchase-btn': 'onClickPurchaseButton'
|
||||||
|
@ -25,6 +38,27 @@ module.exports = class PurchaseCoursesView extends RootView
|
||||||
getPriceString: -> '$' + (@getPrice()).toFixed(2)
|
getPriceString: -> '$' + (@getPrice()).toFixed(2)
|
||||||
getPrice: -> @pricePerStudent * @numberOfStudents
|
getPrice: -> @pricePerStudent * @numberOfStudents
|
||||||
|
|
||||||
|
onceClassroomsSync: ->
|
||||||
|
for classroom in @classrooms.models
|
||||||
|
@members.fetch({
|
||||||
|
remove: false
|
||||||
|
url: "/db/classroom/#{classroom.id}/members"
|
||||||
|
})
|
||||||
|
|
||||||
|
membersSync: ->
|
||||||
|
@memberEnrolledMap = {}
|
||||||
|
for user in @members.models
|
||||||
|
@memberEnrolledMap[user.id] = user.get('coursePrepaidID')?
|
||||||
|
@classroomNotEnrolledMap = {}
|
||||||
|
@totalNotEnrolled = 0
|
||||||
|
for classroom in @classrooms.models
|
||||||
|
@classroomNotEnrolledMap[classroom.id] = 0
|
||||||
|
for memberID in classroom.get('members')
|
||||||
|
@classroomNotEnrolledMap[classroom.id]++ unless @memberEnrolledMap[memberID]
|
||||||
|
@totalNotEnrolled += @classroomNotEnrolledMap[classroom.id]
|
||||||
|
@numberOfStudents = @totalNotEnrolled
|
||||||
|
@render?()
|
||||||
|
|
||||||
onInputStudentsInput: ->
|
onInputStudentsInput: ->
|
||||||
@numberOfStudents = Math.max(parseInt(@$('#students-input').val()) or 0, 0)
|
@numberOfStudents = Math.max(parseInt(@$('#students-input').val()) or 0, 0)
|
||||||
@updatePrice()
|
@updatePrice()
|
||||||
|
@ -54,14 +88,14 @@ module.exports = class PurchaseCoursesView extends RootView
|
||||||
onStripeReceivedToken: (e) ->
|
onStripeReceivedToken: (e) ->
|
||||||
@state = 'purchasing'
|
@state = 'purchasing'
|
||||||
@render?()
|
@render?()
|
||||||
|
|
||||||
data =
|
data =
|
||||||
maxRedeemers: @numberOfStudents
|
maxRedeemers: @numberOfStudents
|
||||||
type: 'course'
|
type: 'course'
|
||||||
stripe:
|
stripe:
|
||||||
token: e.token.id
|
token: e.token.id
|
||||||
timestamp: new Date().getTime()
|
timestamp: new Date().getTime()
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/db/prepaid/-/purchase',
|
url: '/db/prepaid/-/purchase',
|
||||||
data: data,
|
data: data,
|
||||||
|
@ -71,7 +105,7 @@ module.exports = class PurchaseCoursesView extends RootView
|
||||||
application.tracker?.trackEvent 'Finished course prepaid purchase', {price: @pricePerStudent, seats: @numberOfStudents}
|
application.tracker?.trackEvent 'Finished course prepaid purchase', {price: @pricePerStudent, seats: @numberOfStudents}
|
||||||
@state = 'purchased'
|
@state = 'purchased'
|
||||||
@render?()
|
@render?()
|
||||||
|
|
||||||
error: (jqxhr, textStatus, errorThrown) ->
|
error: (jqxhr, textStatus, errorThrown) ->
|
||||||
application.tracker?.trackEvent 'Failed course prepaid purchase', status: textStatus
|
application.tracker?.trackEvent 'Failed course prepaid purchase', status: textStatus
|
||||||
if jqxhr.status is 402
|
if jqxhr.status is 402
|
||||||
|
@ -82,4 +116,3 @@ module.exports = class PurchaseCoursesView extends RootView
|
||||||
@stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}"
|
@stateMessage = "#{jqxhr.status}: #{jqxhr.responseText}"
|
||||||
@render?()
|
@render?()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Reference in a new issue