diff options
Diffstat (limited to 'src/features/planSelection/components/PlanSelection.js')
-rw-r--r-- | src/features/planSelection/components/PlanSelection.js | 76 |
1 files changed, 33 insertions, 43 deletions
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index 4bf5238dd..6f0dd30ad 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, mdiArrowRight } from '@mdi/js'; | 9 | import { 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'; |
@@ -79,10 +79,10 @@ const styles = theme => ({ | |||
79 | overflowY: 'scroll', | 79 | overflowY: 'scroll', |
80 | }, | 80 | }, |
81 | container: { | 81 | container: { |
82 | width: '80%', | 82 | // width: '80%', |
83 | height: 'auto', | 83 | height: 'auto', |
84 | background: theme.styleTypes.primary.accent, | 84 | // background: theme.styleTypes.primary.accent, |
85 | padding: 40, | 85 | // padding: 40, |
86 | borderRadius: theme.borderRadius, | 86 | borderRadius: theme.borderRadius, |
87 | maxWidth: 1000, | 87 | maxWidth: 1000, |
88 | 88 | ||
@@ -104,23 +104,6 @@ const styles = theme => ({ | |||
104 | boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()], | 104 | boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()], |
105 | }, | 105 | }, |
106 | }, | 106 | }, |
107 | bigIcon: { | ||
108 | background: theme.styleTypes.danger.accent, | ||
109 | width: 120, | ||
110 | height: 120, | ||
111 | display: 'flex', | ||
112 | alignItems: 'center', | ||
113 | borderRadius: '100%', | ||
114 | justifyContent: 'center', | ||
115 | margin: [-100, 'auto', 20], | ||
116 | |||
117 | '& svg': { | ||
118 | width: '80px !important', | ||
119 | height: '80px !important', | ||
120 | filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))', | ||
121 | fill: theme.styleTypes.danger.contrast, | ||
122 | }, | ||
123 | }, | ||
124 | headline: { | 107 | headline: { |
125 | fontSize: 40, | 108 | fontSize: 40, |
126 | }, | 109 | }, |
@@ -158,7 +141,7 @@ const styles = theme => ({ | |||
158 | overflow: 'scroll-x', | 141 | overflow: 'scroll-x', |
159 | }, | 142 | }, |
160 | featuredPlan: { | 143 | featuredPlan: { |
161 | transform: 'scale(1.05)', | 144 | transform: ({ isPersonalPlanAvailable }) => (isPersonalPlanAvailable ? 'scale(1.05)' : null), |
162 | }, | 145 | }, |
163 | disclaimer: { | 146 | disclaimer: { |
164 | textAlign: 'right', | 147 | textAlign: 'right', |
@@ -177,8 +160,13 @@ class PlanSelection extends Component { | |||
177 | upgradeAccount: PropTypes.func.isRequired, | 160 | upgradeAccount: PropTypes.func.isRequired, |
178 | stayOnFree: PropTypes.func.isRequired, | 161 | stayOnFree: PropTypes.func.isRequired, |
179 | hadSubscription: PropTypes.bool.isRequired, | 162 | hadSubscription: PropTypes.bool.isRequired, |
163 | isPersonalPlanAvailable: PropTypes.bool, | ||
180 | }; | 164 | }; |
181 | 165 | ||
166 | static defaultProps = { | ||
167 | isPersonalPlanAvailable: true, | ||
168 | } | ||
169 | |||
182 | static contextTypes = { | 170 | static contextTypes = { |
183 | intl: intlShape, | 171 | intl: intlShape, |
184 | }; | 172 | }; |
@@ -196,6 +184,7 @@ class PlanSelection extends Component { | |||
196 | upgradeAccount, | 184 | upgradeAccount, |
197 | stayOnFree, | 185 | stayOnFree, |
198 | hadSubscription, | 186 | hadSubscription, |
187 | isPersonalPlanAvailable, | ||
199 | } = this.props; | 188 | } = this.props; |
200 | 189 | ||
201 | const { intl } = this.context; | 190 | const { intl } = this.context; |
@@ -206,15 +195,14 @@ class PlanSelection extends Component { | |||
206 | className={classes.root} | 195 | className={classes.root} |
207 | > | 196 | > |
208 | <div className={classes.container}> | 197 | <div className={classes.container}> |
209 | <div className={classes.bigIcon}> | ||
210 | <Icon icon={mdiRocket} /> | ||
211 | </div> | ||
212 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> | 198 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> |
213 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | 199 | {isPersonalPlanAvailable && ( |
200 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | ||
201 | )} | ||
214 | <div className={classes.plans}> | 202 | <div className={classes.plans}> |
215 | <PlanItem | 203 | <PlanItem |
216 | name={i18nPlanName(PLANS.FREE, intl)} | 204 | name={i18nPlanName(PLANS.FREE, intl)} |
217 | text={intl.formatMessage(messages.textFree)} | 205 | text={isPersonalPlanAvailable ? intl.formatMessage(messages.textFree) : null} |
218 | price={0} | 206 | price={0} |
219 | currency={currency} | 207 | currency={currency} |
220 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} | 208 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} |
@@ -228,33 +216,35 @@ class PlanSelection extends Component { | |||
228 | </PlanItem> | 216 | </PlanItem> |
229 | <PlanItem | 217 | <PlanItem |
230 | name={i18nPlanName(plans.pro.yearly.id, intl)} | 218 | name={i18nPlanName(plans.pro.yearly.id, intl)} |
231 | text={intl.formatMessage(messages.textProfessional)} | 219 | text={isPersonalPlanAvailable ? intl.formatMessage(messages.textProfessional) : null} |
232 | price={plans.pro.yearly.price} | 220 | price={plans.pro.yearly.price} |
233 | currency={currency} | 221 | currency={currency} |
234 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | 222 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} |
235 | upgrade={() => upgradeAccount(plans.pro.yearly.id)} | 223 | upgrade={() => upgradeAccount(plans.pro.yearly.id)} |
236 | className={classes.featuredPlan} | 224 | className={classes.featuredPlan} |
237 | perUser | 225 | perUser |
238 | bestValue | 226 | bestValue={isPersonalPlanAvailable} |
239 | > | ||
240 | <FeatureList | ||
241 | plan={PLANS.PRO} | ||
242 | className={classes.featureList} | ||
243 | /> | ||
244 | </PlanItem> | ||
245 | <PlanItem | ||
246 | name={i18nPlanName(plans.personal.yearly.id, intl)} | ||
247 | text={intl.formatMessage(messages.textPersonal)} | ||
248 | price={plans.personal.yearly.price} | ||
249 | currency={currency} | ||
250 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | ||
251 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | ||
252 | > | 227 | > |
253 | <FeatureList | 228 | <FeatureList |
254 | plan={PLANS.PERSONAL} | 229 | plan={isPersonalPlanAvailable ? PLANS.PRO : null} |
255 | className={classes.featureList} | 230 | className={classes.featureList} |
256 | /> | 231 | /> |
257 | </PlanItem> | 232 | </PlanItem> |
233 | {isPersonalPlanAvailable && ( | ||
234 | <PlanItem | ||
235 | name={i18nPlanName(plans.personal.yearly.id, intl)} | ||
236 | text={intl.formatMessage(messages.textPersonal)} | ||
237 | price={plans.personal.yearly.price} | ||
238 | currency={currency} | ||
239 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | ||
240 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | ||
241 | > | ||
242 | <FeatureList | ||
243 | plan={PLANS.PERSONAL} | ||
244 | className={classes.featureList} | ||
245 | /> | ||
246 | </PlanItem> | ||
247 | )} | ||
258 | </div> | 248 | </div> |
259 | <div className={classes.footer}> | 249 | <div className={classes.footer}> |
260 | <a | 250 | <a |