247 lines
11 KiB
CoffeeScript
247 lines
11 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
|
|
updating: false
|
|
}
|
|
|
|
getDisplayNameTier: (plan_code) ->
|
|
if plan_code == ''
|
|
plan_code = null
|
|
for subscriptionCode in gon.global.subscription_codes
|
|
if plan_code == subscriptionCode.id
|
|
return subscriptionCode.name
|
|
return "Unknown plan code=#{plan_code}"
|
|
|
|
getDisplayNamePrice: (plan_code) ->
|
|
if plan_code == ''
|
|
plan_code = null
|
|
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.value
|
|
@setState({selectedPlan: val})
|
|
|
|
currentPlan: () ->
|
|
if this.state.selectedPlan?
|
|
this.state.selectedPlan
|
|
else
|
|
this.props.subscription.desired_plan_code || ''
|
|
|
|
onSubmit: (event) ->
|
|
if event
|
|
event.preventDefault()
|
|
@performSubmit()
|
|
|
|
onChangeSubmit: (form) ->
|
|
if @state.updating
|
|
return
|
|
@performSubmit()
|
|
|
|
# user selects button on main page
|
|
onUpdatePaymentMethod: () ->
|
|
if gon.isNativeClient
|
|
context.JK.popExternalLink("/client#/account/paymentHistory", true)
|
|
else
|
|
window.location.href = "/client#/account/paymentHistory"
|
|
|
|
openBrowserToPayment: () ->
|
|
if gon.isNativeClient
|
|
context.JK.popExternalLink("/client#/account/paymentHistory", true)
|
|
else
|
|
window.location.href = "/client#/account/paymentHistory"
|
|
|
|
performSubmit: () ->
|
|
if !@state.selectedPlan?
|
|
return
|
|
|
|
@setState({updating: true})
|
|
#SubscriptionActions.changeSubscription(this.state.selectedPlan)
|
|
rest.changeSubscription(this.state.selectedPlan).done((subscription) =>
|
|
SubscriptionActions.forceUpdate(subscription)
|
|
has_billing_info = subscription.has_billing_info
|
|
console.log("subscription change update", subscription)
|
|
if has_billing_info
|
|
@props.app.layout.notify({
|
|
title: "Subscription updated!",
|
|
text: "Thank you for supporting JamKazam!"
|
|
})
|
|
else
|
|
if subscription.desired_plan_code
|
|
if gon.isNativeClient
|
|
html = context._.template($('#template-payment-still-needed-native').html(), {}, { variable: 'data' })
|
|
else
|
|
html = context._.template($('#template-payment-still-needed').html(), {}, { variable: 'data' })
|
|
|
|
buttons = []
|
|
buttons.push({name: 'CLOSE', buttonStyle: 'button-grey'})
|
|
buttons.push({
|
|
name: 'UPDATE PAYMENT METHOD',
|
|
buttonStyle: 'button-orange',
|
|
click: (() => (@openBrowserToPayment()))
|
|
})
|
|
context.JK.Banner.show({
|
|
title: "Payment Method Needed",
|
|
html: html,
|
|
buttons: buttons})
|
|
else
|
|
@props.app.layout.notify({
|
|
title: "Subscription updated!",
|
|
text: "Thank you for supporting JamKazam!"
|
|
})
|
|
|
|
#@props.app.layout.notify({
|
|
# title: "Payment method still needed",
|
|
# text: "Please click UPDATE PAYMENT METHOD in the bottom-right of the screen."
|
|
#})
|
|
@setState({updating: false, selectedPlan: null})
|
|
)
|
|
.fail((jqXHR) =>
|
|
@setState({updating: false})
|
|
if jqXHR.status == 422
|
|
@props.app.layout.notify({
|
|
title: "you already have this subscription",
|
|
text: "No changes were made to your account."
|
|
})
|
|
else
|
|
@props.app.layout.notify({
|
|
title: "unable to update subscription status",
|
|
text: "Please contact support@jamkazam.com. Error:\n #{jqXHR.responseText}"
|
|
})
|
|
)
|
|
|
|
onCancelPlan: (event) ->
|
|
if confirm("Are you sure you want to cancel your plan?")
|
|
SubscriptionActions.cancelSubscription()
|
|
|
|
componentDidUpdate: () ->
|
|
if @state.updating
|
|
@setState({updating:false})
|
|
|
|
componentDidMount: () ->
|
|
|
|
@root = $(@getDOMNode())
|
|
|
|
document.querySelector('#change-subscription-form').addEventListener('submit', @onChangeSubmit.bind(this))
|
|
|
|
comparePlans: (e) ->
|
|
if context.JK.clientType() == 'client'
|
|
context.JK.popExternalLink("https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-")
|
|
e.preventDefault()
|
|
|
|
render: () ->
|
|
plan_codes = []
|
|
monthlies = []
|
|
yearlies = []
|
|
for plan in gon.global.subscription_codes
|
|
if plan.cycle == 'month'
|
|
monthlies.push(plan)
|
|
else
|
|
yearlies.push(plan)
|
|
plan_codes.push(`<option key="monthly" value="monthly" disabled="disabled">-------- MONTHLY PLANS --------</option>`)
|
|
for plan in monthlies
|
|
plan_codes.push(`<option key={plan.id || ''} value={plan.id || ''}>{plan.name} (${plan.price.toFixed(2)}/{plan.cycle})</option>`)
|
|
plan_codes.push(`<option key="yearly" value="yearly" disabled="disabled">-------- YEARLY PLANS --------</option>`)
|
|
for plan in yearlies
|
|
plan_codes.push(`<option key={plan.id || ''} value={plan.id || ''}>{plan.name} (${plan.price.toFixed(2)}/{plan.cycle})</option>`)
|
|
plansJsx = `<select name="plan_code" onChange={this.onPlanChanged} defaultValue={this.currentPlan()} >{plan_codes}</select>`
|
|
|
|
changeClass = 'button-orange update-plan'
|
|
if !@state.selectedPlan? || @state.updating
|
|
changeClass = changeClass + ' disabled'
|
|
|
|
|
|
recurly_subscription = @props.subscription.subscription
|
|
effective_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.plan_code)}</span>`
|
|
desired_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.desired_plan_code)}</span>`
|
|
admin_override_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.admin_override_plan_code)}</span>`
|
|
in_trial = @props.subscription.in_trial
|
|
effective_is_free = !!this.props.subscription.plan_code
|
|
has_pending_subscription = @props.subscription.subscription?.pending_subscription?
|
|
cancelled_subscription = @props.subscription.subscription?.remaining_billing_cycles == 0
|
|
show_payment_info = null
|
|
has_billing_info = @props.subscription.has_billing_info
|
|
|
|
#console.log("@props.subscription.subscription", @props.subscription.subscription, has_pending_subscription)
|
|
|
|
if in_trial
|
|
if @props.subscription.desired_plan_code
|
|
if has_billing_info
|
|
note = `<span>Billing starts for the {desired_plan_name} plan after the trial ends.</span>`
|
|
else
|
|
warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not yet entered payment info.</p>`
|
|
show_payment_info = true
|
|
else
|
|
if has_billing_info
|
|
warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not selected a plan.</p>`
|
|
else
|
|
warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not yet entered payment info or selected a plan.</p>`
|
|
show_payment_info = true
|
|
|
|
explanation = `<span>You have a <span className="plan-name">Gold</span> account until your trial ends {context.JK.formatDateShort(this.props.subscription.trial_ends_at)}. {note}</span>`
|
|
else
|
|
if @props.subscription.desired_plan_code && !@props.subscription.plan_code && !has_billing_info
|
|
explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you!</span>`
|
|
warning = `<p className="uncollectable-msg">For this plan to take effect, you must provide a payment method (e.g. a credit card), for the monthly subscription charge. Please click the Update Payment Method button to do this now.</p>`
|
|
show_payment_info = true
|
|
else
|
|
if @props.subscription.desired_plan_code
|
|
if !has_billing_info
|
|
show_payment_info = true
|
|
explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you</span>`
|
|
warning = `<p className="uncollectable-msg">However, you must provide a payment method (e.g. a credit card), for the monthly subscription charge. Please click the Update Payment Method button to do this now.</p>`
|
|
else
|
|
explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you!</span>`
|
|
|
|
else
|
|
# free plan situation - not much to go on about
|
|
explanation = `<span>You are currently on the {desired_plan_name} plan.</span>`
|
|
if show_payment_info
|
|
update_payment_btn = `<a className="button-orange update-payment-method" href="/client#/account/paymentHistory" onClick={this.onUpdatePaymentMethod}>UPDATE PAYMENT METHOD</a>`
|
|
if has_pending_subscription
|
|
billingAddendum = null #`<span><br/><br/><span>You will be billed next at the <span className="plan-name">{this.getDisplayNameTier(this.props.subscription.subscription.plan.plan_code)}</span> on the next billing cycle.</span></span>`
|
|
else if cancelled_subscription && this.props.subscription.desired_plan_code == null && this.props.subscription.plan_code != null
|
|
billingAddendum = `<span>However, your cancelled {effective_plan_name} plan is still active until the end of the billing cycle.</span>`# `<span><br/><br/><span>You will be billed a final time at the <span className="plan-name">{this.getDisplayNameTier(this.props.subscription.subscription.plan.plan_code)}</span> at end of this billing cycle.</span></span>`
|
|
else
|
|
billingAddendum = null
|
|
`<div className="current-subscription">
|
|
<div>
|
|
<h2>Subscription:</h2>
|
|
<p className="explainer">Your JamKazam subscription is currently set to the plan displayed below. To compare the features available for different subscription plans, click the Compare Plans button below. To change your plan, click the "subscription plan" list box below, select a new plan, and then click the Update Plan button below.</p>
|
|
<div className="subscription-plan-and-status">
|
|
<div className="subscription-plan">
|
|
<form id="change-subscription-form" onSubmit={this.onChangeSubmit} >
|
|
<label for="plan_code">subscription plan:</label>
|
|
<div className="subscription-actions">
|
|
{plansJsx}
|
|
<a className="button-grey" onClick={this.comparePlans} target="_blank" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-">COMPARE PLANS</a>
|
|
<button className={changeClass} onClick={this.onSubmit} type="submit">UPDATE PLAN</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div className="effective-subscription">
|
|
<div className="explanation">
|
|
<p>{explanation} {billingAddendum}</p>
|
|
{warning}
|
|
</div>
|
|
<a className="button-grey" onClick={this.onCancel}>BACK</a>{update_payment_btn}
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
}) |