diff options
Diffstat (limited to 'src/components/subscription')
-rw-r--r-- | src/components/subscription/SubscriptionForm.js | 78 | ||||
-rw-r--r-- | src/components/subscription/SubscriptionPopup.js | 84 | ||||
-rw-r--r-- | src/components/subscription/TrialForm.js | 115 |
3 files changed, 0 insertions, 277 deletions
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js deleted file mode 100644 index ec486e5d0..000000000 --- a/src/components/subscription/SubscriptionForm.js +++ /dev/null | |||
@@ -1,78 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { H3, H2 } from '@meetfranz/ui'; | ||
8 | |||
9 | import { Button } from '@meetfranz/forms'; | ||
10 | import { FeatureList } from '../ui/FeatureList'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | submitButtonLabel: { | ||
14 | id: 'subscription.cta.choosePlan', | ||
15 | defaultMessage: '!!!Choose your plan', | ||
16 | }, | ||
17 | teaserHeadline: { | ||
18 | id: 'settings.account.headlineUpgradeAccount', | ||
19 | defaultMessage: '!!!Upgrade your account and get the full Franz experience', | ||
20 | }, | ||
21 | teaserText: { | ||
22 | id: 'subscription.teaser.intro', | ||
23 | defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!', | ||
24 | }, | ||
25 | includedFeatures: { | ||
26 | id: 'subscription.teaser.includedFeatures', | ||
27 | defaultMessage: '!!!Paid Franz Plans include:', | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | const styles = () => ({ | ||
32 | activateTrialButton: { | ||
33 | margin: [40, 'auto', 50], | ||
34 | display: 'flex', | ||
35 | }, | ||
36 | }); | ||
37 | |||
38 | export default @injectSheet(styles) @observer class SubscriptionForm extends Component { | ||
39 | static propTypes = { | ||
40 | selectPlan: PropTypes.func.isRequired, | ||
41 | isActivatingTrial: PropTypes.bool.isRequired, | ||
42 | classes: PropTypes.object.isRequired, | ||
43 | }; | ||
44 | |||
45 | static contextTypes = { | ||
46 | intl: intlShape, | ||
47 | }; | ||
48 | |||
49 | render() { | ||
50 | const { | ||
51 | isActivatingTrial, | ||
52 | selectPlan, | ||
53 | classes, | ||
54 | } = this.props; | ||
55 | const { intl } = this.context; | ||
56 | |||
57 | return ( | ||
58 | <> | ||
59 | <H2>{intl.formatMessage(messages.teaserHeadline)}</H2> | ||
60 | <p>{intl.formatMessage(messages.teaserText)}</p> | ||
61 | <Button | ||
62 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
63 | className={classes.activateTrialButton} | ||
64 | busy={isActivatingTrial} | ||
65 | onClick={selectPlan} | ||
66 | /> | ||
67 | <div className="subscription__premium-info"> | ||
68 | <H3> | ||
69 | {intl.formatMessage(messages.includedFeatures)} | ||
70 | </H3> | ||
71 | <div className="subscription"> | ||
72 | <FeatureList /> | ||
73 | </div> | ||
74 | </div> | ||
75 | </> | ||
76 | ); | ||
77 | } | ||
78 | } | ||
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js deleted file mode 100644 index 0df43fd4b..000000000 --- a/src/components/subscription/SubscriptionPopup.js +++ /dev/null | |||
@@ -1,84 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import Webview from 'react-electron-web-view'; | ||
6 | import ms from 'ms'; | ||
7 | |||
8 | import Button from '../ui/Button'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | buttonCancel: { | ||
12 | id: 'subscriptionPopup.buttonCancel', | ||
13 | defaultMessage: '!!!Cancel', | ||
14 | }, | ||
15 | buttonDone: { | ||
16 | id: 'subscriptionPopup.buttonDone', | ||
17 | defaultMessage: '!!!Done', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | export default @observer class SubscriptionPopup extends Component { | ||
22 | static propTypes = { | ||
23 | url: PropTypes.string.isRequired, | ||
24 | closeWindow: PropTypes.func.isRequired, | ||
25 | completeCheck: PropTypes.func.isRequired, | ||
26 | isCompleted: PropTypes.bool.isRequired, | ||
27 | }; | ||
28 | |||
29 | static contextTypes = { | ||
30 | intl: intlShape, | ||
31 | }; | ||
32 | |||
33 | state = { | ||
34 | isFakeLoading: false, | ||
35 | }; | ||
36 | |||
37 | // We delay the window closing a bit in order to give | ||
38 | // the Recurly webhook a few seconds to do it's magic | ||
39 | delayedCloseWindow() { | ||
40 | this.setState({ | ||
41 | isFakeLoading: true, | ||
42 | }); | ||
43 | |||
44 | setTimeout(() => { | ||
45 | this.props.closeWindow(); | ||
46 | }, ms('1s')); | ||
47 | } | ||
48 | |||
49 | render() { | ||
50 | const { | ||
51 | url, closeWindow, completeCheck, isCompleted, | ||
52 | } = this.props; | ||
53 | const { intl } = this.context; | ||
54 | |||
55 | return ( | ||
56 | <div className="subscription-popup"> | ||
57 | <div className="subscription-popup__content"> | ||
58 | <Webview | ||
59 | className="subscription-popup__webview" | ||
60 | autosize | ||
61 | allowpopups | ||
62 | src={encodeURI(url)} | ||
63 | onDidNavigate={completeCheck} | ||
64 | onDidNavigateInPage={completeCheck} | ||
65 | /> | ||
66 | </div> | ||
67 | <div className="subscription-popup__toolbar franz-form"> | ||
68 | <Button | ||
69 | label={intl.formatMessage(messages.buttonCancel)} | ||
70 | buttonType="secondary" | ||
71 | onClick={closeWindow} | ||
72 | disabled={isCompleted} | ||
73 | /> | ||
74 | <Button | ||
75 | label={intl.formatMessage(messages.buttonDone)} | ||
76 | onClick={() => this.delayedCloseWindow()} | ||
77 | disabled={!isCompleted} | ||
78 | loaded={!this.state.isFakeLoading} | ||
79 | /> | ||
80 | </div> | ||
81 | </div> | ||
82 | ); | ||
83 | } | ||
84 | } | ||
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js deleted file mode 100644 index d61b779ed..000000000 --- a/src/components/subscription/TrialForm.js +++ /dev/null | |||
@@ -1,115 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { H3, H2 } from '@meetfranz/ui'; | ||
8 | |||
9 | import { Button } from '@meetfranz/forms'; | ||
10 | import { FeatureList } from '../ui/FeatureList'; | ||
11 | import { FeatureItem } from '../ui/FeatureItem'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | submitButtonLabel: { | ||
15 | id: 'subscription.cta.activateTrial', | ||
16 | defaultMessage: '!!!Yes, start the free Franz Professional trial', | ||
17 | }, | ||
18 | allOptionsButton: { | ||
19 | id: 'subscription.cta.allOptions', | ||
20 | defaultMessage: '!!!See all options', | ||
21 | }, | ||
22 | teaserHeadline: { | ||
23 | id: 'settings.account.headlineTrialUpgrade', | ||
24 | defaultMessage: '!!!Get the free 14 day Franz Professional Trial', | ||
25 | }, | ||
26 | includedFeatures: { | ||
27 | id: 'subscription.includedProFeatures', | ||
28 | defaultMessage: '!!!The Franz Professional Plan includes:', | ||
29 | }, | ||
30 | noStringsAttachedHeadline: { | ||
31 | id: 'pricing.trial.terms.headline', | ||
32 | defaultMessage: '!!!No strings attached', | ||
33 | }, | ||
34 | noCreditCard: { | ||
35 | id: 'pricing.trial.terms.noCreditCard', | ||
36 | defaultMessage: '!!!No credit card required', | ||
37 | }, | ||
38 | automaticTrialEnd: { | ||
39 | id: 'pricing.trial.terms.automaticTrialEnd', | ||
40 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | ||
41 | }, | ||
42 | }); | ||
43 | |||
44 | const styles = theme => ({ | ||
45 | activateTrialButton: { | ||
46 | margin: [40, 'auto', 10], | ||
47 | display: 'flex', | ||
48 | }, | ||
49 | allOptionsButton: { | ||
50 | margin: [0, 0, 40], | ||
51 | background: 'none', | ||
52 | border: 'none', | ||
53 | color: theme.colorText, | ||
54 | }, | ||
55 | keyTerms: { | ||
56 | marginTop: 20, | ||
57 | }, | ||
58 | }); | ||
59 | |||
60 | export default @injectSheet(styles) @observer class TrialForm extends Component { | ||
61 | static propTypes = { | ||
62 | activateTrial: PropTypes.func.isRequired, | ||
63 | isActivatingTrial: PropTypes.bool.isRequired, | ||
64 | showAllOptions: PropTypes.func.isRequired, | ||
65 | classes: PropTypes.object.isRequired, | ||
66 | }; | ||
67 | |||
68 | static contextTypes = { | ||
69 | intl: intlShape, | ||
70 | }; | ||
71 | |||
72 | render() { | ||
73 | const { | ||
74 | isActivatingTrial, | ||
75 | activateTrial, | ||
76 | showAllOptions, | ||
77 | classes, | ||
78 | } = this.props; | ||
79 | const { intl } = this.context; | ||
80 | |||
81 | return ( | ||
82 | <> | ||
83 | <H2>{intl.formatMessage(messages.teaserHeadline)}</H2> | ||
84 | <H3 className={classes.keyTerms}> | ||
85 | {intl.formatMessage(messages.noStringsAttachedHeadline)} | ||
86 | </H3> | ||
87 | <ul> | ||
88 | <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} /> | ||
89 | <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} /> | ||
90 | </ul> | ||
91 | |||
92 | <Button | ||
93 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
94 | className={classes.activateTrialButton} | ||
95 | busy={isActivatingTrial} | ||
96 | onClick={activateTrial} | ||
97 | /> | ||
98 | <Button | ||
99 | label={intl.formatMessage(messages.allOptionsButton)} | ||
100 | className={classes.allOptionsButton} | ||
101 | onClick={showAllOptions} | ||
102 | stretch | ||
103 | /> | ||
104 | <div className="subscription__premium-info"> | ||
105 | <H3> | ||
106 | {intl.formatMessage(messages.includedFeatures)} | ||
107 | </H3> | ||
108 | <div className="subscription"> | ||
109 | <FeatureList /> | ||
110 | </div> | ||
111 | </div> | ||
112 | </> | ||
113 | ); | ||
114 | } | ||
115 | } | ||