patched onboarding for tara

components/core/Application.js

@@ -59,6 +59,7 @@ import ApplicationLayout from "~/components/core/ApplicationLayout";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import Cookies from "universal-cookie";
 
+import { OnboardingModal } from "~/components/core/OnboardingModal";
 import { dispatchCustomEvent } from "~/common/custom-events";
 import { Alert } from "~/components/core/Alert";
 
@@ -622,10 +623,10 @@ export default class ApplicationPage extends React.Component {
       return response;
     }
 
-    return this._handleAuthenticate(state);
+    return this._handleAuthenticate(state, true);
   };
 
-  _handleAuthenticate = async (state) => {
+  _handleAuthenticate = async (state, newAccount) => {
     // NOTE(jim): Kills existing session cookie if there is one.
     const jwt = cookies.get(Credentials.session.key);
 
@@ -663,6 +664,18 @@ export default class ApplicationPage extends React.Component {
       console.log("WEBSOCKET: INIT FAILED.");
     }
 
+    this._handleAction({ type: "NAVIGATE", value: "V1_NAVIGATION_HOME" });
+
+    let unseenAnnouncements = false; //TODO(tara): change this to something that checks this.state.viewer for whether they have seen all the current annoucements
+    if (newAccount || unseenAnnouncements) {
+      dispatchCustomEvent({
+        name: "create-modal",
+        detail: {
+          modal: <OnboardingModal viewer={this.state.viewer} newAccount={newAccount} />,
+          noBoundary: true,
+        },
+      });
+    }
     return response;
   };
 

components/core/OnboardingModal.js

@@ -63,10 +63,7 @@ export class OnboardingModal extends React.Component {
         />
       ),
       button: (
-        <ButtonPrimary
+        <ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
-          style={{ width: 160 }}
-          onClick={() => this._handleClick(1)}
-        >
           Got it
         </ButtonPrimary>
       ),
@@ -89,10 +86,7 @@ export class OnboardingModal extends React.Component {
               Get extension
             </ButtonPrimary>
           </a> */}
-          <ButtonPrimary
+          <ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
-            style={{ width: 160 }}
-            onClick={() => this._handleClick(1)}
-          >
             Next
           </ButtonPrimary>
         </React.Fragment>
@@ -133,9 +127,7 @@ export class OnboardingModal extends React.Component {
     return (
       <div css={STYLES_MODAL}>
         {this.onboardingCopy[this.state.step].image}
-        <div css={STYLES_TITLE}>
+        <div css={STYLES_TITLE}>{this.onboardingCopy[this.state.step].title}</div>
-          {this.onboardingCopy[this.state.step].title}
-        </div>
         <div css={STYLES_TEXT}>{this.onboardingCopy[this.state.step].text}</div>
         {this.onboardingCopy[this.state.step].button}
       </div>

components/system/components/GlobalModal.js

@@ -36,6 +36,7 @@ const STYLES_MODAL = css`
 export class GlobalModal extends React.Component {
   state = {
     modal: null,
+    noBoundary: false,
   };
 
   componentDidMount = () => {
@@ -59,7 +60,10 @@ export class GlobalModal extends React.Component {
   };
 
   _handleCreate = (e) => {
-    this.setState({ modal: e.detail.modal });
+    this.setState({
+      modal: e.detail.modal,
+      noBoundary: e.detail.noBoundary,
+    });
   };
 
   _handleDelete = (e) => {
@@ -90,7 +94,7 @@ export class GlobalModal extends React.Component {
         aria-label={this.props.label ? this.props.label : "modal"}
       >
         <Boundary
-          enabled
+          enabled={!this.state.noBoundary}
           onOutsideRectEvent={this._handleDelete}
           isDataMenuCaptured={true}
         >

pages/api/users/onboarding-update.js

@@ -38,6 +38,7 @@ export default async (req, res) => {
   let onboarding = user.data.onboarding;
   if (!onboarding) {
     onboarding = {};
+    onboarding[item] = true;
   }
   for (let item of req.body.data.onboarding) {
     onboarding[item] = true;

scenes/SceneSignIn.js

@@ -8,7 +8,6 @@ import * as Strings from "~/common/strings";
 import { css } from "@emotion/react";
 import { Logo, Symbol } from "~/common/logo";
 import { dispatchCustomEvent } from "~/common/custom-events";
-import { OnboardingModal } from "~/components/core/OnboardingModal";
 
 import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
 import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
@@ -192,8 +191,7 @@ export default class SceneSignIn extends React.Component {
         name: "create-alert",
         detail: {
           alert: {
-            message:
+            message: "We're having trouble connecting right now. Please try again later.",
-              "We're having trouble connecting right now. Please try again later.",
           },
         },
       });
@@ -209,16 +207,6 @@ export default class SceneSignIn extends React.Component {
       this.setState({ loading: false });
       return;
     }
-
-    this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_HOME" });
-    if (this.state.scene === "CREATE_ACCOUNT") {
-      dispatchCustomEvent({
-        name: "create-modal",
-        detail: {
-          modal: <OnboardingModal />,
-        },
-      });
-    }
   };
 
   _handleCheckUsername = async () => {
@@ -247,8 +235,7 @@ export default class SceneSignIn extends React.Component {
         name: "create-alert",
         detail: {
           alert: {
-            message:
+            message: "We're having trouble connecting right now. Please try again later.",
-              "We're having trouble connecting right now. Please try again later.",
           },
         },
       });
@@ -292,10 +279,7 @@ export default class SceneSignIn extends React.Component {
       return (
         <React.Fragment>
           <div css={STYLES_POPOVER} key={this.state.scene}>
-            <Logo
+            <Logo height="36px" style={{ display: "block", margin: "56px auto 0px auto" }} />
-              height="36px"
-              style={{ display: "block", margin: "56px auto 0px auto" }}
-            />
 
             <System.P style={{ margin: "56px 0", textAlign: "center" }}>
               An open-source file sharing network for research and collaboration