diff options
Diffstat (limited to 'src/features/delayApp/Component.js')
-rw-r--r-- | src/features/delayApp/Component.js | 41 |
1 files changed, 31 insertions, 10 deletions
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js index ba50652e8..c61cb06c9 100644 --- a/src/features/delayApp/Component.js +++ b/src/features/delayApp/Component.js | |||
@@ -4,19 +4,28 @@ import { inject, observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | 6 | ||
7 | import Button from '../../components/ui/Button'; | 7 | import { Button } from '@meetfranz/forms'; |
8 | 8 | ||
9 | import { config } from '.'; | 9 | import { config } from '.'; |
10 | import styles from './styles'; | 10 | import styles from './styles'; |
11 | import UserStore from '../../stores/UserStore'; | ||
11 | 12 | ||
12 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
13 | headline: { | 14 | headline: { |
14 | id: 'feature.delayApp.headline', | 15 | id: 'feature.delayApp.headline', |
15 | defaultMessage: '!!!Please purchase license to skip waiting', | 16 | defaultMessage: '!!!Please purchase license to skip waiting', |
16 | }, | 17 | }, |
18 | headlineTrial: { | ||
19 | id: 'feature.delayApp.trial.headline', | ||
20 | defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line', | ||
21 | }, | ||
17 | action: { | 22 | action: { |
18 | id: 'feature.delayApp.action', | 23 | id: 'feature.delayApp.upgrade.action', |
19 | defaultMessage: '!!!Get a Ferdi Supporter License', | 24 | defaultMessage: '!!!Get a Franz Supporter License', |
25 | }, | ||
26 | actionTrial: { | ||
27 | id: 'feature.delayApp.trial.action', | ||
28 | defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional', | ||
20 | }, | 29 | }, |
21 | text: { | 30 | text: { |
22 | id: 'feature.delayApp.text', | 31 | id: 'feature.delayApp.text', |
@@ -24,7 +33,7 @@ const messages = defineMessages({ | |||
24 | }, | 33 | }, |
25 | }); | 34 | }); |
26 | 35 | ||
27 | export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component { | 36 | export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component { |
28 | static propTypes = { | 37 | static propTypes = { |
29 | // eslint-disable-next-line | 38 | // eslint-disable-next-line |
30 | classes: PropTypes.object.isRequired, | 39 | classes: PropTypes.object.isRequired, |
@@ -60,23 +69,32 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp | |||
60 | } | 69 | } |
61 | 70 | ||
62 | handleCTAClick() { | 71 | handleCTAClick() { |
63 | const { actions } = this.props; | 72 | const { actions, stores } = this.props; |
64 | 73 | const { hadSubscription } = stores.user.data; | |
65 | actions.ui.openSettings({ path: 'user' }); | 74 | const { defaultTrialPlan } = stores.features.features; |
75 | |||
76 | if (!hadSubscription) { | ||
77 | actions.user.activateTrial({ planId: defaultTrialPlan }); | ||
78 | } else { | ||
79 | actions.ui.openSettings({ path: 'user' }); | ||
80 | } | ||
66 | } | 81 | } |
67 | 82 | ||
68 | render() { | 83 | render() { |
69 | const { classes } = this.props; | 84 | const { classes, stores } = this.props; |
70 | const { intl } = this.context; | 85 | const { intl } = this.context; |
71 | 86 | ||
87 | const { hadSubscription } = stores.user.data; | ||
88 | |||
72 | return ( | 89 | return ( |
73 | <div className={`${classes.container}`}> | 90 | <div className={`${classes.container}`}> |
74 | <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1> | 91 | <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1> |
75 | <Button | 92 | <Button |
76 | label={intl.formatMessage(messages.action)} | 93 | label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)} |
77 | className={classes.button} | 94 | className={classes.button} |
78 | buttonType="inverted" | 95 | buttonType="inverted" |
79 | onClick={this.handleCTAClick.bind(this)} | 96 | onClick={this.handleCTAClick.bind(this)} |
97 | busy={stores.user.activateTrialRequest.isExecuting} | ||
80 | /> | 98 | /> |
81 | <p className="footnote"> | 99 | <p className="footnote"> |
82 | {intl.formatMessage(messages.text, { | 100 | {intl.formatMessage(messages.text, { |
@@ -89,6 +107,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp | |||
89 | } | 107 | } |
90 | 108 | ||
91 | DelayApp.wrappedComponent.propTypes = { | 109 | DelayApp.wrappedComponent.propTypes = { |
110 | stores: PropTypes.shape({ | ||
111 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
112 | }).isRequired, | ||
92 | actions: PropTypes.shape({ | 113 | actions: PropTypes.shape({ |
93 | ui: PropTypes.shape({ | 114 | ui: PropTypes.shape({ |
94 | openSettings: PropTypes.func.isRequired, | 115 | openSettings: PropTypes.func.isRequired, |