accounts-frontend/src/components/contact/ContactForm.js

182 lines
5.9 KiB
JavaScript
Raw Normal View History

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';
import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'components/ui/form';
import feedback from 'services/api/feedback';
2016-05-22 22:55:38 +05:30
import icons from 'components/ui/icons.scss';
import popupStyles from 'components/ui/popup/popup.scss';
import logger from 'services/logger';
2016-05-22 22:55:38 +05:30
import styles from './contactForm.scss';
import messages from './contactForm.intl.json';
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-05-28 04:44:28 +05:30
export class ContactForm extends Component {
2016-05-22 22:55:38 +05:30
static displayName = 'ContactForm';
static propTypes = {
onClose: PropTypes.func,
user: PropTypes.shape({
email: PropTypes.string
}).isRequired
2016-05-22 22:55:38 +05:30
};
static defaultProps = {
onClose() {}
};
state = {
isLoading: false,
isSuccessfullySent: false
};
2016-05-22 22:55:38 +05:30
form = new FormModel();
render() {
const {isSuccessfullySent} = this.state || {};
const {onClose} = this.props;
2016-05-22 22:55:38 +05:30
return (
<div data-e2e="feedbackPopup" className={isSuccessfullySent ? styles.successState : styles.contactForm}>
<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
{isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
</div>
</div>
);
}
renderForm() {
const {form} = this;
const {user} = this.props;
const {isLoading} = this.state;
return (
<Form form={form}
onSubmit={this.onSubmit}
isLoading={isLoading}
>
<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')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
label={messages.email}
type="email"
skin="light"
defaultValue={user.email}
/>
</div>
</div>
<div className={styles.formMargin}>
2016-06-18 17:43:28 +05:30
<Dropdown
{...form.bindField('category')}
label={messages.whichQuestion}
items={CONTACT_CATEGORIES}
block
/>
</div>
<TextArea
{...form.bindField('message')}
required
label={messages.message}
skin="light"
minRows={6}
maxRows={6}
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block type="submit" />
</div>
</Form>
2016-05-22 22:55:38 +05:30
);
}
renderSuccess() {
const {lastEmail: email} = this.state;
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 = () => {
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);
return;
2016-05-22 22:55:38 +05:30
}
logger.warn('Error sending feedback', resp);
2016-05-22 22:55:38 +05:30
})
.finally(() => this.setState({isLoading: false}));
2016-05-22 22:55:38 +05:30
};
}
import { connect } from 'react-redux';
export default connect((state) => ({
user: state.user
}))(ContactForm);