diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-15 22:28:44 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-15 22:28:44 +0200 |
commit | 939c00860ae65231070338b5bc0b09db7af0e149 (patch) | |
tree | 9f9b5f1f84967f1185af7f0848f1142a92f36e42 /src/features/planSelection/components | |
parent | remove console log (diff) | |
download | ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.tar.gz ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.tar.zst ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.zip |
plan selection polishing
Diffstat (limited to 'src/features/planSelection/components')
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 123 |
1 files changed, 65 insertions, 58 deletions
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index d26cc08a2..9cd592083 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js | |||
@@ -11,6 +11,7 @@ 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'; |
13 | import { FeatureList } from '../../../components/ui/FeatureList'; | 13 | import { FeatureList } from '../../../components/ui/FeatureList'; |
14 | import Appear from '../../../components/ui/effects/Appear'; | ||
14 | 15 | ||
15 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
16 | welcome: { | 17 | welcome: { |
@@ -132,6 +133,10 @@ const styles = theme => ({ | |||
132 | display: 'block', | 133 | display: 'block', |
133 | color: `${theme.styleTypes.primary.contrast} !important`, | 134 | color: `${theme.styleTypes.primary.contrast} !important`, |
134 | }, | 135 | }, |
136 | scrollContainer: { | ||
137 | border: '1px solid red', | ||
138 | overflow: 'scroll-x', | ||
139 | }, | ||
135 | }); | 140 | }); |
136 | 141 | ||
137 | @injectSheet(styles) @observer | 142 | @injectSheet(styles) @observer |
@@ -166,67 +171,69 @@ class PlanSelection extends Component { | |||
166 | const { intl } = this.context; | 171 | const { intl } = this.context; |
167 | 172 | ||
168 | return ( | 173 | return ( |
169 | <div | 174 | <Appear> |
170 | className={classes.root} | 175 | <div |
171 | > | 176 | className={classes.root} |
172 | <div className={classes.container}> | 177 | > |
173 | <div className={classes.bigIcon}> | 178 | <div className={classes.container}> |
174 | <Icon icon={mdiRocket} /> | 179 | <div className={classes.bigIcon}> |
175 | </div> | 180 | <Icon icon={mdiRocket} /> |
176 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> | 181 | </div> |
177 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | 182 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> |
178 | <div className={classes.plans}> | 183 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> |
179 | <PlanItem | 184 | <div className={classes.plans}> |
180 | name={i18nPlanName(PLANS.FREE, intl)} | 185 | <PlanItem |
181 | text={intl.formatMessage(messages.textFree)} | 186 | name={i18nPlanName(PLANS.FREE, intl)} |
182 | price={0} | 187 | text={intl.formatMessage(messages.textFree)} |
183 | currency={currency} | 188 | price={0} |
184 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} | 189 | currency={currency} |
185 | upgrade={() => stayOnFree()} | 190 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} |
186 | simpleCTA | 191 | upgrade={() => stayOnFree()} |
187 | > | 192 | simpleCTA |
188 | <FeatureList | 193 | > |
189 | plan={PLANS.FREE} | 194 | <FeatureList |
190 | className={classes.featureList} | 195 | plan={PLANS.FREE} |
191 | /> | 196 | className={classes.featureList} |
192 | </PlanItem> | 197 | /> |
193 | <PlanItem | 198 | </PlanItem> |
194 | name={i18nPlanName(plans.personal.yearly.id, intl)} | 199 | <PlanItem |
195 | text={intl.formatMessage(messages.textPersonal)} | 200 | name={i18nPlanName(plans.personal.yearly.id, intl)} |
196 | price={plans.personal.yearly.price} | 201 | text={intl.formatMessage(messages.textPersonal)} |
197 | currency={currency} | 202 | price={plans.personal.yearly.price} |
198 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | 203 | currency={currency} |
199 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 204 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} |
200 | > | 205 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
201 | <FeatureList | 206 | > |
202 | plan={PLANS.PERSONAL} | 207 | <FeatureList |
203 | className={classes.featureList} | 208 | plan={PLANS.PERSONAL} |
204 | /> | 209 | className={classes.featureList} |
205 | </PlanItem> | 210 | /> |
206 | <PlanItem | 211 | </PlanItem> |
207 | name={i18nPlanName(plans.pro.yearly.id, intl)} | 212 | <PlanItem |
208 | text={intl.formatMessage(messages.textProfessional)} | 213 | name={i18nPlanName(plans.pro.yearly.id, intl)} |
209 | price={plans.pro.yearly.price} | 214 | text={intl.formatMessage(messages.textProfessional)} |
210 | currency={currency} | 215 | price={plans.pro.yearly.price} |
211 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | 216 | currency={currency} |
212 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 217 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} |
213 | perUser | 218 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
219 | perUser | ||
220 | > | ||
221 | <FeatureList | ||
222 | plan={PLANS.PRO} | ||
223 | className={classes.featureList} | ||
224 | /> | ||
225 | </PlanItem> | ||
226 | </div> | ||
227 | <a | ||
228 | href="https://meetfranz.com/pricing" | ||
229 | target="_blank" | ||
230 | className={classes.fullFeatureList} | ||
214 | > | 231 | > |
215 | <FeatureList | 232 | {intl.formatMessage(messages.fullFeatureList)} |
216 | plan={PLANS.PRO} | 233 | </a> |
217 | className={classes.featureList} | ||
218 | /> | ||
219 | </PlanItem> | ||
220 | </div> | 234 | </div> |
221 | <a | ||
222 | href="https://meetfranz.com/pricing" | ||
223 | target="_blank" | ||
224 | className={classes.fullFeatureList} | ||
225 | > | ||
226 | {intl.formatMessage(messages.fullFeatureList)} | ||
227 | </a> | ||
228 | </div> | 235 | </div> |
229 | </div> | 236 | </Appear> |
230 | ); | 237 | ); |
231 | } | 238 | } |
232 | } | 239 | } |