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

72 lines
2.5 KiB
CoffeeScript

context = window
rest = context.JK.Rest()
logger = context.JK.logger
UserStore = context.UserStore
@StripeConnect = React.createClass({
getInitialState: () ->
{
clicked:false
}
openBrowser: () ->
context.JK.popExternalLink("https://www.jamkazam.com/client#/jamclass")
onStripeConnect: (e) ->
if this.state.clicked
return
e.preventDefault()
if window.jamClient.IsNativeClient()
buttons = []
buttons.push({name: 'CLOSE', buttonStyle: 'button-grey'})
buttons.push({
name: 'OPEN BROWSER',
buttonStyle: 'button-orange',
click: (() => (@openBrowser()))
})
context.JK.Banner.show({
title: "Browser Needed",
html: "You must connect to Stripe in a normal browser.<br/><br/>Please select the OPEN BROWSER button to open this page in your system browser.",
buttons: buttons
})
return
this.setState({clicked: true})
StripeActions.connect(this.props.purpose, this.props.user)
render: () ->
if this.props.purpose == 'jamclass-home'
label = `<label>You have not set up your payment information. In order for us to transfer student payments for your lessons, you'll either need to set up a new Stripe account or connect to an existing one using the button below.</label>`
else
label = `<label>To be paid, you must connect either a new or existing Stripe account to your JamKazam account. To do so, click the Stripe button.</label>`
if this.props.user?.stripe_auth?
if this.props.purpose == 'jamclass-home'
return `<div>
<p>Your Stripe account is properly set up and connected to enable transfer of student payments. To view lesson payment history, click the button below.</p>
<a className="button-orange view-payments" href="/client#/account/payment-history">VIEW PAYMENTS</a>
</div>`
else
return `<div>You have successfully connected your Stripe account for payments. If you need to make any changes to your Stripe account, please go to the <a href="https://dashboard.stripe.com/" target="_blank">Stripe website</a> and sign in using your Stripe credentials there to make any changes needed.</div>`
if this.state.clicked
imageUrl = '/assets/content/stripe-connect-light-on-dark.png'
else
imageUrl = '/assets/content/stripe-connect-blue-on-dark.png'
`<div>
{label}
<button className="stripe-connect" onClick={this.onStripeConnect}><img src={imageUrl} /></button>
</div>`
})