99 lines
2.9 KiB
CoffeeScript
99 lines
2.9 KiB
CoffeeScript
context = window
|
|
rest = context.JK.Rest()
|
|
logger = context.JK.logger
|
|
LocationActions = context.LocationActions
|
|
SubscriptionActions = context.SubscriptionActions
|
|
UserStore = context.UserStore
|
|
AppStore = context.AppStore
|
|
|
|
@CurrentSubscription = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(AppStore, "onAppInit")]
|
|
|
|
|
|
getInitialState: () ->
|
|
{
|
|
selectedPlan: null
|
|
}
|
|
|
|
getDisplayNameTier: (plan_code) ->
|
|
for subscriptionCode in gon.global.subscription_codes
|
|
if plan_code == subscriptionCode.id
|
|
return subscriptionCode.name
|
|
return "Unknown plan code=#{plan_code}"
|
|
|
|
getDisplayNamePrice: (plan_code) ->
|
|
for subscriptionCode in gon.global.subscription_codes
|
|
if plan_code == subscriptionCode.id
|
|
return subscriptionCode.price
|
|
return "Unknown plan code=#{plan_code}"
|
|
|
|
onPlanChanged: (e) ->
|
|
val = $(e.target).val()
|
|
@setState({selectedPlan: val})
|
|
|
|
currentPlan: () ->
|
|
this.state.selectedPlan || this.props.selectedPlan || ''
|
|
|
|
onChangeSubmit: (event) ->
|
|
form = event.target
|
|
event.preventDefault()
|
|
|
|
if !@state.selectedPlan
|
|
return
|
|
SubscriptionActions.changeSubscription(this.state.selectedPlan)
|
|
|
|
onCancelPlan: (event) ->
|
|
if confirm("Are you sure you want to cancel your plan?")
|
|
SubscriptionActions.cancelSubscription()
|
|
|
|
componentDidMount: () ->
|
|
|
|
@root = $(@getDOMNode())
|
|
|
|
document.querySelector('#change-subscription-form').addEventListener('submit', @onChangeSubmit.bind(this))
|
|
|
|
render: () ->
|
|
plan_codes = []
|
|
for plan in gon.global.subscription_codes
|
|
plan_codes.push(`<option key={plan.id} value={plan.id}>{plan.name} ({plan.price}/month)</option>`)
|
|
|
|
plansJsx = `
|
|
<select name="plan_code" onChange={this.onPlanChanged} value={this.currentPlan()} >{plan_codes}</select>`
|
|
|
|
changeClass = 'button-orange'
|
|
if !@state.selectedPlan
|
|
changeClass = changeClass + ' disabled'
|
|
|
|
|
|
if @props.subscription.pending_subscription
|
|
currentPlan = this.getDisplayNameTier(this.props.subscription.pending_subscription.plan.plan_code)
|
|
billingAddendum = `<span>(billed at {this.getDisplayNameTier(this.props.subscription.plan.plan_code)} until next billing cycle</span>`
|
|
else
|
|
currentPlan = this.getDisplayNameTier(this.props.subscription.plan.plan_code)
|
|
billingAddendum = null
|
|
`<div>
|
|
<div>
|
|
<h3>Current Subscription</h3>
|
|
<div>
|
|
{currentPlan}
|
|
{billingAddendum}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Change Plan</h3>
|
|
<form id="change-subscription-form">
|
|
|
|
<label for="plan_code">Change Plan To:</label>
|
|
{plansJsx}
|
|
|
|
<button className={changeClass}>CHANGE PLAN</button>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<h3>Cancel Plan</h3>
|
|
<button className="button-orange" onClick={this.onCancelPlan}>CANCEL PLAN</button>
|
|
</div>
|
|
</div>`
|
|
|
|
}) |