Add newsletter signup to the community section and allow users to subscribe

Implements a newsletter subscription form with email validation using React Query mutation in CommunitySection and removes NewsletterSection component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 88cd88e4-2dbe-4df6-8c8a-7e38f13ef1ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/d51bd366-771e-4a50-bff0-f3d09af0d72a.jpg

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() {
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold text-gray-800 mb-4">
             Join the Pilates with Fadia Community
           </h2>
-          <p className="max-w-3xl mx-auto text-gray-600">
+          <p className="max-w-3xl mx-auto text-gray-600 mb-12">
             I curate a growing community of like-minded individuals committed to health, wellness, and positive growth.
           </p>
+          
+          {/* Newsletter Section */}
+          <div className="max-w-2xl mx-auto bg-white p-8 shadow-sm mb-16">
+            <h3 className="text-2xl font-playfair font-semibold mb-4">
+              Sign up for my Newsletter
+            </h3>
+            <p className="max-w-3xl mx-auto mb-8">
+              Stay updated with wellness tips, special class offerings, and community events
+            </p>
+            <form onSubmit={handleNewsletterSubmit}>
+              <div className="flex flex-col mb-6">
+                <label htmlFor="newsletter-email" className="mb-2 text-gray-700 font-medium">Email Address</label>
+                <input 
+                  id="newsletter-email"
+                  type="email" 
+                  placeholder="Your email address" 
+                  className="px-4 py-3 bg-white border border-gray-300 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-teal"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              
+              <div className="mb-6">
+                <label className="flex items-center cursor-pointer">
+                  <input 
+                    type="checkbox" 
+                    className="form-checkbox h-4 w-4 border-gray-300 text-teal"
+                    checked={agreedToTerms}
+                    onChange={(e) => setAgreedToTerms(e.target.checked)}
+                    required
+                  />
+                  <span className="ml-2 text-gray-700">I agree to receive emails from Pilates with Fadia</span>
+                </label>
+              </div>
+              
+              <button 
+                type="submit" 
+                className="w-full px-6 py-3 bg-teal text-white font-medium hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
+                disabled={newsletterMutation.isPending}
+              >
+                {newsletterMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Subscribing...
+                  </>
+                ) : (
+                  "Subscribe"
+                )}
+              </button>
+            </form>
+          </div>
         </div>
         
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">

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 (
+    <form onSubmit={handleSubmit}>
+      <div className="flex flex-col mb-6">
+        <label htmlFor="email" className="mb-2 text-gray-700 font-medium">Email Address</label>
+        <input 
+          id="email"
+          type="email" 
+          placeholder="Your email address" 
+          className="px-4 py-3 bg-white border border-gray-300 placeholder-gray-500 text-gray-800 focus:outline-none focus:border-teal"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+      </div>
+      
+      <div className="mb-6">
+        <label className="flex items-center cursor-pointer">
+          <input 
+            type="checkbox" 
+            className="form-checkbox h-4 w-4 border-gray-300 text-teal"
+            checked={agreedToTerms}
+            onChange={(e) => setAgreedToTerms(e.target.checked)}
+            required
+          />
+          <span className="ml-2 text-gray-700">I agree to receive emails from Pilates with Fadia</span>
+        </label>
+      </div>
+      
+      <button 
+        type="submit" 
+        className="w-full px-6 py-3 bg-teal text-white font-medium hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
+        disabled={newsletterMutation.isPending}
+      >
+        {newsletterMutation.isPending ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Subscribing...
+          </>
+        ) : (
+          "Subscribe"
+        )}
+      </button>
+    </form>
+  );
+}
+
 export function NewsletterSection() {
   const { toast } = useToast();
   const [email, setEmail] = useState("");
@@ -62,7 +160,7 @@ export function NewsletterSection() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-4">
-            Join Our Newsletter
+            Sign up for my Newsletter
           </h2>
           <p className="max-w-3xl mx-auto">
             Stay updated with wellness tips, special class offerings, and community events

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() {
       <ClassesSection />
       <AboutSection />
       <CommunitySection />
-      <NewsletterSection />
       <CTASection />
       <ContactSection />
     </main>