pause

web/app/assets/javascripts/accounts.js

@@ -135,6 +135,7 @@
         function events() {
             // wire up main panel clicks:
             $('#account-content-scroller').on('click', '#account-scheduled-sessions-link', function(evt) { evt.stopPropagation(); navToScheduledSessions(); return false; } );
+            $('#account-content-scroller').on('click', '#account-manage-subscription', function(evt) { evt.stopPropagation(); navToSubscription(); return false; } );
             $('#account-content-scroller').on('click', '#account-my-jamtracks-link', function(evt) { evt.stopPropagation(); navToMyJamTracks(); return false; } );
             
             $('#account-content-scroller').on('click', '#account-edit-identity-link', function(evt) { evt.stopPropagation(); navToEditIdentity(); return false; } );
@@ -165,6 +166,11 @@
             window.location = '/client#/account/sessions'
         }
 
+        function navToSubscription() {
+            resetForm();
+            window.location = '/client#/account/subscription'
+        }
+
         function navToMyJamTracks() {
             resetForm();
             window.location = '/client#/account/jamtracks'   

web/app/assets/javascripts/checkout_utils.js.coffee

@@ -66,9 +66,9 @@ class CheckoutUtils
     return true
 
   configureRecurly: () =>
-    unless @configuredRecurly
+    unless window.configuredRecurly
       context.recurly.configure(gon.global.recurly_public_api_key)
-      @configuredRecurly = true
+      window.configuredRecurly = true
 
 # global instance
 context.JK.CheckoutUtilsInstance = new CheckoutUtils()

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

@@ -0,0 +1,68 @@
+context = window
+rest = context.JK.Rest()
+logger = context.JK.logger
+
+AppStore = context.AppStore
+UserStore = context.UserStore
+
+profileUtils = context.JK.ProfileUtils
+
+@AccountSubscriptionScreen = React.createClass({
+
+  mixins: [
+    ICheckMixin,
+    Reflux.listenTo(AppStore, "onAppInit"),
+    Reflux.listenTo(UserStore, "onUserChanged")
+  ]
+
+  onAppInit: (@app) ->
+    @app.bindScreen('account/subscription', {beforeShow: @beforeShow, afterShow: @afterShow, beforeHide: @beforeHide})
+
+  onUserChanged: (userState) ->
+    @setState({user: userState?.user})
+
+  componentDidUpdate: () ->
+    console.log("did update")
+
+
+  beforeHide: (e) ->
+    @screenVisible = false
+    return true
+
+  beforeShow: (e) ->
+    console.log("before show")
+
+  afterShow: (e) ->
+    @screenVisible = true
+    logger.debug("AccountSubscriptionScreen: afterShow")
+
+  getInitialState: () ->
+    {
+    user: null,
+    updating: false
+    }
+
+  onCancel: (e) ->
+    e.preventDefault()
+    context.location.href = '/client#/account'
+
+  render: () ->
+
+    `<div className="content-body-scroller">
+      <div className="profile-header profile-head">
+        <div className="store-header">subscription:</div>
+      </div>
+
+      <div className="profile-body">
+        <div className="profile-wrapper">
+          <div className="main-content">
+              <Subscription />
+              <div className="actions">
+                  <a onClick={this.onCancel}>LEAVE</a>
+              </div>
+            <br />
+          </div>
+        </div>
+      </div>
+    </div>`
+})

web/app/assets/javascripts/react-components/Subscription.js.jsx.coffee

@@ -0,0 +1,106 @@
+context = window
+rest = context.JK.Rest()
+logger = context.JK.logger
+
+UserStore = context.UserStore
+
+@Subscription = React.createClass({
+
+
+  getInitialState: () ->
+    {
+    clicked: false
+    }
+
+  openBrowser: () ->
+    context.JK.popExternalLink("https://www.jamkazam.com/client#/subscription")
+
+
+  onRecurlyToken: (err, token) ->
+    console.log("TOKEN", token)
+    if err
+      console.log("error", err)
+      # handle error using err.code and err.fields
+    else
+      # recurly.js has filled in the 'token' field, so now we can submit the
+      # form to your server
+      console.log("eintercepted")
+
+  onFormSubmit: (event) ->
+    form = event.target
+    console.log("ok work this", form)
+    event.preventDefault()
+    recurly.token(@elements, form, @onRecurlyToken)
+
+  configureRecurly: () =>
+    unless window.configuredRecurly
+      context.recurly.configure(gon.global.recurly_public_api_key)
+      window.configuredRecurly = true
+
+  componentDidMount: () ->
+    @configureRecurly()
+
+    @elements = recurly.Elements()
+    cardElement = @elements.CardElement(
+      inputType: 'mobileSelect',
+      style: {
+        fontSize: '1em',
+        lineHeight: '42px',
+        placeholder: {
+          color: 'gray !important',
+          fontWeight: 'bold',
+          content: {
+            number: 'Card number',
+            cvv: 'CVC'
+          }
+        },
+        backgroundColor: 'white'
+        invalid: {
+          fontColor: 'red'
+        }
+      }
+    )
+    cardElement.attach('#subscription-elements')
+
+    @root = $(@getDOMNode())
+
+    document.querySelector('#subscription-form').addEventListener('submit', @onFormSubmit.bind(this))
+
+
+  render: () ->
+    `<form id="subscription-form">
+        <div id="subscription-account-data">
+            <label for="first_name">First Name:</label>
+            <input type="text" data-recurly="first_name"></input>
+
+            <label for="last_name">Last Name:</label>
+            <input type="text" data-recurly="last_name"></input>
+
+            <label for="address1">Address 1:</label>
+            <input type="text" data-recurly="address1"></input>
+
+            <label for="address2">Address 2:</label>
+            <input type="text" data-recurly="address2"></input>
+
+            <label for="city">City:</label>
+            <input type="text" data-recurly="city"></input>
+
+            <label for="state">State:</label>
+            <input type="text" data-recurly="state"></input>
+
+            <label for="postal_code">Postal Code:</label>
+            <input type="text" data-recurly="postal_code"></input>
+
+            <label for="country">Country:</label>
+            <input type="text" data-recurly="country"></input>
+        </div>
+        <div id="subscription-elements">
+
+        </div>
+
+        <input type="hidden" name="recurly-token" data-recurly="token"></input>
+
+        <button>submit</button>
+    </form>`
+
+})

web/app/assets/stylesheets/client/react-components/AccountSubscriptionScreen.scss

@@ -0,0 +1,142 @@
+@import "client/common";
+
+
+#account-subscription {
+  div[data-react-class="AccountSubscriptionScreen"] {
+    height: 100%;
+  }
+
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .profile-body {
+    padding-top: 20px;
+  }
+
+  #subscription-account-data {
+    display:grid;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    grid-template-columns: 50% 50%;
+  }
+  form {
+    max-width:25rem;
+  }
+
+  .actions {
+    float: left;
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
+
+  a.cancel {
+    margin-left:3px;
+  }
+
+  label, .label {
+    display: block;
+    text-align: left;
+    width: 100%;
+    margin: 0 0 0.2rem;
+    color: white;
+    font-size: 0.8rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    clear: left;
+  }
+
+  input[type="text"], select {
+    position: relative;
+    width: 100%;
+    border: 2px solid #c2c2c2;
+    background: white;
+    padding: 0.5rem;
+    margin: 0 0 1rem;
+    outline: none;
+    font-family: 'Open Sans', Helvetica, sans-serif;
+    font-size: 1rem;
+    font-weight: bold;
+    box-shadow: none;
+    border-radius: 0;
+    color: #c2c2c2;
+    -webkit-appearance: none;
+    -webkit-transition: border-color 0.3s;
+    -moz-transition: border-color 0.3s;
+    -ms-transition: border-color 0.3s;
+    -o-transition: border-color 0.3s;
+    transition: border-color 0.3s;
+  }
+
+  input:focus {
+    border-color: #2c0730;
+    color: #2c0730;
+    z-index: 10;
+  }
+
+  input.error {
+    border-color: #e43c29;
+  }
+
+  div.error .recurly-hosted-field {
+    border: 2px solid #e43c29;
+  }
+
+  @media screen and (max-height: 599px) {
+    figure.logo {
+      width: 100%;
+      height: 3rem;
+      margin: 2rem auto 1rem;
+      border-radius: 0;
+      line-height: 3rem;
+    }
+  }
+
+  .recurly-element{
+    position: relative;
+    width: 100%;
+    height: 42px;
+    border: 2px solid #c2c2c2;
+    background: white;
+    padding: 0.5rem;
+    margin: 0 0 1rem;
+    outline: none;
+    font-family: 'Open Sans', Helvetica, sans-serif;
+    font-size: 1rem;
+    font-weight: bold;
+    box-shadow: none;
+    border-radius: 0;
+    color: #c2c2c2;
+    -webkit-appearance: none;
+    -webkit-transition: border-color 0.3s;
+    -moz-transition: border-color 0.3s;
+    -ms-transition: border-color 0.3s;
+    -o-transition: border-color 0.3s;
+    transition: border-color 0.3s;
+  }
+
+  .recurly-hosted-field-focus, .recurly-element-focus {
+    border-color: #2c0730;
+    color: #2c0730;
+    z-index: 10;
+  }
+
+  .item {
+    text-align: left;
+  }
+
+  .item > label {
+    display: inline;
+    text-transform: none;
+  }
+
+  .items {
+    margin-bottom: 15px;
+  }
+
+}

