ducky/web
2015-07-07
Parent:e9e0a28a7419
ducky/web/src/pages/payment.jsx
Switch to being a website instead of a Chrome app. Update our CNAME to be the more appropriate "prototype.useducky.com" when we deploy. Create a homepage and a non-onboarding page template. This mostly consisted of setting up a header component and the associated styles, and then a logged-in vs. guest flavor of said header, changing the links appropriately. We also created a simple homepage that describes what Ducky is and does, and gave a jumping-off point for it. Stubbed out a basic links page, just to get an idea for what the homepage would be like when a logged-in user navigated to the homepage (e.g., not the marketing copy). Updated our login page to _actually work_, and redirected it to the new URL for the payment setup page. Updated the payment page to actually create a subscription, and moved it from /register/payment to just /payment. Fixed a bug in our registration page that was looking for an invalid_form error when it really meant an invalid_format error. Ooops. Also, updated it to point to the new /payment endpoint instead of /register/payment. Updated our router to use the new homepage, the new links page, and updated the URL for the payment page. Updated our button styles so they should all have the right font color, padding, and border-radius, but could've potentially screwed something up. Oops. Updated our backgrounds all over to have a transparent-y white background behind the content, and a simple pattern for the rest of the body. Not sure how I feel about it just yet, but I'm not going to keep futzing with it.
1 import app from 'ampersand-app'
2 import React from 'react'
3 import ScriptLoaderMixin from 'react-script-loader'
4 import LaddaButton from 'react-ladda'
5 import LaddaCSS from '../../node_modules/ladda/dist/ladda.min.css'
6 import HeroUnit from '../components/hero'
7 import ValidationError from '../components/validation-error'
8 import onboardStyles from '../styles/onboarding.scss'
9 import config from '../config'
11 export default React.createClass({
12 displayName: 'PaymentMethodPage',
13 mixins: [ScriptLoaderMixin.ReactScriptLoaderMixin, React.addons.LinkedStateMixin],
14 getScriptURL () {
15 return 'https://js.stripe.com/v2/'
16 },
18 getInitialState () {
19 return {
20 stripeLoading: true,
21 stripeFailedToLoad: false,
22 active: false,
23 errors: [],
24 number: null,
25 name: null,
26 cvc: null,
27 plan: this.getDefaultPlan(),
28 expireMonth: null,
29 expireYear: null,
30 }
31 },
33 getDefaultPlan () {
34 if (app.me && app.me.subscription && app.me.subscription.plan) {
35 return app.me.subscription.plan
36 }
37 return 'basic_monthly'
38 },
40 nameValidationOutputs: {
41 },
42 numberValidationOutputs: {
43 'invalid_value': 'Are you sure this is right? That number didn’t work.',
44 'invalid_format': 'That’s not a valid credit card number.',
45 },
46 cvcValidationOutputs: {
47 'invalid_format': 'That’s not a valid security code.',
48 'invalid_value': 'That’s not the correct security code.',
49 },
50 expirationValidationOutputs: {
51 'invalid_format': 'That’s not a valid expiration date.',
52 'invalid_value': 'That card appears to be expired.',
53 },
54 balanceValidationOutputs: {
55 'insufficient': 'Your card was declined.',
56 },
57 planValidationOutputs: {
58 'invalid_value': 'That’s not a valid plan!',
59 },
61 userValidationOutputs: {
62 'conflict': 'You already have a subscription! Head to your account page to manage it.',
63 },
65 catchAllValidationOutputs: {
66 'act_of_god': 'Whoops. Something went wrong. Let support know!',
67 },
69 onScriptLoaded () {
70 Stripe.setPublishableKey(config.stripeKey)
71 this.setState({stripeLoading: false})
72 },
74 onScriptError () {
75 this.setState({stripeFailedToLoad: true, errors: [{'error': 'act_of_god'}]})
76 },
78 componentDidMount () {
79 app.subscriptions.on('error', (moc, xhr, options) => {
80 let state = {active: false}
81 let resp = {}
82 if (xhr && xhr.response) {
83 resp = JSON.parse(xhr.response)
84 }
85 if (resp.errors && resp.errors.length) {
86 state.errors = resp.errors
87 } else {
88 state.errors = [{'error': 'act_of_god'}]
89 }
90 this.setState(state)
91 })
92 app.subscriptions.on('sync', (moc, xhr, options) => {
93 this.setState({active: false})
94 // TODO: do something?
95 })
96 },
98 addCard (e) {
99 e.preventDefault()
100 if (this.state.stripeLoading || this.state.stripeFailedToLoad) {
101 return
102 }
103 this.setState({active: true, errors: []})
104 const t = this
105 const errors = []
106 Stripe.card.createToken({
107 number: this.state.number,
108 cvc: this.state.cvc,
109 exp_month: this.state.expireMonth,
110 exp_year: this.state.expireYear,
111 name: this.state.name,
112 }, function(status, response) {
113 if (response.error) {
114 if (response.error.type == 'card_error') {
115 switch (response.error.code) {
116 case 'incorrect_number':
117 errors.push({'error': 'invalid_value', 'field': '/number'})
118 break
119 case 'invalid_number':
120 errors.push({'error': 'invalid_format', 'field': '/number'})
121 break
122 case 'invalid_expiry_month':
123 errors.push({'error': 'invalid_format', 'field': '/expiration'})
124 break
125 case 'invalid_expiry_year':
126 errors.push({'error': 'invalid_format', 'field': '/expiration'})
127 break
128 case 'invalid_cvc':
129 errors.push({'error': 'invalid_format', 'field': '/cvc'})
130 break
131 case 'expired_card':
132 errors.push({'error': 'invalid_value', 'field': '/expiration'})
133 break
134 case 'incorrect_cvc':
135 errors.push({'error': 'invalid_value', 'field': '/cvc'})
136 break
137 case 'incorrect_zip':
138 errors.push({'error': 'invalid_value', 'field': '/zip'})
139 break
140 case 'card_declined':
141 errors.push({'error': 'insufficient', 'field': '/balance'})
142 break
143 case 'missing':
144 errors.push({'error': 'missing', 'field': '/customer/card'})
145 break
146 case 'processing_error':
147 errors.push({'error': 'act_of_god', 'field': '/'})
148 break
149 case 'rate_limit':
150 errors.push({'error': 'access_denied', 'field': '/rate'})
151 break
152 default:
153 errors.push({'error': 'act_of_god', 'field': '/'})
154 break
155 }
156 } else {
157 console.log('Error:', response.error.message)
158 }
159 } else {
160 app.subscriptions.create({
161 'user_id': app.me.profileID,
162 'plan': t.state.plan,
163 'stripe_token': response.id,
164 'email': app.me.email,
165 })
166 }
167 })
168 },
170 render () {
171 return (
172 <div className='container'>
173 <HeroUnit title='Set Up Your Subscription'>Gotta pay those bills.</HeroUnit>
174 <article className='onboarding payment'>
175 <p>Ducky costs money to run, and to keep it improving. We pass these costs on to you. There’s no parent company, no ads, nothing but people making software they want you to enjoy. Also, you get a
176 free 31 day trial. Cancel before it ends, and we won’t charge you at all.</p>
177 <form onSubmit={this.addCard}>
178 <div>
179 <label htmlFor='name'>Cardholder Name</label>
180 <input id='name' type='text' placeholder='This is the name on your card' valueLink={this.linkState('name')} />
181 <ValidationError errors={this.state.errors} field='/name' outputs={this.nameValidationOutputs} />
183 <label htmlFor='cardNumber'>Card Number</label>
184 <input id='cardNumber' type='text' placeholder='4242 4242 4242 4242' valueLink={this.linkState('number')} />
185 <ValidationError errors={this.state.errors} field='/number' outputs={this.numberValidationOutputs} />
187 <label htmlFor='cvc'>Security Code / CVC</label>
188 <input id='cvc' className='cvc' type='password' placeholder='123' valueLink={this.linkState('cvc')} />
190 <label htmlFor='expireMonth' className='expiration'>Expires</label>
191 <input id='expireMonth' className='expiration month' type='text' placeholder='01' valueLink={this.linkState('expireMonth')} />
192 <input id='expireYear' className='expiration year' type='text' placeholder='15' valueLink={this.linkState('expireYear')} />
193 <ValidationError errors={this.state.errors} field='/cvc' outputs={this.cvcValidationOutputs} />
194 <ValidationError errors={this.state.errors} field='/expiration' outputs={this.expirationValidationOutputs} />
196 <label htmlFor='plan'>Plan</label>
197 <select id='plan' className='plan' defaultValue={this.getDefaultPlan()}>
198 <option value='basic_monthly'>Basic Monthly - $2/month</option>
199 <option value='basic_yearly'>Basic Yearly - $20/year</option>
200 <option value='supporter_monthly'>Supporter Monthly - $5/month</option>
201 <option value='supporter_yearly'>Supporter Yearly - $50/year</option>
202 </select>
203 <ValidationError errors={this.state.errors} field='/plan' outputs={this.planValidationOutputs} />
204 <p>There’s no difference between the Supporter and Basic tiers. The Supporter tier is just for people who love Ducky and want to see it grow and improve.</p>
206 <ValidationError errors={this.state.errors} field='/balance' outputs={this.balanceValidationOutputs} />
207 <ValidationError errors={this.state.errors} field='/user_id' outputs={this.userValidationOutputs} />
208 <ValidationError errors={this.state.errors} notFields={['/name', '/number', '/cvc', '/expiration', '/plan', '/balance', '/user_id']} notParams={[]} notHeaders={[]} outputs={this.catchAllValidationOutputs} />
210 <div className='actionbuttons'>
211 <LaddaButton style='expand-right' active={this.state.active}>
212 <button type='submit' className='primary' disabled={this.state.stripeLoading || this.state.stripeFailedToLoad || this.state.active }>Add Card</button>
213 </LaddaButton>
214 </div>
215 </div>
216 </form>
217 </article>
218 </div>
219 )
220 }
221 })