diff --git a/client/src/components/community/community-section.tsx b/client/src/components/community/community-section.tsx index 018a4c3..e0dfc84 100644 --- a/client/src/components/community/community-section.tsx +++ b/client/src/components/community/community-section.tsx @@ -3,10 +3,64 @@ import { Testimonial } from "./testimonial"; import { useAuth } from "@/hooks/use-auth"; import { Link } from "wouter"; import { Card, CardContent } from "@/components/ui/card"; +import { useMutation } from "@tanstack/react-query"; +import { apiRequest } from "@/lib/queryClient"; +import { useToast } from "@/hooks/use-toast"; +import { Loader2 } from "lucide-react"; export function CommunitySection() { const { user } = useAuth(); + const { toast } = useToast(); const [iframeLoaded, setIframeLoaded] = useState(false); + const [email, setEmail] = useState(""); + const [agreedToTerms, setAgreedToTerms] = useState(false); + + const newsletterMutation = useMutation({ + mutationFn: async (newsletterData: { email: string, agreedToTerms: boolean }) => { + const res = await apiRequest("POST", "/api/newsletter", newsletterData); + return await res.json(); + }, + onSuccess: () => { + toast({ + title: "Subscription successful", + description: "Thank you for subscribing to our newsletter!", + }); + // Reset form + setEmail(""); + setAgreedToTerms(false); + }, + onError: (error: Error) => { + toast({ + title: "Subscription failed", + description: error.message, + variant: "destructive", + }); + }, + }); + + const handleNewsletterSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (!email) { + toast({ + title: "Email required", + description: "Please enter your email address", + variant: "destructive", + }); + return; + } + + if (!agreedToTerms) { + toast({ + title: "Consent required", + description: "Please agree to receive emails from Pilates with Fadia", + variant: "destructive", + }); + return; + } + + newsletterMutation.mutate({ email, agreedToTerms }); + }; const testimonials = [ { @@ -50,9 +104,61 @@ export function CommunitySection() {

Join the Pilates with Fadia Community

-

+

I curate a growing community of like-minded individuals committed to health, wellness, and positive growth.

+ + {/* Newsletter Section */} +
+

+ Sign up for my Newsletter +

+

+ Stay updated with wellness tips, special class offerings, and community events +

+
+
+ + setEmail(e.target.value)} + required + /> +
+ +
+ +
+ + +
+
diff --git a/client/src/components/newsletter/newsletter-section.tsx b/client/src/components/newsletter/newsletter-section.tsx index 680a2c9..e077bd0 100644 --- a/client/src/components/newsletter/newsletter-section.tsx +++ b/client/src/components/newsletter/newsletter-section.tsx @@ -5,6 +5,104 @@ import { insertNewsletterSchema } from "@shared/schema"; import { useToast } from "@/hooks/use-toast"; import { Loader2 } from "lucide-react"; +export function NewsletterForm() { + const { toast } = useToast(); + const [email, setEmail] = useState(""); + const [agreedToTerms, setAgreedToTerms] = useState(false); + + const newsletterMutation = useMutation({ + mutationFn: async (newsletterData: { email: string, agreedToTerms: boolean }) => { + const res = await apiRequest("POST", "/api/newsletter", newsletterData); + return await res.json(); + }, + onSuccess: () => { + toast({ + title: "Subscription successful", + description: "Thank you for subscribing to our newsletter!", + }); + // Reset form + setEmail(""); + setAgreedToTerms(false); + }, + onError: (error: Error) => { + toast({ + title: "Subscription failed", + description: error.message, + variant: "destructive", + }); + }, + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (!email) { + toast({ + title: "Email required", + description: "Please enter your email address", + variant: "destructive", + }); + return; + } + + if (!agreedToTerms) { + toast({ + title: "Consent required", + description: "Please agree to receive emails from Pilates with Fadia", + variant: "destructive", + }); + return; + } + + newsletterMutation.mutate({ email, agreedToTerms }); + }; + + return ( +
+
+ + setEmail(e.target.value)} + required + /> +
+ +
+ +
+ + +
+ ); +} + export function NewsletterSection() { const { toast } = useToast(); const [email, setEmail] = useState(""); @@ -62,7 +160,7 @@ export function NewsletterSection() {

- Join Our Newsletter + Sign up for my Newsletter

Stay updated with wellness tips, special class offerings, and community events diff --git a/client/src/pages/home-page.tsx b/client/src/pages/home-page.tsx index 24e31ea..69c0f47 100644 --- a/client/src/pages/home-page.tsx +++ b/client/src/pages/home-page.tsx @@ -3,7 +3,6 @@ import { HeroSection } from "@/components/home/hero-section"; import { AboutSection } from "@/components/about/about-section"; import { ClassesSection } from "@/components/classes/classes-section"; import { CommunitySection } from "@/components/community/community-section"; -import { NewsletterSection } from "@/components/newsletter/newsletter-section"; import { ContactSection } from "@/components/contact/contact-section"; import { CTASection } from "@/components/home/cta-section"; import { useEffect } from "react"; @@ -20,7 +19,6 @@ export default function HomePage() { -