web/app/views/clients/_account.html.erb

@@ -25,6 +25,18 @@
       <div class="content-wrapper account">
         <br />
 
+        <div class="account-left">
+          <h2>subscription: </h2>
+        </div>
+        <div class="account-mid subscription">
+          Manage your JamKazam subscription
+        </div>
+        <div class="right">
+          <a id="account-manage-subscription" href="#" class="button-orange">UPDATE</a>
+        </div>
+        <br clear="all" />
+        <hr/>
+
         <div class="account-left">
           <h2>sessions: </h2>
         </div>

web/app/views/clients/_account_subscription.html.slim

@@ -0,0 +1,9 @@
+#account-subscription.screen.secondary layout="screen" layout-id="account/subscription"
+  .content-head
+    .content-icon
+      = image_tag "content/icon_account.png", :size => "27x20"
+    h1
+      | subscription
+    = render "screen_navigation"
+  .content-body
+    = react_component 'AccountSubscriptionScreen', {}

web/app/views/clients/index.html.erb

@@ -90,6 +90,7 @@
 <%= render "account_school" %>
 <%= render "account_retailer" %>
 <%= render "account_onboarder" %>
+<%= render "account_subscription" %>
 <%= render "inviteMusicians" %>
 <%= render "hoverBand" %>
 <%= render "hoverFan" %>

