100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import { BusyMessage } from "component/common";
|
|
import Link from "component/link";
|
|
import { FormRow } from "component/form.js";
|
|
|
|
class FormInviteNew extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
email: "",
|
|
};
|
|
}
|
|
|
|
handleEmailChanged(event) {
|
|
this.setState({
|
|
email: event.target.value,
|
|
});
|
|
}
|
|
|
|
handleSubmit(event) {
|
|
event.preventDefault();
|
|
this.props.inviteNew(this.state.email);
|
|
}
|
|
|
|
render() {
|
|
const { errorMessage, isPending } = this.props;
|
|
|
|
return (
|
|
<form>
|
|
<FormRow
|
|
type="text"
|
|
label="Email"
|
|
placeholder="youremail@example.org"
|
|
name="email"
|
|
value={this.state.email}
|
|
errorMessage={errorMessage}
|
|
onChange={event => {
|
|
this.handleEmailChanged(event);
|
|
}}
|
|
/>
|
|
<div className="form-row-submit">
|
|
<Link
|
|
button="primary"
|
|
label={__("Send Invite")}
|
|
disabled={isPending}
|
|
onClick={event => {
|
|
this.handleSubmit(event);
|
|
}}
|
|
/>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
class InviteNew extends React.PureComponent {
|
|
render() {
|
|
const {
|
|
errorMessage,
|
|
invitesRemaining,
|
|
inviteNew,
|
|
inviteStatusIsPending,
|
|
isPending,
|
|
} = this.props;
|
|
|
|
return (
|
|
<section className="card">
|
|
<div className="card__title-primary">
|
|
<h3>
|
|
{__(
|
|
"Invite a Friend (or Enemy) (or Someone You Are Somewhat Ambivalent About)"
|
|
)}
|
|
</h3>
|
|
</div>
|
|
<div className="card__content">
|
|
{invitesRemaining > 0 &&
|
|
<p>{__("You have %s invites remaining.", invitesRemaining)}</p>}
|
|
{invitesRemaining <= 0 &&
|
|
<p>
|
|
<span className="empty">
|
|
{__("You have no invites.", invitesRemaining)}
|
|
</span>
|
|
</p>}
|
|
</div>
|
|
{!inviteStatusIsPending &&
|
|
invitesRemaining > 0 &&
|
|
<div className="card__content">
|
|
<FormInviteNew
|
|
errorMessage={errorMessage}
|
|
inviteNew={inviteNew}
|
|
isPending={isPending}
|
|
/>
|
|
</div>}
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default InviteNew;
|