feat(newsletter): Manage subscription directly from N1

internal_packages/onboarding/lib/initial-packages-page.cjsx

@@ -35,7 +35,7 @@ class InitialPackagesPage extends React.Component
       <h1 style={paddingTop: 60, marginBottom: 20}>Explore plugins</h1>
       <p style={paddingBottom: 20}>
         Plugins lie at the heart of N1 and give it its powerful features.<br/>
-        Want to enable a few example plugins now? They'll be installed to <code>~/.nylas</code>
+        Want to enable a few example plugins now?
       </p>
 
       <div>
@@ -50,6 +50,7 @@ class InitialPackagesPage extends React.Component
           </div>
         }
       </div>
+
       <button className="btn btn-large btn-get-started btn-emphasis"
               style={marginTop: 15}
               onClick={@_onGetStarted}>

internal_packages/onboarding/lib/initial-preferences-page.cjsx

@@ -2,8 +2,8 @@ React = require 'react'
 path = require 'path'
 fs = require 'fs'
 _ = require 'underscore'
-{RetinaImg, Flexbox, ConfigPropContainer} = require 'nylas-component-kit'
-{EdgehillAPI} = require 'nylas-exports'
+{RetinaImg, Flexbox, ConfigPropContainer, NewsletterSignup} = require 'nylas-component-kit'
+{EdgehillAPI, AccountStore} = require 'nylas-exports'
 OnboardingActions = require './onboarding-actions'
 
 # NOTE: Temporarily copied from preferences module
@@ -99,6 +99,9 @@ class InitialPreferencesOptions extends React.Component
           <option key={template} value={template}>{template}</option>
         }
         </select>
+        <div style={paddingTop: 20}>
+          <NewsletterSignup emailAddress={@props.account.emailAddress} name={@props.account.name} />
+        </div>
       </div>
 
     </div>
@@ -108,11 +111,13 @@ class InitialPreferencesPage extends React.Component
   @displayName: "InitialPreferencesPage"
 
   render: =>
+    account = AccountStore.items()[0]
+
     <div className="page opaque" style={width:900, height:620}>
       <h1 style={paddingTop: 100}>Welcome to N1</h1>
       <h4 style={marginBottom: 70}>Let's set things up to your liking.</h4>
       <ConfigPropContainer>
-        <InitialPreferencesOptions account={@props.pageData.account} />
+        <InitialPreferencesOptions account={account} />
       </ConfigPropContainer>
       <button className="btn btn-large" style={marginBottom:60} onClick={@_onNextPage}>Looks Good!</button>
     </div>

internal_packages/preferences/lib/tabs/preferences-account-details.jsx

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {Component, PropTypes} from 'react';
-import {EditableList} from 'nylas-component-kit';
+import {EditableList, NewsletterSignup} from 'nylas-component-kit';
 import {RegExpUtils} from 'nylas-exports';
 
 class PreferencesAccountDetails extends Component {
@@ -159,6 +159,10 @@ class PreferencesAccountDetails extends Component {
           onDeleteItem={this._onAccountAliasRemoved} />
 
         {this._renderDefaultAliasSelector(account)}
+
+        <div className="newsletter">
+          <NewsletterSignup emailAddress={account.emailAddress} name={account.name} />
+        </div>
       </div>
     );
   }

internal_packages/preferences/stylesheets/preferences-accounts.less

@@ -51,6 +51,11 @@
           height: 140px;
         }
 
+        .newsletter {
+          padding-top: @padding-base-vertical * 2;
+          input[type=checkbox] { margin: 0; position: relative; top: 0; }
+        }
+
         &>h3 {
           font-size: 1.2em;
           &:first-child {

src/components/newsletter-signup.cjsx

@@ -0,0 +1,75 @@
+_ = require 'underscore'
+request = require 'request'
+React = require 'react'
+{Utils, EdgehillAPI} = require "nylas-exports"
+{RetinaImg, Flexbox} = require 'nylas-component-kit'
+
+class NewsletterSignup extends React.Component
+  @displayName: 'NewsletterSignup'
+  @propTypes:
+    name: React.PropTypes.string
+    emailAddress: React.PropTypes.string
+
+  constructor: (@props) ->
+    @state = {status: 'Pending'}
+
+  componentDidMount: =>
+    @_onGetStatus()
+
+  _onGetStatus: =>
+    @setState({status: 'Pending'})
+    EdgehillAPI.request
+      method: 'GET'
+      path: @_path()
+      success: (status) =>
+        if status is 'Never Subscribed'
+          @_onSubscribe()
+        else
+          @setState({status})
+      error: =>
+        @setState({status: "Error"})
+
+  _onSubscribe: =>
+    @setState({status: 'Pending'})
+    EdgehillAPI.request
+      method: 'POST'
+      path: @_path()
+      success: (status) =>
+        @setState({status})
+      error: =>
+        @setState({status: "Error"})
+
+  _onUnsubscribe: =>
+    @setState({status: 'Pending'})
+    EdgehillAPI.request
+      method: 'DELETE'
+      path: @_path()
+      success: (status) =>
+        @setState({status})
+      error: =>
+        @setState({status: "Error"})
+
+  _path: =>
+    "/newsletter-subscription/#{encodeURIComponent(@props.emailAddress)}?name=#{encodeURIComponent(@props.name)}"
+
+  render: =>
+    <Flexbox direction='row' style={textAlign: 'left', height: 'auto'}>
+      <div style={minWidth:15}>
+        {@_renderControl()}
+      </div>
+      <label htmlFor="subscribe-check" style={paddingLeft: 4, flex: 1}>
+        Notify me about new features and plugins via this email address.
+      </label>
+    </Flexbox>
+
+  _renderControl: ->
+    if @state.status is 'Pending'
+      <RetinaImg name='inline-loading-spinner.gif' mode={RetinaImg.Mode.ContentDark} style={width:14, height:14}/>
+    else if @state.status is 'Error'
+      <button onClick={@_onGetStatus} className="btn btn-small">Retry</button>
+    else if @state.status in ['Subscribed', 'Active']
+      <input id="subscribe-check" type="checkbox" checked={true} style={marginTop:3} onChange={@_onUnsubscribe} />
+    else
+      <input id="subscribe-check" type="checkbox" checked={false} style={marginTop:3} onChange={@_onSubscribe} />
+
+module.exports = NewsletterSignup

src/flux/edgehill-api.coffee

@@ -32,14 +32,6 @@ class EdgehillAPI
     options.url ?= "#{@APIRoot}#{options.path}" if options.path
     options.body ?= {} unless options.formData
     options.json = true
-
-    auth = @_getCredentials()
-    if not options.auth and auth
-      options.auth =
-        user: auth.username
-        pass: auth.password
-        sendImmediately: true
-
     options.error ?= @_defaultErrorCallback
 
     # This is to provide functional closure for the variable.
@@ -63,12 +55,6 @@ class EdgehillAPI
           else
             options.success(body) if options.success
 
-  _getCredentials: ->
-    NylasEnv.config.get('edgehill.credentials')
-
-  _setCredentials: (credentials) ->
-    NylasEnv.config.set('edgehill.credentials', credentials)
-
   _defaultErrorCallback: (apiError) ->
     console.error(apiError)
 

src/global/nylas-component-kit.coffee

@@ -45,5 +45,6 @@ class NylasComponentKit
   @loadFrom "GeneratedFieldset", "generated-form"
 
   @load "ScenarioEditor", 'scenario-editor'
+  @load "NewsletterSignup", 'newsletter-signup'
 
 module.exports = new NylasComponentKit()