77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import MailchimpSubscribe from "react-mailchimp-subscribe";
|
|
import classNames from "classnames";
|
|
import "./Mailing.scss";
|
|
|
|
const url = "https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f9801b5f2c92e&id=ab6bea4cc2";
|
|
|
|
const CustomForm = ({ status, message, onValidated, light, id }) => {
|
|
let email, user;
|
|
|
|
const checkboxId = `${id}-check`;
|
|
const submitId = `${id}-submit`;
|
|
|
|
const submit = () => {
|
|
if ((email, user, email.value.indexOf("@") > -1)) {
|
|
onValidated({
|
|
EMAIL: email.value,
|
|
USER: user.checked ? "Yes" : "No",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className={classNames("home-stay-form", { light })} onSubmit={(e) => e.preventDefault()}>
|
|
<input
|
|
ref={(node) => (email = node)}
|
|
type="email"
|
|
placeholder="Email Address"
|
|
validate="true"
|
|
aria-labelledby={submitId}
|
|
/>
|
|
<div className="home-form-stay-existing">
|
|
<input ref={(node) => (user = node)} type="checkbox" id={checkboxId} />
|
|
<label htmlFor={checkboxId}>I have previous experience using Sia</label>
|
|
</div>
|
|
<button className="button" onClick={submit} id={submitId}>
|
|
Get Updates
|
|
</button>
|
|
|
|
{status === "sending" && <p className="message">sending...</p>}
|
|
{status === "error" && <p className="message red-text" dangerouslySetInnerHTML={{ __html: message }} />}
|
|
{status === "success" && <p className="message" dangerouslySetInnerHTML={{ __html: message }} />}
|
|
</form>
|
|
);
|
|
};
|
|
|
|
CustomForm.propTypes = {
|
|
status: PropTypes.string,
|
|
message: PropTypes.string,
|
|
onValidated: PropTypes.func,
|
|
light: PropTypes.bool,
|
|
id: PropTypes.string,
|
|
};
|
|
|
|
export default function Mailing({ light, id }) {
|
|
return (
|
|
<MailchimpSubscribe
|
|
url={url}
|
|
render={({ subscribe, status, message }) => (
|
|
<CustomForm
|
|
id={id}
|
|
status={status}
|
|
message={message}
|
|
light={light}
|
|
onValidated={(formData) => subscribe(formData)}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Mailing.propTypes = {
|
|
light: PropTypes.bool,
|
|
id: PropTypes.string,
|
|
};
|