3 files changed, 134 insertions, 220 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index d20779025..cbeaaa5d9 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
 
 import { Button } from '@meetfranz/forms';
 import { FeatureItem } from '../ui/FeatureItem';
-import FeatureList from '../ui/FeatureList';
+import { FeatureList } from '../ui/FeatureList';
 
 
 const messages = defineMessages({
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 0366dc1ee..079d50380 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,14 +1,18 @@
-import React, { Component, Fragment } from 'react';
+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 { ProBadge } from '@meetfranz/ui';
+import {
+  ProBadge, H2, H1, H3,
+} from '@meetfranz/ui';
+import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -20,8 +24,8 @@ const messages = defineMessages({
     defaultMessage: '!!!Your Subscription',
   },
   headlineUpgrade: {
-    id: 'settings.account.headlineUpgrade',
-    defaultMessage: '!!!Upgrade your Account',
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
   },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
@@ -71,6 +75,22 @@ const messages = defineMessages({
     id: 'settings.account.deleteEmailSent',
     defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
+  trial: {
+    id: 'settings.account.trial',
+    defaultMessage: '!!!Free Trial',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: '!!!Your license:',
+  },
+  trialEndsIn: {
+    id: 'settings.account.trialEndsIn',
+    defaultMessage: '!!!Your free trial ends in {duration}.',
+  },
+  trialUpdateBillingInformation: {
+    id: 'settings.account.trialUpdateBillingInfo',
+    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
 });
 
 export default @observer class AccountDashboard extends Component {
@@ -110,6 +130,13 @@ export default @observer class AccountDashboard extends Component {
     } = this.props;
     const { intl } = this.context;
 
+    let planName = '';
+
+    if (user.team && user.team.plan) {
+      planName = i18nPlanName(user.team.plan, intl);
+      console.log(planName);
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -147,7 +174,7 @@ export default @observer class AccountDashboard extends Component {
                         />
                       </div>
                       <div className="account__info">
-                        <h2>
+                        <H1>
                           <span className="username">{`${user.firstname} ${user.lastname}`}</span>
                           {user.isPremium && (
                             <>
@@ -156,7 +183,7 @@ export default @observer class AccountDashboard extends Component {
                               {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */}
                             </>
                           )}
-                        </h2>
+                        </H1>
                         <p>
                           {user.organization && `${user.organization}, `}
                           {user.email}
@@ -197,54 +224,61 @@ export default @observer class AccountDashboard extends Component {
                   {user.isSubscriptionOwner && (
                     <div className="account">
                       <div className="account__box">
-                        <h2>
-                          Your license: {user.team.plan}
-                        </h2>
+                        <H2>
+                          {intl.formatMessage(messages.yourLicense)}
+                        </H2>
+                        <H3>
+                          {planName}
+                          {user.team.isTrial && (
+                            <>
+                              {' – '}
+                              {intl.formatMessage(messages.trial)}
+                            </>
+                          )}
+                        </H3>
                         {user.team.isTrial && (
                           <>
                             <p>
-                              Trial ends in 14 days
+                              {intl.formatMessage(messages.trialEndsIn, {
+                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
+                              })}
+                            </p>
+                            <p>
+                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
+                                license: planName,
+                              })}
                             </p>
                           </>
                         )}
-                        {user.isPremium && (
-                          <div className="manage-user-links">
-                            <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 className="manage-user-links">
+                          <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>
                     </div>
                   )}
-                </>
-              )}
-
-              {!user.isPremium && (
-                isLoadingPlans ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    <div className="account__box">
-                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
-                      <SubscriptionForm
-                        onCloseWindow={onCloseSubscriptionWindow}
-                      />
+                  {!user.isPremium && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2>
+                        <SubscriptionForm />
+                      </div>
                     </div>
-                  </div>
-                )
+                  )}
+                </>
               )}
 
               <div className="account franz-form">
                 <div className="account__box">
-                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
                   {!isDeleteAccountSuccessful && (
                   <div className="account__subscription">
                     <p>{intl.formatMessage(messages.deleteInfo)}</p>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 50f1e0522..0c630f047 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,214 +1,94 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
 
-import Form from '../../lib/Form';
-import Radio from '../ui/Radio';
-import Button from '../ui/Button';
-import Loader from '../ui/Loader';
+import { H3 } from '@meetfranz/ui';
 
-import { required } from '../../helpers/validation-helpers';
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
-  },
-  paymentSessionError: {
-    id: 'subscription.paymentSessionError',
-    defaultMessage: '!!!Could not initialize payment form',
-  },
-  typeFree: {
-    id: 'subscription.type.free',
-    defaultMessage: '!!!free',
-  },
-  typeMonthly: {
-    id: 'subscription.type.month',
-    defaultMessage: '!!!month',
-  },
-  typeYearly: {
-    id: 'subscription.type.year',
-    defaultMessage: '!!!year',
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
   },
   includedFeatures: {
-    id: 'subscription.includedFeatures',
-    defaultMessage: '!!!The Franz Premium Supporter Account includes',
-  },
-  onpremise: {
-    id: 'subscription.features.onpremise.mattermost',
-    defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
-  },
-  noInterruptions: {
-    id: 'subscription.features.noInterruptions',
-    defaultMessage: '!!!No app delays & nagging to upgrade license',
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
   },
-  proxy: {
-    id: 'subscription.features.proxy',
-    defaultMessage: '!!!Proxy support for services',
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
   },
-  spellchecker: {
-    id: 'subscription.features.spellchecker',
-    defaultMessage: '!!!Support for Spellchecker',
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  workspaces: {
-    id: 'subscription.features.workspaces',
-    defaultMessage: '!!!Organize your services in workspaces',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  ads: {
-    id: 'subscription.features.ads',
-    defaultMessage: '!!!No ads, ever!',
-  },
-  comingSoon: {
-    id: 'subscription.features.comingSoon',
-    defaultMessage: '!!!coming soon',
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
   },
-  euTaxInfo: {
-    id: 'subscription.euTaxInfo',
-    defaultMessage: '!!!EU residents: local sales tax may apply',
+  keyTerms: {
+    marginTop: 20,
   },
 });
 
-export default @observer class SubscriptionForm extends Component {
+export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    plan: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    handlePayment: PropTypes.func.isRequired,
-    retryPlanRequest: PropTypes.func.isRequired,
-    isCreatingHostedPage: PropTypes.bool.isRequired,
-    error: PropTypes.bool.isRequired,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
-  componentWillMount() {
-    this.form = this.prepareForm();
-  }
-
-  prepareForm() {
-    const { intl } = this.context;
-
-    const form = {
-      fields: {
-        paymentTier: {
-          value: 'year',
-          validators: [required],
-          options: [{
-            value: 'month',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month')
-              ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}`
-              : 'monthly'}`,
-          }, {
-            value: 'year',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
-              ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
-              : 'yearly'}`,
-          }],
-        },
-      },
-    };
-
-    if (this.props.showSkipOption) {
-      form.fields.paymentTier.options.unshift({
-        value: 'skip',
-        label: `€ 0 / ${intl.formatMessage(messages.typeFree)}`,
-      });
-    }
-
-    return new Form(form, this.context.intl);
-  }
-
   render() {
     const {
-      isLoading,
-      isCreatingHostedPage,
-      handlePayment,
-      retryPlanRequest,
-      error,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
+      isActivatingTrial,
+      activateTrial,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
-    if (error) {
-      return (
-        <Button
-          label="Reload"
-          onClick={retryPlanRequest}
-          isLoaded={!isLoading}
-        />
-      );
-    }
+    console.log('isActivatingTrial', isActivatingTrial);
 
     return (
-      <Loader loaded={!isLoading}>
-        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
-        {!hideInfo && (
-          <div className="subscription__premium-info">
-            <p>
-              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-            </p>
-            <div className="subscription">
-              <ul className="subscription__premium-features">
-                <li>{intl.formatMessage(messages.onpremise)}</li>
-                <li>
-                  {intl.formatMessage(messages.noInterruptions)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.spellchecker)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.proxy)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.workspaces)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.ads)}
-                </li>
-              </ul>
-            </div>
+      <>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
           </div>
-        )}
-        <Fragment>
-          {error.code === 'no-payment-session' && (
-            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
-          )}
-        </Fragment>
-        {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
-          <Button
-            label={skipButtonLabel}
-            className="auth__button"
-            onClick={skipAction}
-          />
-        ) : (
-          <Button
-            label={intl.formatMessage(messages.submitButtonLabel)}
-            className="auth__button"
-            loaded={!isCreatingHostedPage}
-            onClick={() => handlePayment(this.form.$('paymentTier').value)}
-          />
-        )}
-        {this.form.$('paymentTier').value !== 'skip' && (
-          <p className="legal">
-            {intl.formatMessage(messages.euTaxInfo)}
-          </p>
-        )}
-      </Loader>
+        </div>
+      </>
     );
   }
 }