diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-08-19 12:11:38 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-08-19 12:11:38 +0200 |
commit | 478b5fc6574765072eafd4fa074ae832e67627bf (patch) | |
tree | 07dba02a6746685b00106ae2f37b529573876852 /src/components/subscription/TrialForm.js | |
parent | remove monthly & yearly names (diff) | |
download | ferdium-app-478b5fc6574765072eafd4fa074ae832e67627bf.tar.gz ferdium-app-478b5fc6574765072eafd4fa074ae832e67627bf.tar.zst ferdium-app-478b5fc6574765072eafd4fa074ae832e67627bf.zip |
Add trial / subscription handling
Diffstat (limited to 'src/components/subscription/TrialForm.js')
-rw-r--r-- | src/components/subscription/TrialForm.js | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js new file mode 100644 index 000000000..9c512b5f2 --- /dev/null +++ b/src/components/subscription/TrialForm.js | |||
@@ -0,0 +1,99 @@ | |||
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 | teaserHeadline: { | ||
19 | id: 'settings.account.headlineTrialUpgrade', | ||
20 | defaultMessage: '!!!Get the free 14 day Franz Professional Trial', | ||
21 | }, | ||
22 | includedFeatures: { | ||
23 | id: 'subscription.includedProFeatures', | ||
24 | defaultMessage: '!!!The Franz Professional Plan includes:', | ||
25 | }, | ||
26 | noStringsAttachedHeadline: { | ||
27 | id: 'pricing.trial.terms.headline', | ||
28 | defaultMessage: '!!!No strings attached', | ||
29 | }, | ||
30 | noCreditCard: { | ||
31 | id: 'pricing.trial.terms.noCreditCard', | ||
32 | defaultMessage: '!!!No credit card required', | ||
33 | }, | ||
34 | automaticTrialEnd: { | ||
35 | id: 'pricing.trial.terms.automaticTrialEnd', | ||
36 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | ||
37 | }, | ||
38 | }); | ||
39 | |||
40 | const styles = () => ({ | ||
41 | activateTrialButton: { | ||
42 | margin: [40, 0, 50], | ||
43 | }, | ||
44 | keyTerms: { | ||
45 | marginTop: 20, | ||
46 | }, | ||
47 | }); | ||
48 | |||
49 | export default @observer @injectSheet(styles) class TrialForm extends Component { | ||
50 | static propTypes = { | ||
51 | activateTrial: PropTypes.func.isRequired, | ||
52 | isActivatingTrial: PropTypes.bool.isRequired, | ||
53 | classes: PropTypes.object.isRequired, | ||
54 | }; | ||
55 | |||
56 | static contextTypes = { | ||
57 | intl: intlShape, | ||
58 | }; | ||
59 | |||
60 | render() { | ||
61 | const { | ||
62 | isActivatingTrial, | ||
63 | activateTrial, | ||
64 | classes, | ||
65 | } = this.props; | ||
66 | const { intl } = this.context; | ||
67 | |||
68 | console.log('isActivatingTrial', isActivatingTrial); | ||
69 | |||
70 | return ( | ||
71 | <> | ||
72 | <H2>{intl.formatMessage(messages.teaserHeadline)}</H2> | ||
73 | <H3 className={classes.keyTerms}> | ||
74 | {intl.formatMessage(messages.noStringsAttachedHeadline)} | ||
75 | </H3> | ||
76 | <ul> | ||
77 | <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} /> | ||
78 | <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} /> | ||
79 | </ul> | ||
80 | |||
81 | <Button | ||
82 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
83 | className={classes.activateTrialButton} | ||
84 | busy={isActivatingTrial} | ||
85 | onClick={activateTrial} | ||
86 | stretch | ||
87 | /> | ||
88 | <div className="subscription__premium-info"> | ||
89 | <H3> | ||
90 | {intl.formatMessage(messages.includedFeatures)} | ||
91 | </H3> | ||
92 | <div className="subscription"> | ||
93 | <FeatureList /> | ||
94 | </div> | ||
95 | </div> | ||
96 | </> | ||
97 | ); | ||
98 | } | ||
99 | } | ||