diff options
Diffstat (limited to 'src/components/auth/Pricing.js')
-rw-r--r-- | src/components/auth/Pricing.js | 122 |
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'; | |||
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: '!!!Your personal welcome offer:', | 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', |
@@ -32,13 +40,21 @@ const messages = defineMessages({ | |||
32 | id: 'pricing.trial.terms.automaticTrialEnd', | 40 | id: 'pricing.trial.terms.automaticTrialEnd', |
33 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | 41 | defaultMessage: '!!!Your free trial ends automatically after 14 days', |
34 | }, | 42 | }, |
43 | trialWorth: { | ||
44 | id: 'pricing.trial.terms.trialWorth', | ||
45 | defaultMessage: '!!!Free trial (normally {currency}{price} per month)', | ||
46 | }, | ||
35 | activationError: { | 47 | activationError: { |
36 | id: 'pricing.trial.error', | 48 | id: 'pricing.trial.error', |
37 | defaultMessage: '!!!Sorry, we could not activate your trial!', | 49 | defaultMessage: '!!!Sorry, we could not activate your trial!', |
38 | }, | 50 | }, |
39 | ctaAccept: { | 51 | ctaAccept: { |
40 | id: 'pricing.trial.cta.accept', | 52 | id: 'pricing.trial.cta.accept', |
41 | defaultMessage: '!!!Yes, upgrade my account to Franz Professional', | 53 | defaultMessage: '!!!Start my 14-day Franz Professional Trial ', |
54 | }, | ||
55 | ctaStart: { | ||
56 | id: 'pricing.trial.cta.start', | ||
57 | defaultMessage: '!!!Start using Franz', | ||
42 | }, | 58 | }, |
43 | ctaSkip: { | 59 | ctaSkip: { |
44 | id: 'pricing.trial.cta.skip', | 60 | id: 'pricing.trial.cta.skip', |
@@ -58,6 +74,7 @@ const styles = theme => ({ | |||
58 | welcomeOffer: { | 74 | welcomeOffer: { |
59 | textAlign: 'center', | 75 | textAlign: 'center', |
60 | fontWeight: 'bold', | 76 | fontWeight: 'bold', |
77 | marginBottom: '6 !important', | ||
61 | }, | 78 | }, |
62 | keyTerms: { | 79 | keyTerms: { |
63 | textAlign: 'center', | 80 | textAlign: 'center', |
@@ -93,6 +110,34 @@ const styles = theme => ({ | |||
93 | margin: [20, 0, 0], | 110 | margin: [20, 0, 0], |
94 | color: theme.styleTypes.danger.accent, | 111 | color: theme.styleTypes.danger.accent, |
95 | }, | 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 | }, | ||
96 | }); | 141 | }); |
97 | 142 | ||
98 | export default @injectSheet(styles) @observer class Signup extends Component { | 143 | export default @injectSheet(styles) @observer class Signup extends Component { |
@@ -101,7 +146,11 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
101 | isLoadingRequiredData: PropTypes.bool.isRequired, | 146 | isLoadingRequiredData: PropTypes.bool.isRequired, |
102 | isActivatingTrial: PropTypes.bool.isRequired, | 147 | isActivatingTrial: PropTypes.bool.isRequired, |
103 | trialActivationError: PropTypes.bool.isRequired, | 148 | trialActivationError: PropTypes.bool.isRequired, |
149 | canSkipTrial: PropTypes.bool.isRequired, | ||
104 | classes: PropTypes.object.isRequired, | 150 | classes: PropTypes.object.isRequired, |
151 | currency: PropTypes.string.isRequired, | ||
152 | price: PropTypes.number.isRequired, | ||
153 | name: PropTypes.string.isRequired, | ||
105 | }; | 154 | }; |
106 | 155 | ||
107 | static contextTypes = { | 156 | static contextTypes = { |
@@ -114,10 +163,16 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
114 | isLoadingRequiredData, | 163 | isLoadingRequiredData, |
115 | isActivatingTrial, | 164 | isActivatingTrial, |
116 | trialActivationError, | 165 | trialActivationError, |
166 | canSkipTrial, | ||
117 | classes, | 167 | classes, |
168 | currency, | ||
169 | price, | ||
170 | name, | ||
118 | } = this.props; | 171 | } = this.props; |
119 | const { intl } = this.context; | 172 | const { intl } = this.context; |
120 | 173 | ||
174 | const [intPart, fractionPart] = (price).toString().split('.'); | ||
175 | |||
121 | return ( | 176 | return ( |
122 | <div className={classnames('auth__scroll-container', classes.container)}> | 177 | <div className={classnames('auth__scroll-container', classes.container)}> |
123 | <div className={classnames('auth__container', 'auth__container--signup', classes.content)}> | 178 | <div className={classnames('auth__container', 'auth__container--signup', classes.content)}> |
@@ -129,30 +184,51 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
129 | alt="" | 184 | alt="" |
130 | /> | 185 | /> |
131 | )} | 186 | )} |
132 | <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p> | 187 | <h1>{intl.formatMessage(messages.headline, { name })}</h1> |
133 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
134 | <div className="auth__letter"> | 188 | <div className="auth__letter"> |
135 | <p> | 189 | <p> |
136 | We built Franz with a lot of effort, manpower and love, | 190 | {intl.formatMessage(messages.specialTreat)} |
137 | to boost up your messaging experience. | ||
138 | <br /> | 191 | <br /> |
139 | </p> | 192 | </p> |
140 | <p> | 193 | <p> |
141 | Get the free 14 day Franz Professional trial and see your communication evolving. | 194 | {intl.formatMessage(messages.tryPro)} |
142 | <br /> | 195 | <br /> |
143 | </p> | 196 | </p> |
144 | <p> | 197 | <p> |
145 | Thanks for being a hero. | 198 | {intl.formatMessage(messages.happyMessaging)} |
146 | </p> | 199 | </p> |
147 | <p> | 200 | <p> |
148 | <strong>Stefan Malzner</strong> | 201 | <strong>Stefan Malzner</strong> |
149 | </p> | 202 | </p> |
150 | </div> | 203 | </div> |
204 | <div className={classes.priceContainer}> | ||
205 | <p className={classnames(classes.price, classes.regularPrice)}> | ||
206 | <span className={classes.figure}> | ||
207 | {currency} | ||
208 | {intPart} | ||
209 | </span> | ||
210 | <sup>{fractionPart}</sup> | ||
211 | </p> | ||
212 | <p className={classnames(classes.price, classes.trialPrice)}> | ||
213 | <span className={classes.figure}> | ||
214 | {currency} | ||
215 | 0 | ||
216 | </span> | ||
217 | <sup>00</sup> | ||
218 | </p> | ||
219 | </div> | ||
151 | <div className={classes.keyTerms}> | 220 | <div className={classes.keyTerms}> |
152 | <H2> | 221 | <H2> |
153 | {intl.formatMessage(messages.noStringsAttachedHeadline)} | 222 | {intl.formatMessage(messages.noStringsAttachedHeadline)} |
154 | </H2> | 223 | </H2> |
155 | <ul className={classes.keyTermsList}> | 224 | <ul className={classes.keyTermsList}> |
225 | <FeatureItem | ||
226 | icon="👉" | ||
227 | name={intl.formatMessage(messages.trialWorth, { | ||
228 | currency, | ||
229 | price, | ||
230 | })} | ||
231 | /> | ||
156 | <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} /> | 232 | <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} /> |
157 | <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} /> | 233 | <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} /> |
158 | </ul> | 234 | </ul> |
@@ -161,33 +237,23 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
161 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> | 237 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> |
162 | )} | 238 | )} |
163 | <Button | 239 | <Button |
164 | label={intl.formatMessage(messages.ctaAccept)} | 240 | label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)} |
165 | className={classes.cta} | 241 | className={classes.cta} |
166 | onClick={onSubmit} | 242 | onClick={onSubmit} |
167 | busy={isActivatingTrial} | 243 | busy={isActivatingTrial} |
168 | disabled={isLoadingRequiredData || isActivatingTrial} | 244 | disabled={isLoadingRequiredData || isActivatingTrial} |
169 | /> | 245 | /> |
170 | <p className={classes.skipLink}> | 246 | {canSkipTrial && ( |
171 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> | 247 | <p className={classes.skipLink}> |
172 | </p> | 248 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> |
249 | </p> | ||
250 | )} | ||
173 | </form> | 251 | </form> |
174 | </div> | 252 | </div> |
175 | <div className={classes.featureContainer}> | 253 | <div className={classes.featureContainer}> |
176 | <H2> | 254 | <H2> |
177 | {intl.formatMessage(messages.featuresHeadline)} | 255 | {intl.formatMessage(messages.featuresHeadline)} |
178 | </H2> | 256 | </H2> |
179 | {/* <ul className={classes.features}> | ||
180 | <FeatureItem name="Add unlimited services" className={classes.featureItem} /> | ||
181 | <FeatureItem name="Spellchecker support" className={classes.featureItem} /> | ||
182 | <FeatureItem name="Workspaces" className={classes.featureItem} /> | ||
183 | <FeatureItem name="Add Custom Websites" className={classes.featureItem} /> | ||
184 | <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} /> | ||
185 | <FeatureItem name="Install 3rd party services" className={classes.featureItem} /> | ||
186 | <FeatureItem name="Service Proxies" className={classes.featureItem} /> | ||
187 | <FeatureItem name="Team Management" className={classes.featureItem} /> | ||
188 | <FeatureItem name="No Waiting Screens" className={classes.featureItem} /> | ||
189 | <FeatureItem name="Forever ad-free" className={classes.featureItem} /> | ||
190 | </ul> */} | ||
191 | <FeatureList /> | 257 | <FeatureList /> |
192 | </div> | 258 | </div> |
193 | </div> | 259 | </div> |