diff options
Diffstat (limited to 'src/features/shareFranz/Component.js')
-rw-r--r-- | src/features/shareFranz/Component.js | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js new file mode 100644 index 000000000..8d1d595c5 --- /dev/null +++ b/src/features/shareFranz/Component.js | |||
@@ -0,0 +1,166 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, inject } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | import { Button } from '@meetfranz/forms'; | ||
7 | import { H1, Icon } from '@meetfranz/ui'; | ||
8 | |||
9 | import Modal from '../../components/ui/Modal'; | ||
10 | import { state } from '.'; | ||
11 | import { gaEvent } from '../../lib/analytics'; | ||
12 | import ServicesStore from '../../stores/ServicesStore'; | ||
13 | |||
14 | const messages = defineMessages({ | ||
15 | headline: { | ||
16 | id: 'feature.shareFranz.headline', | ||
17 | defaultMessage: '!!!Franz is better together!', | ||
18 | }, | ||
19 | text: { | ||
20 | id: 'feature.shareFranz.text', | ||
21 | defaultMessage: '!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.', | ||
22 | }, | ||
23 | actionsEmail: { | ||
24 | id: 'feature.shareFranz.action.email', | ||
25 | defaultMessage: '!!!Share as email', | ||
26 | }, | ||
27 | actionsFacebook: { | ||
28 | id: 'feature.shareFranz.action.facebook', | ||
29 | defaultMessage: '!!!Share on Facebook', | ||
30 | }, | ||
31 | actionsTwitter: { | ||
32 | id: 'feature.shareFranz.action.twitter', | ||
33 | defaultMessage: '!!!Share on Twitter', | ||
34 | }, | ||
35 | shareTextEmail: { | ||
36 | id: 'feature.shareFranz.shareText.email', | ||
37 | defaultMessage: '!!! I\'ve added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com', | ||
38 | }, | ||
39 | shareTextTwitter: { | ||
40 | id: 'feature.shareFranz.shareText.twitter', | ||
41 | defaultMessage: '!!! I\'ve added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger', | ||
42 | }, | ||
43 | }); | ||
44 | |||
45 | const styles = theme => ({ | ||
46 | modal: { | ||
47 | width: '80%', | ||
48 | maxWidth: 600, | ||
49 | background: theme.styleTypes.primary.accent, | ||
50 | textAlign: 'center', | ||
51 | color: theme.styleTypes.primary.contrast, | ||
52 | }, | ||
53 | heartContainer: { | ||
54 | display: 'flex', | ||
55 | justifyContent: 'center', | ||
56 | borderRadius: '100%', | ||
57 | background: theme.brandDanger, | ||
58 | padding: 20, | ||
59 | width: 100, | ||
60 | height: 100, | ||
61 | margin: [-70, 'auto', 30], | ||
62 | }, | ||
63 | heart: { | ||
64 | fill: theme.styleTypes.primary.contrast, | ||
65 | }, | ||
66 | headline: { | ||
67 | textAlign: 'center', | ||
68 | fontSize: 40, | ||
69 | marginBottom: 20, | ||
70 | }, | ||
71 | actions: { | ||
72 | display: 'flex', | ||
73 | justifyContent: 'space-between', | ||
74 | marginTop: 30, | ||
75 | }, | ||
76 | cta: { | ||
77 | background: theme.styleTypes.primary.contrast, | ||
78 | color: theme.styleTypes.primary.accent, | ||
79 | |||
80 | '& svg': { | ||
81 | fill: theme.styleTypes.primary.accent, | ||
82 | }, | ||
83 | }, | ||
84 | }); | ||
85 | |||
86 | export default @injectSheet(styles) @inject('stores') @observer class ShareFranzModal extends Component { | ||
87 | static propTypes = { | ||
88 | classes: PropTypes.object.isRequired, | ||
89 | }; | ||
90 | |||
91 | static contextTypes = { | ||
92 | intl: intlShape, | ||
93 | }; | ||
94 | |||
95 | close() { | ||
96 | state.isModalVisible = false; | ||
97 | } | ||
98 | |||
99 | render() { | ||
100 | const { isModalVisible } = state; | ||
101 | |||
102 | const { | ||
103 | classes, | ||
104 | stores, | ||
105 | } = this.props; | ||
106 | |||
107 | const serviceCount = stores.services.all.length; | ||
108 | |||
109 | const { intl } = this.context; | ||
110 | |||
111 | return ( | ||
112 | <Modal | ||
113 | isOpen={isModalVisible} | ||
114 | className={classes.modal} | ||
115 | shouldCloseOnOverlayClick | ||
116 | close={this.close.bind(this)} | ||
117 | > | ||
118 | <div className={classes.heartContainer}> | ||
119 | <Icon icon="mdiHeart" className={classes.heart} size={4} /> | ||
120 | </div> | ||
121 | <H1 className={classes.headline}> | ||
122 | {intl.formatMessage(messages.headline)} | ||
123 | </H1> | ||
124 | <p>{intl.formatMessage(messages.text)}</p> | ||
125 | <div className={classes.actions}> | ||
126 | <Button | ||
127 | label={intl.formatMessage(messages.actionsEmail)} | ||
128 | className={classes.cta} | ||
129 | icon="mdiEmail" | ||
130 | href={`mailto:?subject=Meet the cool app Franz&body=${intl.formatMessage(messages.shareTextEmail, { count: serviceCount })}}`} | ||
131 | target="_blank" | ||
132 | onClick={() => { | ||
133 | gaEvent('Share Franz', 'share', 'Share via email'); | ||
134 | }} | ||
135 | /> | ||
136 | <Button | ||
137 | label={intl.formatMessage(messages.actionsFacebook)} | ||
138 | className={classes.cta} | ||
139 | icon="mdiFacebookBox" | ||
140 | href="https://www.facebook.com/sharer/sharer.php?u=https://www.meetfranz.com?utm_source=facebook&utm_medium=referral&utm_campaign=share-button" | ||
141 | target="_blank" | ||
142 | onClick={() => { | ||
143 | gaEvent('Share Franz', 'share', 'Share via Facebook'); | ||
144 | }} | ||
145 | /> | ||
146 | <Button | ||
147 | label={intl.formatMessage(messages.actionsTwitter)} | ||
148 | className={classes.cta} | ||
149 | icon="mdiTwitter" | ||
150 | href={`http://twitter.com/intent/tweet?status=${intl.formatMessage(messages.shareTextTwitter, { count: serviceCount })}`} | ||
151 | target="_blank" | ||
152 | onClick={() => { | ||
153 | gaEvent('Share Franz', 'share', 'Share via Twitter'); | ||
154 | }} | ||
155 | /> | ||
156 | </div> | ||
157 | </Modal> | ||
158 | ); | ||
159 | } | ||
160 | } | ||
161 | |||
162 | ShareFranzModal.wrappedComponent.propTypes = { | ||
163 | stores: PropTypes.shape({ | ||
164 | services: PropTypes.instanceOf(ServicesStore).isRequired, | ||
165 | }).isRequired, | ||
166 | }; | ||