aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/auth/Pricing.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/auth/Pricing.js')
-rw-r--r--src/components/auth/Pricing.js270
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 @@
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl';
5import injectSheet from 'react-jss';
6import { H2, Loader } from '@meetfranz/ui';
7import classnames from 'classnames';
8
9import { Button } from '@meetfranz/forms';
10import { FeatureItem } from '../ui/FeatureItem';
11import { FeatureList } from '../ui/FeatureList';
12
13const 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
68const 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
151export 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}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-02 00:44:30 +0000