mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Extract general popups markup to its own component
Split popups controllers into separate components Implemented storybooks for all project's popups
This commit is contained in:
ErickSkrauch
@@ -1,202 +1,43 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import clsx from 'clsx';
|
||||
import { FormattedMessage as Message, defineMessages } from 'react-intl';
|
||||
import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'app/components/ui/form';
|
||||
import feedback from 'app/services/api/feedback';
|
||||
import icons from 'app/components/ui/icons.scss';
|
||||
import popupStyles from 'app/components/ui/popup/popup.scss';
|
||||
import React, { ComponentType, useCallback, useRef, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { send as sendFeedback } from 'app/services/api/feedback';
|
||||
import { RootState } from 'app/reducers';
|
||||
import logger from 'app/services/logger';
|
||||
import { User } from 'app/components/user';
|
||||
|
||||
import styles from './contactForm.scss';
|
||||
import ContactFormPopup from './ContactFormPopup';
|
||||
import SuccessContactFormPopup from './SuccessContactFormPopup';
|
||||
|
||||
const CONTACT_CATEGORIES = {
|
||||
// TODO: сюда позже проставить реальные id категорий с backend
|
||||
0: <Message key="cannotAccessMyAccount" defaultMessage="Can not access my account" />,
|
||||
1: <Message key="foundBugOnSite" defaultMessage="I found a bug on the site" />,
|
||||
2: <Message key="improvementsSuggestion" defaultMessage="I have a suggestion for improving the functional" />,
|
||||
3: <Message key="integrationQuestion" defaultMessage="Service integration question" />,
|
||||
4: <Message key="other" defaultMessage="Other" />,
|
||||
};
|
||||
|
||||
const labels = defineMessages({
|
||||
subject: 'Subject',
|
||||
email: 'E‑mail',
|
||||
message: 'Message',
|
||||
whichQuestion: 'What are you interested in?',
|
||||
|
||||
send: 'Send',
|
||||
|
||||
close: 'Close',
|
||||
});
|
||||
|
||||
export class ContactForm extends React.Component<
|
||||
{
|
||||
onClose: () => void;
|
||||
user: User;
|
||||
},
|
||||
{
|
||||
isLoading: boolean;
|
||||
isSuccessfullySent: boolean;
|
||||
lastEmail: string | null;
|
||||
}
|
||||
> {
|
||||
static defaultProps = {
|
||||
onClose() {},
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: false,
|
||||
isSuccessfullySent: false,
|
||||
lastEmail: null,
|
||||
};
|
||||
|
||||
form = new FormModel();
|
||||
|
||||
render() {
|
||||
const { isSuccessfullySent } = this.state || {};
|
||||
const { onClose } = this.props;
|
||||
|
||||
return (
|
||||
<div data-testid="feedbackPopup" className={isSuccessfullySent ? styles.successState : styles.contactForm}>
|
||||
<div className={popupStyles.popup}>
|
||||
<div className={popupStyles.header}>
|
||||
<h2 className={popupStyles.headerTitle}>
|
||||
<Message key="title" defaultMessage="Feedback form" />
|
||||
</h2>
|
||||
<span
|
||||
className={clsx(icons.close, popupStyles.close)}
|
||||
onClick={onClose}
|
||||
data-testid="feedback-popup-close"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{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
|
||||
key="philosophicalThought"
|
||||
defaultMessage="Properly formulated question — half of the answer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formDisclaimer}>
|
||||
<Message
|
||||
key="disclaimer"
|
||||
defaultMessage="Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it"
|
||||
/>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div className={styles.pairInputRow}>
|
||||
<div className={styles.pairInput}>
|
||||
<Input {...form.bindField('subject')} required label={labels.subject} skin="light" />
|
||||
</div>
|
||||
|
||||
<div className={styles.pairInput}>
|
||||
<Input
|
||||
{...form.bindField('email')}
|
||||
required
|
||||
label={labels.email}
|
||||
type="email"
|
||||
skin="light"
|
||||
defaultValue={user.email}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.formMargin}>
|
||||
<Dropdown
|
||||
{...form.bindField('category')}
|
||||
label={labels.whichQuestion}
|
||||
items={CONTACT_CATEGORIES}
|
||||
block
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
{...form.bindField('message')}
|
||||
required
|
||||
label={labels.message}
|
||||
skin="light"
|
||||
minRows={6}
|
||||
maxRows={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<Button label={labels.send} block type="submit" disabled={isLoading} />
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
key="youMessageReceived"
|
||||
defaultMessage="Your message was received. We will respond to you shortly. The answer will come to your E‑mail:"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.sentToEmail}>{email}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<Button label={labels.close} block onClick={onClose} data-testid="feedback-popup-close-button" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onSubmit = (): Promise<void> => {
|
||||
if (this.state.isLoading) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
return feedback
|
||||
.send(this.form.serialize())
|
||||
.then(() =>
|
||||
this.setState({
|
||||
isSuccessfullySent: true,
|
||||
lastEmail: this.form.value('email'),
|
||||
}),
|
||||
)
|
||||
.catch((resp) => {
|
||||
if (resp.errors) {
|
||||
this.form.setErrors(resp.errors);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
logger.warn('Error sending feedback', resp);
|
||||
})
|
||||
.finally(() => this.setState({ isLoading: false }));
|
||||
};
|
||||
interface Props {
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export default connect((state: RootState) => ({
|
||||
user: state.user,
|
||||
}))(ContactForm);
|
||||
const ContactForm: ComponentType<Props> = ({ onClose }) => {
|
||||
const userEmail = useSelector((state: RootState) => state.user.email);
|
||||
const usedEmailRef = useRef(userEmail); // Use ref to avoid unneeded redraw
|
||||
const [isSent, setIsSent] = useState<boolean>(false);
|
||||
const onSubmit = useCallback(
|
||||
(params: Parameters<typeof sendFeedback>[0]): Promise<void> =>
|
||||
sendFeedback(params)
|
||||
.then(() => {
|
||||
setIsSent(true);
|
||||
usedEmailRef.current = params.email;
|
||||
})
|
||||
.catch((resp) => {
|
||||
if (!resp.errors) {
|
||||
logger.warn('Error sending feedback', resp);
|
||||
}
|
||||
|
||||
throw resp;
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return isSent ? (
|
||||
<SuccessContactFormPopup email={usedEmailRef.current} onClose={onClose} />
|
||||
) : (
|
||||
<ContactFormPopup initEmail={userEmail} onSubmit={onSubmit} onClose={onClose} />
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
|
||||
Reference in New Issue
Block a user