mirror of https://github.com/sgoudham/carbon.git
add EmailSubscribe component
Mike Fix
4 years ago
parent
03bf53a8c2
commit
e432dadd8b
@ -0,0 +1,173 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import MailchimpSubscribe from 'react-mailchimp-subscribe'
|
||||||
|
import { validate } from 'email-validator'
|
||||||
|
import { useKeyboardListener } from 'actionsack'
|
||||||
|
|
||||||
|
import Input from './Input'
|
||||||
|
import Button from './Button'
|
||||||
|
import { COLORS } from '../lib/constants'
|
||||||
|
|
||||||
|
const Error = ({ message = 'something went wrong' }) => {
|
||||||
|
if (
|
||||||
|
message.indexOf &&
|
||||||
|
message.indexOf('The domain portion of the email address is invalid') > -1
|
||||||
|
) {
|
||||||
|
message = `Oh no, that's not a valid email!`
|
||||||
|
}
|
||||||
|
if (message.indexOf && message.indexOf('is already subscribed')) {
|
||||||
|
message = message.split('<a')[0] // cut off 'Click to subscribe link'
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{message}
|
||||||
|
<style jsx>{`
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2.75rem;
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${COLORS.RED};
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Form = ({ message, subscribe, error }) => {
|
||||||
|
const [email, setEmail] = React.useState('')
|
||||||
|
const [showError, setShowError] = React.useState(true)
|
||||||
|
const disabled = !validate(email)
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
className="subscribe-form"
|
||||||
|
onSubmit={e => {
|
||||||
|
e.preventDefault()
|
||||||
|
subscribe({ EMAIL: email })
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email address"
|
||||||
|
onChange={e => {
|
||||||
|
setEmail(e.target.value)
|
||||||
|
setShowError(false)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button hoverBackground={COLORS.BLACK} disabled={disabled}>
|
||||||
|
<span>subscribe</span>
|
||||||
|
</Button>
|
||||||
|
{error && showError && <Error message={message} />}
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
:global(button) > span {
|
||||||
|
color: ${disabled ? 'rgba(255, 255, 255, 0.5)' : '#fff'};
|
||||||
|
}
|
||||||
|
form > :global(input) {
|
||||||
|
text-align: left;
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
form > :global(input:-webkit-autofill) {
|
||||||
|
background-clip: content-box;
|
||||||
|
-webkit-text-fill-color: #fff;
|
||||||
|
-webkit-box-shadow: 0 0 0px 1000px ${COLORS.BLACK} inset;
|
||||||
|
}
|
||||||
|
form > :global(input:-webkit-autofill::selection) {
|
||||||
|
-webkit-text-fill-color: #000;
|
||||||
|
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const EmailSubscribe = () => {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
|
||||||
|
useKeyboardListener('Escape', () => setOpen(false))
|
||||||
|
|
||||||
|
if (!process.env.NEXT_PUBLIC_MAILCHIMP_URL) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container link">
|
||||||
|
<button
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault()
|
||||||
|
setOpen(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
mailing list
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<MailchimpSubscribe
|
||||||
|
url={process.env.NEXT_PUBLIC_MAILCHIMP_URL}
|
||||||
|
render={({ status, ...props }) => {
|
||||||
|
const success = status === 'success'
|
||||||
|
const loading = status === 'sending'
|
||||||
|
const error = status === 'error'
|
||||||
|
return (
|
||||||
|
<div className="subscribe-container">
|
||||||
|
{loading || success ? (
|
||||||
|
<span>{loading ? 'loading...' : 'subscribed!'}</span>
|
||||||
|
) : (
|
||||||
|
<Form {...props} error={error} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<style jsx>
|
||||||
|
{`
|
||||||
|
button {
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background: none;
|
||||||
|
font-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
visibility: ${open ? 'hidden' : 'visible'};
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
color: ${COLORS.PRIMARY};
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
${open ? 'background: none; margin-top: -2px;' : ''};
|
||||||
|
margin-right: 1rem;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
.subscribe-container {
|
||||||
|
position: absolute;
|
||||||
|
top: -0.5rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
width: 15rem;
|
||||||
|
text-align: center;
|
||||||
|
/* TODO remove these styles after fixing footer */
|
||||||
|
background: ${COLORS.BLACK};
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EmailSubscribe
|
||||||
Loading…
Reference in New Issue