subscription actions

4 files changed, 53 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
index 30b5fcb..90c59d9 100644
--- a/animism-align/frontend/app/views/viewer/forms/forms.css
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -126,6 +126,7 @@
 
 /* thanks */
 
+.credits-content .subscription-loading,
 .credits-content .subscription-thanks {
   position: absolute;
   top: 0; left: 0;
@@ -140,6 +141,7 @@
   opacity: 0.0;
   transition: opacity 0.4s;
 }
+.credits-content .loading .subscription-loading,
 .credits-content .subscribed .subscription-thanks {
   opacity: 1.0;
   pointer-events: auto;
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.actions.js b/animism-align/frontend/app/views/viewer/forms/subscription.actions.js
new file mode 100644
index 0000000..bf7a30e
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.actions.js
@@ -0,0 +1,19 @@
+
+const SUBSCRIBE_URL = "https://editor.e-flux-systems.com/subscribe"
+
+export const subscribe = email => {
+  const data = new FormData()
+  data.add('email', email)
+  data.add('lists[]', 'eflux')
+  return fetch(SUBSCRIBE_URL, {
+    method: 'POST',
+    body: data,
+  })
+  .then(res => res.json())
+  .then(res => {
+    return res
+  })
+  .catch(err => {
+    return err
+  })
+}
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 />
diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css
index fed7c8b..f562c4a 100644
--- a/animism-align/frontend/app/views/viewer/sections/subscribe.css
+++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css
@@ -127,6 +127,9 @@
   background-color: #333;
 }
 
+/* thanks */
+
+.nav-subscribe .subscription-loading,
 .nav-subscribe .subscription-thanks {
   position: absolute;
   top: 0; left: 0;
@@ -139,8 +142,9 @@
   align-items: center;
   pointer-events: none;
   opacity: 0.0;
-  transition: opacity 0.4s;
+  transition: opacity 0.2s;
 }
+.nav-subscribe .loading .subscription-loading,
 .nav-subscribe .subscribed .subscription-thanks {
   opacity: 1.0;
   pointer-events: auto;