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