upgrade-modal.js

import React, { Component } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import { Animation } from '../../helpers/Animations'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router'
import actions from '../../actions/index'
import includes from 'lodash/includes'

import {CardElement, Elements, injectStripe} from 'react-stripe-elements'

@connect(( store ) => ({ location: store.location, user: store.user, upgrademodal: store.upgrademodal }))
class UpgradeForm extends Component {
	state = {
		open: false,
		loading: false,
		error: null,
		isSuccessful: false
	}

	handleSubmit( e ){
		e.preventDefault()
		this.setState({ loading: true, error: null })
		this.props.stripe.createToken().then(({token}) => {
			console.log('Received Stripe token:', token)
			if( token ){
				return this.props.dispatch( actions.upgrademodal.upgradeToPremium({ token, fetchOnUpdate: true }, ( err ) => {
					if( err ){
						console.log('ERROR:', err.message)
						return this.setState({ loading: false, error: err.message+' - Please contact support@sketchviewer.com' })
					}
					this.setState({ loading: false, isSuccessful: true })
					setTimeout(() => {
						this.props.dispatch( actions.upgrademodal.update({ open: false }) )
					}, 2000)
				}))
			}
			this.setState({ loading: false })
		}).catch(( err ) => {
			console.log('token Error:', err)
			this.setState({ loading: false, error: err })
		})
	}


	renderSuccess(){
		return (
			<div className="is-successful has-text-centered">
				<div className="ico">
					<i class="fa fa-check" aria-hidden="true"></i>
				</div>
				<h1 className="title is-4">Thank You!</h1>
				<div className="light">Thank you for upgrading to Premium.<br />This modal will now close.</div>
			</div>
		)
	}


	renderForm(){
		let buttonClasses = ['button', 'is-primary', 'is-medium', 'is-fullwidth']
		if( this.state.loading ) buttonClasses.push('is-loading')
		let ops = {
			style: {
				base: {
					fontSize: '14px',
					color: '#222222',
					fontFamily: 'system-ui, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
					'::placeholder': {
						color: '#999999',
					},
				},
				invalid: {
					color: '#D65768',
				},
			},
		}
		return (
			<div>
				<div className="pricebox has-text-centered">
					<h1 className="title is-1">$8<span>/m</span></h1>
				</div>
				<div className="error-box">
					{this.state.error}
				</div>
				<div className="checkoutfields">
					<div className="form-fields">
					<label>
						<CardElement style={ops.style} />
					</label>
					</div>
					<button class={buttonClasses.join(' ')}>Upgrade Now</button>
				</div>
			</div>
		)
	}


	// Render
	render(){
		let content = this.renderForm()
		if( this.state.isSuccessful ) content = this.renderSuccess()
		return (
			<form onSubmit={this.handleSubmit.bind(this)} className="checkoutform">
				{content}
			</form>
		)
	}
}

export default injectStripe( UpgradeForm )