3 files changed, 217 insertions, 78 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 181b95c8c..4a73b51d9 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import moment from 'moment';
+import { ProBadge } from '@meetfranz/ui';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import Link from '../../ui/Link';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
@@ -24,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineUpgrade',
     defaultMessage: '!!!Upgrade your Account',
   },
-  headlineInvoices: {
-    id: 'settings.account.headlineInvoices',
-    defaultMessage: '!!Invoices',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -48,6 +43,10 @@ const messages = defineMessages({
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  invoicesButton: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -77,19 +76,17 @@ const messages = defineMessages({
 export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
-    orders: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingOrdersInfo: PropTypes.bool.isRequired,
     isLoadingPlans: PropTypes.bool.isRequired,
-    isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    openDashboard: PropTypes.func.isRequired,
-    openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
+    openEditAccount: PropTypes.func.isRequired,
+    openBilling: PropTypes.func.isRequired,
+    openInvoices: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -99,12 +96,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
-      orders,
       isLoading,
-      isCreatingPaymentDashboardUrl,
-      openDashboard,
-      openExternalUrl,
-      isLoadingOrdersInfo,
       isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -112,6 +104,9 @@ export default @observer class AccountDashboard extends Component {
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
+      openEditAccount,
+      openBilling,
+      openInvoices,
     } = this.props;
     const { intl } = this.context;
 
@@ -149,80 +144,53 @@ export default @observer class AccountDashboard extends Component {
                         src="./assets/images/logo.svg"
                         alt=""
                       />
-                      {user.isPremium && (
-                        <span
-                          className="account__avatar-premium emoji"
-                          data-tip="Premium Supporter Account"
-                        >
-                          <img src="./assets/images/emoji/star.png" alt="" />
-                        </span>
-                      )}
                     </div>
                     <div className="account__info">
                       <h2>
                         {`${user.firstname} ${user.lastname}`}
+                        {user.isPremium && (
+                          <>
+                            {' '}
+                            <ProBadge />
+                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                          </>
+                        )}
                       </h2>
                       {user.organization && `${user.organization}, `}
                       {user.email}
-                      <br />
                       {user.isPremium && (
-                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                        <div className="manage-user-links">
+                          <Button
+                            label={intl.formatMessage(messages.accountEditButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openEditAccount}
+                          />
+                          {user.isSubscriptionOwner && (
+                            <>
+                              <Button
+                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                                className="franz-form__button--inverted"
+                                onClick={openBilling}
+                              />
+                              <Button
+                                label={intl.formatMessage(messages.invoicesButton)}
+                                className="franz-form__button--inverted"
+                                onClick={openInvoices}
+                              />
+                            </>
+                          )}
+                        </div>
                       )}
                     </div>
-                    <Link to="/settings/user/edit" className="button">
-                      {intl.formatMessage(messages.accountEditButton)}
-                    </Link>
-                    {user.emailValidated}
-                  </div>
-                </div>
-              )}
-
-              {user.isSubscriptionOwner && (
-                isLoadingOrdersInfo ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    {orders.length > 0 && (
-                      <Fragment>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
-                          <div className="account__subscription">
-                            {orders[0].name}
-                            <span className="badge">{orders[0].price}</span>
-                            <Button
-                              label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                              className="account__subscription-button franz-form__button--inverted"
-                              loaded={!isCreatingPaymentDashboardUrl}
-                              onClick={() => openDashboard()}
-                            />
-                          </div>
-                        </div>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
-                          <table className="invoices">
-                            <tbody>
-                              {orders.map(order => (
-                                <tr key={order.id}>
-                                  <td className="invoices__date">
-                                    {moment(order.date).format('DD.MM.YYYY')}
-                                  </td>
-                                  <td className="invoices__action">
-                                    <button
-                                      type="button"
-                                      onClick={() => openExternalUrl(order.invoiceUrl)}
-                                    >
-                                      {intl.formatMessage(messages.invoiceDownload)}
-                                    </button>
-                                  </td>
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
-                        </div>
-                      </Fragment>
+                    {!user.isPremium && (
+                      <Button
+                        label={intl.formatMessage(messages.accountEditButton)}
+                        className="franz-form__button--inverted"
+                        onClick={openEditAccount}
+                      />
                     )}
                   </div>
-                )
+                </div>
               )}
 
               {!user.isPremium && (
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 993b0a44a..df4b3b3b2 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -7,6 +7,7 @@ import { ProBadge } from '@meetfranz/ui';
 import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
+import UserStore from '../../../stores/UserStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -25,6 +26,10 @@ const messages = defineMessages({
     id: 'settings.navigation.account',
     defaultMessage: '!!!Account',
   },
+  team: {
+    id: 'settings.navigation.team',
+    defaultMessage: '!!!Manage Team',
+  },
   settings: {
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
@@ -43,6 +48,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   static propTypes = {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
+      user: PropTypes.instanceOf(UserStore).isRequired,
     }).isRequired,
     serviceCount: PropTypes.number.isRequired,
     workspaceCount: PropTypes.number.isRequired,
@@ -55,6 +61,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   render() {
     const { serviceCount, workspaceCount, stores } = this.props;
     const { isDarkThemeActive } = stores.ui;
+    const { router, user } = stores;
     const { intl } = this.context;
 
     return (
@@ -98,6 +105,16 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.account)}
         </Link>
         <Link
+          to="/settings/team"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.team)}
+          {!user.data.isPremium && (
+            <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} />
+          )}
+        </Link>
+        <Link
           to="/settings/app"
           className="settings-navigation__link"
           activeClassName="is-active"
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
new file mode 100644
index 000000000..63381c4ed
--- /dev/null
+++ b/src/components/settings/team/TeamDashboard.js
@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import injectSheet from 'react-jss';
+
+import Loader from '../../ui/Loader';
+import Button from '../../ui/Button';
+import Infobox from '../../ui/Infobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.team.headline',
+    defaultMessage: '!!!Team',
+  },
+  contentHeadline: {
+    id: 'settings.team.contentHeadline',
+    defaultMessage: '!!!Franz for Teams',
+  },
+  intro: {
+    id: 'settings.team.intro',
+    defaultMessage: '!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.',
+  },
+  copy: {
+    id: 'settings.team.copy',
+    defaultMessage: '!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
+  },
+  manageButton: {
+    id: 'settings.team.manageAction',
+    defaultMessage: '!!!Manage your Team on meetfranz.com',
+  },
+  upgradeButton: {
+    id: 'settings.team.upgradeAction',
+    defaultMessage: '!!!Upgrade your Account',
+  },
+});
+
+const styles = {
+  cta: {
+    margin: [40, 'auto'],
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'auto',
+
+    ['@media(min-width: 800px)']: {
+      flexDirection: 'row',
+    },
+  },
+  content: {
+    height: 'auto',
+    order: 1,
+
+    ['@media(min-width: 800px)']: {
+      order: 0,
+    },
+  },
+  image: {
+    display: 'block',
+    height: 150,
+    order: 0,
+    margin: [0, 'auto', 40, 'auto'],
+
+    ['@media(min-width: 800px)']: {
+      marginLeft: 40,
+      order: 1,
+    },
+  }
+};
+
+
+export default @injectSheet(styles) @observer class TeamDashboard extends Component {
+  static propTypes = {
+    user: MobxPropTypes.observableObject.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    userInfoRequestFailed: PropTypes.bool.isRequired,
+    retryUserInfoRequest: PropTypes.func.isRequired,
+    openTeamManagement: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      user,
+      isLoading,
+      userInfoRequestFailed,
+      retryUserInfoRequest,
+      openTeamManagement,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          {isLoading && (
+            <Loader />
+          )}
+
+          {!isLoading && userInfoRequestFailed && (
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
+          )}
+
+          {!userInfoRequestFailed && (
+            <>
+              {!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" />
+                      </div>
+                      <Button
+                        label={intl.formatMessage(messages.manageButton)}
+                        onClick={openTeamManagement}
+                        className={classes.cta}
+                      />
+                    </>
+                  </PremiumFeatureContainer>
+                </>
+              )}
+            </>
+          )}
+        </div>
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    );
+  }
+}