2017-08-23 00:19:50 +05:30
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
import React, { Component } from 'react';
|
2016-05-22 22:55:38 +05:30
|
|
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
|
|
2016-05-26 03:07:18 +05:30
|
|
|
|
import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'components/ui/form';
|
2016-06-16 02:24:13 +05:30
|
|
|
|
import feedback from 'services/api/feedback';
|
2016-05-22 22:55:38 +05:30
|
|
|
|
import icons from 'components/ui/icons.scss';
|
2016-05-28 04:06:01 +05:30
|
|
|
|
import popupStyles from 'components/ui/popup/popup.scss';
|
2016-12-10 21:28:47 +05:30
|
|
|
|
import logger from 'services/logger';
|
2016-05-22 22:55:38 +05:30
|
|
|
|
|
|
|
|
|
import styles from './contactForm.scss';
|
|
|
|
|
import messages from './contactForm.intl.json';
|
|
|
|
|
|
2016-06-06 04:32:36 +05:30
|
|
|
|
const CONTACT_CATEGORIES = [
|
|
|
|
|
// TODO: сюда позже проставить реальные id категорий с backend
|
2017-08-23 00:27:35 +05:30
|
|
|
|
<Message key="m1" {...messages.cannotAccessMyAccount} />,
|
|
|
|
|
<Message key="m2" {...messages.foundBugOnSite} />,
|
|
|
|
|
<Message key="m3" {...messages.improvementsSuggestion} />,
|
|
|
|
|
<Message key="m4" {...messages.integrationQuestion} />,
|
|
|
|
|
<Message key="m5" {...messages.other} />
|
2016-06-06 04:32:36 +05:30
|
|
|
|
];
|
2016-05-28 04:44:28 +05:30
|
|
|
|
|
2016-12-10 21:28:47 +05:30
|
|
|
|
export class ContactForm extends Component {
|
2016-05-22 22:55:38 +05:30
|
|
|
|
static displayName = 'ContactForm';
|
|
|
|
|
|
|
|
|
|
static propTypes = {
|
2016-12-10 21:28:47 +05:30
|
|
|
|
onClose: PropTypes.func,
|
2016-06-16 13:12:56 +05:30
|
|
|
|
user: PropTypes.shape({
|
|
|
|
|
email: PropTypes.string
|
|
|
|
|
}).isRequired
|
2016-05-22 22:55:38 +05:30
|
|
|
|
};
|
|
|
|
|
|
2016-12-10 21:28:47 +05:30
|
|
|
|
static defaultProps = {
|
|
|
|
|
onClose() {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
|
isLoading: false,
|
|
|
|
|
isSuccessfullySent: false
|
|
|
|
|
};
|
|
|
|
|
|
2016-05-22 22:55:38 +05:30
|
|
|
|
form = new FormModel();
|
|
|
|
|
|
|
|
|
|
render() {
|
2016-12-10 21:28:47 +05:30
|
|
|
|
const {isSuccessfullySent} = this.state || {};
|
2016-06-18 16:53:30 +05:30
|
|
|
|
const {onClose} = this.props;
|
2016-05-22 22:55:38 +05:30
|
|
|
|
|
|
|
|
|
return (
|
2018-11-10 14:33:47 +05:30
|
|
|
|
<div data-e2e="feedbackPopup" className={isSuccessfullySent ? styles.successState : styles.contactForm}>
|
2016-06-16 19:41:57 +05:30
|
|
|
|
<div className={popupStyles.popup}>
|
|
|
|
|
<div className={popupStyles.header}>
|
|
|
|
|
<h2 className={popupStyles.headerTitle}>
|
|
|
|
|
<Message {...messages.title} />
|
|
|
|
|
</h2>
|
|
|
|
|
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
|
|
|
|
|
</div>
|
2016-05-22 22:55:38 +05:30
|
|
|
|
|
2016-06-18 21:05:39 +05:30
|
|
|
|
{isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
|
2016-06-18 16:53:30 +05:30
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderForm() {
|
|
|
|
|
const {form} = this;
|
|
|
|
|
const {user} = this.props;
|
2016-12-10 21:28:47 +05:30
|
|
|
|
const {isLoading} = this.state;
|
2016-06-18 16:53:30 +05:30
|
|
|
|
|
|
|
|
|
return (
|
2016-12-10 21:28:47 +05:30
|
|
|
|
<Form form={form}
|
|
|
|
|
onSubmit={this.onSubmit}
|
|
|
|
|
isLoading={isLoading}
|
|
|
|
|
>
|
2016-06-18 16:53:30 +05:30
|
|
|
|
<div className={popupStyles.body}>
|
|
|
|
|
<div className={styles.philosophicalThought}>
|
|
|
|
|
<Message {...messages.philosophicalThought} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.formDisclaimer}>
|
|
|
|
|
<Message {...messages.disclaimer} /><br />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.pairInputRow}>
|
|
|
|
|
<div className={styles.pairInput}>
|
|
|
|
|
<Input
|
|
|
|
|
{...form.bindField('subject')}
|
2016-06-16 19:41:57 +05:30
|
|
|
|
required
|
2016-06-18 16:53:30 +05:30
|
|
|
|
label={messages.subject}
|
2016-06-16 19:41:57 +05:30
|
|
|
|
skin="light"
|
|
|
|
|
/>
|
2016-05-26 03:07:18 +05:30
|
|
|
|
</div>
|
|
|
|
|
|
2016-06-18 16:53:30 +05:30
|
|
|
|
<div className={styles.pairInput}>
|
|
|
|
|
<Input
|
|
|
|
|
{...form.bindField('email')}
|
|
|
|
|
required
|
|
|
|
|
label={messages.email}
|
|
|
|
|
type="email"
|
|
|
|
|
skin="light"
|
|
|
|
|
defaultValue={user.email}
|
|
|
|
|
/>
|
2016-06-16 19:41:57 +05:30
|
|
|
|
</div>
|
2016-06-18 16:53:30 +05:30
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.formMargin}>
|
2016-06-18 17:43:28 +05:30
|
|
|
|
<Dropdown
|
|
|
|
|
{...form.bindField('category')}
|
|
|
|
|
label={messages.whichQuestion}
|
|
|
|
|
items={CONTACT_CATEGORIES}
|
|
|
|
|
block
|
|
|
|
|
/>
|
2016-06-18 16:53:30 +05:30
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<TextArea
|
|
|
|
|
{...form.bindField('message')}
|
|
|
|
|
required
|
|
|
|
|
label={messages.message}
|
|
|
|
|
skin="light"
|
2018-03-26 00:46:45 +05:30
|
|
|
|
minRows={6}
|
|
|
|
|
maxRows={6}
|
2016-06-18 16:53:30 +05:30
|
|
|
|
/>
|
2016-06-16 19:41:57 +05:30
|
|
|
|
</div>
|
2016-06-18 16:53:30 +05:30
|
|
|
|
|
|
|
|
|
<div className={styles.footer}>
|
2016-12-10 21:28:47 +05:30
|
|
|
|
<Button label={messages.send} block type="submit" />
|
2016-06-18 16:53:30 +05:30
|
|
|
|
</div>
|
|
|
|
|
</Form>
|
2016-05-22 22:55:38 +05:30
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-18 21:05:39 +05:30
|
|
|
|
renderSuccess() {
|
2016-12-10 21:28:47 +05:30
|
|
|
|
const {lastEmail: email} = this.state;
|
2016-06-18 21:05:39 +05:30
|
|
|
|
const {onClose} = this.props;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<div className={styles.successBody}>
|
|
|
|
|
<span className={styles.successIcon} />
|
|
|
|
|
<div className={styles.successDescription}>
|
|
|
|
|
<Message {...messages.youMessageReceived} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.sentToEmail}>{email}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.footer}>
|
|
|
|
|
<Button label={messages.close} block onClick={onClose} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-22 22:55:38 +05:30
|
|
|
|
onSubmit = () => {
|
2016-12-10 21:28:47 +05:30
|
|
|
|
if (this.state.isLoading) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setState({isLoading: true});
|
|
|
|
|
return feedback.send(this.form.serialize())
|
|
|
|
|
.then(() => this.setState({
|
|
|
|
|
isSuccessfullySent: true,
|
|
|
|
|
lastEmail: this.form.value('email')
|
|
|
|
|
}))
|
2016-05-22 22:55:38 +05:30
|
|
|
|
.catch((resp) => {
|
|
|
|
|
if (resp.errors) {
|
|
|
|
|
this.form.setErrors(resp.errors);
|
2016-12-10 21:28:47 +05:30
|
|
|
|
return;
|
2016-05-22 22:55:38 +05:30
|
|
|
|
}
|
|
|
|
|
|
2016-12-10 21:28:47 +05:30
|
|
|
|
logger.warn('Error sending feedback', resp);
|
2016-05-22 22:55:38 +05:30
|
|
|
|
})
|
2017-08-23 02:30:10 +05:30
|
|
|
|
.finally(() => this.setState({isLoading: false}));
|
2016-05-22 22:55:38 +05:30
|
|
|
|
};
|
|
|
|
|
}
|
2016-06-16 13:12:56 +05:30
|
|
|
|
|
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
|
|
export default connect((state) => ({
|
|
|
|
|
user: state.user
|
|
|
|
|
}))(ContactForm);
|