polishing

2 files changed, 136 insertions, 16 deletions

diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 990ee52e7..51a3f375d 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -5,10 +5,14 @@ import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
 
+import { Badge } from '@meetfranz/ui';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import globalMessages from '../../../i18n/globalMessages';
+import ActivateTrialButton from '../../ui/ActivateTrialButton';
+import UpgradeButton from '../../ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -40,6 +44,7 @@ const messages = defineMessages({
 const styles = {
   cta: {
     margin: [40, 'auto'],
+    height: 'auto',
   },
   container: {
     display: 'flex',
@@ -69,6 +74,17 @@ const styles = {
       order: 1,
     },
   },
+  headline: {
+    marginBottom: 0,
+  },
+  proRequired: {
+    margin: [10, 0, 40],
+    height: 'auto',
+  },
+  buttonContainer: {
+    display: 'flex',
+    height: 'auto',
+  },
 };
 
 
@@ -79,6 +95,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     retryUserInfoRequest: PropTypes.func.isRequired,
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
+    isProUser: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -91,6 +108,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       userInfoRequestFailed,
       retryUserInfoRequest,
       openTeamManagement,
+      isProUser,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -123,23 +141,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             <>
               {!isLoading && (
                 <>
-                  <PremiumFeatureContainer>
-                    <>
-                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                  <>
+                    <h1 className={classes.headline}>{intl.formatMessage(messages.contentHeadline)}</h1>
+                    {!isProUser && (
+                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                    )}
+                    <div className={classes.container}>
+                      <div className={classes.content}>
+                        <p>{intl.formatMessage(messages.intro)}</p>
+                        <p>{intl.formatMessage(messages.copy)}</p>
                       </div>
-                    </>
-                  </PremiumFeatureContainer>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                    </div>
+                    <div className={classes.buttonContainer}>
+                      {!isProUser ? (
+                        <UpgradeButton
+                          className={classes.cta}
+                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                          requiresPro
+                          short
+                        />
+                      ) : (
+                        <Button
+                          label={intl.formatMessage(messages.manageButton)}
+                          onClick={openTeamManagement}
+                          className={classes.cta}
+                        />
+                      )}
+                    </div>
+                  </>
                 </>
               )}
             </>
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
new file mode 100644
index 000000000..4aa494e38
--- /dev/null
+++ b/src/components/ui/UpgradeButton/index.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+import ActivateTrialButton from '../ActivateTrialButton';
+
+const messages = defineMessages({
+  upgradeToPro: {
+    id: 'global.upgradeButton.upgradeToPro',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class UpgradeButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+    requiresPro: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    gaEventInfo: null,
+    requiresPro: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, gaEventInfo } = this.props;
+
+    actions.ui.openSettings({ path: 'user' });
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, 'Upgrade Account');
+    }
+  }
+
+  render() {
+    const { stores, requiresPro } = this.props;
+    const { intl } = this.context;
+
+    const { isPremium, isPersonal } = stores.user;
+
+    if (isPremium && isPersonal && requiresPro) {
+      return (
+        <Button
+          label={intl.formatMessage(messages.upgradeToPro)}
+          onClick={this.handleCTAClick.bind(this)}
+          className={this.props.className}
+          buttonType="inverted"
+        />
+      );
+    }
+
+    if (!isPremium) {
+      return <ActivateTrialButton {...this.props} />;
+    }
+
+    return null;
+  }
+}
+
+export default UpgradeButton;
+
+UpgradeButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};