1 files changed, 45 insertions, 181 deletions

diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 8c7dceece..cdfbbe60d 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,214 +1,78 @@
-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, H2 } from '@meetfranz/ui';
 
-import { required } from '../../helpers/validation-helpers';
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+    id: 'subscription.cta.choosePlan',
+    defaultMessage: '!!!Choose your plan',
   },
-  paymentSessionError: {
-    id: 'subscription.paymentSessionError',
-    defaultMessage: '!!!Could not initialize payment form',
+  teaserHeadline: {
+    id: 'settings.account.headlineUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account and get the full Franz experience',
   },
-  typeFree: {
-    id: 'subscription.type.free',
-    defaultMessage: '!!!free',
-  },
-  typeMonthly: {
-    id: 'subscription.type.month',
-    defaultMessage: '!!!month',
-  },
-  typeYearly: {
-    id: 'subscription.type.year',
-    defaultMessage: '!!!year',
+  teaserText: {
+    id: 'subscription.teaser.intro',
+    defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!',
   },
   includedFeatures: {
-    id: 'subscription.includedFeatures',
-    defaultMessage: '!!!The Ferdi 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',
-  },
-  proxy: {
-    id: 'subscription.features.proxy',
-    defaultMessage: '!!!Proxy support for services',
-  },
-  spellchecker: {
-    id: 'subscription.features.spellchecker',
-    defaultMessage: '!!!Support for Spellchecker',
+    id: 'subscription.teaser.includedFeatures',
+    defaultMessage: '!!!Paid Franz Plans include:',
   },
-  workspaces: {
-    id: 'subscription.features.workspaces',
-    defaultMessage: '!!!Organize your services in workspaces',
-  },
-  ads: {
-    id: 'subscription.features.ads',
-    defaultMessage: '!!!No ads, ever!',
-  },
-  comingSoon: {
-    id: 'subscription.features.comingSoon',
-    defaultMessage: '!!!coming soon',
-  },
-  euTaxInfo: {
-    id: 'subscription.euTaxInfo',
-    defaultMessage: '!!!EU residents: local sales tax may apply',
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
   },
 });
 
-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: '',
+    selectPlan: 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,
+      selectPlan,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
-    if (error) {
-      return (
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <p>{intl.formatMessage(messages.teaserText)}</p>
         <Button
-          label="Reload"
-          onClick={retryPlanRequest}
-          isLoaded={!isLoading}
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={selectPlan}
+          stretch
         />
-      );
-    }
-
-    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>
+        <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>
+      </>
     );
   }
 }