| 1 |
import { TextControl, Button } from '@wordpress/components'; |
| 2 |
import { useSelect } from '@wordpress/data'; |
| 3 |
import { useEffect, useState } from '@wordpress/element'; |
| 4 |
import { __ } from '@wordpress/i18n'; |
| 5 |
import { useGlobalStore } from '../../state/global'; |
| 6 |
|
| 7 |
export const Notice = () => { |
| 8 |
const { seenNotices, setSeenNotice } = useGlobalStore(); |
| 9 |
const [showEmail, setShowEmail] = useState(false); |
| 10 |
const [email, setEmail] = useState(''); |
| 11 |
const [emailSent, setEmailSent] = useState(false); |
| 12 |
const maybeEmail = useSelect((select) => { |
| 13 |
const user = select('core').getCurrentUser() as { id: number }; |
| 14 |
const details = select('core').getEntityRecord( |
| 15 |
'root', |
| 16 |
'user', |
| 17 |
user.id, |
| 18 |
) as { email: string }; |
| 19 |
return details?.email; |
| 20 |
}); |
| 21 |
const sendEmail = () => { |
| 22 |
fetch('https://www.kevinbatdorf.com/api/interest', { |
| 23 |
method: 'POST', |
| 24 |
headers: { 'Content-Type': 'application/json' }, |
| 25 |
body: JSON.stringify({ email, product: 'code-block-pro' }), |
| 26 |
}).finally(() => setEmailSent(true)); |
| 27 |
}; |
| 28 |
|
| 29 |
useEffect(() => { |
| 30 |
setEmail(maybeEmail); |
| 31 |
}, [maybeEmail]); |
| 32 |
|
| 33 |
useEffect(() => { |
| 34 |
if (!emailSent) return; |
| 35 |
const id = setTimeout(() => { |
| 36 |
setSeenNotice('beta-signup'); |
| 37 |
}, 4000); |
| 38 |
return () => clearTimeout(id); |
| 39 |
}, [emailSent, setSeenNotice]); |
| 40 |
|
| 41 |
return null; |
| 42 |
if (seenNotices.includes('beta-signup')) return null; |
| 43 |
if (emailSent) |
| 44 |
return ( |
| 45 |
<p className="mt-4 italic"> |
| 46 |
{__( |
| 47 |
'Thanks! Check your inbox for more info.', |
| 48 |
'code-block-pro', |
| 49 |
)} |
| 50 |
</p> |
| 51 |
); |
| 52 |
return ( |
| 53 |
<> |
| 54 |
{showEmail ? ( |
| 55 |
<> |
| 56 |
<TextControl |
| 57 |
help={__( |
| 58 |
"We'll send you an email to confirm.", |
| 59 |
'code-block-pro', |
| 60 |
)} |
| 61 |
label={__('Email', 'code-block-pro')} |
| 62 |
onChange={setEmail} |
| 63 |
value={email} |
| 64 |
/> |
| 65 |
<Button className="-mt-2" isPrimary onClick={sendEmail}> |
| 66 |
{__('Send', 'code-block-pro')} |
| 67 |
</Button> |
| 68 |
</> |
| 69 |
) : ( |
| 70 |
<div className="relative bg-blue-50 hover:bg-blue-100 border-t border-blue-100 -m-4 mt-0 p-0 px-4"> |
| 71 |
<button |
| 72 |
className="absolute top-0 right-0 border-0 mt-1 mr-2 leading-none p-0 bg-transparent cursor-pointer" |
| 73 |
title={__('Dismiss', 'code-block-pro')} |
| 74 |
type="button" |
| 75 |
onClick={() => setSeenNotice('beta-signup')}> |
| 76 |
x |
| 77 |
</button> |
| 78 |
|
| 79 |
<button |
| 80 |
className="my-4 p-0 underline caret-pink-600 m-0 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-500 text-left text-lg leading-5 font-medium cursor-pointer" |
| 81 |
type="button" |
| 82 |
title={__('Press here', 'code-block-pro')} |
| 83 |
onClick={() => setShowEmail(true)}> |
| 84 |
Notify me about new themes and early adopter discount |
| 85 |
(limited spots). |
| 86 |
</button> |
| 87 |
</div> |
| 88 |
)} |
| 89 |
</> |
| 90 |
); |
| 91 |
}; |
| 92 |
|
