@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/functional/ContactForm.tsx

@@ -1,285 +1,285 @@
-'use client';
-
-import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { ContactSubmitButton } from '@/components/other/button'; // Updated import
-import { Input } from '@/components/other/input';
-import { Textarea } from '@/components/other/textarea';
-import { Mail, Loader2, User, MessageSquare, FileText, Phone } from 'lucide-react';
-
-const formSchema = z.object({
-  name: z
-    .string()
-    .min(2, 'First name must be at least 2 characters')
-    .max(50, 'First name cannot exceed 50 characters')
-    .regex(/^[a-zA-Z\s-]+$/, 'First name can only contain letters, spaces, or hyphens'),
-  lastName: z
-    .string()
-    .min(2, 'Last name must be at least 2 characters')
-    .max(50, 'Last name cannot exceed 50 characters')
-    .regex(/^[a-zA-Z\s-]+$/, 'Last name can only contain letters, spaces, or hyphens'),
-  email: z
-    .string()
-    .email('Invalid email address')
-    .max(100, 'Email cannot exceed 100 characters'),
-  phone: z
-    .string()
-    .regex(
-      /^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/,
-      'Please enter a valid phone number (e.g., 123-456-7890)'
-    )
-    .max(14, 'Phone number cannot exceed 14 characters')
-    .transform((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
-  subject: z
-    .string()
-    .min(5, 'Subject must be at least 5 characters')
-    .max(100, 'Subject cannot exceed 100 characters'),
-  message: z
-    .string()
-    .max(500, 'Message cannot exceed 500 characters')
-    .optional(),
-});
-
-interface FormData {
-  name: string;
-  lastName: string;
-  email: string;
-  phone: string;
-  subject: string;
-  message?: string;
-}
-
-interface ToastMessage {
-  type: 'success' | 'error';
-  title: string;
-  description: string;
-}
-
-export default function ContactForm() {
-  const [toastMessage, setToastMessage] = useState<ToastMessage | null>(null);
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting, dirtyFields },
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    mode: 'onBlur',
-    defaultValues: {
-      name: '',
-      lastName: '',
-      email: '',
-      phone: '',
-      subject: '',
-      message: '',
-    },
-  });
-
-  const onSubmit = async (data: FormData) => {
-    try {
-      const response = await fetch('/api/contact', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-
-      const contentType = response.headers.get('content-type');
-      if (!contentType || !contentType.includes('application/json')) {
-        throw new Error('Server returned an unexpected response. Please try again.');
-      }
-
-      const result = await response.json();
-
-      if (!response.ok) {
-        const errorMessage = result.error || 'Unable to submit request at this time';
-        throw new Error(errorMessage);
-      }
-
-      setToastMessage({
-        type: 'success',
-        title: 'Success',
-        description: 'Your message has been sent successfully!',
-      });
-      reset();
-      setTimeout(() => setToastMessage(null), 3000);
-    } catch (error: any) {
-      console.error('Contact form submission error:', error);
-      setToastMessage({
-        type: 'error',
-        title: 'Error',
-        description: error.message || 'Unable to submit request at this time',
-      });
-      setTimeout(() => setToastMessage(null), 3000);
-    }
-  };
-
-  return (
-    <div className="relative w-full max-w-4xl mx-auto p-10 bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-black-100/90">
-      {toastMessage && (
-        <div className="fixed top-8 right-8 z-50 animate-in fade-in slide-in-from-top-2">
-          <div
-            className={`p-6 rounded-2xl shadow-lg border transition-all duration-300 ${
-              toastMessage.type === 'success'
-                ? 'bg-green-50/80 border-green-200/50 text-green-900'
-                : 'bg-red-50/80 border-red-200/50 text-red-900'
-            } backdrop-blur-sm`}
-          >
-            <h3 className="font-semibold text-lg">{toastMessage.title}</h3>
-            <p className="text-base mt-2">{toastMessage.description}</p>
-          </div>
-        </div>
-      )}
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
-          <div className="space-y-2">
-            <div className="relative group">
-              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-              <Input
-                {...register('name')}
-                placeholder="First Name"
-                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
-                  errors.name && dirtyFields.name ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-                }`}
-                maxLength={50}
-                aria-invalid={!!errors.name && !!dirtyFields.name}
-                aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}
-              />
-            </div>
-            {errors.name && dirtyFields.name && (
-              <p id="name-error" className="text-base text-red-500">
-                {errors.name.message}
-              </p>
-            )}
-          </div>
-
-          <div className="space-y-2">
-            <div className="relative group">
-              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-              <Input
-                {...register('lastName')}
-                placeholder="Last Name"
-                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
-                  errors.lastName && dirtyFields.lastName ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-                }`}
-                maxLength={50}
-                aria-invalid={!!errors.lastName && !!dirtyFields.lastName}
-                aria-describedby={errors.lastName && dirtyFields.lastName ? 'lastName-error' : undefined}
-              />
-            </div>
-            {errors.lastName && dirtyFields.lastName && (
-              <p id="lastName-error" className="text-base text-red-500">
-                {errors.lastName.message}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-            <Input
-              {...register('email')}
-              type="email"
-              placeholder="Email Address"
-              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
-                errors.email && dirtyFields.email ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-              }`}
-              maxLength={100}
-              aria-invalid={!!errors.email && !!dirtyFields.email}
-              aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}
-            />
-          </div>
-          {errors.email && dirtyFields.email && (
-            <p id="email-error" className="text-base text-red-500">
-              {errors.email.message}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <Phone className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-            <Input
-              {...register('phone')}
-              type="tel"
-              placeholder="Phone Number"
-              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
-                errors.phone && dirtyFields.phone ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-              }`}
-              maxLength={14}
-              aria-invalid={!!errors.phone && !!dirtyFields.phone}
-              aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}
-            />
-          </div>
-          {errors.phone && dirtyFields.phone && (
-            <p id="phone-error" className="text-base text-red-500">
-              {errors.phone.message}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <FileText className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-            <Input
-              {...register('subject')}
-              placeholder="Subject"
-              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
-                errors.subject && dirtyFields.subject ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-              }`}
-              maxLength={100}
-              aria-invalid={!!errors.subject && !!dirtyFields.subject}
-              aria-describedby={errors.subject && dirtyFields.subject ? 'subject-error' : undefined}
-            />
-          </div>
-          {errors.subject && dirtyFields.subject && (
-            <p id="subject-error" className="text-base text-red-500">
-              {errors.subject.message}
-            </p>
-          )}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <MessageSquare className="absolute left-4 top-5 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
-            <Textarea
-              {...register('message')}
-              placeholder="Your Message"
-              className={`pl-14 pt-5 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base min-h-[180px] resize-y transition-all duration-300 ${
-                errors.message && dirtyFields.message ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
-              }`}
-              maxLength={500}
-              rows={8}
-              aria-invalid={!!errors.message && !!dirtyFields.message}
-              aria-describedby={errors.message && dirtyFields.message ? 'message-error' : undefined}
-            />
-          </div>
-          {errors.message && dirtyFields.message && (
-            <p id="message-error" className="text-base text-red-500">
-              {errors.message.message}
-            </p>
-          )}
-        </div>
-
-        <ContactSubmitButton
-          type="submit"
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <>
-              <Loader2 className="mr-3 h-6 w-6 animate-spin" />
-              Sending...
-            </>
-          ) : (
-            <>
-              <Mail className="mr-3 h-6 w-6" />
-              Send Message
-            </>
-          )}
-        </ContactSubmitButton>
-      </form>
-    </div>
-  );
+'use client';
+
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { ContactSubmitButton } from '@/components/other/button'; // Updated import
+import { Input } from '@/components/other/input';
+import { Textarea } from '@/components/other/textarea';
+import { Mail, Loader2, User, MessageSquare, FileText, Phone } from 'lucide-react';
+
+const formSchema = z.object({
+  name: z
+    .string()
+    .min(2, 'First name must be at least 2 characters')
+    .max(50, 'First name cannot exceed 50 characters')
+    .regex(/^[a-zA-Z\s-]+$/, 'First name can only contain letters, spaces, or hyphens'),
+  lastName: z
+    .string()
+    .min(2, 'Last name must be at least 2 characters')
+    .max(50, 'Last name cannot exceed 50 characters')
+    .regex(/^[a-zA-Z\s-]+$/, 'Last name can only contain letters, spaces, or hyphens'),
+  email: z
+    .string()
+    .email('Invalid email address')
+    .max(100, 'Email cannot exceed 100 characters'),
+  phone: z
+    .string()
+    .regex(
+      /^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/,
+      'Please enter a valid phone number (e.g., 123-456-7890)'
+    )
+    .max(14, 'Phone number cannot exceed 14 characters')
+    .transform((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
+  subject: z
+    .string()
+    .min(5, 'Subject must be at least 5 characters')
+    .max(100, 'Subject cannot exceed 100 characters'),
+  message: z
+    .string()
+    .max(500, 'Message cannot exceed 500 characters')
+    .optional(),
+});
+
+interface FormData {
+  name: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  subject: string;
+  message?: string;
+}
+
+interface ToastMessage {
+  type: 'success' | 'error';
+  title: string;
+  description: string;
+}
+
+export default function ContactForm() {
+  const [toastMessage, setToastMessage] = useState<ToastMessage | null>(null);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    mode: 'onBlur',
+    defaultValues: {
+      name: '',
+      lastName: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: '',
+    },
+  });
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      const contentType = response.headers.get('content-type');
+      if (!contentType || !contentType.includes('application/json')) {
+        throw new Error('Server returned an unexpected response. Please try again.');
+      }
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        const errorMessage = result.error || 'Unable to submit request at this time';
+        throw new Error(errorMessage);
+      }
+
+      setToastMessage({
+        type: 'success',
+        title: 'Success',
+        description: 'Your message has been sent successfully!',
+      });
+      reset();
+      setTimeout(() => setToastMessage(null), 3000);
+    } catch (error: any) {
+      console.error('Contact form submission error:', error);
+      setToastMessage({
+        type: 'error',
+        title: 'Error',
+        description: error.message || 'Unable to submit request at this time',
+      });
+      setTimeout(() => setToastMessage(null), 3000);
+    }
+  };
+
+  return (
+    <div className="relative w-full max-w-4xl mx-auto p-10 bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-black-100/90">
+      {toastMessage && (
+        <div className="fixed top-8 right-8 z-50 animate-in fade-in slide-in-from-top-2">
+          <div
+            className={`p-6 rounded-2xl shadow-lg border transition-all duration-300 ${
+              toastMessage.type === 'success'
+                ? 'bg-green-50/80 border-green-200/50 text-green-900'
+                : 'bg-red-50/80 border-red-200/50 text-red-900'
+            } backdrop-blur-sm`}
+          >
+            <h3 className="font-semibold text-lg">{toastMessage.title}</h3>
+            <p className="text-base mt-2">{toastMessage.description}</p>
+          </div>
+        </div>
+      )}
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+          <div className="space-y-2">
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+              <Input
+                {...register('name')}
+                placeholder="First Name"
+                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                  errors.name && dirtyFields.name ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+                }`}
+                maxLength={50}
+                aria-invalid={!!errors.name && !!dirtyFields.name}
+                aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}
+              />
+            </div>
+            {errors.name && dirtyFields.name && (
+              <p id="name-error" className="text-base text-red-500">
+                {errors.name.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+              <Input
+                {...register('lastName')}
+                placeholder="Last Name"
+                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                  errors.lastName && dirtyFields.lastName ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+                }`}
+                maxLength={50}
+                aria-invalid={!!errors.lastName && !!dirtyFields.lastName}
+                aria-describedby={errors.lastName && dirtyFields.lastName ? 'lastName-error' : undefined}
+              />
+            </div>
+            {errors.lastName && dirtyFields.lastName && (
+              <p id="lastName-error" className="text-base text-red-500">
+                {errors.lastName.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('email')}
+              type="email"
+              placeholder="Email Address"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.email && dirtyFields.email ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={100}
+              aria-invalid={!!errors.email && !!dirtyFields.email}
+              aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}
+            />
+          </div>
+          {errors.email && dirtyFields.email && (
+            <p id="email-error" className="text-base text-red-500">
+              {errors.email.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <Phone className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('phone')}
+              type="tel"
+              placeholder="Phone Number"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.phone && dirtyFields.phone ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={14}
+              aria-invalid={!!errors.phone && !!dirtyFields.phone}
+              aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}
+            />
+          </div>
+          {errors.phone && dirtyFields.phone && (
+            <p id="phone-error" className="text-base text-red-500">
+              {errors.phone.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <FileText className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('subject')}
+              placeholder="Subject"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.subject && dirtyFields.subject ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={100}
+              aria-invalid={!!errors.subject && !!dirtyFields.subject}
+              aria-describedby={errors.subject && dirtyFields.subject ? 'subject-error' : undefined}
+            />
+          </div>
+          {errors.subject && dirtyFields.subject && (
+            <p id="subject-error" className="text-base text-red-500">
+              {errors.subject.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <MessageSquare className="absolute left-4 top-5 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Textarea
+              {...register('message')}
+              placeholder="Your Message"
+              className={`pl-14 pt-5 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base min-h-[180px] resize-y transition-all duration-300 ${
+                errors.message && dirtyFields.message ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={500}
+              rows={8}
+              aria-invalid={!!errors.message && !!dirtyFields.message}
+              aria-describedby={errors.message && dirtyFields.message ? 'message-error' : undefined}
+            />
+          </div>
+          {errors.message && dirtyFields.message && (
+            <p id="message-error" className="text-base text-red-500">
+              {errors.message.message}
+            </p>
+          )}
+        </div>
+
+        <ContactSubmitButton
+          type="submit"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 className="mr-3 h-6 w-6 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            <>
+              <Mail className="mr-3 h-6 w-6" />
+              Send Message
+            </>
+          )}
+        </ContactSubmitButton>
+      </form>
+    </div>
+  );
 }