import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router';
import classnames from 'classnames';
import Infobox from '../ui/Infobox';
import Appear from '../ui/effects/Appear';
import Form from '../../lib/Form';
import { email } from '../../helpers/validation-helpers';
import Input from '../ui/Input';
import Button from '../ui/Button';
const messages = defineMessages({
settingsHeadline: {
id: 'settings.invite.headline',
defaultMessage: 'Invite Friends',
},
headline: {
id: 'invite.headline.friends',
defaultMessage: 'Invite 3 of your friends or colleagues',
},
nameLabel: {
id: 'invite.name.label',
defaultMessage: 'Name',
},
emailLabel: {
id: 'invite.email.label',
defaultMessage: 'Email address',
},
submitButtonLabel: {
id: 'invite.submit.label',
defaultMessage: 'Send invites',
},
skipButtonLabel: {
id: 'invite.skip.label',
defaultMessage: 'I want to do this later',
},
inviteSuccessInfo: {
id: 'invite.successInfo',
defaultMessage: 'Invitations sent successfully',
},
});
@observer
class Invite extends Component {
static propTypes = {
onSubmit: PropTypes.func.isRequired,
embed: PropTypes.bool,
isInviteSuccessful: PropTypes.bool,
isLoadingInvite: PropTypes.bool,
};
static defaultProps = {
embed: false,
isInviteSuccessful: false,
isLoadingInvite: false,
};
state = { showSuccessInfo: false };
componentDidMount() {
this.form = new Form(
{
fields: {
invite: [
...Array(3).fill({
fields: {
name: {
label: this.props.intl.formatMessage(messages.nameLabel),
placeholder: this.props.intl.formatMessage(
messages.nameLabel,
),
onChange: () => {
this.setState({ showSuccessInfo: false });
},
// related: ['invite.0.email'], // path accepted but does not work
},
email: {
label: this.props.intl.formatMessage(messages.emailLabel),
placeholder: this.props.intl.formatMessage(
messages.emailLabel,
),
onChange: () => {
this.setState({ showSuccessInfo: false });
},
validators: [email],
},
},
}),
],
},
},
this.props.intl,
);
document.querySelector('input:first-child').focus();
}
submit(e) {
e.preventDefault();
this.form.submit({
onSuccess: form => {
this.props.onSubmit({ invites: form.values().invite });
this.form.clear();
// this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
document.querySelector('input:first-child').focus();
this.setState({ showSuccessInfo: true });
},
onError: () => {},
});
}
render() {
const { form } = this;
const { intl } = this.props;
const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
const atLeastOneEmailAddress = form
.$('invite')
.map(invite => invite.$('email').value)
.some(emailValue => emailValue.trim() !== '');
const sendButtonClassName = classnames({
auth__button: true,
'invite__embed--button': embed,
});
const renderForm = (
<>
{this.state.showSuccessInfo && isInviteSuccessful && (