Add trial onboarding during signup

4 files changed, 341 insertions, 110 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 7ab14f429..d20779025 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -1,40 +1,107 @@
 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 { Link } from 'react-router';
+import injectSheet from 'react-jss';
+import { H2, Loader } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureItem } from '../ui/FeatureItem';
+import FeatureList from '../ui/FeatureList';
 
-// import Button from '../ui/Button';
-import Loader from '../ui/Loader';
-import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.headline',
-    defaultMessage: '!!!Support Franz',
+    id: 'pricing.trial.headline',
+    defaultMessage: '!!!Franz Professional',
+  },
+  personalOffer: {
+    id: 'pricing.trial.subheadline',
+    defaultMessage: '!!!Your personal welcome offer:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  monthlySupportLabel: {
-    id: 'pricing.support.label',
-    defaultMessage: '!!!Select your support plan',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  submitButtonLabel: {
-    id: 'pricing.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+  activationError: {
+    id: 'pricing.trial.error',
+    defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
-  skipPayment: {
-    id: 'pricing.link.skipPayment',
-    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  ctaAccept: {
+    id: 'pricing.trial.cta.accept',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+  },
+  ctaSkip: {
+    id: 'pricing.trial.cta.skip',
+    defaultMessage: '!!!Continue to Franz',
+  },
+  featuresHeadline: {
+    id: 'pricing.trial.features.headline',
+    defaultMessage: '!!!Franz Professional includes:',
   },
 });
 
-export default @observer class Signup extends Component {
+const styles = theme => ({
+  container: {
+    position: 'relative',
+    marginLeft: -150,
+  },
+  welcomeOffer: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  keyTerms: {
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    zIndex: 20,
+  },
+  featureContainer: {
+    width: 300,
+    position: 'absolute',
+    left: 'calc(100% / 2 + 225px)',
+    top: 155,
+    background: theme.signup.pricing.feature.background,
+    height: 'auto',
+    padding: 20,
+    borderTopRightRadius: theme.borderRadius,
+    borderBottomRightRadius: theme.borderRadius,
+    zIndex: 10,
+  },
+  featureItem: {
+    borderBottom: [1, 'solid', theme.signup.pricing.feature.border],
+  },
+  cta: {
+    marginTop: 40,
+    width: '100%',
+  },
+  skipLink: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  error: {
+    margin: [20, 0, 0],
+    color: theme.styleTypes.danger.accent,
+  },
+});
+
+export default @observer @injectSheet(styles) class Signup extends Component {
   static propTypes = {
-    donor: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    isLoadingUser: PropTypes.bool.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    skipAction: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isLoadingRequiredData: PropTypes.bool.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    trialActivationError: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -43,70 +110,37 @@ export default @observer class Signup extends Component {
 
   render() {
     const {
-      donor,
-      isLoading,
-      isLoadingUser,
-      onCloseSubscriptionWindow,
-      skipAction,
+      onSubmit,
+      isLoadingRequiredData,
+      isActivatingTrial,
+      trialActivationError,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
+      <div className={classnames('auth__scroll-container', classes.container)}>
+        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
           <form className="franz-form auth__form">
-            <img
-              src="./assets/images/sm.png"
-              className="auth__logo auth__logo--sm"
-              alt=""
-            />
+            {isLoadingRequiredData ? <Loader /> : (
+              <img
+                src="./assets/images/sm.png"
+                className="auth__logo auth__logo--sm"
+                alt=""
+              />
+            )}
+            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
             <h1>{intl.formatMessage(messages.headline)}</h1>
             <div className="auth__letter">
-              {isLoadingUser && (
-                <p>Loading</p>
-              )}
-              {!isLoadingUser && (
-                donor.amount ? (
-                  <span>
-                    <p>
-                      Thank you so much for your previous donation of
-                      {' '}
-                      <strong>
-                        $
-                        {donor.amount}
-                      </strong>
-                      .
-                      <br />
-                      Your support allowed us to get where we are today.
-                      <br />
-                    </p>
-                    <p>
-                      As an early supporter, you get
-                      {' '}
-                      <strong>a lifetime premium supporter license</strong>
-                      {' '}
-                      without any
-                      additional charges.
-                    </p>
-                    <p>
-                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br />
-                      <br />
-                    </p>
-                  </span>
-                ) : (
-                  <span>
-                    <p>
-                      We built Franz with a lot of effort, manpower and love,
-                      to bring you the best messaging experience.
-                      <br />
-                    </p>
-                    <p>
-                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
-                    </p>
-                  </span>
-                )
-              )}
+              <p>
+                We built Franz with a lot of effort, manpower and love,
+                to boost up your messaging experience.
+                <br />
+              </p>
+              <p>
+                Get the free 14 day Franz Professional trial and see your communication evolving.
+                <br />
+              </p>
               <p>
                 Thanks for being a hero.
               </p>
@@ -114,20 +148,48 @@ export default @observer class Signup extends Component {
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
-            <Loader loaded={!isLoading}>
-              <Appear transitionName="slideDown">
-                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
-                <SubscriptionForm
-                  onCloseWindow={onCloseSubscriptionWindow}
-                  showSkipOption
-                  skipAction={skipAction}
-                  hideInfo={Boolean(donor.amount)}
-                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
-                />
-              </Appear>
-            </Loader>
+            <div className={classes.keyTerms}>
+              <H2>
+                {intl.formatMessage(messages.noStringsAttachedHeadline)}
+              </H2>
+              <ul className={classes.keyTermsList}>
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+              </ul>
+            </div>
+            {trialActivationError && (
+              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            )}
+            <Button
+              label={intl.formatMessage(messages.ctaAccept)}
+              className={classes.cta}
+              onClick={onSubmit}
+              busy={isActivatingTrial}
+              disabled={isLoadingRequiredData || isActivatingTrial}
+            />
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
           </form>
         </div>
+        <div className={classes.featureContainer}>
+          <H2>
+            {intl.formatMessage(messages.featuresHeadline)}
+          </H2>
+          {/* <ul className={classes.features}>
+            <FeatureItem name="Add unlimited services" className={classes.featureItem} />
+            <FeatureItem name="Spellchecker support" className={classes.featureItem} />
+            <FeatureItem name="Workspaces" className={classes.featureItem} />
+            <FeatureItem name="Add Custom Websites" className={classes.featureItem} />
+            <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} />
+            <FeatureItem name="Install 3rd party services" className={classes.featureItem} />
+            <FeatureItem name="Service Proxies" className={classes.featureItem} />
+            <FeatureItem name="Team Management" className={classes.featureItem} />
+            <FeatureItem name="No Waiting Screens" className={classes.featureItem} />
+            <FeatureItem name="Forever ad-free" className={classes.featureItem} />
+          </ul> */}
+          <FeatureList />
+        </div>
       </div>
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 48de0ebaa..7f1624003 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -18,7 +21,16 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 0,
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -28,6 +40,8 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -38,6 +52,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -48,29 +74,47 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
 
     return (
       <div className="services">
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
-            <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
-              <h1>{intl.formatMessage(messages.welcome)}</h1>
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
-                </Link>
-              </Appear>
-            </div>
-          </Appear>
+          <>
+            {userHasCompletedSignup && (
+              <div className={classes.confettiContainer}>
+                <Confetti
+                  width={window.width}
+                  height={window.height}
+                  numberOfPieces={showConfetti ? 200 : 0}
+                />
+              </div>
+            )}
+            <Appear
+              timeout={1500}
+              transitionName="slideUp"
+            >
+              <div className="services__no-service">
+                <img src="./assets/images/logo.svg" alt="" />
+                <h1>{intl.formatMessage(messages.welcome)}</h1>
+                <Appear
+                  timeout={300}
+                  transitionName="slideUp"
+                >
+                  <Link to="/settings/recipes" className="button">
+                    {intl.formatMessage(messages.getStarted)}
+                  </Link>
+                </Appear>
+              </div>
+            </Appear>
+          </>
         )}
         {services.map(service => (
           <ServiceView
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
new file mode 100644
index 000000000..a63f5f7b5
--- /dev/null
+++ b/src/components/ui/FeatureItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  featureItem: {
+    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    padding: [8, 0],
+    display: 'flex',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    fill: theme.brandSuccess,
+    marginRight: 10,
+  },
+});
+
+export const FeatureItem = injectSheet(styles)(({
+  classes, className, name, icon,
+}) => (
+  <li className={classnames({
+    [classes.featureItem]: true,
+    [className]: className,
+  })}
+  >
+    {icon ? (
+      <span className={classes.featureIcon}>{icon}</span>
+    ) : (
+      <Icon icon="mdiCheckCircle" className={classes.featureIcon} size={1.5} />
+    )}
+    {name}
+  </li>
+));
+
+export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
new file mode 100644
index 000000000..62944ad75
--- /dev/null
+++ b/src/components/ui/FeatureList.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { FeatureItem } from './FeatureItem';
+
+const messages = defineMessages({
+  unlimitedServices: {
+    id: 'pricing.features.unlimitedServices',
+    defaultMessage: '!!!Add unlimited services',
+  },
+  spellchecker: {
+    id: 'pricing.features.spellchecker',
+    defaultMessage: '!!!Spellchecker support',
+  },
+  workspaces: {
+    id: 'pricing.features.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  customWebsites: {
+    id: 'pricing.features.customWebsites',
+    defaultMessage: '!!!Add Custom Websites',
+  },
+  onPremise: {
+    id: 'pricing.features.onPremise',
+    defaultMessage: '!!!On-premise & other Hosted Services',
+  },
+  thirdPartyServices: {
+    id: 'pricing.features.thirdPartyServices',
+    defaultMessage: '!!!Install 3rd party services',
+  },
+  serviceProxies: {
+    id: 'pricing.features.serviceProxies',
+    defaultMessage: '!!!Service Proxies',
+  },
+  teamManagement: {
+    id: 'pricing.features.teamManagement',
+    defaultMessage: '!!!Team Management',
+  },
+  appDelays: {
+    id: 'pricing.features.appDelays',
+    defaultMessage: '!!!No Waiting Screens',
+  },
+  adFree: {
+    id: 'pricing.features.adFree',
+    defaultMessage: '!!!Forever ad-free',
+  },
+});
+
+export class FeatureList extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    featureClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    featureClassName: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      className,
+      featureClassName,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <ul className={className}>
+        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} />
+      </ul>
+    );
+  }
+}
+
+export default FeatureList;