1 files changed, 27 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
index fcd9a38..9c84614 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -1,11 +1,18 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 
 import { Arrow } from '../nav/viewer.icons'
+import { Loader } from 'app/common/loader.component'
+import { ENV_PRODUCTION } from 'app/constants'
+
+import * as subscriptionActions from './subscription.actions'
 
 const initialState = {
   email: "",
   agreed: false,
   subscribed: false,
+  loading: false,
 }
 
 export default class SubscriptionForm extends Component {
@@ -34,18 +41,32 @@ export default class SubscriptionForm extends Component {
   }
   handleSubmit(e) {
     e.preventDefault()
-    if (!this.state.agreed) {
+    if (!this.state.agreed || this.state.loading) {
       return
     }
-    this.setState({ subscribed: true })
+    if (ENV_PRODUCTION) {
+      this.setState({ loading: true })
+      subscriptionActions.subscribe(this.state.email)
+      .then(() => {
+        this.setState({ loading: false, subscribed: true })
+      })
+    } else {
+      this.setState({ loading: true })
+      setTimeout(() => {
+        this.setState({ loading: false, subscribed: true })
+      }, 1000)
+    }
   }
   handleReset(e) {
     this.setState({ ...initialState })
   }
   render() {
+    let className = "subscription-form"
+    if (this.state.subscribed) className += " subscribed"
+    if (this.state.loading) className += " loading"
     return (
       <form
-        className={this.state.subscribed ? "subscription-form subscribed" : "subscription-form"}
+        className={className}
         onSubmit={this.handleSubmit}
       >
         <div className="subscription-callout">
@@ -82,6 +103,9 @@ export default class SubscriptionForm extends Component {
             <a href="/privacy">privacy policy.</a>
           </span>
         </label>
+        <div className="subscription-loading">
+          <Loader />
+        </div>
         <div className="subscription-thanks">
           Thanks! You will receive an email soon confirming your subscription.
           <br />