mirror of https://github.com/sgoudham/carbon.git
remove EmailSubscribe
Mike Fix
3 years ago
parent
2a7f3148c7
commit
96325691ed
@ -1,173 +0,0 @@
|
|||||||
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