ducky/web
2015-06-30
Parent:a641906b8267
ducky/web/src/components/validation-error.jsx
Update to use plans instead of PWYW. If we're going to lean on Stripe for most of our subscription processing, we need to use plans, instead of pay what you want. This updates the page to replace our amount input with a plan select box. It also removes the nonsense about finding your first charge date, because Stripe forced us into a simpler, but harder to predict, billing model. We also updated our CSS to work with select boxes, as well as text inputs.
| paddy@2 | 1 import React from 'react' |
| paddy@2 | 2 |
| paddy@2 | 3 export default React.createClass({ |
| paddy@2 | 4 displayName: 'ValidationError', |
| paddy@2 | 5 |
| paddy@2 | 6 render () { |
| paddy@5 | 7 let fields = this.props.fields |
| paddy@5 | 8 if (this.props.field && !this.props.fields) { |
| paddy@5 | 9 fields = [this.props.field] |
| paddy@5 | 10 } |
| paddy@6 | 11 let notFields = this.props.notFields |
| paddy@6 | 12 if (this.props.notField && !this.props.notFields) { |
| paddy@6 | 13 notFields = [this.props.notField] |
| paddy@6 | 14 } |
| paddy@5 | 15 let params = this.props.params |
| paddy@5 | 16 if (this.props.param && !this.props.params) { |
| paddy@5 | 17 params = [this.props.param] |
| paddy@5 | 18 } |
| paddy@6 | 19 let notParams = this.props.notParams |
| paddy@6 | 20 if (this.props.notParam && !this.props.notParams) { |
| paddy@6 | 21 notParams = [this.props.notParam] |
| paddy@6 | 22 } |
| paddy@5 | 23 let headers = this.props.headers |
| paddy@5 | 24 if (this.props.header && !this.props.headers) { |
| paddy@5 | 25 headers = [this.props.header] |
| paddy@5 | 26 } |
| paddy@6 | 27 let notHeaders = this.props.notHeaders |
| paddy@6 | 28 if (this.props.notHeader && !this.props.notHeaders) { |
| paddy@6 | 29 notHeaders = [this.props.notHeader] |
| paddy@6 | 30 } |
| paddy@2 | 31 const outputs = this.props.outputs |
| paddy@2 | 32 const errors = this.props.errors |
| paddy@6 | 33 |
| paddy@2 | 34 return ( |
| paddy@2 | 35 <div className={errors.length ? '' : 'hidden' }> |
| paddy@2 | 36 {errors.map(error => { |
| paddy@2 | 37 let errorString = '' |
| paddy@6 | 38 if (!error.field && !notFields && !error.param && !notParams && !error.header && !notHeaders) { |
| paddy@4 | 39 return '' |
| paddy@4 | 40 } |
| paddy@5 | 41 if (fields && error.field && fields.indexOf(error.field) < 0) { |
| paddy@2 | 42 return '' |
| paddy@2 | 43 } |
| paddy@6 | 44 if (notFields && error.field && notFields.indexOf(error.field) >= 0) { |
| paddy@6 | 45 return '' |
| paddy@6 | 46 } |
| paddy@5 | 47 if (params && error.param && params.indexOf(error.param) < 0) { |
| paddy@2 | 48 return '' |
| paddy@2 | 49 } |
| paddy@6 | 50 if (notParams && error.param && notParams.indexOf(error.param) >= 0) { |
| paddy@6 | 51 return '' |
| paddy@6 | 52 } |
| paddy@5 | 53 if (headers && error.header && headers.indexOf(error.header) < 0) { |
| paddy@2 | 54 return '' |
| paddy@2 | 55 } |
| paddy@6 | 56 if (notHeaders && error.header && notHeaders.indexOf(error.header) >= 0) { |
| paddy@6 | 57 return '' |
| paddy@6 | 58 } |
| paddy@2 | 59 if (outputs[error.error] == undefined) { |
| paddy@2 | 60 errorString = 'An unknown error occurred. Please contact support. Sorry.' |
| paddy@2 | 61 } else { |
| paddy@2 | 62 errorString = outputs[error.error] |
| paddy@2 | 63 } |
| paddy@2 | 64 const id = [error.field, error.param, error.header, error.error].join("|") |
| paddy@2 | 65 return <div key={id} className="flash-error validation"><span>{errorString}</span></div> |
| paddy@2 | 66 })} |
| paddy@2 | 67 </div> |
| paddy@2 | 68 ) |
| paddy@2 | 69 } |
| paddy@2 | 70 }) |