diff options
Diffstat (limited to 'src/features/planSelection/components/PlanItem.js')
-rw-r--r-- | src/features/planSelection/components/PlanItem.js | 50 |
1 files changed, 35 insertions, 15 deletions
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js index a49cd40d3..ea04c8448 100644 --- a/src/features/planSelection/components/PlanItem.js +++ b/src/features/planSelection/components/PlanItem.js | |||
@@ -10,10 +10,6 @@ import { H2 } from '@meetfranz/ui'; | |||
10 | 10 | ||
11 | import { Button } from '@meetfranz/forms'; | 11 | import { Button } from '@meetfranz/forms'; |
12 | import { mdiArrowRight } from '@mdi/js'; | 12 | import { mdiArrowRight } from '@mdi/js'; |
13 | // import { FeatureList } from '../ui/FeatureList'; | ||
14 | // import { PLANS, PAYMENT_INTERVAL } from '../../config'; | ||
15 | // import { i18nPlanName, i18nIntervalName } from '../../helpers/plan-helpers'; | ||
16 | // import { PLAN_INTERVAL_CONFIG_TYPE } from './types'; | ||
17 | 13 | ||
18 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
19 | perMonth: { | 15 | perMonth: { |
@@ -24,6 +20,10 @@ const messages = defineMessages({ | |||
24 | id: 'subscription.interval.perMonthPerUser', | 20 | id: 'subscription.interval.perMonthPerUser', |
25 | defaultMessage: '!!!per month & user', | 21 | defaultMessage: '!!!per month & user', |
26 | }, | 22 | }, |
23 | bestValue: { | ||
24 | id: 'subscription.bestValue', | ||
25 | defaultMessage: '!!!Best value', | ||
26 | }, | ||
27 | }); | 27 | }); |
28 | 28 | ||
29 | const styles = theme => ({ | 29 | const styles = theme => ({ |
@@ -41,7 +41,6 @@ const styles = theme => ({ | |||
41 | marginBottom: 20, | 41 | marginBottom: 20, |
42 | fontSize: 30, | 42 | fontSize: 30, |
43 | color: theme.styleTypes.primary.contrast, | 43 | color: theme.styleTypes.primary.contrast, |
44 | // fontWeight: 'bold', | ||
45 | }, | 44 | }, |
46 | }, | 45 | }, |
47 | currency: { | 46 | currency: { |
@@ -58,9 +57,6 @@ const styles = theme => ({ | |||
58 | verticalAlign: 20, | 57 | verticalAlign: 20, |
59 | }, | 58 | }, |
60 | }, | 59 | }, |
61 | interval: { | ||
62 | // paddingBottom: 40, | ||
63 | }, | ||
64 | text: { | 60 | text: { |
65 | marginBottom: 'auto', | 61 | marginBottom: 'auto', |
66 | }, | 62 | }, |
@@ -68,10 +64,6 @@ const styles = theme => ({ | |||
68 | background: theme.styleTypes.primary.accent, | 64 | background: theme.styleTypes.primary.accent, |
69 | color: theme.styleTypes.primary.contrast, | 65 | color: theme.styleTypes.primary.contrast, |
70 | margin: [40, 'auto', 0, 'auto'], | 66 | margin: [40, 'auto', 0, 'auto'], |
71 | |||
72 | // '&:active': { | ||
73 | // opacity: 0.7, | ||
74 | // }, | ||
75 | }, | 67 | }, |
76 | divider: { | 68 | divider: { |
77 | width: 40, | 69 | width: 40, |
@@ -83,10 +75,10 @@ const styles = theme => ({ | |||
83 | padding: 20, | 75 | padding: 20, |
84 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), | 76 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), |
85 | color: theme.styleTypes.primary.contrast, | 77 | color: theme.styleTypes.primary.contrast, |
78 | position: 'relative', | ||
86 | }, | 79 | }, |
87 | content: { | 80 | content: { |
88 | padding: 20, | 81 | padding: 20, |
89 | // border: [1, 'solid', 'red'], | ||
90 | background: '#EFEFEF', | 82 | background: '#EFEFEF', |
91 | }, | 83 | }, |
92 | simpleCTA: { | 84 | simpleCTA: { |
@@ -97,6 +89,20 @@ const styles = theme => ({ | |||
97 | fill: theme.styleTypes.primary.accent, | 89 | fill: theme.styleTypes.primary.accent, |
98 | }, | 90 | }, |
99 | }, | 91 | }, |
92 | bestValue: { | ||
93 | background: theme.styleTypes.success.accent, | ||
94 | color: theme.styleTypes.success.contrast, | ||
95 | right: -66, | ||
96 | top: -40, | ||
97 | height: 'auto', | ||
98 | position: 'absolute', | ||
99 | transform: 'rotateZ(45deg)', | ||
100 | textAlign: 'center', | ||
101 | padding: [5, 50], | ||
102 | transformOrigin: 'left bottom', | ||
103 | fontSize: 12, | ||
104 | boxShadow: '0 2px 6px rgba(0,0,0,0.15)', | ||
105 | }, | ||
100 | }); | 106 | }); |
101 | 107 | ||
102 | 108 | ||
@@ -111,6 +117,8 @@ export default @observer @injectSheet(styles) class PlanItem extends Component { | |||
111 | simpleCTA: PropTypes.bool, | 117 | simpleCTA: PropTypes.bool, |
112 | perUser: PropTypes.bool, | 118 | perUser: PropTypes.bool, |
113 | classes: PropTypes.object.isRequired, | 119 | classes: PropTypes.object.isRequired, |
120 | bestValue: PropTypes.bool, | ||
121 | className: PropTypes.string, | ||
114 | children: PropTypes.element, | 122 | children: PropTypes.element, |
115 | }; | 123 | }; |
116 | 124 | ||
@@ -118,6 +126,8 @@ export default @observer @injectSheet(styles) class PlanItem extends Component { | |||
118 | simpleCTA: false, | 126 | simpleCTA: false, |
119 | perUser: false, | 127 | perUser: false, |
120 | children: null, | 128 | children: null, |
129 | bestValue: false, | ||
130 | className: '', | ||
121 | } | 131 | } |
122 | 132 | ||
123 | static contextTypes = { | 133 | static contextTypes = { |
@@ -135,16 +145,26 @@ export default @observer @injectSheet(styles) class PlanItem extends Component { | |||
135 | ctaLabel, | 145 | ctaLabel, |
136 | simpleCTA, | 146 | simpleCTA, |
137 | perUser, | 147 | perUser, |
148 | bestValue, | ||
149 | className, | ||
138 | children, | 150 | children, |
139 | } = this.props; | 151 | } = this.props; |
140 | const { intl } = this.context; | 152 | const { intl } = this.context; |
141 | 153 | ||
142 | const priceParts = `${price}`.split('.'); | 154 | const priceParts = `${price}`.split('.'); |
143 | // const intervalName = i18nIntervalName(PAYMENT_INTERVAL.MONTHLY, intl); | ||
144 | 155 | ||
145 | return ( | 156 | return ( |
146 | <div className={classes.root}> | 157 | <div className={classnames({ |
158 | [classes.root]: true, | ||
159 | [className]: className, | ||
160 | })} | ||
161 | > | ||
147 | <div className={classes.header}> | 162 | <div className={classes.header}> |
163 | {bestValue && ( | ||
164 | <div className={classes.bestValue}> | ||
165 | {intl.formatMessage(messages.bestValue)} | ||
166 | </div> | ||
167 | )} | ||
148 | <H2 className={classes.planName}>{name}</H2> | 168 | <H2 className={classes.planName}>{name}</H2> |
149 | <p className={classes.text}> | 169 | <p className={classes.text}> |
150 | {text} | 170 | {text} |