jam-cloud/web/app/assets/javascripts/react-components/AccountSubscriptionScreen.js.jsx.coffee

context = window
rest = context.JK.Rest()
logger = context.JK.logger

AppStore = context.AppStore
UserStore = context.UserStore
SubscriptionStore = context.SubscriptionStore
SubscriptionActions = context.SubscriptionActions

profileUtils = context.JK.ProfileUtils

@AccountSubscriptionScreen = React.createClass({

  mixins: [
    ICheckMixin,
    Reflux.listenTo(AppStore, "onAppInit"),
    Reflux.listenTo(UserStore, "onUserChanged"),
    Reflux.listenTo(SubscriptionStore, "onSubscriptionChanged")
  ]

  subRef: null

  onAppInit: (@app) ->
    @app.bindScreen('account/subscription', {beforeShow: @beforeShow, afterShow: @afterShow, beforeHide: @beforeHide, beforeLeave: @beforeLeave})

  onUserChanged: (userState) ->
    @setState({user: userState?.user})

  onSubscriptionChanged: (subscription) ->
    @setState({subscription: subscription})

  beforeHide: (e) ->
    @screenVisible = false
    return true

  beforeShow: (e) ->

    @allowLeave = false

    SubscriptionActions.updateSubscription()

  forceUpdate: () ->
    this.refs.sub.onSubmit()

  userMustLeave: (location) ->
    @allowLeave = true
    window.location.href = '/client' + location

  beforeLeave: (data) ->
    console.debug("subscription beforeLeave", @allowLeave)

    if !this.refs.sub? || @allowLeave
      return true
    else

      if this.refs.sub?
        if !this.refs.sub.state.selectedPlan?
          console.log("no selected plan; can leave")
          return true

      buttons = []
      buttons.push({name: 'LEAVE ANYWAY', buttonStyle: 'button-grey', click: (() => (@userMustLeave(data.hash)))})
      buttons.push({
        name: 'UPDATE PLAN',
        buttonStyle: 'button-orange',
        click: (() => (@forceUpdate()))
      })
      context.JK.Banner.show({
        title: "Subscription Not Updated",
        html: '<div>If you leave this page without saving your new subscription plan preference, your selection will not take effect.<br/><br/>To save your new plan, please click the Update Plan button</div>',
        buttons: buttons})

      return false

  afterShow: (e) ->
    @screenVisible = true
    logger.debug("AccountSubscriptionScreen: afterShow")

  getInitialState: () ->
    { user: null, updating: false, subscription: null}

  onCancel: (e) ->
    e.preventDefault()
    context.location.href = '/client#/account'

  render: () ->

    if @state.subscription

      currentSubscription = `<CurrentSubscription ref="sub" subscription={this.state.subscription} app={this.app}/>`

      content = `<div>
          <div className="current-subscription-block">
              {currentSubscription}
          </div>
      </div>`
    else
      content = `<div className="loading">Loading...</div>`

    `<div className="content-body-scroller">
      <div className="profile-header profile-head">

      </div>
      <div className="profile-body">
        <div className="profile-wrapper">
          <div className="main-content">
              {content}
            <br />
          </div>
        </div>
      </div>
    </div>`
})