diff options
author | Amine El Mouafik <412895+kytwb@users.noreply.github.com> | 2021-02-08 10:34:45 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-08 10:34:45 +0100 |
commit | 035002ceedf78d5ec73eabc0df7f06139939b967 (patch) | |
tree | 1c0d1e9531bae05fb65d70b9ea25baf404b74fe1 /src/components/auth/SetupAssistant.js | |
parent | docs: add k0staa as a contributor (#1193) (diff) | |
download | ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.tar.gz ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.tar.zst ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.zip |
Synchronize with Franz 5.6.0 (#1033)
Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: vantezzen <hello@vantezzen.io>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>
Co-authored-by: Amine Mouafik <amine@mouafik.fr>
Diffstat (limited to 'src/components/auth/SetupAssistant.js')
-rw-r--r-- | src/components/auth/SetupAssistant.js | 319 |
1 files changed, 319 insertions, 0 deletions
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js new file mode 100644 index 000000000..e03cf9101 --- /dev/null +++ b/src/components/auth/SetupAssistant.js | |||
@@ -0,0 +1,319 @@ | |||
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 | import classnames from 'classnames'; | ||
7 | |||
8 | import { Input, Button } from '@meetfranz/forms'; | ||
9 | import { Badge } from '@meetfranz/ui'; | ||
10 | import Modal from '../ui/Modal'; | ||
11 | import Infobox from '../ui/Infobox'; | ||
12 | import Appear from '../ui/effects/Appear'; | ||
13 | |||
14 | import { CDN_URL } from '../../config'; | ||
15 | |||
16 | const SLACK_ID = 'slack'; | ||
17 | |||
18 | const messages = defineMessages({ | ||
19 | headline: { | ||
20 | id: 'setupAssistant.headline', | ||
21 | defaultMessage: '!!!Let\'s get started', | ||
22 | }, | ||
23 | subHeadline: { | ||
24 | id: 'setupAssistant.subheadline', | ||
25 | defaultMessage: '!!!Choose from our most used services and get back on top of your messaging now.', | ||
26 | }, | ||
27 | submitButtonLabel: { | ||
28 | id: 'setupAssistant.submit.label', | ||
29 | defaultMessage: '!!!Let\'s go', | ||
30 | }, | ||
31 | inviteSuccessInfo: { | ||
32 | id: 'invite.successInfo', | ||
33 | defaultMessage: '!!!Invitations sent successfully', | ||
34 | }, | ||
35 | }); | ||
36 | |||
37 | const styles = theme => ({ | ||
38 | root: { | ||
39 | width: '500px !important', | ||
40 | textAlign: 'center', | ||
41 | padding: 20, | ||
42 | |||
43 | '& h1': { | ||
44 | }, | ||
45 | }, | ||
46 | servicesGrid: { | ||
47 | display: 'flex', | ||
48 | flexWrap: 'wrap', | ||
49 | justifyContent: 'space-between', | ||
50 | }, | ||
51 | serviceContainer: { | ||
52 | background: theme.colorBackground, | ||
53 | position: 'relative', | ||
54 | width: '32%', | ||
55 | display: 'flex', | ||
56 | alignItems: 'center', | ||
57 | flexDirection: 'column', | ||
58 | justifyContent: 'center', | ||
59 | padding: 20, | ||
60 | borderRadius: theme.borderRadius, | ||
61 | marginBottom: 10, | ||
62 | opacity: 0.5, | ||
63 | transition: 'all 0.25s', | ||
64 | border: [3, 'solid', 'transparent'], | ||
65 | |||
66 | '& h2': { | ||
67 | margin: [10, 0, 0], | ||
68 | color: theme.colorText, | ||
69 | }, | ||
70 | |||
71 | '&:hover': { | ||
72 | border: [3, 'solid', theme.brandPrimary], | ||
73 | '& $serviceIcon': { | ||
74 | }, | ||
75 | }, | ||
76 | |||
77 | }, | ||
78 | selected: { | ||
79 | border: [3, 'solid', theme.brandPrimary], | ||
80 | background: `${theme.brandPrimary}47`, | ||
81 | opacity: 1, | ||
82 | }, | ||
83 | serviceIcon: { | ||
84 | width: 50, | ||
85 | transition: 'all 0.25s', | ||
86 | }, | ||
87 | |||
88 | slackModalContent: { | ||
89 | textAlign: 'center', | ||
90 | |||
91 | '& img': { | ||
92 | width: 50, | ||
93 | marginBottom: 20, | ||
94 | }, | ||
95 | }, | ||
96 | modalActionContainer: { | ||
97 | display: 'flex', | ||
98 | flexDirection: 'column', | ||
99 | justifyContent: 'center', | ||
100 | alignItems: 'center', | ||
101 | }, | ||
102 | ctaCancel: { | ||
103 | background: 'none !important', | ||
104 | }, | ||
105 | slackBadge: { | ||
106 | position: 'absolute', | ||
107 | bottom: 4, | ||
108 | height: 'auto', | ||
109 | padding: '0px 4px', | ||
110 | borderRadius: theme.borderRadiusSmall, | ||
111 | margin: 0, | ||
112 | display: 'flex', | ||
113 | overflow: 'hidden', | ||
114 | }, | ||
115 | clearSlackWorkspace: { | ||
116 | background: theme.inputPrefixColor, | ||
117 | marginLeft: 5, | ||
118 | height: '100%', | ||
119 | color: theme.colorText, | ||
120 | display: 'inline-flex', | ||
121 | justifyContent: 'center', | ||
122 | alignItems: 'center', | ||
123 | marginRight: -4, | ||
124 | padding: [0, 5], | ||
125 | }, | ||
126 | }); | ||
127 | |||
128 | @injectSheet(styles) @observer | ||
129 | class SetupAssistant extends Component { | ||
130 | static propTypes = { | ||
131 | classes: PropTypes.object.isRequired, | ||
132 | onSubmit: PropTypes.func.isRequired, | ||
133 | isInviteSuccessful: PropTypes.bool, | ||
134 | services: PropTypes.object.isRequired, | ||
135 | isSettingUpServices: PropTypes.bool.isRequired, | ||
136 | }; | ||
137 | |||
138 | static defaultProps = { | ||
139 | isInviteSuccessful: false, | ||
140 | }; | ||
141 | |||
142 | static contextTypes = { | ||
143 | intl: intlShape, | ||
144 | }; | ||
145 | |||
146 | state = { | ||
147 | services: [{ | ||
148 | id: 'whatsapp', | ||
149 | }, { | ||
150 | id: 'messenger', | ||
151 | }, { | ||
152 | id: 'gmail', | ||
153 | }], | ||
154 | isSlackModalOpen: false, | ||
155 | slackWorkspace: '', | ||
156 | }; | ||
157 | |||
158 | slackWorkspaceHandler() { | ||
159 | const { slackWorkspace = '', services } = this.state; | ||
160 | |||
161 | const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, ''); | ||
162 | |||
163 | if (sanitizedWorkspace) { | ||
164 | const index = services.findIndex(s => s.id === SLACK_ID); | ||
165 | |||
166 | if (index === -1) { | ||
167 | const newServices = services; | ||
168 | newServices.push({ id: SLACK_ID, team: sanitizedWorkspace }); | ||
169 | this.setState({ services: newServices }); | ||
170 | } | ||
171 | } | ||
172 | |||
173 | this.setState({ | ||
174 | isSlackModalOpen: false, | ||
175 | slackWorkspace: sanitizedWorkspace, | ||
176 | }); | ||
177 | } | ||
178 | |||
179 | render() { | ||
180 | const { intl } = this.context; | ||
181 | const { | ||
182 | classes, isInviteSuccessful, onSubmit, services, isSettingUpServices, | ||
183 | } = this.props; | ||
184 | const { isSlackModalOpen, slackWorkspace, services: addedServices } = this.state; | ||
185 | |||
186 | return ( | ||
187 | <div className={`auth__container ${classes.root}`}> | ||
188 | {this.state.showSuccessInfo && isInviteSuccessful && ( | ||
189 | <Appear> | ||
190 | <Infobox | ||
191 | type="success" | ||
192 | icon="checkbox-marked-circle-outline" | ||
193 | dismissable | ||
194 | > | ||
195 | {intl.formatMessage(messages.inviteSuccessInfo)} | ||
196 | </Infobox> | ||
197 | </Appear> | ||
198 | )} | ||
199 | |||
200 | <img | ||
201 | src="./assets/images/logo.svg" | ||
202 | className="auth__logo" | ||
203 | alt="" | ||
204 | /> | ||
205 | <h1> | ||
206 | {intl.formatMessage(messages.headline)} | ||
207 | </h1> | ||
208 | <h2> | ||
209 | {intl.formatMessage(messages.subHeadline)} | ||
210 | </h2> | ||
211 | <div className={classnames('grid', classes.servicesGrid)}> | ||
212 | {Object.keys(services).map((id) => { | ||
213 | const service = services[id]; | ||
214 | return ( | ||
215 | <button | ||
216 | className={classnames({ | ||
217 | [classes.serviceContainer]: true, | ||
218 | [classes.selected]: this.state.services.findIndex(s => s.id === id) !== -1, | ||
219 | })} | ||
220 | key={id} | ||
221 | onClick={() => { | ||
222 | const index = this.state.services.findIndex(s => s.id === id); | ||
223 | if (index === -1) { | ||
224 | if (id === SLACK_ID) { | ||
225 | this.setState({ isSlackModalOpen: true }); | ||
226 | } else { | ||
227 | addedServices.push({ id }); | ||
228 | } | ||
229 | } else { | ||
230 | addedServices.splice(index, 1); | ||
231 | if (id === SLACK_ID) { | ||
232 | this.setState({ | ||
233 | slackWorkspace: '', | ||
234 | }); | ||
235 | } | ||
236 | } | ||
237 | |||
238 | this.setState({ services: addedServices }); | ||
239 | }} | ||
240 | type="button" | ||
241 | > | ||
242 | <img | ||
243 | src={`${CDN_URL}/recipes/dist/${id}/src/icon.svg`} | ||
244 | className={classes.serviceIcon} | ||
245 | alt="" | ||
246 | /> | ||
247 | <h2> | ||
248 | {service.name} | ||
249 | </h2> | ||
250 | {id === SLACK_ID && slackWorkspace && ( | ||
251 | <Badge type="secondary" className={classes.slackBadge}> | ||
252 | {slackWorkspace} | ||
253 | <button | ||
254 | type="button" | ||
255 | className={classes.clearSlackWorkspace} | ||
256 | onClick={() => { | ||
257 | this.setState({ | ||
258 | slackWorkspace: '', | ||
259 | }); | ||
260 | }} | ||
261 | > | ||
262 | x | ||
263 | </button> | ||
264 | </Badge> | ||
265 | )} | ||
266 | </button> | ||
267 | ); | ||
268 | })} | ||
269 | </div> | ||
270 | <Modal | ||
271 | isOpen={isSlackModalOpen} | ||
272 | // isBlocking={false} | ||
273 | close={() => this.setState({ isSlackModalOpen: false })} | ||
274 | > | ||
275 | <div className={classes.slackModalContent}> | ||
276 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> | ||
277 | <h1>Create your first Slack workspace</h1> | ||
278 | <form onSubmit={(e) => { | ||
279 | e.preventDefault(); | ||
280 | this.slackWorkspaceHandler(); | ||
281 | }} | ||
282 | > | ||
283 | <Input | ||
284 | suffix=".slack.com" | ||
285 | placeholder="workspace-url" | ||
286 | onChange={e => this.setState({ slackWorkspace: e.target.value })} | ||
287 | value={slackWorkspace} | ||
288 | /> | ||
289 | <div className={classes.modalActionContainer}> | ||
290 | <Button | ||
291 | type="submit" | ||
292 | label="Save" | ||
293 | /> | ||
294 | <Button | ||
295 | type="link" | ||
296 | buttonType="secondary" | ||
297 | label="Cancel" | ||
298 | className={classes.ctaCancel} | ||
299 | onClick={() => this.setState({ slackWorkspace: '' })} | ||
300 | /> | ||
301 | </div> | ||
302 | </form> | ||
303 | </div> | ||
304 | </Modal> | ||
305 | <Button | ||
306 | type="button" | ||
307 | className="auth__button" | ||
308 | // disabled={!atLeastOneEmailAddress} | ||
309 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
310 | onClick={() => onSubmit(this.state.services)} | ||
311 | busy={isSettingUpServices} | ||
312 | disabled={isSettingUpServices || addedServices.length === 0} | ||
313 | /> | ||
314 | </div> | ||
315 | ); | ||
316 | } | ||
317 | } | ||
318 | |||
319 | export default SetupAssistant; | ||