Gate Titus download, require full name forms, remove companion UI
This commit is contained in:
nmemmert
+67
@@ -1144,6 +1144,69 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.guide-actions {
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.study-download-form {
|
||||
margin-top: 0.8rem;
|
||||
background: #121212;
|
||||
border: 1px solid rgba(201, 168, 76, 0.22);
|
||||
border-radius: 14px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.study-download-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.study-download-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
font-family: var(--brand-font-body);
|
||||
font-weight: 500;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
|
||||
.study-download-form input {
|
||||
background: #0c0c0c;
|
||||
border: 1px solid rgba(201, 168, 76, 0.25);
|
||||
border-radius: 8px;
|
||||
color: var(--brand-warm-white);
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
padding: 0.7rem 0.85rem;
|
||||
outline: none;
|
||||
transition: border-color 200ms;
|
||||
}
|
||||
|
||||
.study-download-form input:focus {
|
||||
border-color: rgba(201, 168, 76, 0.7);
|
||||
}
|
||||
|
||||
.study-download-form .btn-primary {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.study-download-success {
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.95rem;
|
||||
color: #97cd85;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Admin page ── */
|
||||
.admin-page {
|
||||
min-height: 100vh;
|
||||
@@ -2231,6 +2294,10 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.study-download-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-content-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
+124
-19
@@ -381,7 +381,7 @@ function QASection() {
|
||||
|
||||
function ContactForm() {
|
||||
const navigate = useNavigate()
|
||||
const [fields, setFields] = useState({ name: '', email: '', message: '', messageType: 'question' })
|
||||
const [fields, setFields] = useState({ firstName: '', lastName: '', email: '', message: '', messageType: 'question' })
|
||||
const [subscribe, setSubscribe] = useState(true)
|
||||
const [honey, setHoney] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
|
||||
@@ -430,8 +430,12 @@ function ContactForm() {
|
||||
onChange={e => setHoney(e.target.value)}
|
||||
/>
|
||||
<label>
|
||||
Name
|
||||
<input type="text" name="name" required autoComplete="name" value={fields.name} onChange={handleChange} />
|
||||
First Name
|
||||
<input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Last Name
|
||||
<input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
@@ -466,6 +470,89 @@ function ContactForm() {
|
||||
)
|
||||
}
|
||||
|
||||
function StudyDownloadForm() {
|
||||
const [fields, setFields] = useState({ firstName: '', lastName: '', email: '' })
|
||||
const [subscribe, setSubscribe] = useState(true)
|
||||
const [honey, setHoney] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'error' | 'success'>('idle')
|
||||
const [errorMsg, setErrorMsg] = useState('')
|
||||
const [successMsg, setSuccessMsg] = useState('')
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
setFields(f => ({ ...f, [e.target.name]: e.target.value }))
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setStatus('submitting')
|
||||
setErrorMsg('')
|
||||
setSuccessMsg('')
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/study-downloads/titus', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...fields, subscribe, _honey: honey }),
|
||||
})
|
||||
|
||||
const data = await res.json().catch(() => ({})) as { message?: string; downloadUrl?: string }
|
||||
if (!res.ok || !data.downloadUrl) {
|
||||
setErrorMsg(data.message ?? 'Could not process your request. Please try again.')
|
||||
setStatus('error')
|
||||
return
|
||||
}
|
||||
|
||||
setStatus('success')
|
||||
setSuccessMsg('Your download should start now. If not, use the link below.')
|
||||
window.location.assign(data.downloadUrl)
|
||||
} catch {
|
||||
setErrorMsg('Could not connect. Please try again later.')
|
||||
setStatus('error')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="study-download-form" onSubmit={handleSubmit} noValidate>
|
||||
<input
|
||||
type="text"
|
||||
className="contact-honeypot"
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
aria-hidden="true"
|
||||
value={honey}
|
||||
onChange={e => setHoney(e.target.value)}
|
||||
/>
|
||||
<div className="study-download-grid">
|
||||
<label>
|
||||
First Name
|
||||
<input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Last Name
|
||||
<input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
|
||||
</label>
|
||||
</div>
|
||||
<label className="contact-consent">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={subscribe}
|
||||
onChange={e => setSubscribe(e.target.checked)}
|
||||
/>
|
||||
<span>Subscribe me to updates from Verse by Verse with Nate.</span>
|
||||
</label>
|
||||
{status === 'error' && <p className="contact-error">{errorMsg}</p>}
|
||||
{status === 'success' && <p className="study-download-success">{successMsg}</p>}
|
||||
<button type="submit" className="btn-primary" disabled={status === 'submitting'}>
|
||||
{status === 'submitting' ? 'Preparing Download...' : 'Download Titus Study'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function AnalyticsConsentBanner() {
|
||||
const [choice, setChoice] = useState<'unknown' | 'accepted' | 'declined'>(() => {
|
||||
const saved = localStorage.getItem(CONSENT_KEY)
|
||||
@@ -900,17 +987,22 @@ function LandingPage({ content }: { content: SiteContent }) {
|
||||
</svg>
|
||||
</div>
|
||||
<div className="guide-text">
|
||||
<p className="eyebrow">Available on Amazon</p>
|
||||
<p className="eyebrow">Free Download</p>
|
||||
<h2>{content.studyGuideTitle}</h2>
|
||||
<p>{content.studyGuideDescription}</p>
|
||||
<a
|
||||
href={content.studyGuideUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-primary"
|
||||
>
|
||||
Get the Book →
|
||||
</a>
|
||||
<StudyDownloadForm />
|
||||
{content.studyGuideUrl && (
|
||||
<div className="guide-actions">
|
||||
<a
|
||||
href={content.studyGuideUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-secondary"
|
||||
>
|
||||
Get Printed Copy on Amazon
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1111,7 +1203,8 @@ function ThankYouPage() {
|
||||
|
||||
function SubscribePage() {
|
||||
const navigate = useNavigate()
|
||||
const [name, setName] = useState('')
|
||||
const [firstName, setFirstName] = useState('')
|
||||
const [lastName, setLastName] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [honey, setHoney] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
|
||||
@@ -1127,7 +1220,8 @@ function SubscribePage() {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
messageType: 'general',
|
||||
message: 'Newsletter signup from subscribe page',
|
||||
@@ -1170,14 +1264,25 @@ function SubscribePage() {
|
||||
onChange={e => setHoney(e.target.value)}
|
||||
/>
|
||||
<label>
|
||||
Name
|
||||
First Name
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
name="firstName"
|
||||
required
|
||||
autoComplete="name"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
autoComplete="given-name"
|
||||
value={firstName}
|
||||
onChange={e => setFirstName(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Last Name
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
required
|
||||
autoComplete="family-name"
|
||||
value={lastName}
|
||||
onChange={e => setLastName(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
|
||||
Reference in New Issue
Block a user