major reform on membership registration form, also more error-handling for membership info form

src/js/components/membershipForm.js

@@ -4,149 +4,46 @@ var request = require('axios');
 var React = require('react');
 var classSet = require('classnames');
 
-var api = require('../api');
-
 var StripeCheckout = require('./stripeCheckout.js');
+var MembershipInfoForm = require('./membershipInfoForm.js');
 
 module.exports = React.createClass({
   getInitialState() {
     return {
-      email: '',
-      name: '',
-      handle: '',
-      residence: '',
-      submitted: false,
-      sending: false,
-      error: null,
+      userInfo: null,
       infoFormSuccess: false,
       paymentSuccess: false
     };
   },
-  onSubmit(e) {
-    e.preventDefault();
 
-    this.setState({
-      submitted: false,
-      sending: true,
-      error: null
-    });
-
-    this.handleInfoFormSuccess();
-    //TODO handleError
-  },
-  handleInfoFormSuccess() {
-    this.setState({submitted: true, sending: false, infoFormSuccess: true});
-  },
-  handleError(err) {
-    this.setState({error: err, sending: false});
-  },
-  onChange(e) {
-    if(e.target.value === this.state[e.target.name]) {
-      return;
-    }
-
-    this.setState({
-      [e.target.name]: e.target.value,
-      error: null,
-      submitted: false
-    });
-  },
   handlePaymentSuccess() {
     this.setState({paymentSuccess: true});
   },
+
+  handleInfoFormSuccess(userInfo) {
+    this.setState({
+      userInfo: userInfo,
+      infoFormSuccess: true,
+    });
+  },
+
   render() {
-    var formClasses = classSet({
-      'form': true,
-      'membership-form': true,
-      'has-success': this.state.submitted,
-      'has-error': this.state.error,
-      'sending': this.state.sending
-    });
-
-    var inputClasses = classSet({
-      'input': true,
-      'has-success': this.state.submitted,
-      'has-error': this.state.error
-    });
-
-    var feedbackMessage;
-
-    if(this.state.error || this.state.submitted) {
-      let messageText;
-
-      if(this.state.submitted) {
-        messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
-      } else if(this.state.error.status === 400 && this.state.error.data === 'invalid_email') {
-        messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
-      } else if(this.state.error.status === 400 && this.state.error.data === 'already_invited') {
-        messageText = 'Sähköpostiosoitteeseen on jo lähetetty kutsu';
-      } else {
-        messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
-      }
-
-      feedbackMessage = (
-        <div className='form--message'>
-          {messageText}
-        </div>
-      );
-    }
-
     if(!this.state.infoFormSuccess) {
+      return <MembershipInfoForm onSuccess={this.handleInfoFormSuccess}></MembershipInfoForm>
+
+    } else if (!this.state.paymentSuccess) {
       return (
-        <div>
-          <form className={formClasses} onSubmit={this.onSubmit}>
-            {feedbackMessage}
-            <input
-              className={inputClasses}
-              type='text'
-              name='email'
-              placeholder='Sähköposti'
-              value={this.state.email}
-              onChange={this.onChange} />
-            <input
-              className={inputClasses}
-              type='text'
-              name='name'
-              placeholder='Koko nimi'
-              value={this.state.name}
-              onChange={this.onChange} />
-            <input
-              className={inputClasses}
-              type='text'
-              name='handle'
-              placeholder='Slack-käyttäjätunnus'
-              value={this.state.handle}
-              onChange={this.onChange} />
-            <input
-              className={inputClasses}
-              type='text'
-              name='residence'
-              placeholder='Paikkakunta'
-              value={this.state.residence}
-              onChange={this.onChange} />
-            <button
-              className='btn btn__submit'
-              type='submit'
-              title='Lähetä'
-              disabled={this.state.error || this.state.submitted}>
-              Siirry maksamaan
-            </button>
-            <span
-              className='loader'>
-            </span>
-          </form>
-        </div>
-      )
-    } else if (this.state.infoFormSuccess && !this.state.paymentSuccess) {
-      return (
-        <div>
-          <StripeCheckout payerName={this.state.name} payerEmail={this.state.email} onPaymentSuccess={this.handlePaymentSuccess}></StripeCheckout>
-        </div>
-      )
+        <StripeCheckout
+          payerName={this.state.userInfo.name}
+          onPaymentSuccess={this.handlePaymentSuccess}>
+        </StripeCheckout>)
+
     } else {
       return (
-        <p> Tervetuloa jäseneksi!
-        </p>
+        <div>
+          <p> Maksu ja rekisteröityminen onnistui.</p>
+          <p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
+        </div>
       )
     }
   }

src/js/components/membershipInfoForm.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var request = require('axios');
+var React = require('react');
+var classSet = require('classnames');
+
+var api = require('../api');
+
+var StripeCheckout = require('./stripeCheckout.js');
+
+var fieldNameTranslations = {
+  email: {fi: "Sähköpostiosoite"},
+  name: {fi: "Koko nimi"},
+  handle: {fi: "Slack-käyttäjätunnus"},
+  residence: {fi: "Paikkakunta"}
+}
+
+function validateEmail(email) {
+  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(email);
+}
+
+module.exports = React.createClass({
+
+  getInitialState() {
+    return {
+      email: '',
+      name: '',
+      handle: '',
+      residence: '',
+      sending: false,
+      errors: []
+    };
+  },
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.setState({
+      sending: true,
+      errors: []
+    });
+
+
+    var userInfo = {
+      email: this.state.email,
+      name: this.state.name,
+      handle: this.state.handle,
+      residence: this.state.residence,
+    }
+
+    var userInfoErrors = this.getDataErrors();
+
+    console.log(userInfoErrors);
+
+    if(userInfoErrors.length){
+      this.setState({
+        sending: false,
+        errors: userInfoErrors
+      });
+      console.log("errorei");
+    } else {
+      this.props.onSuccess(userInfo);
+    }
+  },
+  handleError(err) {
+    this.setState({error: err, sending: false});
+  },
+  onChange(e) {
+    if(e.target.value === this.state[e.target.name]) {
+      return;
+    }
+
+    this.setState({
+      [e.target.name]: e.target.value,
+      errors: []
+    });
+  },
+
+  getDataErrors() {
+    var foundErrors = [];
+
+    if (!this.state.name)
+      foundErrors.push({field: 'name', type: 'missing'});
+
+    if (!this.state.email)
+      foundErrors.push({field: 'email', type: 'missing'});
+    else if(!validateEmail(this.state.email))
+      foundErrors.push({field: 'email', type: 'invalid'});
+
+    if (!this.state.handle)
+      foundErrors.push({field: 'handle', type: 'missing'});
+
+    if (!this.state.residence)
+      foundErrors.push({field: 'residence', type: 'missing'});
+
+
+    return foundErrors;
+  },
+
+  render() {
+    var formClasses = classSet({
+      'form': true,
+      'membership-form': true,
+      'has-error': this.state.errors.length,
+      'sending': this.state.sending
+    });
+
+    var inputClasses = classSet({
+      'input': true,
+      'has-error': this.state.errors.length
+    });
+
+    var feedbackMessages = [];
+
+    this.state.errors.forEach((err, i) => {
+      var feedbackText;
+
+      if(err.type == 'missing') {
+        feedbackText = `${fieldNameTranslations[err.field].fi} on pakollinen.`
+      } else if (err.type == 'invalid') {
+        feedbackText = `${fieldNameTranslations[err.field].fi} on virheellinen.`
+      }
+
+      feedbackMessages.push((<div key={i} className='form--message'>{feedbackText}</div>))
+    });
+
+    return (
+      <div>
+        <form className={formClasses} onSubmit={this.onSubmit}>
+          {feedbackMessages}
+          <input
+            className={inputClasses}
+            type='text'
+            name='name'
+            placeholder='Koko nimi'
+            value={this.state.name}
+            onChange={this.onChange} />
+          <input
+            className={inputClasses}
+            type='text'
+            name='email'
+            placeholder='Sähköposti'
+            value={this.state.email}
+            onChange={this.onChange} />
+          <input
+            className={inputClasses}
+            type='text'
+            name='handle'
+            placeholder='Slack-käyttäjätunnus'
+            value={this.state.handle}
+            onChange={this.onChange} />
+          <input
+            className={inputClasses}
+            type='text'
+            name='residence'
+            placeholder='Paikkakunta'
+            value={this.state.residence}
+            onChange={this.onChange} />
+          <button
+            className='btn btn__submit'
+            type='submit'
+            title='Lähetä'
+            disabled={this.state.errors.length || this.state.submitted}>
+            Siirry maksamaan
+          </button>
+          <span
+            className='loader'>
+          </span>
+        </form>
+      </div>
+    )
+  }
+});

