4 files changed, 81 insertions, 59 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/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>
     );