Add custom welcome page for upgrading users

internal_packages/onboarding/lib/page-welcome.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Actions} from 'nylas-exports';
+import {Actions, AccountStore} from 'nylas-exports';
 import {RetinaImg} from 'nylas-component-kit';
 import OnboardingActions from './onboarding-actions';
 
@@ -11,15 +11,32 @@ export default class WelcomePage extends React.Component {
     OnboardingActions.moveToPage("tutorial");
   }
 
-  render() {
+  _renderContent(isFirstAccount) {
+    if (isFirstAccount) {
       return (
-      <div className="page welcome">
+        <div>
-        <div className="steps-container">
-          <div key="step-0">
           <RetinaImg className="logo" style={{marginTop: 166}} url="nylas://onboarding/assets/nylas-logo@2x.png" mode={RetinaImg.Mode.ContentPreserve} />
           <p className="hero-text" style={{fontSize: 46, marginTop: 57}}>Welcome to Nylas N1</p>
-            <RetinaImg className="icons" style={{position: "absolute", top: 0, left: 0}} url="nylas://onboarding/assets/icons-bg@2x.png" mode={RetinaImg.Mode.ContentPreserve} />
+          <RetinaImg className="icons" url="nylas://onboarding/assets/icons-bg@2x.png" mode={RetinaImg.Mode.ContentPreserve} />
         </div>
+      )
+    }
+    return (
+      <div>
+        <p className="hero-text" style={{fontSize: 46, marginTop: 187}}>Welcome back!</p>
+        <p className="hero-text" style={{fontSize: 20, maxWidth: 550, margin: 'auto', lineHeight: 1.7, marginTop: 30}}>This month we're <a href="https://nylas.com/blog/nylas-pro/">launching Nylas Pro</a>. As an existing user, you'll receive a coupon for your first year free. Create a Nylas ID to continue using N1, and look out for a coupon email!</p>
+        <RetinaImg className="icons" url="nylas://onboarding/assets/icons-bg@2x.png" mode={RetinaImg.Mode.ContentPreserve} />
+      </div>
+    )
+  }
+
+  render() {
+    const isFirstAccount = (AccountStore.accounts().length === 0);
+
+    return (
+      <div className={`page welcome is-first-account-${isFirstAccount}`}>
+        <div className="steps-container">
+          {this._renderContent(isFirstAccount)}
         </div>
         <div className="footer">
           <button key="next" className="btn btn-large btn-continue" onClick={this._onContinue}>Get Started</button>

internal_packages/onboarding/stylesheets/onboarding.less

@@ -473,12 +473,12 @@
   }
 
   a {
-    color: rgba(255,255,255,0.7);
-    border-bottom: 1px solid rgba(255,255,255,0.7);
-    &:hover {
-      cursor: default;
     color: white;
     border-bottom: 1px solid white;
+    text-decoration: none;
+    font-weight: 300;
+    &:hover {
+      background-color: rgba(255,255,255,0.1);
     }
   }
 
@@ -493,6 +493,7 @@
     font-size: 34px;
     line-height: 41px;
     font-weight: 200;
+    cursor: default;
     -webkit-font-smoothing: subpixel-antialiased;
   }
 
@@ -501,11 +502,22 @@
     font-weight: 300;
   }
 
-  img.icons.content-mask {
+  img.icons {
-    background-color: rgba(255,255,255,0.7);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    pointer-events: none;
   }
 }
 
+.page.welcome.is-first-account-false {
+  .footer {
+    background-image: linear-gradient(to left, rgba(167,214,134,1) 0%,rgba(122,201,201,1) 100%);
+  }
+  .steps-container {
+    background-image: linear-gradient(to left, rgba(149,205,107,1) 0%,rgba(60,176,176,1) 100%);
+  }
+}
 .page.welcome,
 .page.tutorial {
   .footer {

src/flux/nylas-api-request.es6

@@ -31,8 +31,8 @@ export default class NylasAPIRequest {
     }
 
     const identity = IdentityStore.identity();
-    if (!identity || !identity.token) {
+    if (identity && !identity.token) {
-      throw new Error("Identity is missing or identity token is not present.");
+      throw new Error("Identity is present but identity token is missing.");
     }
 
     const accountToken = this.api.accessTokenForAccountId(this.options.accountId);
@@ -42,7 +42,7 @@ export default class NylasAPIRequest {
 
     return {
       user: accountToken,
-      pass: identity.token,
+      pass: identity ? identity.token : '',
       sendImmediately: true,
     };
   }