1 files changed, 286 insertions, 0 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
new file mode 100644
index 000000000..75dbdef49
--- /dev/null
+++ b/src/components/settings/account/AccountDashboard.js
@@ -0,0 +1,286 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import moment from 'moment';
+
+import Loader from '../../ui/Loader';
+import Button from '../../ui/Button';
+import Infobox from '../../ui/Infobox';
+import Link from '../../ui/Link';
+import SubscriptionForm from '../../../containers/ui/SubscriptionFormScreen';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.account.headline',
+    defaultMessage: '!!!Account',
+  },
+  headlineSubscription: {
+    id: 'settings.account.headlineSubscription',
+    defaultMessage: '!!!Your Subscription',
+  },
+  headlineUpgrade: {
+    id: 'settings.account.headlineUpgrade',
+    defaultMessage: '!!!Upgrade your Account',
+  },
+  headlineInvoices: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
+  manageSubscriptionButtonLabel: {
+    id: 'settings.account.manageSubscription.label',
+    defaultMessage: '!!!Manage your subscription',
+  },
+  accountTypeBasic: {
+    id: 'settings.account.accountType.basic',
+    defaultMessage: '!!!Basic Account',
+  },
+  accountTypePremium: {
+    id: 'settings.account.accountType.premium',
+    defaultMessage: '!!!Premium Supporter Account',
+  },
+  accountEditButton: {
+    id: 'settings.account.account.editButton',
+    defaultMessage: '!!!Edit Account',
+  },
+  invoiceDownload: {
+    id: 'settings.account.invoiceDownload',
+    defaultMessage: '!!!Download',
+  },
+  userInfoRequestFailed: {
+    id: 'settings.account.userInfoRequestFailed',
+    defaultMessage: '!!!Could not load user information',
+  },
+  tryReloadUserInfoRequest: {
+    id: 'settings.account.tryReloadUserInfoRequest',
+    defaultMessage: '!!!Try again',
+  },
+  miningActive: {
+    id: 'settings.account.mining.active',
+    defaultMessage: '!!!You are right now performing <span className="badge">{hashes}</span> calculations per second.',
+  },
+  miningThankYou: {
+    id: 'settings.account.mining.thankyou',
+    defaultMessage: '!!!Thank you for supporting Franz with your processing power.',
+  },
+  miningMoreInfo: {
+    id: 'settings.account.mining.moreInformation',
+    defaultMessage: '!!!Get more information',
+  },
+  cancelMining: {
+    id: 'settings.account.mining.cancel',
+    defaultMessage: '!!!Cancel mining',
+  },
+});
+
+@observer
+export default class AccountDashboard extends Component {
+  static propTypes = {
+    user: MobxPropTypes.observableObject.isRequired,
+    orders: MobxPropTypes.arrayOrObservableArray.isRequired,
+    hashrate: PropTypes.number.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,
+    stopMiner: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      user,
+      orders,
+      hashrate,
+      isLoading,
+      isCreatingPaymentDashboardUrl,
+      openDashboard,
+      openExternalUrl,
+      isLoadingOrdersInfo,
+      isLoadingPlans,
+      userInfoRequestFailed,
+      retryUserInfoRequest,
+      onCloseSubscriptionWindow,
+      stopMiner,
+    } = 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 && (
+            <div>
+              <Infobox
+                icon="alert"
+                type="danger"
+                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+                ctaLoading={isLoading}
+                ctaOnClick={retryUserInfoRequest}
+              >
+                {intl.formatMessage(messages.userInfoRequestFailed)}
+              </Infobox>
+            </div>
+          )}
+
+          {!userInfoRequestFailed && (
+            <div>
+              {!isLoading && (
+                <div className="account">
+                  <div className="account__box account__box--flex">
+                    <div className="account__avatar">
+                      <img
+                        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}`}
+                      </h2>
+                      {user.organization && `${user.organization}, `}
+                      {user.email}<br />
+                      {!user.isPremium && (
+                        <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
+                      )}
+                      {user.isPremium && (
+                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                      )}
+                    </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 && (
+                      <div>
+                        <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 account__box--last">
+                          <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
+                                      onClick={() => openExternalUrl(order.invoiceUrl)}
+                                    >
+                                      {intl.formatMessage(messages.invoiceDownload)}
+                                    </button>
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )
+              )}
+
+              {user.isMiner && (
+                <div className="account franz-form">
+                  <div className="account__box">
+                    <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
+                    <div className="account__subscription">
+                      <div>
+                        <p>{intl.formatMessage(messages.miningThankYou)}</p>
+                        <FormattedMessage
+                          {...messages.miningActive}
+                          values={{
+                            hashes: <span className="badge">{hashrate.toFixed(2)}</span>,
+                          }}
+                          tagName="p"
+                        />
+                        <p>
+                          <Link
+                            to="http://meetfranz.com/mining"
+                            target="_blank"
+                            className="link"
+                          >
+                            {intl.formatMessage(messages.miningMoreInfo)}
+                          </Link>
+                        </p>
+                      </div>
+                      <Button
+                        label={intl.formatMessage(messages.cancelMining)}
+                        className="account__subscription-button franz-form__button--inverted"
+                        onClick={() => stopMiner()}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {!user.isPremium && !user.isMiner && (
+                isLoadingPlans ? (
+                  <Loader />
+                ) : (
+                  <div className="account franz-form">
+                    <div className="account__box account__box--last">
+                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
+                      <SubscriptionForm
+                        onCloseWindow={onCloseSubscriptionWindow}
+                      />
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </div>
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    );
+  }
+}