implement requesting of /membership (payment) api

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "start": "rm -rf public && gulp",
     "build": "rm -rf public && gulp build",
+    "dev": "SERVER=http://localhost:9000/ npm start",
     "lint": "eslint src",
     "test": "mocha src/**/__tests__/*.js --compilers js:babel-core/register --require test/test-helper"
   },

src/js/components/membershipForm.js

@@ -32,6 +32,7 @@ module.exports = React.createClass({
     });
 
     this.handleInfoFormSuccess();
+    //TODO handleError
   },
   handleInfoFormSuccess() {
     this.setState({submitted: true, sending: false, infoFormSuccess: true});
@@ -51,7 +52,7 @@ module.exports = React.createClass({
     });
   },
   handlePaymentSuccess() {
-    this.setState({paymentSuccess: true})
+    this.setState({paymentSuccess: true});
   },
   render() {
     var formClasses = classSet({
@@ -139,12 +140,12 @@ module.exports = React.createClass({
     } else if (this.state.infoFormSuccess && !this.state.paymentSuccess) {
       return (
         <div>
-          <StripeCheckout payerName={this.state.name} onPaymentSuccess={this.handlePaymentSuccess}></StripeCheckout>
+          <StripeCheckout payerName={this.state.name} payerEmail={this.state.email} onPaymentSuccess={this.handlePaymentSuccess}></StripeCheckout>
         </div>
       )
     } else {
       return (
-        <p> Onnee!
+        <p> Tervetuloa jäseneksi!
         </p>
       )
     }

src/js/components/stripeCheckout.js

@@ -5,7 +5,7 @@ var React = require('react');
 var classSet = require('classnames');
 var api = require('../api');
 
-var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+var stripe = Stripe('pk_test_OmNve9H1OuORlmD4rblpjgzh');
 var elements = stripe.elements();
 var card = elements.create('card', {
   style: {
@@ -55,15 +55,26 @@ module.exports = React.createClass({
         error: null
       })
 
-      // tää siirretään .theniin
-      this.setState({
-        sending: false,
-      })
+      console.log(result.token);
+
+      request.post(api('membership'), {
+        stripeToken: result.token.id,
+        email: this.props.payerEmail
+      })
+      .then(() => {
+        this.setState({
+          sending: false
+        });
+        this.props.onPaymentSuccess();
+      })
+      .catch((e) => {
+        //TODO :errorhandling
+      });
 
-      this.props.onPaymentSuccess();
     } else if (result.error) {
       this.setState({
-        error: stripeErrMessages[result.error.code] || result.error.message
+        error: stripeErrMessages[result.error.code] || result.error.message,
+        sending: false
       });
     }
   },
@@ -82,7 +93,7 @@ module.exports = React.createClass({
 
     var form = document.querySelector('form');
     var extraDetails = {
-      name: "My Name",
+      name: this.props.payerName,
     };
     stripe.createToken(card, extraDetails).then(this.setOutcome);
   },
@@ -92,6 +103,7 @@ module.exports = React.createClass({
       'form': true,
       'stripe-form': true,
       'has-error': this.state.error,
+      'sending': this.state.sending
     });
 
     var feedbackMessage;
@@ -111,6 +123,9 @@ module.exports = React.createClass({
         <span className='name'>{this.props.payerName}</span>
         <div id='card-element'></div>
         <button className='btn btn__submit' type='submit'>Maksa 10€</button>
+        <span
+          className='loader'>
+        </span>
       </form>
     )
   }

src/styles/style.styl

@@ -115,9 +115,14 @@ section:first-child
     color rgba(255, 255, 255, 0.9)
   .loader
     background transparent url('../images/ajax-loader.gif') no-repeat center center
-    display block
+    display none
   &.sending
+    .btn
+      display none
     .loader
+      display block
+      margin-left auto
+      margin-right auto
       width 28px
       height 28px
 
@@ -137,14 +142,10 @@ section:first-child
     position absolute
     right 9px
     top 9px
-    width 0px
-    height 0px
     background transparent url('../images/ajax-loader.gif') no-repeat center center
-    display block
   &.sending
-    .btn
-      display none
     .loader
+      display block
       width 28px
       height 28px
 

src/yhdistys.jade

@@ -56,7 +56,9 @@ html
                 .column.column1-2
                   h3 Rekisteröity yhdistys
                   p.
-                    Koodiklinikka on nyt myös ry!
+                    Koodiklinikka on nyt rekisteröity yhdistys!
+                  p.
+                    Slackin käyttöön tai tapahtumiin osallistumiseen ei vaadita jäsenyyttä ja semmosta.
                   p.
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper euismod ex. Morbi vel feugiat turpis. Nunc feugiat enim id elementum dapibus. Nullam rhoncus sem ut sem mattis vulputate id at leo. Phasellus vitae semper libero, ut interdum libero.
                 .column.column1-2
@@ -71,6 +73,10 @@ html
                 .column.column1-2
                   p.
                     Tähän vois kirjottaa juttuja siitä miks kandee liittyy jäseneks yms.
+                  p.
+                    Jäsenmaksu on 10000€
+                  p.
+                    Slack-kutsuja varten siirry <a target="_blank" href="/">etusivulle</a>.
                   p.
                     Mauris imperdiet rutrum turpis ac scelerisque. Nulla ullamcorper mi eget maximus rutrum. Ut malesuada lectus quis dolor vehicula, sed finibus ante ullamcorper. Nullam vitae suscipit arcu. Vestibulum semper tortor in commodo molestie. Ut id enim faucibus, pharetra lectus vel, euismod neque. Cras massa erat, eleifend sit amet ligula et, volutpat blandit erat. Mauris eget lacinia dui. Nullam laoreet fringilla lorem, non tristique arcu aliquam at.