7 files changed, 136 insertions, 65 deletions

diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 38de2dbc8..2f25e7139 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -192,6 +192,11 @@ class AnnouncementScreen extends Component {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
     }).isRequired,
+    actions: PropTypes.shape({
+      app: PropTypes.shape({
+        openExternalUrl: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static contextTypes = {
@@ -199,7 +204,7 @@ class AnnouncementScreen extends Component {
   };
 
   render() {
-    const { classes, stores } = this.props;
+    const { classes, stores, actions } = this.props;
     const { intl } = this.context;
     const { changelog, announcement } = announcementsStore;
     const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
@@ -223,14 +228,23 @@ class AnnouncementScreen extends Component {
                       __html: marked(announcement.main.text, markedOptions),
                     }}
                   />
-                  <div className={classes.mainCtaButton}>
-                    <Button
-                      label={announcement.main.cta.label}
-                      onClick={() => {
-                        window.location.href = `#${announcement.main.cta.href}`;
-                      }}
-                    />
-                  </div>
+                  {(announcement.main.cta.label || announcement.main.cta.href) && (
+                    <div className={classes.mainCtaButton}>
+                      <Button
+                        label={announcement.main.cta.label}
+                        onClick={() => {
+                          const {
+                            href,
+                          } = announcement.main.cta;
+                          if (announcement.main.cta.href.startsWith('http')) {
+                            actions.app.openExternalUrl({ url: href });
+                          } else {
+                            window.location.href = `#${href}`;
+                          }
+                        }}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -250,7 +264,14 @@ class AnnouncementScreen extends Component {
                     <Button
                       label={announcement.spotlight.cta.label}
                       onClick={() => {
-                        window.location.href = `#${announcement.spotlight.cta.href}`;
+                        const {
+                          href,
+                        } = announcement.spotlight.cta;
+                        if (announcement.spotlight.cta.href.startsWith('http')) {
+                          actions.app.openExternalUrl({ url: href });
+                        } else {
+                          window.location.href = `#${href}`;
+                        }
                       }}
                     />
                   </div>
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 6dcdfc986..a14d1461e 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -63,6 +63,22 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) {
   `;
 }
 
+function generateShowDragAreaStyle(accentColor) {
+  return `
+    .sidebar {
+      padding-top: 0px !important;
+    }
+    .window-draggable {
+      position: initial;
+      background-color: ${accentColor};
+    }
+    #root {
+      /** Remove 22px from app height, otherwise the page will be to high */
+      height: calc(100% - 22px);
+    }
+  `;
+}
+
 function generateStyle(settings) {
   let style = '';
 
@@ -70,6 +86,7 @@ function generateStyle(settings) {
     accentColor,
     serviceRibbonWidth,
     iconSize,
+    showDragArea,
   } = settings;
 
   if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
@@ -79,6 +96,9 @@ function generateStyle(settings) {
       || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
     style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize);
   }
+  if (showDragArea) {
+    style += generateShowDragAreaStyle(accentColor);
+  }
 
   return style;
 }
@@ -121,4 +141,13 @@ export default function initAppearance(stores) {
       updateStyle(settings.all.app);
     },
   );
+  // Update draggable area
+  reaction(
+    () => (
+      settings.all.app.showDragArea
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+  );
 }
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index ec061377b..3855fedf1 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -49,6 +49,7 @@ const styles = theme => ({
   priceWrapper: {
     height: 50,
     marginBottom: 0,
+    marginTop: ({ text }) => (!text ? 15 : 0),
   },
   price: {
     fontSize: 50,
@@ -64,7 +65,7 @@ const styles = theme => ({
   cta: {
     background: theme.styleTypes.primary.accent,
     color: theme.styleTypes.primary.contrast,
-    margin: [40, 'auto', 0, 'auto'],
+    margin: [30, 'auto', 0, 'auto'],
   },
   divider: {
     width: 40,
@@ -77,10 +78,14 @@ const styles = theme => ({
     background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
     color: theme.styleTypes.primary.contrast,
     position: 'relative',
+    height: 'auto',
   },
   content: {
     padding: [10, 20, 20],
     background: '#EFEFEF',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
   },
   simpleCTA: {
     background: 'none',
@@ -167,10 +172,14 @@ export default @observer @injectSheet(styles) class PlanItem extends Component {
             </div>
           )}
           <H2 className={classes.planName}>{name}</H2>
-          <p className={classes.text}>
-            {text}
-          </p>
-          <hr className={classes.divider} />
+          {text && (
+            <>
+              <p className={classes.text}>
+                {text}
+              </p>
+              <hr className={classes.divider} />
+            </>
+          )}
           <p className={classes.priceWrapper}>
             <span className={classes.currency}>{currency}</span>
             <span className={classes.price}>
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 4bf5238dd..6f0dd30ad 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -6,7 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { H1, H2, Icon } from '@meetfranz/ui';
 import color from 'color';
 
-import { mdiRocket, mdiArrowRight } from '@mdi/js';
+import { mdiArrowRight } from '@mdi/js';
 import PlanItem from './PlanItem';
 import { i18nPlanName } from '../../../helpers/plan-helpers';
 import { PLANS } from '../../../config';
@@ -79,10 +79,10 @@ const styles = theme => ({
     overflowY: 'scroll',
   },
   container: {
-    width: '80%',
+    // width: '80%',
     height: 'auto',
-    background: theme.styleTypes.primary.accent,
-    padding: 40,
+    // background: theme.styleTypes.primary.accent,
+    // padding: 40,
     borderRadius: theme.borderRadius,
     maxWidth: 1000,
 
@@ -104,23 +104,6 @@ const styles = theme => ({
       boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()],
     },
   },
-  bigIcon: {
-    background: theme.styleTypes.danger.accent,
-    width: 120,
-    height: 120,
-    display: 'flex',
-    alignItems: 'center',
-    borderRadius: '100%',
-    justifyContent: 'center',
-    margin: [-100, 'auto', 20],
-
-    '& svg': {
-      width: '80px !important',
-      height: '80px !important',
-      filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
-      fill: theme.styleTypes.danger.contrast,
-    },
-  },
   headline: {
     fontSize: 40,
   },
@@ -158,7 +141,7 @@ const styles = theme => ({
     overflow: 'scroll-x',
   },
   featuredPlan: {
-    transform: 'scale(1.05)',
+    transform: ({ isPersonalPlanAvailable }) => (isPersonalPlanAvailable ? 'scale(1.05)' : null),
   },
   disclaimer: {
     textAlign: 'right',
@@ -177,8 +160,13 @@ class PlanSelection extends Component {
     upgradeAccount: PropTypes.func.isRequired,
     stayOnFree: PropTypes.func.isRequired,
     hadSubscription: PropTypes.bool.isRequired,
+    isPersonalPlanAvailable: PropTypes.bool,
   };
 
+  static defaultProps = {
+    isPersonalPlanAvailable: true,
+  }
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -196,6 +184,7 @@ class PlanSelection extends Component {
       upgradeAccount,
       stayOnFree,
       hadSubscription,
+      isPersonalPlanAvailable,
     } = this.props;
 
     const { intl } = this.context;
@@ -206,15 +195,14 @@ class PlanSelection extends Component {
           className={classes.root}
         >
           <div className={classes.container}>
-            <div className={classes.bigIcon}>
-              <Icon icon={mdiRocket} />
-            </div>
             <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
-            <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            {isPersonalPlanAvailable && (
+              <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            )}
             <div className={classes.plans}>
               <PlanItem
                 name={i18nPlanName(PLANS.FREE, intl)}
-                text={intl.formatMessage(messages.textFree)}
+                text={isPersonalPlanAvailable ? intl.formatMessage(messages.textFree) : null}
                 price={0}
                 currency={currency}
                 ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
@@ -228,33 +216,35 @@ class PlanSelection extends Component {
               </PlanItem>
               <PlanItem
                 name={i18nPlanName(plans.pro.yearly.id, intl)}
-                text={intl.formatMessage(messages.textProfessional)}
+                text={isPersonalPlanAvailable ? intl.formatMessage(messages.textProfessional) : null}
                 price={plans.pro.yearly.price}
                 currency={currency}
                 ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
                 upgrade={() => upgradeAccount(plans.pro.yearly.id)}
                 className={classes.featuredPlan}
                 perUser
-                bestValue
-              >
-                <FeatureList
-                  plan={PLANS.PRO}
-                  className={classes.featureList}
-                />
-              </PlanItem>
-              <PlanItem
-                name={i18nPlanName(plans.personal.yearly.id, intl)}
-                text={intl.formatMessage(messages.textPersonal)}
-                price={plans.personal.yearly.price}
-                currency={currency}
-                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
-                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                bestValue={isPersonalPlanAvailable}
               >
                 <FeatureList
-                  plan={PLANS.PERSONAL}
+                  plan={isPersonalPlanAvailable ? PLANS.PRO : null}
                   className={classes.featureList}
                 />
               </PlanItem>
+              {isPersonalPlanAvailable && (
+                <PlanItem
+                  name={i18nPlanName(plans.personal.yearly.id, intl)}
+                  text={intl.formatMessage(messages.textPersonal)}
+                  price={plans.personal.yearly.price}
+                  currency={currency}
+                  ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                  upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                >
+                  <FeatureList
+                    plan={PLANS.PERSONAL}
+                    className={classes.featureList}
+                  />
+                </PlanItem>
+              )}
             </div>
             <div className={classes.footer}>
               <a
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
index d202c924e..e4d85cda5 100644
--- a/src/features/planSelection/containers/PlanSelectionScreen.js
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -53,7 +53,8 @@ class PlanSelectionScreen extends Component {
     const { intl } = this.context;
 
     const { user, features } = this.props.stores;
-    const { plans, currency } = features.features.pricingConfig;
+    const { isPersonalPlanAvailable, pricingConfig } = features.features;
+    const { plans, currency } = pricingConfig;
     const { activateTrial } = this.props.actions.user;
     const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
 
@@ -95,6 +96,7 @@ class PlanSelectionScreen extends Component {
           }}
           subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
           hadSubscription={user.data.hadSubscription}
+          isPersonalPlanAvailable={isPersonalPlanAvailable}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index e9b1963f7..2626186e9 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -9,10 +9,20 @@ import { defineMessages, intlShape } from 'react-intl';
 import { mdiCheckAll } from '@mdi/js';
 import SettingsStore from '../../../stores/SettingsStore';
 
-import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
 import UpgradeButton from '../../../components/ui/UpgradeButton';
 
+// NOTE: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+function validURL(str) {
+  const pattern = new RegExp('^(https?:\\/\\/)?' // protocol
+      + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
+      + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
+      + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
+      + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+      + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+  return !!pattern.test(str);
+}
+
 const messages = defineMessages({
   premiumInfo: {
     id: 'feature.todos.premium.info',
@@ -194,6 +204,16 @@ class TodosWebview extends Component {
 
     const { intl } = this.context;
 
+    const isUsingPredefinedTodoServer = stores.settings.all.app.predefinedTodoServer !== 'isUsingCustomTodoService';
+    const todoUrl = isUsingPredefinedTodoServer
+      ? stores.settings.all.app.predefinedTodoServer
+      : stores.settings.all.app.customTodoServer;
+    let isTodoUrlValid = true;
+    if (isUsingPredefinedTodoServer === false) {
+      isTodoUrlValid = validURL(todoUrl);
+    }
+
+
     return (
       <div
         className={classes.root}
@@ -213,6 +233,8 @@ class TodosWebview extends Component {
           />
         )}
         {isTodosIncludedInCurrentPlan ? (
+          isTodoUrlValid
+          && (
           <Webview
             className={classes.webview}
             onDidAttach={() => {
@@ -223,8 +245,9 @@ class TodosWebview extends Component {
             partition="persist:todos"
             preload="./features/todos/preload.js"
             ref={(webview) => { this.webview = webview ? webview.view : null; }}
-            src={stores.settings.all.app.todoServer || environment.TODOS_FRONTEND}
+            src={todoUrl}
           />
+          )
         ) : (
           <Appear>
             <div className={classes.premiumContainer}>
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 31168a397..258b15b14 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -52,11 +52,8 @@ class WebControlsScreen extends Component {
   }
 
   goHome() {
-    const { reloadActive } = this.props.actions.service;
-
     if (!this.webview) return;
-
-    reloadActive();
+    this.webview.goToIndex(0);
   }
 
   reload() {