src/js/components/stripeCheckout.js

@@ -25,22 +25,24 @@ var card = elements.create('card', {
 });
 
 var stripeErrMessages = {
-  incomplete_number: "incomplete number",
+  incomplete_number: "Kortin numero on virheellinen.",
   incorrect_number: "Kortin numero on virheellinen.",
   invalid_number: "Kortin numero on virheellinen.",
+  incomplete_expiry: "Kortin vanhenemisaika on virheellinen.",
   invalid_expiry_month: "Kortin vanhenemiskuu on virheellinen.",
   invalid_expiry_year: "Kortin vanhenemisvuosi on virheellinen.",
   invalid_cvc: "Kortin CVC koodi on virheellinen.",
+  incomplete_cvc: "Kortin CVC koodi on virheellinen.",
   expired_card: "Kortti on vanhentunut.",
   incorrect_cvc: "Kortin CVC koodi on virheellinen..",
-  incorrect_zip: "The card's zip code failed validation.",
+  incomplete_zip: "Virheellinen postinumero.",
+  incorrect_zip: "Virheellinen postinumero.",
   card_declined: "Kortti hylättiin.",
   missing: "There is no card on a customer that is being charged.",
   processing_error: "Virhe kortin prosessoinnissa.",
-  rate_limit:  "An error occurred due to requests hitting the API too quickly. Please let us know if you're consistently running into this error."
+  rate_limit:  "Rajapintaan tehty liian monta kutsua. Odota hetki."
 };
 
-
 module.exports = React.createClass({
   getInitialState() {
     return {
@@ -55,8 +57,6 @@ module.exports = React.createClass({
         error: null
       })
 
-      console.log(result.token);
-
       request.post(api('membership'), {
         stripeToken: result.token.id,
         email: this.props.payerEmail
@@ -72,6 +72,7 @@ module.exports = React.createClass({
       });
 
     } else if (result.error) {
+      console.log(result.error);
       this.setState({
         error: stripeErrMessages[result.error.code] || result.error.message,
         sending: false
@@ -109,7 +110,6 @@ module.exports = React.createClass({
     var feedbackMessage;
 
     if(this.state.error) {
-      console.log(this.state.error);
       feedbackMessage = (
         <div className='form--message'>
           {this.state.error}