Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

2 files changed, 38 insertions, 13 deletions

diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ba50652e8..c61cb06c9 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,19 +4,28 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import Button from '../../components/ui/Button';
+import { Button } from '@meetfranz/forms';
 
 import { config } from '.';
 import styles from './styles';
+import UserStore from '../../stores/UserStore';
 
 const messages = defineMessages({
   headline: {
     id: 'feature.delayApp.headline',
     defaultMessage: '!!!Please purchase license to skip waiting',
   },
+  headlineTrial: {
+    id: 'feature.delayApp.trial.headline',
+    defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line',
+  },
   action: {
-    id: 'feature.delayApp.action',
-    defaultMessage: '!!!Get a Ferdi Supporter License',
+    id: 'feature.delayApp.upgrade.action',
+    defaultMessage: '!!!Get a Franz Supporter License',
+  },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
   },
   text: {
     id: 'feature.delayApp.text',
@@ -24,7 +33,7 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component {
   static propTypes = {
     // eslint-disable-next-line
     classes: PropTypes.object.isRequired,
@@ -60,23 +69,32 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
   }
 
   handleCTAClick() {
-    const { actions } = this.props;
-
-    actions.ui.openSettings({ path: 'user' });
+    const { actions, stores } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+    }
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
 
+    const { hadSubscription } = stores.user.data;
+
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1>
+        <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1>
         <Button
-          label={intl.formatMessage(messages.action)}
+          label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)}
           className={classes.button}
           buttonType="inverted"
           onClick={this.handleCTAClick.bind(this)}
+          busy={stores.user.activateTrialRequest.isExecuting}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
@@ -89,6 +107,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 }
 
 DelayApp.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index c753eeffe..4f793f16c 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -43,14 +43,16 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.all.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);
@@ -63,6 +65,8 @@ export default function init(stores) {
 
               setVisibility(false);
             }, config.delayDuration + 1000); // timer needs to be able to hit 0
+          } else {
+            setVisibility(false);
           }
         });
       } else {