mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
feat(newsletter): Manage subscription directly from N1
This commit is contained in:
parent
53d23d330b
commit
f0336b9822
|
@ -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}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
75
src/components/newsletter-signup.cjsx
Normal file
75
src/components/newsletter-signup.cjsx
Normal file
|
@ -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
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -45,5 +45,6 @@ class NylasComponentKit
|
|||
@loadFrom "GeneratedFieldset", "generated-form"
|
||||
|
||||
@load "ScenarioEditor", 'scenario-editor'
|
||||
@load "NewsletterSignup", 'newsletter-signup'
|
||||
|
||||
module.exports = new NylasComponentKit()
|
||||
|
|
Loading…
Reference in a new issue