138 lines
4.1 KiB
CoffeeScript
138 lines
4.1 KiB
CoffeeScript
context = window
|
|
rest = context.JK.Rest()
|
|
logger = context.JK.logger
|
|
LocationActions = context.LocationActions
|
|
UserStore = context.UserStore
|
|
|
|
@Subscription = React.createClass({
|
|
|
|
|
|
mixins: [Reflux.listenTo(@LocationStore, "onLocationsChanged")]
|
|
|
|
|
|
getInitialState: () ->
|
|
{
|
|
clicked: false,
|
|
selectedCountry: null
|
|
}
|
|
|
|
onLocationsChanged: (countries) ->
|
|
console.log("countires in ", countries)
|
|
@setState({countries: countries})
|
|
|
|
onCountryChanged: (e) ->
|
|
val = $(e.target).val()
|
|
@setState({selectedCountry: val})
|
|
|
|
currentCountry: () ->
|
|
this.state.selectedCountry || this.props.selectedCountry || ''
|
|
|
|
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: () ->
|
|
LocationActions.load()
|
|
|
|
@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))
|
|
|
|
|
|
defaultText: () ->
|
|
'Select Country'
|
|
|
|
render: () ->
|
|
|
|
if @state.countries?
|
|
countries = [`<option key="" value="">{this.defaultText()}</option>`]
|
|
for countryId, countryInfo of @state.countries
|
|
countries.push(`<option key={countryId} value={countryId}>{countryInfo.name}</option>`)
|
|
|
|
country = @state.countries[this.currentCountry()]
|
|
else
|
|
countries = []
|
|
|
|
countryJsx = `
|
|
<select name="countries" onChange={this.onCountryChanged} value={this.currentCountry()} data-recurly="country" autocomplete="shipping country">{countries}</select>`
|
|
|
|
`<form id="subscription-form">
|
|
<div id="subscription-account-data">
|
|
<label for="first_name">First Name:</label>
|
|
<input type="text" data-recurly="first_name" required autocomplete="cc-give-name"></input>
|
|
|
|
<label for="last_name">Last Name:</label>
|
|
<input type="text" data-recurly="last_name" required autocomplete="cc-family-name"></input>
|
|
|
|
<label for="address1">Address 1:</label>
|
|
<input type="text" data-recurly="address1" required autocomplete="shipping address-line1"></input>
|
|
|
|
<label for="address2">Address 2:</label>
|
|
<input type="text" data-recurly="address2" required autocomplete="shipping address-line1"></input>
|
|
|
|
<label for="city">City:</label>
|
|
<input type="text" data-recurly="city" required autocomplete="shipping address-level2"></input>
|
|
|
|
<label for="state">State:</label>
|
|
<input type="text" data-recurly="state" required autocomplete="shipping address-level1"></input>
|
|
|
|
<label for="postal_code">Postal Code:</label>
|
|
<input type="text" data-recurly="postal_code" autocomplete="shipping postal-code"></input>
|
|
|
|
<label for="country">Country:</label>
|
|
{countryJsx}
|
|
</div>
|
|
<div id="subscription-elements">
|
|
|
|
</div>
|
|
|
|
<input type="hidden" name="recurly-token" data-recurly="token"></input>
|
|
|
|
<button>submit</button>
|
|
</form>`
|
|
|
|
}) |