diff options
Diffstat (limited to 'src/components/auth/Pricing.js')
-rw-r--r-- | src/components/auth/Pricing.js | 270 |
1 files changed, 0 insertions, 270 deletions
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js deleted file mode 100644 index 2fcabe54d..000000000 --- a/src/components/auth/Pricing.js +++ /dev/null | |||
@@ -1,270 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | import { H2, Loader } from '@meetfranz/ui'; | ||
7 | import classnames from 'classnames'; | ||
8 | |||
9 | import { Button } from '@meetfranz/forms'; | ||
10 | import { FeatureItem } from '../ui/FeatureItem'; | ||
11 | import { FeatureList } from '../ui/FeatureList'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | headline: { | ||
15 | id: 'pricing.trial.headline.pro', | ||
16 | defaultMessage: '!!!Hi {name}, welcome to Franz', | ||
17 | }, | ||
18 | specialTreat: { | ||
19 | id: 'pricing.trial.intro.specialTreat', | ||
20 | defaultMessage: '!!!We have a special treat for you.', | ||
21 | }, | ||
22 | tryPro: { | ||
23 | id: 'pricing.trial.intro.tryPro', | ||
24 | defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.', | ||
25 | }, | ||
26 | happyMessaging: { | ||
27 | id: 'pricing.trial.intro.happyMessaging', | ||
28 | defaultMessage: '!!!Happy messaging,', | ||
29 | }, | ||
30 | noStringsAttachedHeadline: { | ||
31 | id: 'pricing.trial.terms.headline', | ||
32 | defaultMessage: '!!!No strings attached', | ||
33 | }, | ||
34 | noCreditCard: { | ||
35 | id: 'pricing.trial.terms.noCreditCard', | ||
36 | defaultMessage: '!!!No credit card required', | ||
37 | }, | ||
38 | automaticTrialEnd: { | ||
39 | id: 'pricing.trial.terms.automaticTrialEnd', | ||
40 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | ||
41 | }, | ||
42 | trialWorth: { | ||
43 | id: 'pricing.trial.terms.trialWorth', | ||
44 | defaultMessage: '!!!Free trial (normally {currency}{price} per month)', | ||
45 | }, | ||
46 | activationError: { | ||
47 | id: 'pricing.trial.error', | ||
48 | defaultMessage: '!!!Sorry, we could not activate your trial!', | ||
49 | }, | ||
50 | ctaAccept: { | ||
51 | id: 'pricing.trial.cta.accept', | ||
52 | defaultMessage: '!!!Start my 14-day Franz Professional Trial ', | ||
53 | }, | ||
54 | ctaStart: { | ||
55 | id: 'pricing.trial.cta.start', | ||
56 | defaultMessage: '!!!Start using Franz', | ||
57 | }, | ||
58 | ctaSkip: { | ||
59 | id: 'pricing.trial.cta.skip', | ||
60 | defaultMessage: '!!!Continue to Ferdi', | ||
61 | }, | ||
62 | featuresHeadline: { | ||
63 | id: 'pricing.trial.features.headline', | ||
64 | defaultMessage: '!!!Franz Professional includes:', | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | const styles = theme => ({ | ||
69 | root: { | ||
70 | width: '500px !important', | ||
71 | textAlign: 'center', | ||
72 | padding: 20, | ||
73 | zIndex: 100, | ||
74 | |||
75 | '& h1': { | ||
76 | }, | ||
77 | }, | ||
78 | container: { | ||
79 | position: 'relative', | ||
80 | marginLeft: -150, | ||
81 | }, | ||
82 | welcomeOffer: { | ||
83 | textAlign: 'center', | ||
84 | fontWeight: 'bold', | ||
85 | marginBottom: '6 !important', | ||
86 | }, | ||
87 | keyTerms: { | ||
88 | textAlign: 'center', | ||
89 | }, | ||
90 | content: { | ||
91 | position: 'relative', | ||
92 | zIndex: 20, | ||
93 | }, | ||
94 | featureContainer: { | ||
95 | width: 300, | ||
96 | position: 'absolute', | ||
97 | left: 'calc(100% / 2 + 250px)', | ||
98 | marginTop: 20, | ||
99 | background: theme.signup.pricing.feature.background, | ||
100 | height: 'auto', | ||
101 | padding: 20, | ||
102 | borderTopRightRadius: theme.borderRadius, | ||
103 | borderBottomRightRadius: theme.borderRadius, | ||
104 | zIndex: 10, | ||
105 | }, | ||
106 | featureItem: { | ||
107 | borderBottom: [1, 'solid', theme.signup.pricing.feature.border], | ||
108 | }, | ||
109 | cta: { | ||
110 | marginTop: 40, | ||
111 | width: '100%', | ||
112 | }, | ||
113 | skipLink: { | ||
114 | textAlign: 'center', | ||
115 | marginTop: 10, | ||
116 | }, | ||
117 | error: { | ||
118 | margin: [20, 0, 0], | ||
119 | color: theme.styleTypes.danger.accent, | ||
120 | }, | ||
121 | priceContainer: { | ||
122 | display: 'flex', | ||
123 | justifyContent: 'space-evenly', | ||
124 | margin: [10, 0, 15], | ||
125 | }, | ||
126 | price: { | ||
127 | '& sup': { | ||
128 | verticalAlign: 14, | ||
129 | fontSize: 20, | ||
130 | }, | ||
131 | }, | ||
132 | figure: { | ||
133 | fontSize: 40, | ||
134 | }, | ||
135 | regularPrice: { | ||
136 | position: 'relative', | ||
137 | |||
138 | '&:before': { | ||
139 | content: '" "', | ||
140 | position: 'absolute', | ||
141 | width: '130%', | ||
142 | height: 1, | ||
143 | top: 14, | ||
144 | left: -12, | ||
145 | borderBottom: [3, 'solid', 'red'], | ||
146 | transform: 'rotateZ(-20deg)', | ||
147 | }, | ||
148 | }, | ||
149 | }); | ||
150 | |||
151 | export default @injectSheet(styles) @observer class Signup extends Component { | ||
152 | static propTypes = { | ||
153 | onSubmit: PropTypes.func.isRequired, | ||
154 | isLoadingRequiredData: PropTypes.bool.isRequired, | ||
155 | isActivatingTrial: PropTypes.bool.isRequired, | ||
156 | trialActivationError: PropTypes.bool.isRequired, | ||
157 | canSkipTrial: PropTypes.bool.isRequired, | ||
158 | classes: PropTypes.object.isRequired, | ||
159 | currency: PropTypes.string.isRequired, | ||
160 | price: PropTypes.number.isRequired, | ||
161 | name: PropTypes.string.isRequired, | ||
162 | }; | ||
163 | |||
164 | static contextTypes = { | ||
165 | intl: intlShape, | ||
166 | }; | ||
167 | |||
168 | render() { | ||
169 | const { | ||
170 | onSubmit, | ||
171 | isLoadingRequiredData, | ||
172 | isActivatingTrial, | ||
173 | trialActivationError, | ||
174 | canSkipTrial, | ||
175 | classes, | ||
176 | currency, | ||
177 | price, | ||
178 | name, | ||
179 | } = this.props; | ||
180 | const { intl } = this.context; | ||
181 | |||
182 | const [intPart, fractionPart] = (price).toString().split('.'); | ||
183 | |||
184 | return ( | ||
185 | <> | ||
186 | <div className={classnames('auth__container', classes.root, classes.container)}> | ||
187 | <form className="franz-form auth__form"> | ||
188 | {isLoadingRequiredData ? <Loader /> : ( | ||
189 | <img | ||
190 | src="./assets/images/sm.png" | ||
191 | className="auth__logo auth__logo--sm" | ||
192 | alt="" | ||
193 | /> | ||
194 | )} | ||
195 | <h1>{intl.formatMessage(messages.headline, { name })}</h1> | ||
196 | <div className="auth__letter"> | ||
197 | <p> | ||
198 | {intl.formatMessage(messages.specialTreat)} | ||
199 | <br /> | ||
200 | </p> | ||
201 | <p> | ||
202 | {intl.formatMessage(messages.tryPro)} | ||
203 | <br /> | ||
204 | </p> | ||
205 | <p> | ||
206 | {intl.formatMessage(messages.happyMessaging)} | ||
207 | </p> | ||
208 | <p> | ||
209 | <strong>Stefan Malzner</strong> | ||
210 | </p> | ||
211 | </div> | ||
212 | <div className={classes.priceContainer}> | ||
213 | <p className={classnames(classes.price, classes.regularPrice)}> | ||
214 | <span className={classes.figure}> | ||
215 | {currency} | ||
216 | {intPart} | ||
217 | </span> | ||
218 | <sup>{fractionPart}</sup> | ||
219 | </p> | ||
220 | <p className={classnames(classes.price, classes.trialPrice)}> | ||
221 | <span className={classes.figure}> | ||
222 | {currency} | ||
223 | 0 | ||
224 | </span> | ||
225 | <sup>00</sup> | ||
226 | </p> | ||
227 | </div> | ||
228 | <div className={classes.keyTerms}> | ||
229 | <H2> | ||
230 | {intl.formatMessage(messages.noStringsAttachedHeadline)} | ||
231 | </H2> | ||
232 | <ul className={classes.keyTermsList}> | ||
233 | <FeatureItem | ||
234 | icon="👉" | ||
235 | name={intl.formatMessage(messages.trialWorth, { | ||
236 | currency, | ||
237 | price, | ||
238 | })} | ||
239 | /> | ||
240 | <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} /> | ||
241 | <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} /> | ||
242 | </ul> | ||
243 | </div> | ||
244 | {trialActivationError && ( | ||
245 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> | ||
246 | )} | ||
247 | <Button | ||
248 | label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)} | ||
249 | className={classes.cta} | ||
250 | onClick={onSubmit} | ||
251 | busy={isActivatingTrial} | ||
252 | disabled={isLoadingRequiredData || isActivatingTrial} | ||
253 | /> | ||
254 | {canSkipTrial && ( | ||
255 | <p className={classes.skipLink}> | ||
256 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> | ||
257 | </p> | ||
258 | )} | ||
259 | </form> | ||
260 | </div> | ||
261 | <div className={classes.featureContainer}> | ||
262 | <H2> | ||
263 | {intl.formatMessage(messages.featuresHeadline)} | ||
264 | </H2> | ||
265 | <FeatureList /> | ||
266 | </div> | ||
267 | </> | ||
268 | ); | ||
269 | } | ||
270 | } | ||