diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-17 14:12:36 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-17 14:12:36 +0200 |
commit | b6276bd0cb88ce681bc35a6fc7b1ae0cf6ac56ea (patch) | |
tree | 7070d5c2fd4a3d98d63d0c85171d85dba77102c5 /src/components | |
parent | polishing (diff) | |
download | ferdium-app-b6276bd0cb88ce681bc35a6fc7b1ae0cf6ac56ea.tar.gz ferdium-app-b6276bd0cb88ce681bc35a6fc7b1ae0cf6ac56ea.tar.zst ferdium-app-b6276bd0cb88ce681bc35a6fc7b1ae0cf6ac56ea.zip |
optimize trial signup flow
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/auth/Pricing.js | 92 |
1 files changed, 68 insertions, 24 deletions
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js index 67af04470..86b6a4263 100644 --- a/src/components/auth/Pricing.js +++ b/src/components/auth/Pricing.js | |||
@@ -13,12 +13,20 @@ import { FeatureList } from '../ui/FeatureList'; | |||
13 | 13 | ||
14 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
15 | headline: { | 15 | headline: { |
16 | id: 'pricing.trial.headline', | 16 | id: 'pricing.trial.headline.pro', |
17 | defaultMessage: '!!!Franz Professional', | 17 | defaultMessage: '!!!Hi {name}, welcome to Franz', |
18 | }, | 18 | }, |
19 | personalOffer: { | 19 | specialTreat: { |
20 | id: 'pricing.trial.subheadline', | 20 | id: 'pricing.trial.intro.specialTreat', |
21 | defaultMessage: '!!!Here\'s a special welcome for you:', | 21 | defaultMessage: '!!!We have a special treat for you.', |
22 | }, | ||
23 | tryPro: { | ||
24 | id: 'pricing.trial.intro.tryPro', | ||
25 | defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.', | ||
26 | }, | ||
27 | happyMessaging: { | ||
28 | id: 'pricing.trial.intro.happyMessaging', | ||
29 | defaultMessage: '!!!Happy messaging,', | ||
22 | }, | 30 | }, |
23 | noStringsAttachedHeadline: { | 31 | noStringsAttachedHeadline: { |
24 | id: 'pricing.trial.terms.headline', | 32 | id: 'pricing.trial.terms.headline', |
@@ -44,6 +52,10 @@ const messages = defineMessages({ | |||
44 | id: 'pricing.trial.cta.accept', | 52 | id: 'pricing.trial.cta.accept', |
45 | defaultMessage: '!!!Start my 14-day Franz Professional Trial ', | 53 | defaultMessage: '!!!Start my 14-day Franz Professional Trial ', |
46 | }, | 54 | }, |
55 | ctaStart: { | ||
56 | id: 'pricing.trial.cta.start', | ||
57 | defaultMessage: '!!!Start using Franz', | ||
58 | }, | ||
47 | ctaSkip: { | 59 | ctaSkip: { |
48 | id: 'pricing.trial.cta.skip', | 60 | id: 'pricing.trial.cta.skip', |
49 | defaultMessage: '!!!Continue to Franz', | 61 | defaultMessage: '!!!Continue to Franz', |
@@ -98,6 +110,34 @@ const styles = theme => ({ | |||
98 | margin: [20, 0, 0], | 110 | margin: [20, 0, 0], |
99 | color: theme.styleTypes.danger.accent, | 111 | color: theme.styleTypes.danger.accent, |
100 | }, | 112 | }, |
113 | priceContainer: { | ||
114 | display: 'flex', | ||
115 | justifyContent: 'space-evenly', | ||
116 | margin: [10, 0, 15], | ||
117 | }, | ||
118 | price: { | ||
119 | '& sup': { | ||
120 | verticalAlign: 14, | ||
121 | fontSize: 20, | ||
122 | }, | ||
123 | }, | ||
124 | figure: { | ||
125 | fontSize: 40, | ||
126 | }, | ||
127 | regularPrice: { | ||
128 | position: 'relative', | ||
129 | |||
130 | '&:before': { | ||
131 | content: '" "', | ||
132 | position: 'absolute', | ||
133 | width: '130%', | ||
134 | height: 1, | ||
135 | top: 14, | ||
136 | left: -12, | ||
137 | borderBottom: [3, 'solid', 'red'], | ||
138 | transform: 'rotateZ(-20deg)', | ||
139 | }, | ||
140 | }, | ||
101 | }); | 141 | }); |
102 | 142 | ||
103 | export default @observer @injectSheet(styles) class Signup extends Component { | 143 | export default @observer @injectSheet(styles) class Signup extends Component { |
@@ -129,6 +169,8 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
129 | } = this.props; | 169 | } = this.props; |
130 | const { intl } = this.context; | 170 | const { intl } = this.context; |
131 | 171 | ||
172 | const [intPart, fractionPart] = (price).toString().split('.'); | ||
173 | |||
132 | return ( | 174 | return ( |
133 | <div className={classnames('auth__scroll-container', classes.container)}> | 175 | <div className={classnames('auth__scroll-container', classes.container)}> |
134 | <div className={classnames('auth__container', 'auth__container--signup', classes.content)}> | 176 | <div className={classnames('auth__container', 'auth__container--signup', classes.content)}> |
@@ -140,25 +182,39 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
140 | alt="" | 182 | alt="" |
141 | /> | 183 | /> |
142 | )} | 184 | )} |
143 | <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p> | 185 | <h1>{intl.formatMessage(messages.headline, { name: 'Stefan' })}</h1> |
144 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
145 | <div className="auth__letter"> | 186 | <div className="auth__letter"> |
146 | <p> | 187 | <p> |
147 | We built Franz with a lot of effort, manpower and love, | 188 | {intl.formatMessage(messages.specialTreat)} |
148 | to boost up your messaging experience. | ||
149 | <br /> | 189 | <br /> |
150 | </p> | 190 | </p> |
151 | <p> | 191 | <p> |
152 | For the next 14 days, we are going to give you the full Franz Professional experience so you can watch your communication evolve! | 192 | {intl.formatMessage(messages.tryPro)} |
153 | <br /> | 193 | <br /> |
154 | </p> | 194 | </p> |
155 | <p> | 195 | <p> |
156 | Thanks for being a hero. | 196 | {intl.formatMessage(messages.happyMessaging)} |
157 | </p> | 197 | </p> |
158 | <p> | 198 | <p> |
159 | <strong>Stefan Malzner</strong> | 199 | <strong>Stefan Malzner</strong> |
160 | </p> | 200 | </p> |
161 | </div> | 201 | </div> |
202 | <div className={classes.priceContainer}> | ||
203 | <p className={classnames(classes.price, classes.regularPrice)}> | ||
204 | <span className={classes.figure}> | ||
205 | {currency} | ||
206 | {intPart} | ||
207 | </span> | ||
208 | <sup>{fractionPart}</sup> | ||
209 | </p> | ||
210 | <p className={classnames(classes.price, classes.trialPrice)}> | ||
211 | <span className={classes.figure}> | ||
212 | {currency} | ||
213 | 0 | ||
214 | </span> | ||
215 | <sup>00</sup> | ||
216 | </p> | ||
217 | </div> | ||
162 | <div className={classes.keyTerms}> | 218 | <div className={classes.keyTerms}> |
163 | <H2> | 219 | <H2> |
164 | {intl.formatMessage(messages.noStringsAttachedHeadline)} | 220 | {intl.formatMessage(messages.noStringsAttachedHeadline)} |
@@ -179,7 +235,7 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
179 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> | 235 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> |
180 | )} | 236 | )} |
181 | <Button | 237 | <Button |
182 | label={intl.formatMessage(messages.ctaAccept)} | 238 | label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)} |
183 | className={classes.cta} | 239 | className={classes.cta} |
184 | onClick={onSubmit} | 240 | onClick={onSubmit} |
185 | busy={isActivatingTrial} | 241 | busy={isActivatingTrial} |
@@ -196,18 +252,6 @@ export default @observer @injectSheet(styles) class Signup extends Component { | |||
196 | <H2> | 252 | <H2> |
197 | {intl.formatMessage(messages.featuresHeadline)} | 253 | {intl.formatMessage(messages.featuresHeadline)} |
198 | </H2> | 254 | </H2> |
199 | {/* <ul className={classes.features}> | ||
200 | <FeatureItem name="Add unlimited services" className={classes.featureItem} /> | ||
201 | <FeatureItem name="Spellchecker support" className={classes.featureItem} /> | ||
202 | <FeatureItem name="Workspaces" className={classes.featureItem} /> | ||
203 | <FeatureItem name="Add Custom Websites" className={classes.featureItem} /> | ||
204 | <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} /> | ||
205 | <FeatureItem name="Install 3rd party services" className={classes.featureItem} /> | ||
206 | <FeatureItem name="Service Proxies" className={classes.featureItem} /> | ||
207 | <FeatureItem name="Team Management" className={classes.featureItem} /> | ||
208 | <FeatureItem name="No Waiting Screens" className={classes.featureItem} /> | ||
209 | <FeatureItem name="Forever ad-free" className={classes.featureItem} /> | ||
210 | </ul> */} | ||
211 | <FeatureList /> | 255 | <FeatureList /> |
212 | </div> | 256 | </div> |
213 | </div> | 257 | </div> |