From 268db27162e8d2cd0252b1be9bf69006cf6323ca Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 4 Jul 2019 15:54:27 +0200 Subject: Add trial onboarding during signup --- src/components/auth/Pricing.js | 246 ++++++++++++++++++++++++++--------------- 1 file changed, 154 insertions(+), 92 deletions(-) (limited to 'src/components/auth') 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 ( -
-
+
+
- + {isLoadingRequiredData ? : ( + + )} +

{intl.formatMessage(messages.personalOffer)}

{intl.formatMessage(messages.headline)}

- {isLoadingUser && ( -

Loading

- )} - {!isLoadingUser && ( - donor.amount ? ( - -

- Thank you so much for your previous donation of - {' '} - - $ - {donor.amount} - - . -
- Your support allowed us to get where we are today. -
-

-

- As an early supporter, you get - {' '} - a lifetime premium supporter license - {' '} - without any - additional charges. -

-

- However, If you want to keep supporting us, you are more than welcome to subscribe to a plan. -
-
-

- - ) : ( - -

- We built Franz with a lot of effort, manpower and love, - to bring you the best messaging experience. -
-

-

- Getting a Franz Premium Supporter License will allow us to keep improving Franz for you. -

- - ) - )} +

+ We built Franz with a lot of effort, manpower and love, + to boost up your messaging experience. +
+

+

+ Get the free 14 day Franz Professional trial and see your communication evolving. +
+

Thanks for being a hero.

@@ -114,20 +148,48 @@ export default @observer class Signup extends Component { Stefan Malzner

- - - {intl.formatMessage(messages.monthlySupportLabel)} - - - +
+

+ {intl.formatMessage(messages.noStringsAttachedHeadline)} +

+
    + + +
+
+ {trialActivationError && ( +

{intl.formatMessage(messages.activationError)}

+ )} +
+
+

+ {intl.formatMessage(messages.featuresHeadline)} +

+ {/*
    + + + + + + + + + + +
*/} + +
); } -- cgit v1.2.3-54-g00ecf