diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-16 10:22:00 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-16 10:22:00 +0200 |
commit | ba578b8a6df8d31136fb170e78b70a71dad85e31 (patch) | |
tree | a8c980cc83e6014fd7befefd240b8364d40447d3 /src/features/planSelection/components | |
parent | plan selection polishing (diff) | |
download | ferdium-app-ba578b8a6df8d31136fb170e78b70a71dad85e31.tar.gz ferdium-app-ba578b8a6df8d31136fb170e78b70a71dad85e31.tar.zst ferdium-app-ba578b8a6df8d31136fb170e78b70a71dad85e31.zip |
polishing
Diffstat (limited to 'src/features/planSelection/components')
-rw-r--r-- | src/features/planSelection/components/PlanItem.js | 50 | ||||
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 27 |
2 files changed, 51 insertions, 26 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} |
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index 9cd592083..1a45cf035 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js | |||
@@ -137,6 +137,9 @@ const styles = theme => ({ | |||
137 | border: '1px solid red', | 137 | border: '1px solid red', |
138 | overflow: 'scroll-x', | 138 | overflow: 'scroll-x', |
139 | }, | 139 | }, |
140 | featuredPlan: { | ||
141 | transform: 'scale(1.05)', | ||
142 | }, | ||
140 | }); | 143 | }); |
141 | 144 | ||
142 | @injectSheet(styles) @observer | 145 | @injectSheet(styles) @observer |
@@ -197,29 +200,31 @@ class PlanSelection extends Component { | |||
197 | /> | 200 | /> |
198 | </PlanItem> | 201 | </PlanItem> |
199 | <PlanItem | 202 | <PlanItem |
200 | name={i18nPlanName(plans.personal.yearly.id, intl)} | 203 | name={i18nPlanName(plans.pro.yearly.id, intl)} |
201 | text={intl.formatMessage(messages.textPersonal)} | 204 | text={intl.formatMessage(messages.textProfessional)} |
202 | price={plans.personal.yearly.price} | 205 | price={plans.pro.yearly.price} |
203 | currency={currency} | 206 | currency={currency} |
204 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | 207 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} |
205 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 208 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
209 | className={classes.featuredPlan} | ||
210 | perUser | ||
211 | bestValue | ||
206 | > | 212 | > |
207 | <FeatureList | 213 | <FeatureList |
208 | plan={PLANS.PERSONAL} | 214 | plan={PLANS.PRO} |
209 | className={classes.featureList} | 215 | className={classes.featureList} |
210 | /> | 216 | /> |
211 | </PlanItem> | 217 | </PlanItem> |
212 | <PlanItem | 218 | <PlanItem |
213 | name={i18nPlanName(plans.pro.yearly.id, intl)} | 219 | name={i18nPlanName(plans.personal.yearly.id, intl)} |
214 | text={intl.formatMessage(messages.textProfessional)} | 220 | text={intl.formatMessage(messages.textPersonal)} |
215 | price={plans.pro.yearly.price} | 221 | price={plans.personal.yearly.price} |
216 | currency={currency} | 222 | currency={currency} |
217 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | 223 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} |
218 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 224 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
219 | perUser | ||
220 | > | 225 | > |
221 | <FeatureList | 226 | <FeatureList |
222 | plan={PLANS.PRO} | 227 | plan={PLANS.PERSONAL} |
223 | className={classes.featureList} | 228 | className={classes.featureList} |
224 | /> | 229 | /> |
225 | </PlanItem> | 230 | </PlanItem> |