aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/subscription
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/subscription')
-rw-r--r--src/components/subscription/SubscriptionForm.js78
-rw-r--r--src/components/subscription/SubscriptionPopup.js84
-rw-r--r--src/components/subscription/TrialForm.js115
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 @@
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl';
5import injectSheet from 'react-jss';
6
7import { H3, H2 } from '@meetfranz/ui';
8
9import { Button } from '@meetfranz/forms';
10import { FeatureList } from '../ui/FeatureList';
11
12const 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
31const styles = () => ({
32 activateTrialButton: {
33 margin: [40, 'auto', 50],
34 display: 'flex',
35 },
36});
37
38export 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 @@
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl';
5import Webview from 'react-electron-web-view';
6import ms from 'ms';
7
8import Button from '../ui/Button';
9
10const messages = defineMessages({
11 buttonCancel: {
12 id: 'subscriptionPopup.buttonCancel',
13 defaultMessage: '!!!Cancel',
14 },
15 buttonDone: {
16 id: 'subscriptionPopup.buttonDone',
17 defaultMessage: '!!!Done',
18 },
19});
20
21export 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 @@
1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl';
5import injectSheet from 'react-jss';
6
7import { H3, H2 } from '@meetfranz/ui';
8
9import { Button } from '@meetfranz/forms';
10import { FeatureList } from '../ui/FeatureList';
11import { FeatureItem } from '../ui/FeatureItem';
12
13const 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
44const 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
60export 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}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-11 09:44:29 +0000