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

5 files changed, 111 insertions, 91 deletions

diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index de5653f04..6344edb89 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -77,7 +77,6 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
     const { defaultTrialPlan } = stores.features.features;
 
     if (!hadSubscription) {
-      console.log('directly activate trial');
       actions.user.activateTrial({ planId: defaultTrialPlan });
 
       gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 143955a7b..c06183e37 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -9,7 +9,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
-import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -17,7 +17,7 @@ const CLOSE_TODOS_BUTTON_SIZE = 35;
 const messages = defineMessages({
   premiumInfo: {
     id: 'feature.todos.premium.info',
-    defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.',
+    defaultMessage: '!!!Franz Todos are available to premium users now!',
   },
   upgradeCTA: {
     id: 'feature.todos.premium.upgrade',
@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
   rolloutInfo: {
     id: 'feature.todos.premium.rollout',
-    defaultMessage: '!!!Franz Todos will be available to everyone soon.',
+    defaultMessage: '!!!Everyone else will have to wait a little longer.',
   },
 });
 
@@ -112,7 +112,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -281,10 +281,10 @@ class TodosWebview extends Component {
         ) : (
           <Appear>
             <div className={classes.premiumContainer}>
-              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
               <p>{intl.formatMessage(messages.premiumInfo)}</p>
               <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-              <ActivateTrialButton
+              <UpgradeButton
                 className={classes.premiumCTA}
                 gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
                 short
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 170408ebb..aebe0dcbe 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -30,7 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
-    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
+    if (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
@@ -62,6 +62,7 @@ export default class TodoStore extends FeatureStore {
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
       this._updateTodosConfig,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -156,5 +157,20 @@ export default class TodoStore extends FeatureStore {
   _updateTodosConfig = () => {
     // Resend the config if any part changes in Franz:
     this._onTodosClientInitialized();
-  }
+  };
+
+  _firstLaunchReaction = () => {
+    const { stats } = this.stores.settings.all;
+
+    // Hide todos layer on first app start but show on second
+    if (stats.appStarts <= 1) {
+      this._updateSettings({
+        isTodosPanelVisible: false,
+      });
+    } else if (stats.appStarts <= 2) {
+      this._updateSettings({
+        isTodosPanelVisible: true,
+      });
+    }
+  };
 }
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 059a681de..70e213912 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox } from '@meetfranz/ui';
+import { Infobox, Badge } from '@meetfranz/ui';
 
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -11,9 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
-import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
 import UIStore from '../../../stores/UIStore';
-import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -50,7 +50,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = () => ({
   table: {
     width: '100%',
     '& td': {
@@ -64,23 +64,24 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: 20,
-    // backgroundColor: '#3498db',
-    marginLeft: -20,
-    marginBottom: 40,
-    paddingBottom: 40,
     height: 'auto',
+  },
+  premiumAnnouncementContainer: {
     display: 'flex',
-    borderBottom: [1, 'solid', theme.inputBackground],
+  },
+  announcementHeadline: {
+    marginBottom: 0,
   },
   teaserImage: {
-    width: 200,
-    height: '100%',
-    float: 'left',
-    margin: [-8, 0, 0, -20],
+    width: 250,
+    margin: [-8, 0, 0, 20],
+    alignSelf: 'center',
   },
   upgradeCTA: {
-    marginTop: 20,
+    margin: [40, 'auto'],
+  },
+  proRequired: {
+    margin: [10, 0, 40],
   },
 });
 
@@ -152,76 +153,80 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
-              <div>
-                <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-                <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
-                <ActivateTrialButton
-                  className={classes.upgradeCTA}
-                  gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
-                  short
-                />
+
+              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
+              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+              <div className={classes.premiumAnnouncementContainer}>
+                <div className={classes.premiumAnnouncementContent}>
+                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                  <UpgradeButton
+                    className={classes.upgradeCTA}
+                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                    short
+                    requiresPro
+                  />
+                </div>
+                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
               </div>
             </div>
           )}
 
-          <PremiumFeatureContainer
-            condition={() => workspaceStore.isPremiumUpgradeRequired}
-            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
-          >
-            {/* ===== Create workspace form ===== */}
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm
-                isSubmitting={createWorkspaceRequest.isExecuting}
-                onSubmit={onCreateWorkspaceSubmit}
-              />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {/* ===== Workspace could not be loaded error ===== */}
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <Fragment>
-                    {workspaces.length === 0 ? (
-                      <div className="align-middle settings__empty-state">
-                        {/* ===== Workspaces empty state ===== */}
-                        <p className="settings__empty-text">
-                          <span className="emoji">
-                            <img src="./assets/images/emoji/sad.png" alt="" />
-                          </span>
-                          {intl.formatMessage(messages.noServicesAdded)}
-                        </p>
-                      </div>
-                    ) : (
-                      <table className={classes.table}>
-                        {/* ===== Workspaces list ===== */}
-                        <tbody>
-                          {workspaces.map(workspace => (
-                            <WorkspaceItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              onItemClick={w => onWorkspaceClick(w)}
-                            />
-                          ))}
-                        </tbody>
-                      </table>
-                    )}
-                  </Fragment>
-                )}
-              </Fragment>
-            )}
-          </PremiumFeatureContainer>
+          {!workspaceStore.isPremiumUpgradeRequired && (
+            <>
+              {/* ===== Create workspace form ===== */}
+              <div className={classes.createForm}>
+                <CreateWorkspaceForm
+                  isSubmitting={createWorkspaceRequest.isExecuting}
+                  onSubmit={onCreateWorkspaceSubmit}
+                />
+              </div>
+              {getUserWorkspacesRequest.isExecuting ? (
+                <Loader />
+              ) : (
+                <Fragment>
+                  {/* ===== Workspace could not be loaded error ===== */}
+                  {getUserWorkspacesRequest.error ? (
+                    <Infobox
+                      icon="alert"
+                      type="danger"
+                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                      ctaLoading={getUserWorkspacesRequest.isExecuting}
+                      ctaOnClick={getUserWorkspacesRequest.retry}
+                    >
+                      {intl.formatMessage(messages.workspacesRequestFailed)}
+                    </Infobox>
+                  ) : (
+                    <Fragment>
+                      {workspaces.length === 0 ? (
+                        <div className="align-middle settings__empty-state">
+                          {/* ===== Workspaces empty state ===== */}
+                          <p className="settings__empty-text">
+                            <span className="emoji">
+                              <img src="./assets/images/emoji/sad.png" alt="" />
+                            </span>
+                            {intl.formatMessage(messages.noServicesAdded)}
+                          </p>
+                        </div>
+                      ) : (
+                        <table className={classes.table}>
+                          {/* ===== Workspaces list ===== */}
+                          <tbody>
+                            {workspaces.map(workspace => (
+                              <WorkspaceItem
+                                key={workspace.id}
+                                workspace={workspace}
+                                onItemClick={w => onWorkspaceClick(w)}
+                              />
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </Fragment>
+                  )}
+                </Fragment>
+              )}
+            </>
+          )}
         </div>
       </div>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 2ab565fa1..affbd230d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -11,7 +11,7 @@ import {
   updateWorkspaceRequest,
 } from '../api';
 
-@inject('actions') @observer
+@inject('stores', 'actions') @observer
 class WorkspacesScreen extends Component {
   static propTypes = {
     actions: PropTypes.shape({