mailing

components/RequestQuoteForm.tsx

@@ -3,6 +3,8 @@
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Input, Textarea, Button } from '@/components/ui';
+import { sendContactFormAction } from '@/app/actions/contact';
+import { useAnalytics } from '@/components/analytics/useAnalytics';
 
 interface RequestQuoteFormProps {
   productName: string;
@@ -10,6 +12,7 @@ interface RequestQuoteFormProps {
 
 export default function RequestQuoteForm({ productName }: RequestQuoteFormProps) {
   const t = useTranslations('Products.form');
+  const { trackEvent } = useAnalytics();
   const [email, setEmail] = useState('');
   const [request, setRequest] = useState('');
   const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
@@ -18,15 +21,30 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     e.preventDefault();
     setStatus('submitting');
 
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const formData = new FormData();
+    formData.append('name', 'Product Inquiry'); // Default name for product inquiries
+    formData.append('email', email);
+    formData.append('message', request);
+    formData.append('productName', productName);
 
-    // Here you would typically send the data to your backend
-    console.log('Form submitted:', { productName, email, request });
-
-    setStatus('success');
-    setEmail('');
-    setRequest('');
+    try {
+      const result = await sendContactFormAction(formData);
+      if (result.success) {
+        trackEvent('contact_form_submission', {
+          form_type: 'product_quote',
+          product_name: productName,
+          email: email,
+        });
+        setStatus('success');
+        setEmail('');
+        setRequest('');
+      } else {
+        setStatus('error');
+      }
+    } catch (error) {
+      console.error('Form submission error:', error);
+      setStatus('error');
+    }
   };
 
   if (status === 'success') {