diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/auth/Pricing.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/auth/Pricing.js')
-rw-r--r-- | src/components/auth/Pricing.js | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js new file mode 100644 index 000000000..761561a89 --- /dev/null +++ b/src/components/auth/Pricing.js | |||
@@ -0,0 +1,130 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | // import { Link } from 'react-router'; | ||
6 | |||
7 | // import Button from '../ui/Button'; | ||
8 | import Loader from '../ui/Loader'; | ||
9 | import Appear from '../ui/effects/Appear'; | ||
10 | import SubscriptionForm from '../../containers/ui/SubscriptionFormScreen'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'pricing.headline', | ||
15 | defaultMessage: '!!!Support Franz', | ||
16 | }, | ||
17 | monthlySupportLabel: { | ||
18 | id: 'pricing.support.label', | ||
19 | defaultMessage: '!!!Select your support plan', | ||
20 | }, | ||
21 | submitButtonLabel: { | ||
22 | id: 'pricing.submit.label', | ||
23 | defaultMessage: '!!!Support the development of Franz', | ||
24 | }, | ||
25 | skipPayment: { | ||
26 | id: 'pricing.link.skipPayment', | ||
27 | defaultMessage: '!!!I don\'t want to support the development of Franz.', | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | @observer | ||
32 | export default class Signup extends Component { | ||
33 | static propTypes = { | ||
34 | donor: MobxPropTypes.objectOrObservableObject.isRequired, | ||
35 | isLoading: PropTypes.bool.isRequired, | ||
36 | isLoadingUser: PropTypes.bool.isRequired, | ||
37 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | ||
38 | skipAction: PropTypes.func.isRequired, | ||
39 | }; | ||
40 | |||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
45 | render() { | ||
46 | const { | ||
47 | donor, | ||
48 | isLoading, | ||
49 | isLoadingUser, | ||
50 | onCloseSubscriptionWindow, | ||
51 | skipAction, | ||
52 | } = this.props; | ||
53 | const { intl } = this.context; | ||
54 | |||
55 | return ( | ||
56 | <div className="auth__scroll-container"> | ||
57 | <div className="auth__container auth__container--signup"> | ||
58 | <form className="franz-form auth__form"> | ||
59 | <img | ||
60 | src="./assets/images/sm.png" | ||
61 | className="auth__logo auth__logo--sm" | ||
62 | alt="" | ||
63 | /> | ||
64 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
65 | <div className="auth__letter"> | ||
66 | {isLoadingUser && ( | ||
67 | <p>Loading</p> | ||
68 | )} | ||
69 | {!isLoadingUser && ( | ||
70 | donor.amount ? ( | ||
71 | <span> | ||
72 | <p> | ||
73 | Thank you so much for your previous donation of <strong>$ {donor.amount}</strong>. | ||
74 | <br /> | ||
75 | Your support allowed us to get where we are today. | ||
76 | <br /> | ||
77 | </p> | ||
78 | <p> | ||
79 | As an early supporter, you get <strong>a lifetime premium supporter license</strong> without any | ||
80 | additional charges. | ||
81 | </p> | ||
82 | <p> | ||
83 | However, If you want to keep supporting us, you are more than welcome to subscribe to a plan. | ||
84 | <br /><br /> | ||
85 | </p> | ||
86 | </span> | ||
87 | ) : ( | ||
88 | <span> | ||
89 | <p> | ||
90 | We built Franz with a lot of effort, manpower and love, | ||
91 | to bring you the best messaging experience. | ||
92 | <br /> | ||
93 | </p> | ||
94 | <p> | ||
95 | Getting a Franz Premium Supporter License will allow us to keep improving Franz for you. | ||
96 | </p> | ||
97 | </span> | ||
98 | ) | ||
99 | )} | ||
100 | <p> | ||
101 | Thanks for being a hero. | ||
102 | </p> | ||
103 | <p> | ||
104 | <strong>Stefan Malzner</strong> | ||
105 | </p> | ||
106 | </div> | ||
107 | <Loader loaded={!isLoading}> | ||
108 | <Appear transitionName="slideDown"> | ||
109 | <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span> | ||
110 | <SubscriptionForm | ||
111 | onCloseWindow={onCloseSubscriptionWindow} | ||
112 | showSkipOption | ||
113 | skipAction={skipAction} | ||
114 | hideInfo={Boolean(donor.amount)} | ||
115 | skipButtonLabel={intl.formatMessage(messages.skipPayment)} | ||
116 | /> | ||
117 | {/* <Link | ||
118 | to={inviteRoute} | ||
119 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" | ||
120 | > | ||
121 | {intl.formatMessage(messages.skipPayment)} | ||
122 | </Link> */} | ||
123 | </Appear> | ||
124 | </Loader> | ||
125 | </form> | ||
126 | </div> | ||
127 | </div> | ||
128 | ); | ||
129 | } | ||
130 | } | ||