diff options
Diffstat (limited to 'src/features/planSelection/components')
-rw-r--r-- | src/features/planSelection/components/PlanItem.js | 215 | ||||
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 269 |
2 files changed, 0 insertions, 484 deletions
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js deleted file mode 100644 index e90532dec..000000000 --- a/src/features/planSelection/components/PlanItem.js +++ /dev/null | |||
@@ -1,215 +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 classnames from 'classnames'; | ||
7 | import color from 'color'; | ||
8 | |||
9 | import { H2 } from '@meetfranz/ui'; | ||
10 | |||
11 | import { Button } from '@meetfranz/forms'; | ||
12 | import { mdiArrowRight } from '@mdi/js'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | perMonth: { | ||
16 | id: 'subscription.interval.perMonth', | ||
17 | defaultMessage: '!!!per month', | ||
18 | }, | ||
19 | perMonthPerUser: { | ||
20 | id: 'subscription.interval.perMonthPerUser', | ||
21 | defaultMessage: '!!!per month & user', | ||
22 | }, | ||
23 | bestValue: { | ||
24 | id: 'subscription.bestValue', | ||
25 | defaultMessage: '!!!Best value', | ||
26 | }, | ||
27 | }); | ||
28 | |||
29 | const styles = theme => ({ | ||
30 | root: { | ||
31 | display: 'flex', | ||
32 | flexDirection: 'column', | ||
33 | borderRadius: theme.borderRadius, | ||
34 | flex: 1, | ||
35 | color: theme.styleTypes.primary.accent, | ||
36 | overflow: 'hidden', | ||
37 | textAlign: 'center', | ||
38 | |||
39 | '& h2': { | ||
40 | textAlign: 'center', | ||
41 | marginBottom: 10, | ||
42 | fontSize: 30, | ||
43 | color: theme.styleTypes.primary.contrast, | ||
44 | }, | ||
45 | }, | ||
46 | currency: { | ||
47 | fontSize: 35, | ||
48 | }, | ||
49 | priceWrapper: { | ||
50 | height: 50, | ||
51 | marginBottom: 0, | ||
52 | marginTop: ({ text }) => (!text ? 15 : 0), | ||
53 | }, | ||
54 | price: { | ||
55 | fontSize: 50, | ||
56 | |||
57 | '& sup': { | ||
58 | fontSize: 20, | ||
59 | verticalAlign: 20, | ||
60 | }, | ||
61 | }, | ||
62 | text: { | ||
63 | marginBottom: 'auto', | ||
64 | }, | ||
65 | cta: { | ||
66 | background: theme.styleTypes.primary.accent, | ||
67 | color: theme.styleTypes.primary.contrast, | ||
68 | margin: [30, 'auto', 0, 'auto'], | ||
69 | }, | ||
70 | divider: { | ||
71 | width: 40, | ||
72 | border: 0, | ||
73 | borderTop: [1, 'solid', theme.styleTypes.primary.contrast], | ||
74 | margin: [15, 'auto', 20], | ||
75 | }, | ||
76 | header: { | ||
77 | padding: 20, | ||
78 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), | ||
79 | color: theme.styleTypes.primary.contrast, | ||
80 | position: 'relative', | ||
81 | height: 'auto', | ||
82 | }, | ||
83 | content: { | ||
84 | padding: [10, 20, 20], | ||
85 | background: '#EFEFEF', | ||
86 | display: 'flex', | ||
87 | flexDirection: 'column', | ||
88 | justifyContent: 'space-between', | ||
89 | }, | ||
90 | simpleCTA: { | ||
91 | background: 'none', | ||
92 | color: theme.styleTypes.primary.accent, | ||
93 | |||
94 | '& svg': { | ||
95 | fill: theme.styleTypes.primary.accent, | ||
96 | }, | ||
97 | }, | ||
98 | bestValue: { | ||
99 | background: theme.styleTypes.success.accent, | ||
100 | color: theme.styleTypes.success.contrast, | ||
101 | right: -66, | ||
102 | top: -40, | ||
103 | height: 'auto', | ||
104 | position: 'absolute', | ||
105 | transform: 'rotateZ(45deg)', | ||
106 | textAlign: 'center', | ||
107 | padding: [5, 50], | ||
108 | transformOrigin: 'left bottom', | ||
109 | fontSize: 12, | ||
110 | boxShadow: '0 2px 6px rgba(0,0,0,0.15)', | ||
111 | }, | ||
112 | }); | ||
113 | |||
114 | export default @observer @injectSheet(styles) class PlanItem extends Component { | ||
115 | static propTypes = { | ||
116 | name: PropTypes.string.isRequired, | ||
117 | text: PropTypes.string.isRequired, | ||
118 | price: PropTypes.number.isRequired, | ||
119 | currency: PropTypes.string.isRequired, | ||
120 | upgrade: PropTypes.func.isRequired, | ||
121 | ctaLabel: PropTypes.string.isRequired, | ||
122 | simpleCTA: PropTypes.bool, | ||
123 | perUser: PropTypes.bool, | ||
124 | classes: PropTypes.object.isRequired, | ||
125 | bestValue: PropTypes.bool, | ||
126 | className: PropTypes.string, | ||
127 | children: PropTypes.element, | ||
128 | }; | ||
129 | |||
130 | static defaultProps = { | ||
131 | simpleCTA: false, | ||
132 | perUser: false, | ||
133 | children: null, | ||
134 | bestValue: false, | ||
135 | className: '', | ||
136 | } | ||
137 | |||
138 | static contextTypes = { | ||
139 | intl: intlShape, | ||
140 | }; | ||
141 | |||
142 | render() { | ||
143 | const { | ||
144 | name, | ||
145 | text, | ||
146 | price, | ||
147 | currency, | ||
148 | classes, | ||
149 | upgrade, | ||
150 | ctaLabel, | ||
151 | simpleCTA, | ||
152 | perUser, | ||
153 | bestValue, | ||
154 | className, | ||
155 | children, | ||
156 | } = this.props; | ||
157 | const { intl } = this.context; | ||
158 | |||
159 | const priceParts = `${price}`.split('.'); | ||
160 | |||
161 | return ( | ||
162 | <div className={classnames({ | ||
163 | [classes.root]: true, | ||
164 | [className]: className, | ||
165 | })} | ||
166 | > | ||
167 | <div className={classes.header}> | ||
168 | {bestValue && ( | ||
169 | <div className={classes.bestValue}> | ||
170 | {intl.formatMessage(messages.bestValue)} | ||
171 | </div> | ||
172 | )} | ||
173 | <H2 className={classes.planName}>{name}</H2> | ||
174 | {text && ( | ||
175 | <> | ||
176 | <p className={classes.text}> | ||
177 | {text} | ||
178 | </p> | ||
179 | <hr className={classes.divider} /> | ||
180 | </> | ||
181 | )} | ||
182 | <p className={classes.priceWrapper}> | ||
183 | <span className={classes.currency}>{currency}</span> | ||
184 | <span className={classes.price}> | ||
185 | {priceParts[0]} | ||
186 | <sup>{priceParts[1]}</sup> | ||
187 | </span> | ||
188 | </p> | ||
189 | <p className={classes.interval}> | ||
190 | {intl.formatMessage(perUser ? messages.perMonthPerUser : messages.perMonth)} | ||
191 | </p> | ||
192 | </div> | ||
193 | |||
194 | <div className={classes.content}> | ||
195 | {children} | ||
196 | |||
197 | <Button | ||
198 | className={classnames({ | ||
199 | [classes.cta]: true, | ||
200 | [classes.simpleCTA]: simpleCTA, | ||
201 | })} | ||
202 | icon={simpleCTA ? mdiArrowRight : null} | ||
203 | label={( | ||
204 | <> | ||
205 | {ctaLabel} | ||
206 | </> | ||
207 | )} | ||
208 | onClick={upgrade} | ||
209 | /> | ||
210 | </div> | ||
211 | |||
212 | </div> | ||
213 | ); | ||
214 | } | ||
215 | } | ||
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js deleted file mode 100644 index 819a9df5b..000000000 --- a/src/features/planSelection/components/PlanSelection.js +++ /dev/null | |||
@@ -1,269 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | import { H1, H2, Icon } from '@meetfranz/ui'; | ||
7 | import color from 'color'; | ||
8 | |||
9 | import { mdiArrowRight } from '@mdi/js'; | ||
10 | import PlanItem from './PlanItem'; | ||
11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | ||
12 | import { DEV_API_FRANZ_WEBSITE, PLANS } from '../../../config'; | ||
13 | import { FeatureList } from '../../../components/ui/FeatureList'; | ||
14 | import Appear from '../../../components/ui/effects/Appear'; | ||
15 | |||
16 | const messages = defineMessages({ | ||
17 | welcome: { | ||
18 | id: 'feature.planSelection.fullscreen.welcome', | ||
19 | defaultMessage: '!!!Are you ready to choose, {name}', | ||
20 | }, | ||
21 | subheadline: { | ||
22 | id: 'feature.planSelection.fullscreen.subheadline', | ||
23 | defaultMessage: '!!!It\'s time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.', | ||
24 | }, | ||
25 | textFree: { | ||
26 | id: 'feature.planSelection.free.text', | ||
27 | defaultMessage: '!!!Basic functionality', | ||
28 | }, | ||
29 | textPersonal: { | ||
30 | id: 'feature.planSelection.personal.text', | ||
31 | defaultMessage: '!!!More services, no waiting - ideal for personal use.', | ||
32 | }, | ||
33 | textProfessional: { | ||
34 | id: 'feature.planSelection.pro.text', | ||
35 | defaultMessage: '!!!Unlimited services and professional features for you - and your team.', | ||
36 | }, | ||
37 | ctaStayOnFree: { | ||
38 | id: 'feature.planSelection.cta.stayOnFree', | ||
39 | defaultMessage: '!!!Stay on Free', | ||
40 | }, | ||
41 | ctaDowngradeFree: { | ||
42 | id: 'feature.planSelection.cta.ctaDowngradeFree', | ||
43 | defaultMessage: '!!!Downgrade to Free', | ||
44 | }, | ||
45 | actionTrial: { | ||
46 | id: 'feature.planSelection.cta.trial', | ||
47 | defaultMessage: '!!!Start my free 14-days Trial', | ||
48 | }, | ||
49 | shortActionPersonal: { | ||
50 | id: 'feature.planSelection.cta.upgradePersonal', | ||
51 | defaultMessage: '!!!Choose Personal', | ||
52 | }, | ||
53 | shortActionPro: { | ||
54 | id: 'feature.planSelection.cta.upgradePro', | ||
55 | defaultMessage: '!!!Choose Professional', | ||
56 | }, | ||
57 | fullFeatureList: { | ||
58 | id: 'feature.planSelection.fullFeatureList', | ||
59 | defaultMessage: '!!!Complete comparison of all plans', | ||
60 | }, | ||
61 | pricesBasedOnAnnualPayment: { | ||
62 | id: 'feature.planSelection.pricesBasedOnAnnualPayment', | ||
63 | defaultMessage: '!!!All prices based on yearly payment', | ||
64 | }, | ||
65 | }); | ||
66 | |||
67 | const styles = theme => ({ | ||
68 | root: { | ||
69 | background: theme.colorModalOverlayBackground, | ||
70 | width: '100%', | ||
71 | height: '100%', | ||
72 | position: 'absolute', | ||
73 | top: 0, | ||
74 | left: 0, | ||
75 | display: 'flex', | ||
76 | justifyContent: 'center', | ||
77 | alignItems: 'center', | ||
78 | zIndex: 999999, | ||
79 | overflowY: 'scroll', | ||
80 | }, | ||
81 | container: { | ||
82 | // width: '80%', | ||
83 | height: 'auto', | ||
84 | // background: theme.styleTypes.primary.accent, | ||
85 | // padding: 40, | ||
86 | borderRadius: theme.borderRadius, | ||
87 | maxWidth: 1000, | ||
88 | |||
89 | '& h1, & h2': { | ||
90 | textAlign: 'center', | ||
91 | color: theme.styleTypes.primary.contrast, | ||
92 | }, | ||
93 | }, | ||
94 | plans: { | ||
95 | display: 'flex', | ||
96 | margin: [40, 0, 0], | ||
97 | height: 'auto', | ||
98 | |||
99 | '& > div': { | ||
100 | margin: [0, 15], | ||
101 | flex: 1, | ||
102 | height: 'auto', | ||
103 | background: theme.styleTypes.primary.contrast, | ||
104 | boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()], | ||
105 | }, | ||
106 | }, | ||
107 | headline: { | ||
108 | fontSize: 40, | ||
109 | }, | ||
110 | subheadline: { | ||
111 | maxWidth: 660, | ||
112 | fontSize: 22, | ||
113 | lineHeight: 1.1, | ||
114 | margin: [0, 'auto'], | ||
115 | }, | ||
116 | featureList: { | ||
117 | '& li': { | ||
118 | borderBottom: [1, 'solid', '#CECECE'], | ||
119 | }, | ||
120 | }, | ||
121 | footer: { | ||
122 | display: 'flex', | ||
123 | color: theme.styleTypes.primary.contrast, | ||
124 | marginTop: 20, | ||
125 | padding: [0, 15], | ||
126 | }, | ||
127 | fullFeatureList: { | ||
128 | marginRight: 'auto', | ||
129 | textAlign: 'center', | ||
130 | display: 'flex', | ||
131 | justifyContent: 'center', | ||
132 | alignItems: 'center', | ||
133 | color: `${theme.styleTypes.primary.contrast} !important`, | ||
134 | |||
135 | '& svg': { | ||
136 | marginRight: 5, | ||
137 | }, | ||
138 | }, | ||
139 | scrollContainer: { | ||
140 | border: '1px solid red', | ||
141 | overflow: 'scroll-x', | ||
142 | }, | ||
143 | featuredPlan: { | ||
144 | transform: ({ isPersonalPlanAvailable }) => (isPersonalPlanAvailable ? 'scale(1.05)' : null), | ||
145 | }, | ||
146 | disclaimer: { | ||
147 | textAlign: 'right', | ||
148 | margin: [10, 15, 0, 0], | ||
149 | }, | ||
150 | }); | ||
151 | |||
152 | @injectSheet(styles) @observer | ||
153 | class PlanSelection extends Component { | ||
154 | static propTypes = { | ||
155 | classes: PropTypes.object.isRequired, | ||
156 | firstname: PropTypes.string.isRequired, | ||
157 | plans: PropTypes.object.isRequired, | ||
158 | currency: PropTypes.string.isRequired, | ||
159 | subscriptionExpired: PropTypes.bool.isRequired, | ||
160 | upgradeAccount: PropTypes.func.isRequired, | ||
161 | stayOnFree: PropTypes.func.isRequired, | ||
162 | hadSubscription: PropTypes.bool.isRequired, | ||
163 | isPersonalPlanAvailable: PropTypes.bool, | ||
164 | }; | ||
165 | |||
166 | static defaultProps = { | ||
167 | isPersonalPlanAvailable: true, | ||
168 | } | ||
169 | |||
170 | static contextTypes = { | ||
171 | intl: intlShape, | ||
172 | }; | ||
173 | |||
174 | componentDidMount() { | ||
175 | } | ||
176 | |||
177 | render() { | ||
178 | const { | ||
179 | classes, | ||
180 | firstname, | ||
181 | plans, | ||
182 | currency, | ||
183 | subscriptionExpired, | ||
184 | upgradeAccount, | ||
185 | stayOnFree, | ||
186 | hadSubscription, | ||
187 | isPersonalPlanAvailable, | ||
188 | } = this.props; | ||
189 | |||
190 | const { intl } = this.context; | ||
191 | |||
192 | return ( | ||
193 | <Appear> | ||
194 | <div | ||
195 | className={classes.root} | ||
196 | > | ||
197 | <div className={classes.container}> | ||
198 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> | ||
199 | {isPersonalPlanAvailable && ( | ||
200 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | ||
201 | )} | ||
202 | <div className={classes.plans}> | ||
203 | <PlanItem | ||
204 | name={i18nPlanName(PLANS.FREE, intl)} | ||
205 | text={isPersonalPlanAvailable ? intl.formatMessage(messages.textFree) : null} | ||
206 | price={0} | ||
207 | currency={currency} | ||
208 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} | ||
209 | upgrade={() => stayOnFree()} | ||
210 | simpleCTA | ||
211 | > | ||
212 | <FeatureList | ||
213 | plan={PLANS.FREE} | ||
214 | className={classes.featureList} | ||
215 | /> | ||
216 | </PlanItem> | ||
217 | <PlanItem | ||
218 | name={i18nPlanName(plans.pro.yearly.id, intl)} | ||
219 | text={isPersonalPlanAvailable ? intl.formatMessage(messages.textProfessional) : null} | ||
220 | price={plans.pro.yearly.price} | ||
221 | currency={currency} | ||
222 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | ||
223 | upgrade={() => upgradeAccount(plans.pro.yearly.id)} | ||
224 | className={classes.featuredPlan} | ||
225 | perUser | ||
226 | bestValue={isPersonalPlanAvailable} | ||
227 | > | ||
228 | <FeatureList | ||
229 | plan={isPersonalPlanAvailable ? PLANS.PRO : null} | ||
230 | className={classes.featureList} | ||
231 | /> | ||
232 | </PlanItem> | ||
233 | {isPersonalPlanAvailable && ( | ||
234 | <PlanItem | ||
235 | name={i18nPlanName(plans.personal.yearly.id, intl)} | ||
236 | text={intl.formatMessage(messages.textPersonal)} | ||
237 | price={plans.personal.yearly.price} | ||
238 | currency={currency} | ||
239 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | ||
240 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | ||
241 | > | ||
242 | <FeatureList | ||
243 | plan={PLANS.PERSONAL} | ||
244 | className={classes.featureList} | ||
245 | /> | ||
246 | </PlanItem> | ||
247 | )} | ||
248 | </div> | ||
249 | <div className={classes.footer}> | ||
250 | <a | ||
251 | href={`${DEV_API_FRANZ_WEBSITE}/pricing`} | ||
252 | target="_blank" | ||
253 | className={classes.fullFeatureList} | ||
254 | > | ||
255 | <Icon icon={mdiArrowRight} /> | ||
256 | {intl.formatMessage(messages.fullFeatureList)} | ||
257 | </a> | ||
258 | {/* <p className={classes.disclaimer}> */} | ||
259 | {intl.formatMessage(messages.pricesBasedOnAnnualPayment)} | ||
260 | {/* </p> */} | ||
261 | </div> | ||
262 | </div> | ||
263 | </div> | ||
264 | </Appear> | ||
265 | ); | ||
266 | } | ||
267 | } | ||
268 | |||
269 | export default PlanSelection; | ||