Merge https://github.com/meetfranz/franz into franz-5.4.0-release

1 files changed, 94 insertions, 28 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index aadb18d91..593cb9c4b 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -13,12 +13,20 @@ import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.trial.headline',
-    defaultMessage: '!!!Franz Professional',
+    id: 'pricing.trial.headline.pro',
+    defaultMessage: '!!!Hi {name}, welcome to Franz',
   },
-  personalOffer: {
-    id: 'pricing.trial.subheadline',
-    defaultMessage: '!!!Your personal welcome offer:',
+  specialTreat: {
+    id: 'pricing.trial.intro.specialTreat',
+    defaultMessage: '!!!We have a special treat for you.',
+  },
+  tryPro: {
+    id: 'pricing.trial.intro.tryPro',
+    defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.',
+  },
+  happyMessaging: {
+    id: 'pricing.trial.intro.happyMessaging',
+    defaultMessage: '!!!Happy messaging,',
   },
   noStringsAttachedHeadline: {
     id: 'pricing.trial.terms.headline',
@@ -32,13 +40,21 @@ const messages = defineMessages({
     id: 'pricing.trial.terms.automaticTrialEnd',
     defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
+  trialWorth: {
+    id: 'pricing.trial.terms.trialWorth',
+    defaultMessage: '!!!Free trial (normally {currency}{price} per month)',
+  },
   activationError: {
     id: 'pricing.trial.error',
     defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
   ctaAccept: {
     id: 'pricing.trial.cta.accept',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    defaultMessage: '!!!Start my 14-day Franz Professional Trial ',
+  },
+  ctaStart: {
+    id: 'pricing.trial.cta.start',
+    defaultMessage: '!!!Start using Franz',
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
@@ -58,6 +74,7 @@ const styles = theme => ({
   welcomeOffer: {
     textAlign: 'center',
     fontWeight: 'bold',
+    marginBottom: '6 !important',
   },
   keyTerms: {
     textAlign: 'center',
@@ -93,6 +110,34 @@ const styles = theme => ({
     margin: [20, 0, 0],
     color: theme.styleTypes.danger.accent,
   },
+  priceContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    margin: [10, 0, 15],
+  },
+  price: {
+    '& sup': {
+      verticalAlign: 14,
+      fontSize: 20,
+    },
+  },
+  figure: {
+    fontSize: 40,
+  },
+  regularPrice: {
+    position: 'relative',
+
+    '&:before': {
+      content: '" "',
+      position: 'absolute',
+      width: '130%',
+      height: 1,
+      top: 14,
+      left: -12,
+      borderBottom: [3, 'solid', 'red'],
+      transform: 'rotateZ(-20deg)',
+    },
+  },
 });
 
 export default @injectSheet(styles) @observer class Signup extends Component {
@@ -101,7 +146,11 @@ export default @injectSheet(styles) @observer class Signup extends Component {
     isLoadingRequiredData: PropTypes.bool.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     trialActivationError: PropTypes.bool.isRequired,
+    canSkipTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -114,10 +163,16 @@ export default @injectSheet(styles) @observer class Signup extends Component {
       isLoadingRequiredData,
       isActivatingTrial,
       trialActivationError,
+      canSkipTrial,
       classes,
+      currency,
+      price,
+      name,
     } = this.props;
     const { intl } = this.context;
 
+    const [intPart, fractionPart] = (price).toString().split('.');
+
     return (
       <div className={classnames('auth__scroll-container', classes.container)}>
         <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
@@ -129,30 +184,51 @@ export default @injectSheet(styles) @observer class Signup extends Component {
                 alt=""
               />
             )}
-            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
-            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <h1>{intl.formatMessage(messages.headline, { name })}</h1>
             <div className="auth__letter">
               <p>
-                We built Franz with a lot of effort, manpower and love,
-                to boost up your messaging experience.
+                {intl.formatMessage(messages.specialTreat)}
                 <br />
               </p>
               <p>
-                Get the free 14 day Franz Professional trial and see your communication evolving.
+                {intl.formatMessage(messages.tryPro)}
                 <br />
               </p>
               <p>
-                Thanks for being a hero.
+                {intl.formatMessage(messages.happyMessaging)}
               </p>
               <p>
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
+            <div className={classes.priceContainer}>
+              <p className={classnames(classes.price, classes.regularPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  {intPart}
+                </span>
+                <sup>{fractionPart}</sup>
+              </p>
+              <p className={classnames(classes.price, classes.trialPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  0
+                </span>
+                <sup>00</sup>
+              </p>
+            </div>
             <div className={classes.keyTerms}>
               <H2>
                 {intl.formatMessage(messages.noStringsAttachedHeadline)}
               </H2>
               <ul className={classes.keyTermsList}>
+                <FeatureItem
+                  icon="👉"
+                  name={intl.formatMessage(messages.trialWorth, {
+                    currency,
+                    price,
+                  })}
+                />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
               </ul>
@@ -161,33 +237,23 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
             )}
             <Button
-              label={intl.formatMessage(messages.ctaAccept)}
+              label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
               className={classes.cta}
               onClick={onSubmit}
               busy={isActivatingTrial}
               disabled={isLoadingRequiredData || isActivatingTrial}
             />
-            <p className={classes.skipLink}>
-              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
-            </p>
+            {canSkipTrial && (
+              <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>