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