1 files changed, 64 insertions, 135 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 9c9543749..3f6964b6b 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',
@@ -44,14 +39,14 @@ const messages = defineMessages({
     id: 'settings.account.accountType.premium',
     defaultMessage: '!!!Premium Supporter Account',
   },
-  accountTypeEnterprise: {
-    id: 'settings.account.accountType.enterprise',
-    defaultMessage: '!!!Enterprise Account',
-  },
   accountEditButton: {
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  invoicesButton: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -81,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 = {
@@ -103,12 +96,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
-      orders,
       isLoading,
-      isCreatingPaymentDashboardUrl,
-      openDashboard,
-      openExternalUrl,
-      isLoadingOrdersInfo,
       isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -116,6 +104,9 @@ export default @observer class AccountDashboard extends Component {
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
+      openEditAccount,
+      openBilling,
+      openInvoices,
     } = this.props;
     const { intl } = this.context;
 
@@ -153,116 +144,56 @@ 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}`}
+                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                        {user.isPremium && (
+                          <>
+                            {' '}
+                            <ProBadge />
+                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                          </>
+                        )}
                       </h2>
                       {user.organization && `${user.organization}, `}
                       {user.email}
-                      <br />
-                      {!user.isEnterprise && !user.isPremium && (
-                        <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
-                      )}
                       {user.isPremium && (
-                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
-                      )}
-                      {user.isEnterprise && (
-                        <span className="badge badge--success">{intl.formatMessage(messages.accountTypeEnterprise)}</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>
-                )
-              )}
-
-              {user.isEnterprise && (
-                <div className="account">
-                  <div className="account__box">
-                    <h2>{user.company.name}</h2>
-                    <p>
-                      Technical contact:&nbsp;
-                      <Link
-                        className="link"
-                        target="_blank"
-                        to={`mailto:${user.company.contact.technical}?subject=Franz`}
-                      >
-                        {user.company.contact.technical}
-                      </Link>
-                      <br />
-                      General contact:&nbsp;
-                      <Link
-                        className="link"
-                        target="_blank"
-                        to={`mailto:${user.company.contact.default}?subject=Franz`}
-                      >
-                        {user.company.contact.default}
-                      </Link>
-                    </p>
-                  </div>
                 </div>
               )}
 
-              {!user.isEnterprise && !user.isPremium && (
+              {!user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
                 ) : (
@@ -277,27 +208,25 @@ export default @observer class AccountDashboard extends Component {
                 )
               )}
 
-              {!user.isEnterprise && (
-                <div className="account franz-form">
-                  <div className="account__box">
-                    <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
-                    {!isDeleteAccountSuccessful && (
-                      <div className="account__subscription">
-                        <p>{intl.formatMessage(messages.deleteInfo)}</p>
-                        <Button
-                          label={intl.formatMessage(messages.deleteAccount)}
-                          buttonType="danger"
-                          onClick={() => deleteAccount()}
-                          loaded={!isLoadingDeleteAccount}
-                        />
-                      </div>
-                    )}
-                    {isDeleteAccountSuccessful && (
-                      <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
-                    )}
+              <div className="account franz-form">
+                <div className="account__box">
+                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  {!isDeleteAccountSuccessful && (
+                  <div className="account__subscription">
+                    <p>{intl.formatMessage(messages.deleteInfo)}</p>
+                    <Button
+                      label={intl.formatMessage(messages.deleteAccount)}
+                      buttonType="danger"
+                      onClick={() => deleteAccount()}
+                      loaded={!isLoadingDeleteAccount}
+                    />
                   </div>
+                  )}
+                  {isDeleteAccountSuccessful && (
+                  <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                  )}
                 </div>
-              )}
+              </div>
             </Fragment>
           )}
         </div>