polishing

1 files changed, 46 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>
+                  </>
                 </>
               )}
             </>