diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index ffb46c12..b14e1049 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useI18n } from '../lib/hooks/useI18n'; import { useDarkMode } from '../lib/hooks/useDarkMode'; import { type Locale } from '../lib/i18n'; +import { api } from '../lib/api/client'; import { Statistics } from './Statistics'; import { ErrorBoundary } from './ErrorBoundary'; @@ -15,12 +16,12 @@ export const LandingPage: React.FC = ({ className }) => { const [email, setEmail] = React.useState(''); const [emailError, setEmailError] = React.useState(''); const [isSubmitted, setIsSubmitted] = React.useState(false); + const [apiError, setApiError] = React.useState(''); const formStatusRef = React.useRef(null); - const handleSubmit = (e: React.FormEvent) => { + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - - // Basic email validation + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email) { setEmailError(t('hero.emailRequired')); @@ -30,13 +31,22 @@ export const LandingPage: React.FC = ({ className }) => { setEmailError(t('hero.emailInvalid')); return; } - + setEmailError(''); - setIsSubmitted(true); - - // Announce success to screen readers - if (formStatusRef.current) { - formStatusRef.current.textContent = 'Successfully subscribed to updates!'; + setApiError(''); + + try { + const result = await api.newsletterSubscribe({ email }); + if (result.success) { + setIsSubmitted(true); + if (formStatusRef.current) { + formStatusRef.current.textContent = t('hero.successMessage'); + } + } else { + setApiError(result.message || 'Subscription failed'); + } + } catch (err) { + setApiError(err instanceof Error ? err.message : 'Network error occurred'); } }; @@ -154,6 +164,11 @@ export const LandingPage: React.FC = ({ className }) => { {emailError} )} + {apiError && ( + + {apiError} + + )}