1 files changed, 265 insertions, 0 deletions

diff --git a/src/components/ui/Subscription.js b/src/components/ui/Subscription.js
new file mode 100644
index 000000000..ada5cc3e0
--- /dev/null
+++ b/src/components/ui/Subscription.js
@@ -0,0 +1,265 @@
+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 Form from '../../lib/Form';
+import Radio from '../ui/Radio';
+import Button from '../ui/Button';
+import Loader from '../ui/Loader';
+
+import { required } from '../../helpers/validation-helpers';
+
+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',
+  },
+  typeMining: {
+    id: 'subscription.type.mining',
+    defaultMessage: '!!!Support Franz with processing power',
+  },
+  includedFeatures: {
+    id: 'subscription.includedFeatures',
+    defaultMessage: '!!!The Franz Premium Supporter Account includes',
+  },
+  features: {
+    unlimitedServices: {
+      id: 'subscription.features.unlimitedServices',
+      defaultMessage: '!!!Add unlimited services',
+    },
+    onpremise: {
+      id: 'subscription.features.onpremise',
+      defaultMessage: '!!!Add on-premise/hosted services like HipChat',
+    },
+    customServices: {
+      id: 'subscription.features.customServices',
+      defaultMessage: '!!!Add your custom services',
+    },
+    encryptedSync: {
+      id: 'subscription.features.encryptedSync',
+      defaultMessage: '!!!Encrypted session synchronization',
+    },
+    vpn: {
+      id: 'subscription.features.vpn',
+      defaultMessage: '!!!Proxy & VPN support',
+    },
+    ads: {
+      id: 'subscription.features.ads',
+      defaultMessage: '!!!No ads, ever!',
+    },
+    comingSoon: {
+      id: 'subscription.features.comingSoon',
+      defaultMessage: '!!!coming soon',
+    },
+  },
+  miningHeadline: {
+    id: 'subscription.mining.headline',
+    defaultMessage: '!!!How does this work?',
+  },
+  experimental: {
+    id: 'subscription.mining.experimental',
+    defaultMessage: '!!!experimental',
+  },
+  miningDetail1: {
+    id: 'subscription.mining.line1',
+    defaultMessage: '!!!By enabling "Support with processing power", Franz will use about 20-50% of your CPU to mine cryptocurrency Monero which equals approximately $ 5/year.',
+  },
+  miningDetail2: {
+    id: 'subscription.mining.line2',
+    defaultMessage: '!!!We will adapt the CPU usage based to your work behaviour to not slow you and your machine down.',
+  },
+  miningDetail3: {
+    id: 'subscription.mining.line3',
+    defaultMessage: '!!!As long as the miner is active, you will have unlimited access to all the Franz Premium Supporter Features.',
+  },
+  miningMoreInfo: {
+    id: 'subscription.mining.moreInformation',
+    defaultMessage: '!!!Get more information about this plan',
+  },
+});
+
+@observer
+export default 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,
+    openExternalUrl: PropTypes.func.isRequired,
+  };
+
+  static defaultProps ={
+    content: '',
+    showSkipOption: false,
+    skipAction: () => null,
+    skipButtonLabel: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentWillMount() {
+    this.form = this.prepareForm();
+  }
+
+  prepareForm() {
+    const { intl } = this.context;
+
+    const form = {
+      fields: {
+        paymentTier: {
+          value: 'year',
+          validate: [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'}`,
+          }, {
+            value: 'mining',
+            label: intl.formatMessage(messages.typeMining),
+          }],
+        },
+      },
+    };
+
+    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,
+      openExternalUrl,
+    } = this.props;
+    const { intl } = this.context;
+
+    if (error) {
+      return (
+        <Button
+          label="Reload"
+          onClick={retryPlanRequest}
+          isLoaded={!isLoading}
+        />
+      );
+    }
+
+    return (
+      <Loader loaded={!isLoading}>
+        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
+        {!hideInfo && (
+          <div className="subscription__premium-info">
+            {this.form.$('paymentTier').value !== 'mining' && (
+              <div>
+                <p>
+                  <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
+                </p>
+                <div className="subscription">
+                  <ul className="subscription__premium-features">
+                    <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                    <li>
+                      {intl.formatMessage(messages.features.encryptedSync)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.customServices)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.vpn)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.ads)}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+            {this.form.$('paymentTier').value === 'mining' && (
+              <div className="subscription mining-details">
+                <p>
+                  <strong>{intl.formatMessage(messages.miningHeadline)}</strong>
+                  &nbsp;
+                  <span className="badge">{intl.formatMessage(messages.experimental)}</span>
+                </p>
+                <p>{intl.formatMessage(messages.miningDetail1)}</p>
+                <p>{intl.formatMessage(messages.miningDetail2)}</p>
+                <p>{intl.formatMessage(messages.miningDetail3)}</p>
+                <p>
+                  <button
+                    onClick={() => openExternalUrl({ url: 'http://meetfranz.com/mining' })}
+                  >
+                    {intl.formatMessage(messages.miningMoreInfo)}
+                  </button>
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+        <div>
+          {error.code === 'no-payment-session' && (
+            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
+          )}
+        </div>
+        {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)}
+          />
+        )}
+      </Loader>
+    );
+  }
+}