diff options
Diffstat (limited to 'src/features/planSelection/components/PlanItem.js')
-rw-r--r-- | src/features/planSelection/components/PlanItem.js | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js new file mode 100644 index 000000000..ec061377b --- /dev/null +++ b/src/features/planSelection/components/PlanItem.js | |||
@@ -0,0 +1,207 @@ | |||
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 | }, | ||
53 | price: { | ||
54 | fontSize: 50, | ||
55 | |||
56 | '& sup': { | ||
57 | fontSize: 20, | ||
58 | verticalAlign: 20, | ||
59 | }, | ||
60 | }, | ||
61 | text: { | ||
62 | marginBottom: 'auto', | ||
63 | }, | ||
64 | cta: { | ||
65 | background: theme.styleTypes.primary.accent, | ||
66 | color: theme.styleTypes.primary.contrast, | ||
67 | margin: [40, 'auto', 0, 'auto'], | ||
68 | }, | ||
69 | divider: { | ||
70 | width: 40, | ||
71 | border: 0, | ||
72 | borderTop: [1, 'solid', theme.styleTypes.primary.contrast], | ||
73 | margin: [15, 'auto', 20], | ||
74 | }, | ||
75 | header: { | ||
76 | padding: 20, | ||
77 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), | ||
78 | color: theme.styleTypes.primary.contrast, | ||
79 | position: 'relative', | ||
80 | }, | ||
81 | content: { | ||
82 | padding: [10, 20, 20], | ||
83 | background: '#EFEFEF', | ||
84 | }, | ||
85 | simpleCTA: { | ||
86 | background: 'none', | ||
87 | color: theme.styleTypes.primary.accent, | ||
88 | |||
89 | '& svg': { | ||
90 | fill: theme.styleTypes.primary.accent, | ||
91 | }, | ||
92 | }, | ||
93 | bestValue: { | ||
94 | background: theme.styleTypes.success.accent, | ||
95 | color: theme.styleTypes.success.contrast, | ||
96 | right: -66, | ||
97 | top: -40, | ||
98 | height: 'auto', | ||
99 | position: 'absolute', | ||
100 | transform: 'rotateZ(45deg)', | ||
101 | textAlign: 'center', | ||
102 | padding: [5, 50], | ||
103 | transformOrigin: 'left bottom', | ||
104 | fontSize: 12, | ||
105 | boxShadow: '0 2px 6px rgba(0,0,0,0.15)', | ||
106 | }, | ||
107 | }); | ||
108 | |||
109 | |||
110 | export default @observer @injectSheet(styles) class PlanItem extends Component { | ||
111 | static propTypes = { | ||
112 | name: PropTypes.string.isRequired, | ||
113 | text: PropTypes.string.isRequired, | ||
114 | price: PropTypes.number.isRequired, | ||
115 | currency: PropTypes.string.isRequired, | ||
116 | upgrade: PropTypes.func.isRequired, | ||
117 | ctaLabel: PropTypes.string.isRequired, | ||
118 | simpleCTA: PropTypes.bool, | ||
119 | perUser: PropTypes.bool, | ||
120 | classes: PropTypes.object.isRequired, | ||
121 | bestValue: PropTypes.bool, | ||
122 | className: PropTypes.string, | ||
123 | children: PropTypes.element, | ||
124 | }; | ||
125 | |||
126 | static defaultProps = { | ||
127 | simpleCTA: false, | ||
128 | perUser: false, | ||
129 | children: null, | ||
130 | bestValue: false, | ||
131 | className: '', | ||
132 | } | ||
133 | |||
134 | static contextTypes = { | ||
135 | intl: intlShape, | ||
136 | }; | ||
137 | |||
138 | render() { | ||
139 | const { | ||
140 | name, | ||
141 | text, | ||
142 | price, | ||
143 | currency, | ||
144 | classes, | ||
145 | upgrade, | ||
146 | ctaLabel, | ||
147 | simpleCTA, | ||
148 | perUser, | ||
149 | bestValue, | ||
150 | className, | ||
151 | children, | ||
152 | } = this.props; | ||
153 | const { intl } = this.context; | ||
154 | |||
155 | const priceParts = `${price}`.split('.'); | ||
156 | |||
157 | return ( | ||
158 | <div className={classnames({ | ||
159 | [classes.root]: true, | ||
160 | [className]: className, | ||
161 | })} | ||
162 | > | ||
163 | <div className={classes.header}> | ||
164 | {bestValue && ( | ||
165 | <div className={classes.bestValue}> | ||
166 | {intl.formatMessage(messages.bestValue)} | ||
167 | </div> | ||
168 | )} | ||
169 | <H2 className={classes.planName}>{name}</H2> | ||
170 | <p className={classes.text}> | ||
171 | {text} | ||
172 | </p> | ||
173 | <hr className={classes.divider} /> | ||
174 | <p className={classes.priceWrapper}> | ||
175 | <span className={classes.currency}>{currency}</span> | ||
176 | <span className={classes.price}> | ||
177 | {priceParts[0]} | ||
178 | <sup>{priceParts[1]}</sup> | ||
179 | </span> | ||
180 | </p> | ||
181 | <p className={classes.interval}> | ||
182 | {intl.formatMessage(perUser ? messages.perMonthPerUser : messages.perMonth)} | ||
183 | </p> | ||
184 | </div> | ||
185 | |||
186 | <div className={classes.content}> | ||
187 | {children} | ||
188 | |||
189 | <Button | ||
190 | className={classnames({ | ||
191 | [classes.cta]: true, | ||
192 | [classes.simpleCTA]: simpleCTA, | ||
193 | })} | ||
194 | icon={simpleCTA ? mdiArrowRight : null} | ||
195 | label={( | ||
196 | <> | ||
197 | {ctaLabel} | ||
198 | </> | ||
199 | )} | ||
200 | onClick={upgrade} | ||
201 | /> | ||
202 | </div> | ||
203 | |||
204 | </div> | ||
205 | ); | ||
206 | } | ||
207 | } | ||