paypal

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

@@ -275,6 +275,7 @@ profileUtils = context.JK.ProfileUtils
       billingInUS: true,
       userWantsUpdateCC: false,
       selectedCountry: null,
+      paypal_updating: false,
       uncollectables: []
     }
 
@@ -410,7 +411,7 @@ profileUtils = context.JK.ProfileUtils
       rest.updatePayment({recurly_token: token_data.id}).done((response) => @updatePaymentDone(response)).fail((jqXHR) => @updatePaymentFailure(jqXHR))
 
   updatePaymentDone: (response) ->
-    @setState({updating: false})
+    @setState({updating: false, "paypal_updating": false})
 
     logger.debug("recurly submitted: " + JSON.stringify(response))
 
@@ -425,7 +426,7 @@ profileUtils = context.JK.ProfileUtils
       @app.layout.notify({title: 'Payment Updated', text: 'Your payment info has been updated.'})
 
   updatePaymentFailure: (jqXHR) ->
-    @setState({updating: false})
+    @setState({updating: false, "paypal_updating": false})
     handled = false
     if jqXHR.status == 404
       errors = JSON.parse(jqXHR.responseText)?.message
@@ -441,12 +442,18 @@ profileUtils = context.JK.ProfileUtils
     recurly.token(@elements, form, @onRecurlyToken)
 
   configureRecurly: () ->
-    unless window.configuredRecurly
+    if !window.configuredRecurly
       console.log("configuring recurly...")
       window.recurly.configure(gon.global.recurly_public_api_key)
       window.configuredRecurly = true
+      @setState({"configuredRecurly": true})
       @elements = window.recurly.Elements()
 
+      # then load paypal:
+      @paypal = window.recurly.PayPal({ braintree: { clientAuthorization: gon.global.braintree_token} })
+      @paypal.on('error', this.onPayPalError)
+      @paypal.on('token', this.onPayPalToken)
+
   delayedConfigure: () ->
     if gon.isNativeClient
       return
@@ -512,20 +519,19 @@ profileUtils = context.JK.ProfileUtils
 
   onStartPaypal: (e) ->
     e.preventDefault()
-
-    @paypal = window.recurly.PayPal({ display: braintree: { clientAuthorization: gon.global.braintree_token} })
-    #@paypal = window.recurly.PayPal({ display: { displayName: 'JamKazam Subscriptions' }})
-    @paypal.on('error', this.onPayPalError)
-    @paypal.on('token', this.onPayPalToken)
-    @paypal.start();
+    if @state.updating
+      return
+    @setState({"paypal_updating": true})
+    @paypal.start()
 
   onPayPalToken:(token) ->
     console.log("OnPayPalToken", token)
+    @setState({updating: true})
+    rest.updatePayment({recurly_token: token.id}).done((response) => @updatePaymentDone(response)).fail((jqXHR) => @updatePaymentFailure(jqXHR))
 
   onPayPalError: (err) ->
     console.error("OnPayPalError", err)
-
-
+    @setState({"paypal_updating": false})
 
   openBrowserToPayment: () ->
     context.JK.popExternalLink("/client#/account/paymentHistory", true)
@@ -579,6 +585,24 @@ profileUtils = context.JK.ProfileUtils
         <select  disabled={disabled} name="countries" onChange={this.onCountryChanged} value={this.currentCountry()} data-recurly="country" autoComplete="shipping country" className="country">{countries}</select>`
 
 
+    if gon.global.paypal_admin_only
+      if @state.user?.admin
+        paypal_visibility = 'block'
+      else
+        paypal_visibility = 'none'
+    else
+      paypal_visibility = 'block'
+
+
+    paypalButtonClasses = "paypal-button "
+    if !@state.configuredRecurly
+      paypalButtonText = `<span className="paypal-txt">Loading PayPal ...</span>`
+      paypalButtonClasses = paypalButtonClasses + "paypal-updating"
+    else if @state.paypal_updating && @state.updating
+      paypalButtonClasses = paypalButtonClasses + "paypal-updating"
+      paypalButtonText = `<span className="paypal-txt">Updating your account ...</span>`
+    else
+      paypalButtonText = `<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png" alt="PayPal" />`
     if @state.uncollectables.length > 0
       uncollectable = @state.uncollectables[0]
       uncollectableMessage = `<div className="uncollectable-msg">A charge for your music lesson with {uncollectable.teacher.name} failed. Please update your credit card information immediately so that we can pay the instructor. If you have called your credit card provider and believe there should be no problem with your card, please email us at <a href="mailto:support@jamkazam.com">support@jamkazam.com</a> so that we can figure out what's gone wrong. Thank you!</div>`