web/app/views/layouts/client.html.erb

@@ -24,9 +24,9 @@
     <%= render "shared/ad_sense" %>
   </head>
   <body class="jam" data-client-type="<%= @nativeClient ? 'client' : 'browser' %>">
+    <%= render "shared/recurly" %>
     <%= yield %>
     <%= render "shared/ga" %>
-    <%= render "shared/recurly" %>
     <%= render "shared/stripe" %>
     <%= render "shared/olark" %>
   </body>

web/app/views/shared/_recurly.html.slim

@@ -1 +1 @@
-script src="https://js.recurly.com/v3/recurly.js" async="async" defer="defer"
+script src="https://js.recurly.com/v4/recurly.js" async="async" defer="defer"

web/config/application.rb

@@ -167,9 +167,9 @@ if defined?(Bundler)
     config.google_public_server_key = "AIzaSyCPTPq5PEcl4XWcm7NZ2IGClZlbsiE8JNo"
 
     # Use Private API Keys to communicate with Recurly's API v2. See https://docs.recurly.com/api/basics/authentication to learn more.
-    config.recurly_private_api_key = '7d623daabfc2434fa2a893bb008eb3e6'
+    config.recurly_private_api_key = '55f2fdfa4d014e64a94eaba1e93f39bb'
     # Use Public Keys to identify your site when using Recurly.js. See https://docs.recurly.com/js/#include to learn more.
-    config.recurly_public_api_key = 'sjc-SZlO11shkeA1WMGuISLGg5'
+    config.recurly_public_api_key = 'ewr1-HciusxMNfSSjz5WlupGk0C'
 
     config.stripe_charge_token = '#XXX#'