Contact Form

1'use client';
2 
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
7import { cn } from '@/lib/utils';
8import { ChevronDown, Paperclip, Search, Send, X } from 'lucide-react';
9import { useEffect, useRef, useState } from 'react';
10import { countries } from './countries';
11import { demoContactFormData } from './demo/form';
12 
13/**
14 * Data structure representing the contact form submission.
15 * @interface ContactFormData
16 * @property {string} firstName - The user's first name (required)
17 * @property {string} lastName - The user's last name (required)
18 * @property {string} [countryId] - The selected country identifier (e.g., 'us', 'fr')
19 * @property {string} [countryCode] - The phone country code (e.g., '+1', '+33')
20 * @property {string} [phoneNumber] - The user's phone number without country code
21 * @property {string} [email] - The user's email address
22 * @property {string} [message] - The message or project description
23 * @property {File | null} [attachment] - An optional file attachment
24 */
25export interface ContactFormData {
26  firstName?: string;
27  lastName?: string;
28  countryId?: string;
29  countryCode?: string;
30  phoneNumber?: string;
31  email?: string;
32  message?: string;
33  attachment?: File | null;
34}
35 
36/**
37 * ═══════════════════════════════════════════════════════════════════════════
38 * ContactFormProps
39 * ═══════════════════════════════════════════════════════════════════════════
40 *
41 * Props for the ContactForm component with name fields, phone number with
42 * country selector, email input, message textarea, and file attachment support.
43 */
44export interface ContactFormProps {
45  data?: {
46    /** The form title displayed at the top. */
47    title?: string;
48    /** Descriptive text below the title. */
49    subtitle?: string;
50    /** Custom label for the submit button. */
51    submitLabel?: string;
52    /** Pre-filled form values. */
53    initialValues?: Partial<ContactFormData>;
54  };
55  actions?: {
56    /** Called when the form is submitted with form data. */
57    onSubmit?: (data: ContactFormData) => void;
58// … truncated