18 files changed, 282 insertions, 29 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index bce792e56..593149e72 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -7,6 +7,7 @@ import { TitleBar } from 'electron-react-titlebar';
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
 import { Component as BasicAuth } from '../../features/basicAuth';
+import { Component as ShareFranz } from '../../features/shareFranz';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
@@ -164,6 +165,7 @@ export default @observer class AppLayout extends Component {
                 )}
                 {isDelayAppScreenVisible && (<DelayApp />)}
                 <BasicAuth />
+                <ShareFranz />
                 {services}
               </div>
             </div>
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 42bc3c877..7a69dba87 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
 
 import Button from '../../ui/Button';
 
@@ -35,12 +36,12 @@ export default @observer class WebviewCrashHandler extends Component {
   };
 
   state = {
-    countdown: 10000,
+    countdown: ms('10s'),
   }
 
   countdownInterval = null;
 
-  countdownIntervalTimeout = 1000;
+  countdownIntervalTimeout = ms('1s');
 
 
   componentDidMount() {
@@ -75,7 +76,7 @@ export default @observer class WebviewCrashHandler extends Component {
         <p className="footnote">
           {intl.formatMessage(messages.autoReload, {
             name,
-            seconds: this.state.countdown / 1000,
+            seconds: this.state.countdown / ms('1s'),
           })}
         </p>
       </div>
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index b5d7c4b2d..0f6f0260f 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import Webview from 'react-electron-web-view';
+import ms from 'ms';
 
 import Button from '../ui/Button';
 
@@ -42,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, 4000);
+    }, ms('4s'));
   }
 
   render() {
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index d84e4c713..8e6ec5a0e 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -5,6 +5,9 @@ import classnames from 'classnames';
 import injectCSS from 'react-jss';
 
 import styles from './styles';
+import { Icon } from '../../../../packages/ui/lib';
+
+// ReactModal.setAppElement('#root');
 
 export default @injectCSS(styles) class Modal extends Component {
   static propTypes = {
@@ -14,11 +17,15 @@ export default @injectCSS(styles) class Modal extends Component {
     isOpen: PropTypes.bool.isRequired,
     portal: PropTypes.string,
     close: PropTypes.func.isRequired,
+    shouldCloseOnOverlayClick: PropTypes.bool,
+    showClose: PropTypes.bool,
   }
 
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
+    shouldCloseOnOverlayClick: false,
+    showClose: true,
   }
 
   render() {
@@ -29,6 +36,8 @@ export default @injectCSS(styles) class Modal extends Component {
       isOpen,
       portal,
       close,
+      shouldCloseOnOverlayClick,
+      showClose,
     } = this.props;
 
     return (
@@ -42,14 +51,17 @@ export default @injectCSS(styles) class Modal extends Component {
         overlayClassName={classes.overlay}
         portal={portal}
         onRequestClose={close}
+        shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       >
-        {/* <button
-          type="button"
-          className={classnames({
-            [`${classes.close}`]: true,
-            'mdi mdi-close': true,
-          })}
-        /> */}
+        {showClose && close && (
+          <button
+            type="button"
+            className={classes.close}
+            onClick={close}
+          >
+            <Icon icon="mdiClose" size={1.5} />
+          </button>
+        )}
         <div className={classes.content}>
           {children}
         </div>
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index 56fecbf55..49b970c97 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -28,5 +28,6 @@ export default theme => ({
     position: 'absolute',
     top: 0,
     right: 0,
+    padding: 20,
   },
 });
diff --git a/src/config.js b/src/config.js
index b11952520..30a5a5cc0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,13 +1,14 @@
 import electron from 'electron';
 import path from 'path';
 import isDevMode from 'electron-is-dev';
+import ms from 'ms';
 
 import { asarPath } from './helpers/asar-helpers';
 
 const app = process.type === 'renderer' ? electron.remote.app : electron.app;
 const systemPreferences = process.type === 'renderer' ? electron.remote.systemPreferences : electron.systemPreferences;
 
-export const CHECK_INTERVAL = 1000 * 3600; // How often should we perform checks
+export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_API = 'https://dev.franzinfra.com';
 export const LIVE_API = 'https://api.franzinfra.com';
@@ -35,8 +36,8 @@ export const DEFAULT_FEATURES_CONFIG = {
   isSpellcheckerPremiumFeature: false,
   needToWaitToProceed: false,
   needToWaitToProceedConfig: {
-    delayOffset: 3600000,
-    wait: 10000,
+    delayOffset: ms('1h'),
+    wait: ms('10s'),
   },
   isServiceProxyEnabled: false,
   isServiceProxyPremiumFeature: true,
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index 13395fb40..a8252acb7 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -62,6 +62,7 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
         isOpen={isModalVisible}
         className={classes.modal}
         close={this.cancel.bind(this)}
+        showClose={false}
       >
         <h1>Sign in</h1>
         <p>
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.js
index 00ad65ce6..89607824b 100644
--- a/src/features/basicAuth/index.js
+++ b/src/features/basicAuth/index.js
@@ -6,7 +6,7 @@ import BasicAuthComponent from './Component';
 const debug = require('debug')('Franz:feature:basicAuth');
 
 const defaultState = {
-  isModalVisible: false,
+  isModalVisible: true,
   service: null,
   authInfo: null,
 };
@@ -15,7 +15,6 @@ export const state = observable(defaultState);
 
 export function resetState() {
   Object.assign(state, defaultState);
-  console.log('reset state', state);
 }
 
 export default function initialize() {
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 48aac34b6..abc8274cf 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -28,8 +28,12 @@ export default function init(stores) {
   let shownAfterLaunch = false;
   let timeLastDelay = moment();
 
+  window.franz.features.delayApp = {
+    state,
+  };
+
   reaction(
-    () => stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    () => stores.user.isLoggedIn && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
     (isEnabled) => {
       if (isEnabled) {
         debug('Enabling `delayApp` feature');
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
new file mode 100644
index 000000000..d463664df
--- /dev/null
+++ b/src/features/shareFranz/Component.js
@@ -0,0 +1,170 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { Button } from '@meetfranz/forms';
+import { H1, Icon } from '@meetfranz/ui';
+
+import Modal from '../../components/ui/Modal';
+import { state } from '.';
+import { gaEvent } from '../../lib/analytics';
+import ServicesStore from '../../stores/ServicesStore';
+
+const messages = defineMessages({
+  headline: {
+    id: 'feature.shareFranz.headline',
+    defaultMessage: '!!!Franz is better together!',
+  },
+  text: {
+    id: 'feature.shareFranz.text',
+    defaultMessage: '!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.',
+  },
+  actions: {
+    email: {
+      id: 'feature.shareFranz.action.email',
+      defaultMessage: '!!!Share as email',
+    },
+    facebook: {
+      id: 'feature.shareFranz.action.facebook',
+      defaultMessage: '!!!Share on Facebook',
+    },
+    twitter: {
+      id: 'feature.shareFranz.action.twitter',
+      defaultMessage: '!!!Share on Twitter',
+    },
+  },
+  shareText: {
+    email: {
+      id: 'feature.shareFranz.shareText.email',
+      defaultMessage: '!!! I\'ve added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com',
+    },
+    twitter: {
+      id: 'feature.shareFranz.shareText.twitter',
+      defaultMessage: '!!! I\'ve added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @MeetFranz',
+    },
+  },
+});
+
+const styles = theme => ({
+  modal: {
+    width: '80%',
+    maxWidth: 600,
+    background: theme.styleTypes.primary.accent,
+    textAlign: 'center',
+    color: theme.styleTypes.primary.contrast,
+  },
+  heartContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    borderRadius: '100%',
+    background: theme.brandDanger,
+    padding: 20,
+    width: 100,
+    height: 100,
+    margin: [-70, 'auto', 30],
+  },
+  heart: {
+    fill: theme.styleTypes.primary.contrast,
+  },
+  headline: {
+    textAlign: 'center',
+    fontSize: 40,
+    marginBottom: 20,
+  },
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: 30,
+  },
+  cta: {
+    background: theme.styleTypes.primary.contrast,
+    color: theme.styleTypes.primary.accent,
+
+    '& svg': {
+      fill: theme.styleTypes.primary.accent,
+    },
+  },
+});
+
+export default @injectSheet(styles) @inject('stores') @observer class ShareFranzModal extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  close() {
+    state.isModalVisible = false;
+  }
+
+  render() {
+    const { isModalVisible } = state;
+
+    const {
+      classes,
+      stores,
+    } = this.props;
+
+    const serviceCount = stores.services.all.length;
+
+    const { intl } = this.context;
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        className={classes.modal}
+        shouldCloseOnOverlayClick
+        close={this.close.bind(this)}
+      >
+        <div className={classes.heartContainer}>
+          <Icon icon="mdiHeart" className={classes.heart} size={4} />
+        </div>
+        <H1 className={classes.headline}>
+          {intl.formatMessage(messages.headline)}
+        </H1>
+        <p>{intl.formatMessage(messages.text)}</p>
+        <div className={classes.actions}>
+          <Button
+            label={intl.formatMessage(messages.actions.email)}
+            className={classes.cta}
+            icon="mdiEmail"
+            href={`mailto:?subject=Meet the cool app Franz&body=${intl.formatMessage(messages.shareText.email, { count: serviceCount })}}`}
+            target="_blank"
+            onClick={() => {
+              gaEvent('Share Franz', 'share', 'Share via email');
+            }}
+          />
+          <Button
+            label={intl.formatMessage(messages.actions.facebook)}
+            className={classes.cta}
+            icon="mdiFacebookBox"
+            href="https://www.facebook.com/sharer/sharer.php?u=https://www.meetfranz.com?utm_source=facebook&utm_medium=referral&utm_campaign=share-button"
+            target="_blank"
+            onClick={() => {
+              gaEvent('Share Franz', 'share', 'Share via Facebook');
+            }}
+          />
+          <Button
+            label={intl.formatMessage(messages.actions.twitter)}
+            className={classes.cta}
+            icon="mdiTwitter"
+            href={`http://twitter.com/intent/tweet?status=${intl.formatMessage(messages.shareText.twitter, { count: serviceCount })}`}
+            target="_blank"
+            onClick={() => {
+              gaEvent('Share Franz', 'share', 'Share via Twitter');
+            }}
+          />
+        </div>
+      </Modal>
+    );
+  }
+}
+
+ShareFranzModal.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/shareFranz/index.js b/src/features/shareFranz/index.js
new file mode 100644
index 000000000..3a8ec95d3
--- /dev/null
+++ b/src/features/shareFranz/index.js
@@ -0,0 +1,52 @@
+import { observable, reaction } from 'mobx';
+import ms from 'ms';
+
+import { state as delayAppState } from '../delayApp';
+import { gaEvent, gaPage } from '../../lib/analytics';
+
+export { default as Component } from './Component';
+
+const debug = require('debug')('Franz:feature:shareFranz');
+
+const defaultState = {
+  isModalVisible: false,
+  lastShown: null,
+};
+
+export const state = observable(defaultState);
+
+export default function initialize(stores) {
+  debug('Initialize shareFranz feature');
+
+  window.franz.features.shareFranz = {
+    state,
+  };
+
+  function showModal() {
+    debug('Showing share window');
+
+    state.isModalVisible = true;
+
+    gaEvent('Share Franz', 'show');
+    gaPage('/share-modal');
+  }
+
+  reaction(
+    () => stores.user.isLoggedIn,
+    () => {
+      setTimeout(() => {
+        if (stores.settings.stats.appStarts % 30 === 0) {
+          if (delayAppState.isDelayAppScreenVisible) {
+            debug('Delaying share modal by 5 minutes');
+            setTimeout(() => showModal(), ms('5m'));
+          } else {
+            showModal();
+          }
+        }
+      }, ms('2s'));
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index cd5c417e3..988ac46f2 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -286,5 +286,12 @@
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
   "app.errorHandler.headline": "Something went wrong",
-  "app.errorHandler.action": "Reload"
+  "app.errorHandler.action": "Reload",
+  "feature.shareFranz.headline": "Franz is better together!",
+  "feature.shareFranz.text": "Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
+  "feature.shareFranz.action.email": "Send as email",
+  "feature.shareFranz.action.facebook": "Share on Facebook",
+  "feature.shareFranz.action.twitter": "Share on Twitter",
+  "feature.shareFranz.shareText.email": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
+  "feature.shareFranz.shareText.twitter": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @MeetFranz"
 }
diff --git a/src/lib/analytics.js b/src/lib/analytics.js
index 7044e5bb7..0519192d1 100644
--- a/src/lib/analytics.js
+++ b/src/lib/analytics.js
@@ -37,7 +37,3 @@ export function gaEvent(category, action, label) {
 
   debug('GA track event', category, action);
 }
-
-setTimeout(() => {
-  ga('send', 'Ping');
-}, 1000 * 60 * 10); // Ping GA every 10 Minutes
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index d90f32744..168aa7e48 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -7,6 +7,7 @@ import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
 import AutoLaunch from 'auto-launch';
 import prettyBytes from 'pretty-bytes';
+import ms from 'ms';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -112,12 +113,12 @@ export default class AppStore extends Store {
     // Check if system is muted
     // There are no events to subscribe so we need to poll everey 5s
     this._systemDND();
-    setInterval(() => this._systemDND(), 5000);
+    setInterval(() => this._systemDND(), ms('5s'));
 
     // Check for updates once every 4 hours
     setInterval(() => this._checkForUpdates(), CHECK_INTERVAL);
     // Check for an update in 30s (need a delay to prevent Squirrel Installer lock file issues)
-    setTimeout(() => this._checkForUpdates(), 30000);
+    setTimeout(() => this._checkForUpdates(), ms('30s'));
     ipcRenderer.on('autoUpdate', (event, data) => {
       if (data.available) {
         this.updateStatus = this.updateStatusTypes.AVAILABLE;
@@ -316,7 +317,7 @@ export default class AppStore extends Store {
     } else {
       const deltaTime = moment().diff(this.timeOfflineStart);
 
-      if (deltaTime > 30 * 60 * 1000) {
+      if (deltaTime > ms('30m')) {
         this.actions.service.reloadAll();
       }
     }
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 05a620f0b..b7130904b 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -8,6 +8,7 @@ import spellchecker from '../features/spellchecker';
 import serviceProxy from '../features/serviceProxy';
 import basicAuth from '../features/basicAuth';
 import workspaces from '../features/workspaces';
+import shareFranz from '../features/shareFranz';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -58,5 +59,6 @@ export default class FeaturesStore extends Store {
     serviceProxy(this.stores, this.actions);
     basicAuth(this.stores, this.actions);
     workspaces(this.stores, this.actions);
+    shareFranz(this.stores, this.actions);
   }
 }
diff --git a/src/stores/RecipePreviewsStore.js b/src/stores/RecipePreviewsStore.js
index 10b2928e3..382820d58 100644
--- a/src/stores/RecipePreviewsStore.js
+++ b/src/stores/RecipePreviewsStore.js
@@ -1,5 +1,6 @@
 import { action, computed, observable } from 'mobx';
 import { debounce } from 'lodash';
+import ms from 'ms';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
@@ -48,5 +49,5 @@ export default class RecipePreviewsStore extends Store {
   // Helper
   _analyticsSearch = debounce((needle) => {
     gaEvent('Recipe', 'search', needle);
-  }, 3000);
+  }, ms('3s'));
 }
diff --git a/src/stores/RequestStore.js b/src/stores/RequestStore.js
index 2629e0a38..9254e3223 100644
--- a/src/stores/RequestStore.js
+++ b/src/stores/RequestStore.js
@@ -1,4 +1,5 @@
 import { action, computed, observable } from 'mobx';
+import ms from 'ms';
 
 import Store from './lib/Store';
 
@@ -13,7 +14,7 @@ export default class RequestStore extends Store {
 
   retries = 0;
 
-  retryDelay = 2000;
+  retryDelay = ms('2s');
 
   constructor(...args) {
     super(...args);
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index efd57a09d..c63bef196 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -5,6 +5,7 @@ import {
   observable,
 } from 'mobx';
 import { debounce, remove } from 'lodash';
+import ms from 'ms';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -679,7 +680,7 @@ export default class ServicesStore extends Store {
   _initRecipePolling(serviceId) {
     const service = this.one(serviceId);
 
-    const delay = 2000;
+    const delay = ms('2s');
 
     if (service) {
       if (service.timer !== null) {
@@ -700,7 +701,7 @@ export default class ServicesStore extends Store {
 
   _reorderAnalytics = debounce(() => {
     gaEvent('Service', 'order');
-  }, 5000);
+  }, ms('5s'));
 
   _wrapIndex(index, delta, size) {
     return (((index + delta) % size) + size) % size;