144 lines
3.7 KiB
TypeScript
144 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
export default function Signup() {
|
|
const [email, setEmail] = useState('')
|
|
const [whatsapp, setWhatsapp] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [showPopup, setShowPopup] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
|
|
// Validate that at least one field is filled
|
|
if (!email.trim() && !whatsapp.trim()) {
|
|
setError('Please enter at least an email or phone number')
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const response = await fetch('/api/notifications/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email.trim(),
|
|
phone: whatsapp.trim(),
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to subscribe')
|
|
}
|
|
|
|
// Show success popup
|
|
setShowPopup(true)
|
|
|
|
// Clear form
|
|
setEmail('')
|
|
setWhatsapp('')
|
|
|
|
// Hide popup after 5 seconds
|
|
setTimeout(() => {
|
|
setShowPopup(false)
|
|
}, 5000)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'An error occurred')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="signup">
|
|
<h2>Drop Notifications</h2>
|
|
<p>Receive updates about new drops via email or WhatsApp.</p>
|
|
<form onSubmit={handleSubmit}>
|
|
<input
|
|
type="email"
|
|
placeholder="E-Mail"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
disabled={loading}
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="WhatsApp Number"
|
|
value={whatsapp}
|
|
onChange={(e) => setWhatsapp(e.target.value)}
|
|
disabled={loading}
|
|
/>
|
|
<br />
|
|
{error && <div style={{ color: '#ff4444', marginTop: '10px', fontSize: '14px' }}>{error}</div>}
|
|
<button type="submit" disabled={loading}>
|
|
{loading ? 'Subscribing...' : 'Get Notified'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{showPopup && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
background: '#1c1c1c',
|
|
border: '1px solid #2a2a2a',
|
|
borderRadius: '16px',
|
|
padding: '30px 40px',
|
|
zIndex: 1000,
|
|
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
|
|
maxWidth: '400px',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<p style={{ margin: 0, fontSize: '16px', color: '#eaeaea' }}>
|
|
You will receive a notification as soon as a new drop drops.
|
|
</p>
|
|
<button
|
|
onClick={() => setShowPopup(false)}
|
|
style={{
|
|
marginTop: '20px',
|
|
padding: '10px 20px',
|
|
background: '#3ddc84',
|
|
color: '#000',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
cursor: 'pointer',
|
|
fontSize: '14px',
|
|
}}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{showPopup && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|
zIndex: 999,
|
|
}}
|
|
onClick={() => setShowPopup(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|