Merge branch 'develop' of https://github.com/meetfranz/franz into develop

7 files changed, 92 insertions, 67 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 941e60bfd..200777ae6 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -125,7 +125,15 @@ class AppLayout extends Component {
                   sticky={item.sticky}
                   onHide={() => removeNewsItem({ newsId: item.id })}
                 >
-                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  <span
+                    dangerouslySetInnerHTML={createMarkup(item.message)}
+                    onClick={(event) => {
+                      const { target } = event;
+                      if (target && target.hasAttribute('data-is-news-cta')) {
+                        removeNewsItem({ newsId: item.id });
+                      }
+                    }}
+                  />
                 </InfoBar>
               ))}
               {hasActivatedTrial && (
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index de7ed2596..d58afbc8e 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -63,6 +63,11 @@ export class AnnouncementsStore extends FeatureStore {
     return this.stores.settings.stats.appStarts <= 1;
   }
 
+  @computed get isAnnouncementShown() {
+    const { router } = this.stores;
+    return router.location.pathname.includes('/announcements');
+  }
+
   async start(stores, actions) {
     debug('AnnouncementsStore::start');
     this.stores = stores;
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 627537de7..c0029873a 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -44,14 +44,16 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.allDisplayed.length === 0) {
-            debug('seas', stores.services.all.length);
+          const { isAnnouncementShown } = stores.announcements;
+          if (stores.services.allDisplayed.length === 0 || isAnnouncementShown) {
             shownAfterLaunch = true;
+            setVisibility(false);
             return;
           }
 
           const diff = moment().diff(timeLastDelay);
-          if ((stores.app.isFocused && diff >= config.delayOffset) || !shownAfterLaunch) {
+          const itsTimeToWait = diff >= config.delayOffset;
+          if (!isAnnouncementShown && ((stores.app.isFocused && itsTimeToWait) || !shownAfterLaunch)) {
             debug(`App will be delayed for ${config.delayDuration / 1000}s`);
 
             setVisibility(true);
@@ -66,6 +68,8 @@ export default function init(stores) {
 
               setVisibility(false);
             }, config.delayDuration + 1000); // timer needs to be able to hit 0
+          } else {
+            setVisibility(false);
           }
         });
       } else {
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 44c94a3ff..c06183e37 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -41,10 +41,6 @@ const styles = theme => ({
     '&:hover $closeTodosButton': {
       opacity: 1,
     },
-  },
-  webview: {
-    height: '100%',
-
     '& webview': {
       height: '100%',
     },
@@ -245,60 +241,58 @@ class TodosWebview extends Component {
     const { intl } = this.context;
 
     return (
-      <>
-        <div
-          className={classes.root}
-          style={{ width: isVisible ? width : 0 }}
-          onMouseUp={() => this.stopResize()}
-          ref={(node) => { this.node = node; }}
+      <div
+        className={classes.root}
+        style={{ width: isVisible ? width : 0 }}
+        onMouseUp={() => this.stopResize()}
+        ref={(node) => { this.node = node; }}
+      >
+        <button
+          onClick={() => togglePanel()}
+          className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
+          type="button"
         >
-          <button
-            onClick={() => togglePanel()}
-            className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
-            type="button"
-          >
-            <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
-          </button>
+          <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
+        </button>
+        <div
+          className={classes.resizeHandler}
+          style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+          onMouseDown={e => this.startResize(e)}
+        />
+        {isDragging && (
           <div
-            className={classes.resizeHandler}
-            style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
-            onMouseDown={e => this.startResize(e)}
+            className={classes.dragIndicator}
+            style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
+          />
+        )}
+        {isTodosIncludedInCurrentPlan ? (
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
           />
-          {isDragging && (
-            <div
-              className={classes.dragIndicator}
-              style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
-            />
-          )}
-          {isTodosIncludedInCurrentPlan ? (
-            <Webview
-              className={classes.webview}
-              onDidAttach={() => {
-                const { setTodosWebview } = this.props;
-                setTodosWebview(this.webview);
-                this.startListeningToIpcMessages();
-              }}
-              partition="persist:todos"
-              preload="./features/todos/preload.js"
-              ref={(webview) => { this.webview = webview ? webview.view : null; }}
-              src={environment.TODOS_FRONTEND}
-            />
-          ) : (
-            <Appear>
-              <div className={classes.premiumContainer}>
-                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
-                <p>{intl.formatMessage(messages.premiumInfo)}</p>
-                <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <UpgradeButton
-                  className={classes.premiumCTA}
-                  gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
-                  short
-                />
-              </div>
-            </Appear>
-          )}
-        </div>
-      </>
+        ) : (
+          <Appear>
+            <div className={classes.premiumContainer}>
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
+              <p>{intl.formatMessage(messages.premiumInfo)}</p>
+              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
+              <UpgradeButton
+                className={classes.premiumCTA}
+                gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                short
+              />
+            </div>
+          </Appear>
+        )}
+      </div>
     );
   }
 }
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 65afc985b..a5da0b014 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -11,7 +11,7 @@ import { todoActions } from '../actions';
 @inject('stores', 'actions') @observer
 class TodosScreen extends Component {
   render() {
-    if (!todosStore || !todosStore.isFeatureActive) {
+    if (!todosStore || !todosStore.isFeatureActive || todosStore.isTodosPanelForceHidden) {
       return null;
     }
 
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 5c6abff4c..ea05077ab 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -29,10 +29,13 @@ export default class TodoStore extends FeatureStore {
     return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
   }
 
+  @computed get isTodosPanelForceHidden() {
+    const { isAnnouncementShown } = this.stores.announcements;
+    return delayAppState.isDelayAppScreenVisible || isAnnouncementShown;
+  }
+
   @computed get isTodosPanelVisible() {
-    if (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
-
     return this.settings.isTodosPanelVisible;
   }
 
@@ -61,6 +64,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._updateTodosConfig,
       this._firstLaunchReaction,
     ]);
 
@@ -124,11 +128,16 @@ export default class TodoStore extends FeatureStore {
   // Todos client message handlers
 
   _onTodosClientInitialized = () => {
+    const { authToken } = this.stores.user;
+    const { isDarkThemeActive } = this.stores.ui;
+    const { locale } = this.stores.app;
+    if (!this.webview) return;
     this.webview.send(IPC.TODOS_HOST_CHANNEL, {
       action: 'todos:configure',
       data: {
-        authToken: this.stores.user.authToken,
-        theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default,
+        authToken,
+        locale,
+        theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
   };
@@ -148,6 +157,11 @@ export default class TodoStore extends FeatureStore {
     this.isFeatureEnabled = isTodosEnabled;
   };
 
+  _updateTodosConfig = () => {
+    // Resend the config if any part changes in Franz:
+    this._onTodosClientInitialized();
+  };
+
   _firstLaunchReaction = () => {
     const { stats } = this.stores.settings.all;
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 6e6f745c7..b652098f9 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -161,11 +161,11 @@ export default class UserStore extends Store {
   }
 
   @computed get isPremiumOverride() {
-    return (!this.team.plan && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
   }
 
   @computed get isPersonal() {
-    if (!this.team.plan) return false;
+    if (!this.team || !this.team.plan) return false;
     const plan = getPlan(this.team.plan);
 
     return plan === PLANS.PERSONAL;
@@ -174,7 +174,7 @@ export default class UserStore extends Store {
   @computed get isPro() {
     if (this.isPremiumOverride) return true;
 
-    if ((!this.team.plan || this.team.state === 'expired')) return false;
+    if (!this.team || (!this.team.plan || this.team.state === 'expired')) return false;
     const plan = getPlan(this.team.plan);
 
     return plan === PLANS.PRO || plan === PLANS.LEGACY;