@@ -625,7 +649,6 @@ profileUtils = context.JK.ProfileUtils
       <div className={classNames(leftColumnClasses)}>
         {uncollectableMessage}
         <div className="paymethod-header">{header}</div>
-          <a href='#' style={{display:'none'}} onClick={this.onStartPaypal}>Pay with Paypal</a>
         <form autoComplete="on" onSubmit={this.onSubmit} className={classNames(formClasses)} id="user-payment-submit">
           {firstNameField}
           {lastNameField}
@@ -660,6 +683,13 @@ profileUtils = context.JK.ProfileUtils
           </div>
 
           <input type="hidden" name="recurly-token" data-recurly="token"></input>
+
+          <div className="paypal-region" style={{display: paypal_visibility}}>
+              <div className="or-use-paypal">Or Use PayPal:</div>
+              <a href="/paypal/checkout/start" className={paypalButtonClasses} onClick={this.onStartPaypal}>
+                  {paypalButtonText}
+              </a>
+          </div>
         </form>
         {actions}
       </div>
@@ -973,7 +1003,7 @@ profileUtils = context.JK.ProfileUtils
       bits = expiration.split('/')
 
       if bits.length == 2
-        month = bits[0].trim();
+        month = bits[0].trim()
         year = bits[1].trim()
 
         month = new Number(month)

web/app/assets/stylesheets/client/accountPaymentHistory.scss

@@ -43,6 +43,7 @@
   text-align:center;
 }
 
+
 #account-payment-history {
 
   .content-body-scroller {
@@ -132,6 +133,38 @@
     @include border-box_sizing;
   }
 
+
+  .paypal-region {
+    margin:30px 0 40px;
+  }
+  .paypal-button {
+    border-radius:4px;
+    background-color:#ffc439;
+    width: 250px;
+    height: 33px;
+    text-align: center;
+    line-height: 38px;
+    img {
+      position: relative;
+      top: 3px;
+    }
+    &:hover {
+      background-color:darken(#ffc439, 10%);
+    }
+  }
+  .paypal-updating {
+    background-color:darken(#ffc439, 40%);
+    color:white;
+  }
+  .paypal-txt {
+    color:white;
+  }
+
+  .or-use-paypal {
+    display:inline-block;
+    width:150px;
+  }
+
   .profile-tile {
 
     float: right;

web/app/views/api_users/show.rabl

@@ -1,6 +1,6 @@
 object @user
 
-attributes :id, :first_name, :last_name, :name, :city, :state, :country, :location, :online, :photo_url, :musician, :gender, :birth_date, :internet_service_provider, :friend_count, :liker_count, :like_count, :follower_count, :following_count, 
+attributes :id, :first_name, :last_name, :name, :city, :state, :country, :location, :online, :photo_url, :musician, :gender, :birth_date, :internet_service_provider, :friend_count, :liker_count, :like_count, :follower_count, :following_count, :admin,
 :recording_count, :session_count, :biography, :favorite_count, :audio_latency, :upcoming_session_count, :age, :website, :skill_level, :reuse_card, :email_needs_verification, :is_a_teacher, :is_a_student, :is_onboarder, :timezone
 
 node :location do |user|

web/config/application.rb

@@ -496,6 +496,7 @@ if defined?(Bundler)
       # braintree: public key: 367d6dtdswvdr87s
       # braintree: private key: 8309b8f9c669cfa940f617eb9cac56ea
       config.braintree_token = 'sandbox_pgjp8dvs_5v5rwm94m2vrfbms'
+      config.paypal_admin_only = false
 
   end
 end

web/config/initializers/gon.rb

@@ -27,5 +27,6 @@ Gon.global.chat_opened_by_default = Rails.application.config.chat_opened_by_defa
 Gon.global.network_test_required = Rails.application.config.network_test_required
 Gon.global.musician_count = Rails.application.config.musician_count
 Gon.global.subscription_codes = Rails.application.config.subscription_codes
-#Gon.global.braintree_token = Rails.application.config.braintree_token
+Gon.global.braintree_token = Rails.application.config.braintree_token
+Gon.global.paypal_admin_only = Rails.application.config.paypal_admin_only
 Gon.global.env = Rails.env