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