diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-23 14:06:39 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-23 14:06:39 +0200 |
commit | c4f369510632704114c3f162ac61b81a47dad7c5 (patch) | |
tree | 95971ba59d701e7b6d5bb31a84fb6a89c725a7e5 /src/features/planSelection/components | |
parent | Remove analytics event in componentDidMount (diff) | |
download | ferdium-app-c4f369510632704114c3f162ac61b81a47dad7c5.tar.gz ferdium-app-c4f369510632704114c3f162ac61b81a47dad7c5.tar.zst ferdium-app-c4f369510632704114c3f162ac61b81a47dad7c5.zip |
Add price disclaimer
Diffstat (limited to 'src/features/planSelection/components')
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 46 |
1 files changed, 36 insertions, 10 deletions
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index aff6bf94f..b6bb9d32d 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js | |||
@@ -6,7 +6,7 @@ import { defineMessages, intlShape } from 'react-intl'; | |||
6 | import { H1, H2, Icon } from '@meetfranz/ui'; | 6 | import { H1, H2, Icon } from '@meetfranz/ui'; |
7 | import color from 'color'; | 7 | import color from 'color'; |
8 | 8 | ||
9 | import { mdiRocket } from '@mdi/js'; | 9 | import { mdiRocket, mdiArrowRight } from '@mdi/js'; |
10 | import PlanItem from './PlanItem'; | 10 | import PlanItem from './PlanItem'; |
11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | 11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; |
12 | import { PLANS } from '../../../config'; | 12 | import { PLANS } from '../../../config'; |
@@ -59,6 +59,10 @@ const messages = defineMessages({ | |||
59 | id: 'feature.planSelection.fullFeatureList', | 59 | id: 'feature.planSelection.fullFeatureList', |
60 | defaultMessage: '!!!Complete comparison of all plans', | 60 | defaultMessage: '!!!Complete comparison of all plans', |
61 | }, | 61 | }, |
62 | pricesBasedOnAnnualPayment: { | ||
63 | id: 'feature.planSelection.pricesBasedOnAnnualPayment', | ||
64 | defaultMessage: '!!!All prices based on yearly payment', | ||
65 | }, | ||
62 | }); | 66 | }); |
63 | 67 | ||
64 | const styles = theme => ({ | 68 | const styles = theme => ({ |
@@ -132,11 +136,23 @@ const styles = theme => ({ | |||
132 | borderBottom: [1, 'solid', '#CECECE'], | 136 | borderBottom: [1, 'solid', '#CECECE'], |
133 | }, | 137 | }, |
134 | }, | 138 | }, |
139 | footer: { | ||
140 | display: 'flex', | ||
141 | color: theme.styleTypes.primary.contrast, | ||
142 | marginTop: 20, | ||
143 | padding: [0, 15], | ||
144 | }, | ||
135 | fullFeatureList: { | 145 | fullFeatureList: { |
136 | marginTop: 40, | 146 | marginRight: 'auto', |
137 | textAlign: 'center', | 147 | textAlign: 'center', |
138 | display: 'block', | 148 | display: 'flex', |
149 | justifyContent: 'center', | ||
150 | alignItems: 'center', | ||
139 | color: `${theme.styleTypes.primary.contrast} !important`, | 151 | color: `${theme.styleTypes.primary.contrast} !important`, |
152 | |||
153 | '& svg': { | ||
154 | marginRight: 5, | ||
155 | }, | ||
140 | }, | 156 | }, |
141 | scrollContainer: { | 157 | scrollContainer: { |
142 | border: '1px solid red', | 158 | border: '1px solid red', |
@@ -145,6 +161,10 @@ const styles = theme => ({ | |||
145 | featuredPlan: { | 161 | featuredPlan: { |
146 | transform: 'scale(1.05)', | 162 | transform: 'scale(1.05)', |
147 | }, | 163 | }, |
164 | disclaimer: { | ||
165 | textAlign: 'right', | ||
166 | margin: [10, 15, 0, 0], | ||
167 | }, | ||
148 | }); | 168 | }); |
149 | 169 | ||
150 | @injectSheet(styles) @observer | 170 | @injectSheet(styles) @observer |
@@ -238,13 +258,19 @@ class PlanSelection extends Component { | |||
238 | /> | 258 | /> |
239 | </PlanItem> | 259 | </PlanItem> |
240 | </div> | 260 | </div> |
241 | <a | 261 | <div className={classes.footer}> |
242 | href="https://meetfranz.com/pricing" | 262 | <a |
243 | target="_blank" | 263 | href="https://meetfranz.com/pricing" |
244 | className={classes.fullFeatureList} | 264 | target="_blank" |
245 | > | 265 | className={classes.fullFeatureList} |
246 | {intl.formatMessage(messages.fullFeatureList)} | 266 | > |
247 | </a> | 267 | <Icon icon={mdiArrowRight} /> |
268 | {intl.formatMessage(messages.fullFeatureList)} | ||
269 | </a> | ||
270 | {/* <p className={classes.disclaimer}> */} | ||
271 | {intl.formatMessage(messages.pricesBasedOnAnnualPayment)} | ||
272 | {/* </p> */} | ||
273 | </div> | ||
248 | </div> | 274 | </div> |
249 | </div> | 275 | </div> |
250 | </Appear> | 276 | </Appear> |