2014-12-02 23:01:53 -05:00
|
|
|
ModalView = require 'views/core/ModalView'
|
|
|
|
template = require 'templates/play/modal/subscribe-modal'
|
|
|
|
stripeHandler = require 'core/services/stripe'
|
|
|
|
utils = require 'core/utils'
|
2014-12-06 12:35:13 -05:00
|
|
|
AuthModal = require 'views/core/AuthModal'
|
2014-12-02 23:01:53 -05:00
|
|
|
|
|
|
|
module.exports = class SubscribeModal extends ModalView
|
|
|
|
id: 'subscribe-modal'
|
|
|
|
template: template
|
|
|
|
plain: true
|
|
|
|
closesOnClickOutside: false
|
|
|
|
product:
|
|
|
|
amount: 999
|
2014-12-03 00:27:12 -05:00
|
|
|
planID: 'basic'
|
2014-12-02 23:01:53 -05:00
|
|
|
|
|
|
|
subscriptions:
|
|
|
|
'stripe:received-token': 'onStripeReceivedToken'
|
|
|
|
|
|
|
|
events:
|
|
|
|
'click .purchase-button': 'onClickPurchaseButton'
|
|
|
|
'click #close-modal': 'hide'
|
|
|
|
|
|
|
|
constructor: (options) ->
|
|
|
|
super(options)
|
|
|
|
@state = 'standby'
|
|
|
|
|
|
|
|
getRenderData: ->
|
|
|
|
c = super()
|
|
|
|
c.state = @state
|
|
|
|
c.stateMessage = @stateMessage
|
2014-12-11 21:39:03 -05:00
|
|
|
# c.price = @product.amount / 100
|
|
|
|
c.price = 3.99 # Sale
|
2014-12-10 19:05:51 -05:00
|
|
|
|
|
|
|
# A/B Testing alternate subscription copy
|
2014-12-09 02:43:52 -05:00
|
|
|
c.BTest = me.getSubscribeCopyGroup() is 'new'
|
2014-12-11 21:39:03 -05:00
|
|
|
|
2014-12-02 23:01:53 -05:00
|
|
|
return c
|
|
|
|
|
2014-12-03 12:13:51 -05:00
|
|
|
afterRender: ->
|
|
|
|
super()
|
|
|
|
popoverTitle = $.i18n.t 'subscribe.parents_title'
|
2014-12-03 14:00:42 -05:00
|
|
|
popoverContent = "<p>" + $.i18n.t('subscribe.parents_blurb1') + "</p>"
|
|
|
|
popoverContent += "<p>" + $.i18n.t('subscribe.parents_blurb2') + "</p>"
|
|
|
|
popoverContent += "<p>" + $.i18n.t('subscribe.parents_blurb3') + "</p>"
|
2014-12-11 21:39:03 -05:00
|
|
|
popoverContent = popoverContent.replace /9[.,]99/g, '3.99' # Sale
|
2014-12-09 09:06:14 -05:00
|
|
|
window.popoverContent = popoverContent
|
2014-12-03 12:13:51 -05:00
|
|
|
@$el.find('#parents-info').popover(
|
|
|
|
animation: true
|
|
|
|
html: true
|
|
|
|
placement: 'top'
|
|
|
|
trigger: 'hover'
|
|
|
|
title: popoverTitle
|
|
|
|
content: popoverContent
|
|
|
|
container: @$el
|
|
|
|
).on 'shown.bs.popover', =>
|
|
|
|
application.tracker?.trackEvent 'Subscription parent hover', {}
|
2014-12-05 00:14:22 -05:00
|
|
|
application.tracker?.trackPageView "subscription/parent-hover", ['Google Analytics']
|
2014-12-03 12:13:51 -05:00
|
|
|
|
2014-12-02 23:01:53 -05:00
|
|
|
onClickPurchaseButton: (e) ->
|
|
|
|
@playSound 'menu-button-click'
|
2014-12-06 12:35:13 -05:00
|
|
|
return @openModalView new AuthModal() if me.get('anonymous')
|
2014-12-02 23:01:53 -05:00
|
|
|
application.tracker?.trackEvent 'Started subscription purchase', {}
|
2014-12-05 00:14:22 -05:00
|
|
|
application.tracker?.trackPageView "subscription/start-purchase", ['Google Analytics']
|
2014-12-06 15:37:54 -05:00
|
|
|
options = {
|
2014-12-04 16:44:27 -05:00
|
|
|
description: $.i18n.t('subscribe.stripe_description')
|
2014-12-02 23:01:53 -05:00
|
|
|
amount: @product.amount
|
2014-12-06 15:37:54 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
# SALE LOGIC
|
|
|
|
# overwrite amount with sale price
|
|
|
|
# maybe also put in another description with details about how long it lasts, etc
|
2014-12-09 02:43:52 -05:00
|
|
|
# NOTE: Do not change this price without updating the context.price in getRenderData
|
2014-12-11 21:39:03 -05:00
|
|
|
# NOTE: And, the popover content if necessary
|
|
|
|
options = {
|
|
|
|
description: 'Monthly Subscription (HoC sale)'
|
|
|
|
amount: 399
|
|
|
|
}
|
2014-12-06 15:37:54 -05:00
|
|
|
|
2014-12-09 16:57:01 -05:00
|
|
|
@purchasedAmount = options.amount
|
|
|
|
|
2014-12-06 15:37:54 -05:00
|
|
|
stripeHandler.open(options)
|
2014-12-02 23:01:53 -05:00
|
|
|
|
|
|
|
onStripeReceivedToken: (e) ->
|
|
|
|
@state = 'purchasing'
|
|
|
|
@render()
|
2014-12-03 00:27:12 -05:00
|
|
|
|
2014-12-05 17:11:38 -05:00
|
|
|
stripe = _.clone(me.get('stripe') ? {})
|
2014-12-03 00:27:12 -05:00
|
|
|
stripe.planID = @product.planID
|
|
|
|
stripe.token = e.token.id
|
|
|
|
me.set 'stripe', stripe
|
|
|
|
|
|
|
|
@listenToOnce me, 'sync', @onSubscriptionSuccess
|
|
|
|
@listenToOnce me, 'error', @onSubscriptionError
|
2014-12-05 17:11:38 -05:00
|
|
|
me.patch({headers: {'X-Change-Plan': 'true'}})
|
2014-12-03 00:27:12 -05:00
|
|
|
|
2014-12-03 12:13:51 -05:00
|
|
|
onSubscriptionSuccess: ->
|
2014-12-09 16:57:01 -05:00
|
|
|
application.tracker?.trackEvent 'Finished subscription purchase', revenue: @purchasedAmount / 100
|
2014-12-05 00:14:22 -05:00
|
|
|
application.tracker?.trackPageView "subscription/finish-purchase", ['Google Analytics']
|
2014-12-03 14:19:10 -05:00
|
|
|
Backbone.Mediator.publish 'subscribe-modal:subscribed', {}
|
2014-12-03 12:13:51 -05:00
|
|
|
@playSound 'victory'
|
2014-12-03 00:27:12 -05:00
|
|
|
@hide()
|
|
|
|
|
2014-12-03 12:13:51 -05:00
|
|
|
onSubscriptionError: (user, response, options) ->
|
|
|
|
console.error 'We got an error subscribing with Stripe from our server:', response
|
2014-12-03 00:27:12 -05:00
|
|
|
stripe = me.get('stripe') ? {}
|
|
|
|
delete stripe.token
|
|
|
|
delete stripe.planID
|
2014-12-03 12:13:51 -05:00
|
|
|
xhr = options.xhr
|
|
|
|
if xhr.status is 402
|
|
|
|
@state = 'declined'
|
|
|
|
else
|
|
|
|
@state = 'unknown_error'
|
|
|
|
@stateMessage = "#{xhr.status}: #{xhr.responseText}"
|
|
|
|
@render()
|